购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.3 创建第一个Nest应用

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

2.3.1 生成后端项目

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

图2-23 创建服务端项目

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

图2-24 运行服务端项目

2.3.2 生成前端项目

使用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 扏行客户端项目

2.3.3 准备工作

在发送请求之前,我们需要进行一些准备工作。首先,在前端设置请求代理,以便能够访问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.3.4 运行结果

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

图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所示。

图2-30 创建用户返回结果

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

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

点击中间区域
呼出菜单
上一章
目录
下一章
×