2.3　创建第一个Nest应用

了解了Nest CLI的使用之后，本节我们来小试牛刀，创建一个服务端应用，并使用React构建一个客户端应用。我们将实现客户端发送请求后，服务端接收请求、进行数据处理，并返回新的数据给客户端。如果你喜欢使用Vue，也可以选择通过Vue来创建项目；但请注意，本案例不涉及复杂的前端交互。

2.3.1　生成后端项目

首先，运行nest n web-app -p pnpm命令生成服务端项目，如图2-23所示。

然后，启动该项目并保持热重载，如图2-24所示。

2.3.2　生成前端项目

使用React提供的脚手架create-react-app生成项目，先全局安装一下：

     npm install -g create-react-app

查看是否安装成功：

     create-react-app --version

结果如图2-25所示。

执行create-react-app web-app-front命令，创建名为web-app-front的项目。创建成功后的效果如图2-26所示。

同样，启动该项目，执行npm start命令，结果如图2-27所示。

2.3.3　准备工作

在发送请求之前，我们需要进行一些准备工作。首先，在前端设置请求代理，以便能够访问8088端口下的服务。接着，通过axios发送一个GET请求，成功后将数据显示在页面上。

为了设置请求代理，在目录web-app-front/src下新建setupProxy.js文件，如图2-28所示。

设置代理逻辑，这里将端口自定义为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.3.4　运行结果

前后端交互逻辑完成之后，在客户端单击按钮发送请求，可以从网络面板看到正常返回的数据并在页面上显示，如图2-29所示。

至此，一个简易的前后端交互流程就完成了。

2.3.5　模块化开发

本小节将把请求方式改为POST，并优化项目结构。通过模块化来管理请求API。以user模块为例，执行“nest g resource user”命令来生成user模块。接下来，在user.controller.ts中修改请求路径，示例代码如下：

同时，在user.service.ts中打印并返回提示信息：

接下来，同步修改web-app-front前端项目的App.js，新增createUser请求接口和handleCreateUser用户事件，代码如下：

单击页面上的“创建用户”按钮，后端会正常接收到请求参数，并向客户端发送响应，如图2-30所示。

值得注意的是，在请求接口中，/user/*后面的路由对应于User控制器下的各类接口方法。这样的设计具有以下优点：它提供了清晰的路由层次结构，并且可以方便地实现对控制器层面的权限管理和拦截器操作。这些内容将在后续章节中详细讲解。

通过本节的学习，一个完整的前后端分离的Nest应用已经构建完成。现在，你已经具备了创建自己的Nest应用的能力。赶快去实践，将所学知识应用到实际项目中吧！ AwokylUytyq9vl4s2lLkrKDTs2BsT2hk6HkCgbUPXFquyWrDi1cMeS+NW3XGfiEe