所有框架的本质,都是用约定减少决策成本。
从0死磕全栈系列文章
从0死磕全栈第1天:从写一个React的hello world开始
从0 死磕全栈第3天:React Router (Vite + React + TS 版):构建小时站实战指南
从0死磕全栈第4天:使用React useState实现用户注册功能
从0死磕全栈第五天:React 使用zustand实现To-Do List项目
从0死磕全栈第6天:React useEffect副作用起了大作用之实现购物车功能
前面讲了一些基础的react前端的内容,今天开始来讲讲后端的内容,因为前端需要后端提供数据。要做到一个人把前端后端做完,目前有2种途径,一种是使用全栈框架,比如next.js;另一种就是前端选择使用前端框架完成前端,后端使用后端框架来完成。
前端框架的选择基本是在react和vue之间去选择,后端技术的选择,则是多样化的,你可以选择python,Java,go,rust等语言,每种语言都有各自的技术栈,比如Java最流行的就是SpringBoot,SpringCloud,python最流行的就是fastapi,flask,django,go最流行的就是gin,go-zero。
如果你已经会其中一个技术栈,你可以选择自己会的技术栈,如果你之前没接触过后端,那么你可以选择nest.js。
nest.js简介
NestJS (下文简称nest)是基于 Node.js 的开源框架,用于构建高效、可扩展的服务器端应用,在2016年发布,用TypeScript开发。如果你了解Java的spring框架,你在使用了nest开发之后,就会发现他们很像,但是nest会更加简洁。
除此之外nest还有如下特性:
提供了一个开箱即用的应用程序体系结构风格,主打一个拿来就能直接用,并且是有自己的一套架构模式的。不像Express这类服务端框架,很多东西还要自己手动编写,就类似于Java里面的SpringBoot框架对Spring的简化。事实上nest也模仿SpringBoot的做法,基于Express框架做了更高级别的抽象。
内置 gRPC、RabbitMQ 等协议,适合分布式架构
支持按需加载模块,优化应用启动速度
异步非阻塞 I/O,高效处理高并发请求
内置单元测试(Jest)和端到端(E2E)测试支持,支持 Mock 机制无缝对接 TypeORM、Mongoose、Prisma 等 ORM/ODM 工具
下面就来动手使用nest
第一步,创建nest项目
创建nest项目只需要执行2个命令
npm install -g @nestjs/cli
nest new my-nest
第一个命令是安装nest的cli工具,方便我们执行nest相关的命令
第二个命令是nest cli提供的创建nest项目的命令nest new project-name。
接着就会进入交互式指导让你选择包管理工具,这里就选择npm。
最后nest项目就创建成功了,可以使用vscode打开这个nest项目。
第二步:查看nest项目结构
my-nestjs-app/
├── src/
│ ├── app.controller.ts
│ ├── app.module.ts
│ ├── app.service.ts
│ └── main.ts
├── test/
└── package.json
-
src/:存放源代码文件。
-
main.ts:应用程序的入口文件。
-
app.module.ts:根模块,负责引导整个应用程序。
-
app.controller.ts和 app.service.ts默认生成的控制器和服务类
第三步:模块化开发
从之前的几个文件来看,nest是很强调模块化开发的,为此nest cli还提供了快速创建一个模块的命令
nest generate module users
或者简写为
nest g mo users
这将会正在src目录下面新建一个目录users,并且在这个users目录下面已经准备好了3个主要的文件user.service.ts,user.controller.ts,user.module.ts。并将这个模块导入到 app.module.ts中。
nest很周到,也提供了单独创建controller和service的命令
nest generate controller users
nest generate service users
在controller里面我们可以定义路由,方式如下
// src/users/users.controller.ts
import { Controller, Get, Post, Body } from '@nestjs/common';
import { UsersService } from './users.service';
@Controller('users')
export class UsersController {
constructor(private readonly usersService: UsersService) {}
@Get()
findAll() {
return this.usersService.findAll();
}
@Post()
create(@Body() createUserDto: CreateUserDto) {
return this.usersService.create(createCatDto);
}
}
@Controller('users'):定义控制器的基础路径为 /users。
@Get() 和 @Post():分别定义 GET 和 POST 请求的处理方法.
@Body():提取请求体中的数据
注意:这里的接口方法没有写返回值,因为nest框架本身对返回值有2种处理方式
标准模式:使用此内置方法,当请求处理程序返回 JavaScript 对象或数组时,它将自动序列化为 JSON。然而,当它返回 JavaScript 基本类型(例如,string、number、boolean)时,Nest 将仅发送该值,而不尝试对其进行序列化。这使得响应处理变得简单:只需返回值,Nest 就会处理其余的事情。
此外,默认情况下,响应的状态代码始终为 200,除了使用 201 的 POST 请求。我们可以通过@HttpCode(...)在处理程序级别添加装饰器来轻松更改此行为
特定库模式:我们可以使用特定于库的(例如,Express)响应对象@Res(),可以使用方法处理程序签名中的装饰器注入该对象(例如, findAll(@Res() response))。通过这种方法,您可以使用该对象公开的本机响应处理方法。例如,使用 Express,可以使用response.status(200).send().
在service实现业务逻辑
// src/users/users.service.ts
import { Injectable } from '@nestjs/common';
@Injectable()
export class CatsService {
private readonly users = [];
create(user: any) {
this.users.push(user);
}
findAll(): any[] {
return this.users;
}
}
@Injectable():标记服务类为可注入的依赖项
create 和 findAll:实现创建和查询用户的业务逻辑
第四步:启动项目
使用如下命令启动项目
npm run start
在开发的时候,可以使用如下命令,提高开发效率
npm run start:dev
此命令将监视你的文件,会自动重新编译并重新加载服务器。
自此,我们就学会了如何创建一个nest项目,并且熟悉了他的项目结构和编写代码的方式。