下载掌阅APP，畅读海量书库
立即打开
了解了Nest CLI的使用之后，本节我们来小试牛刀，创建一个服务端应用，并使用React构建一个客户端应用。我们将实现客户端发送请求后，服务端接收请求、进行数据处理，并返回新的数据给客户端。如果你喜欢使用Vue，也可以选择通过Vue来创建项目；但请注意，本案例不涉及复杂的前端交互。
首先，运行nest n web-app -p pnpm命令生成服务端项目，如图2-23所示。
图2-23 创建服务端项目
然后，启动该项目并保持热重载，如图2-24所示。
图2-24 运行服务端项目
使用React提供的脚手架create-react-app生成项目，先全局安装一下：
npm install -g create-react-app
查看是否安装成功：
create-react-app --version
结果如图2-25所示。
图2-25 检查是否安装成功
执行create-react-app web-app-front命令，创建名为web-app-front的项目。创建成功后的效果如图2-26所示。
图2-26 创建客户端项目
同样，启动该项目，执行npm start命令，结果如图2-27所示。
图2-27 扏行客户端项目
在发送请求之前，我们需要进行一些准备工作。首先，在前端设置请求代理，以便能够访问8088端口下的服务。接着，通过axios发送一个GET请求，成功后将数据显示在页面上。
为了设置请求代理，在目录web-app-front/src下新建setupProxy.js文件，如图2-28所示。
图2-28 新建setupProxy文件
设置代理逻辑，这里将端口自定义为8088，代码如下：
执行npm install axios命令来安装axios库。然后在App.js文件中引入axios，并定义一个名为getHello的API接口，用于请求/123路径的资源。以下是示例代码：
import axios from 'axios';
function getHello() {
return axios.get('/api/123');
}
通过单击按钮触发AJAX请求，并回显接收到的数据。以下是部分示例代码：
切换到web-app服务端，在main.ts文件中将端口修改为8088，以匹配前端代理端口，代码如下：
async function bootstrap() {
const app = await NestFactory.create(AppModule);
// 修改端口为8088
await app.listen(8088);
}
bootstrap();
接下来，在app.controller.ts文件的getHello方法中接收参数id，同时调用Service服务的getHello()方法并传递参数id，代码如下：
最终getHello()方法会返回新的JSON数据：
前后端交互逻辑完成之后，在客户端单击按钮发送请求，可以从网络面板看到正常返回的数据并在页面上显示，如图2-29所示。
图2-29 前后端交互结果图
至此，一个简易的前后端交互流程就完成了。
本小节将把请求方式改为POST，并优化项目结构。通过模块化来管理请求API。以user模块为例，执行“nest g resource user”命令来生成user模块。接下来，在user.controller.ts中修改请求路径，示例代码如下：
同时，在user.service.ts中打印并返回提示信息：
接下来，同步修改web-app-front前端项目的App.js，新增createUser请求接口和handleCreateUser用户事件，代码如下：
单击页面上的“创建用户”按钮，后端会正常接收到请求参数，并向客户端发送响应，如图2-30所示。
图2-30 创建用户返回结果
值得注意的是，在请求接口中，/user/*后面的路由对应于User控制器下的各类接口方法。这样的设计具有以下优点：它提供了清晰的路由层次结构，并且可以方便地实现对控制器层面的权限管理和拦截器操作。这些内容将在后续章节中详细讲解。
通过本节的学习，一个完整的前后端分离的Nest应用已经构建完成。现在，你已经具备了创建自己的Nest应用的能力。赶快去实践，将所学知识应用到实际项目中吧！