一、项目搭建
前端基于vben进行二次开发
在Github下载vben框架，搜索vben即可
下载地址：https://github.com/vbenjs/vue-vben-admin
下载完成后，进行安装依赖，使用命令：
// 下载依赖
pnpm install// 运行项目
pnpm run dev
前端框架分析：
1、es module特性支持
2、
后端框架使用NestJS
使用NestJS搭建后端框架
// 安装脚手架
npm i -g @nestjs/cli// 新建项目
nest new 项目名选择npm工具，搭建完成后可以直接运行，执行命令
npm run start:dev// 在源码的文件夹【src】->【main.ts】中可以看到监听3000端口。
NestJS后端知识回顾：
// 控制器（XXX.controller.ts）
/*控制器负责处理传入的请求和向客户端返回响应控制器的目的是接收应用的特定请求，路由机制控制那个控制器接收那些请求。通常，每个控制器有多个路由，不同的路由可以执行不同的操作。为了创建一个基本的控制器，我们使用类和装饰器。装饰器将类和所需的元数据相关联，并使Nest能够创建路由映射（将请求绑定到相应的控制器）
*/// Providers
/*Providers是Nest的一个基本概念，许多基本的Nest类可能被视为provider-service，repository，factory，helper等等。他们可以通过constructor注入依赖关系，这意味着对象可以彼此创建各种关系，并且“连接”对象实例的功能在很大程度上可以委托给Nest运行时系统。Providers只是一个用@Injectable()装饰器修饰的类。注入的对象，作为一个服务注入到controller使用@Injectable()修饰，表示可以被注入到controller之中
*///异常过滤器
/*内置的异常过滤器负责处理整个应用程序中所有抛出的异常。当捕获到未处理的异常时，最终用户将收到友好的响应。
*/// Restful API规则
/*Get：获取数据Post：插入数据Put：更新数据Delete：删除数据常用Get、PostParam：restful API参数Query：url 参数（Get 参数）Body：Post 参数*/二、业务分析
后端业务模块设计与拆分
// 使用脚手架创建模块
nest g module user
nest g controller user// 具体使用的模块主要有user、book、auth三个模块
新建数据库，两种使用数据库的方法：
1、使用小皮面板进行开发，可以参考另一篇文章：
PhpStudy下载安装使用学习_php小皮下载-CSDN博客
2、下载MySQL数据库，MySQL官网：
MySQL :: MySQL Downloads
数据库连接
使用MySQL数据库，连接使用TypeORM工具
// 安装TypeORM
npm install --save @nestjs/typeorm typeorm mysql2// 在全局的module中引入 TypeOrmModule ，即在【app.module.ts】中引入具体代码如下：
// app.module.tsimport { Module } from '@nestjs/common';
// 引入TypeORM模块
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UserModule } from './module/user/user.module';
import { AuthModule } from './module/auth/auth.module';
import { BookModule } from './module/book/book.module';@Module({imports: [TypeOrmModule.forRoot({type: 'mysql',host: '127.0.0.1',port: 3306,username: 'root',password: '123456',database: 'book_nest',}),UserModule,AuthModule,BookModule,],controllers: [AppController],providers: [AppService],
})
export class AppModule {}
运行项目，不报错，说明项目已经运行成功，连接数据库成功
数据库实体创建（entity）
在module/user文件夹创建【user.entity.ts】，数据库与表要一一对应
// user.entity.ts// 进行数据库定义import { Entity, Column, Unique, PrimaryGeneratedColumn } from 'typeorm';// 数据映射关系绑定
@Entity('admin_user')
export class User {// 整型自增@PrimaryGeneratedColumn()id: number;// 属性@Column()// 唯一性@Unique(['username'])username: string;@Column()password: string;@Column()role: string;@Column()nickname: string;@Column()active: number;@Column()avatar: string;
}
在【user.module.ts】中引入TypeORM，进行实体关联
import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
// 引入User实体
import { User } from './user.entity';
// 引入UserService
import { UserService } from './user.service';@Module({// 要引用的实体imports: [TypeOrmModule.forFeature([User])],controllers: [UserController],// 服务提供者providers: [UserService],
})
export class UserModule {}
新建module/user/user.service.ts，写服务代码
// 引入注入器
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { User } from './user.entity';
import { Repository } from 'typeorm';@Injectable()
export class UserService {constructor(@InjectRepository(User)private readonly userRepository: Repository<User>,) {}// 查找findOne(id: number): Promise<User> {// 可以执行sql语句// return this.userRepository.query(`SELECT * FROM user WHERE id = ${id}`);return this.userRepository.findOneBy({ id });}// 新增// 删除// 更新
}
以user功能为例，写查找、新增、删除功能逻辑
// user.service.ts// 引入注入器
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { User } from './user.entity';
import { DeleteResult, Repository } from 'typeorm';
import { CreateUserDto } from './create-user.dto';@Injectable()
export class UserService {constructor(@InjectRepository(User)private readonly userRepository: Repository<User>,) {}// 查找findOne(id: number): Promise<User> {// 可以执行sql语句// return this.userRepository.query(`SELECT * FROM user WHERE id = ${id}`);return this.userRepository.findOneBy({ id });}// 查询所有findAll(): Promise<User[]> {return this.userRepository.find();}// 新增create(createUserDto: CreateUserDto): Promise<User> {const user = new User();user.username = createUserDto.username;user.password = createUserDto.password;user.role = createUserDto.role;user.avatar = createUserDto.avatar;user.active = 1;return this.userRepository.save(user);}// 删除remove(id: number): Promise<DeleteResult> {return this.userRepository['delete'](id);}
}
// user.controller.tsimport {Body,Controller,Get,Param,ParseIntPipe,Post,Delete,
} from '@nestjs/common';
import { UserService } from './user.service';@Controller('user')
export class UserController {constructor(private readonly userService: UserService) {}@Get('id')getUser(@Param('id', ParseIntPipe) id: number) {return this.userService.findOne(id);}@Get()getAllUser() {return this.userService.findAll();}// 新增@Post()createUser(@Body() body) {return this.userService.create(body);}// 删除@Delete('id')remove(@Param('id', ParseIntPipe) id: number) {return this.userService.remove(id);}
}
// user.entity.ts// 进行数据库定义import { Entity, Column, Unique, PrimaryGeneratedColumn } from 'typeorm';// 数据映射关系绑定
@Entity('admin_user')
export class User {@PrimaryGeneratedColumn()id: number;@Column()@Unique(['username'])username: string;@Column()password: string;@Column()role: string;@Column()nickname: string;@Column()active: number;@Column()avatar: string;
}
写新增业务逻辑时，新建create-user.dto.ts，新建类模型
// create-user.dto.tsexport class CreateUserDto {username: string;password: string;role: string;nickname: string;avatar: string;
}
// user.module.tsimport { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
// 引入User实体
import { User } from './user.entity';
// 引入UserService
import { UserService } from './user.service';@Module({// 要引用的实体imports: [TypeOrmModule.forFeature([User])],controllers: [UserController],// 服务提供者providers: [UserService],
})
export class UserModule {}
6-1
开发时的一些配置问题
解决代码报错
每次执行 git commit 时，lint-staged 会自动运行 ESLint 的 --fix 操作来修复暂存区中的文件
// 安装 husky 和 lint-staged
npm install husky lint-staged --save-dev// 在 package.json 文件中添加 lint-staged 配置
{"lint-staged": {"*.js": "eslint --fix","*.ts": "eslint --fix"}
}// 设置 husky 钩子
{"husky": {"pre-commit": "lint-staged"}
}在 VS Code 中设置 ESLint 以在保存文件时自动修复代码的步骤
// 安装ESLint
npm install eslint --save-dev// 配置 package.json
{"scripts": {"lint": "eslint . --fix","prettier": "prettier --write ."}
}// 在 VS Code 的 settings.json 文件中添加以下配置，以启用保存时的自动格式化
{"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.autoFixOnSave": true,"eslint.alwaysShowStatus": true,"eslint.options": {"cache": false}
}//如果安装了 Prettier 或其他格式化工具，你可以在 settings.json 中配置 VS Code，使其在保存时运行
{"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnSave": true
}
