Vue+NestJS项目实操（图书管理后台）

news/2024/10/5 14:44:40/

一、项目搭建

前端基于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】中引入

具体代码如下：

javascript">// 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】，数据库与表要一一对应

javascript">// 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，进行实体关联

javascript">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，写服务代码

javascript">// 引入注入器
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功能为例，写查找、新增、删除功能逻辑

javascript">// 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);}
}

javascript">// 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);}
}

javascript">// 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，新建类模型 

javascript">// create-user.dto.tsexport class CreateUserDto {username: string;password: string;role: string;nickname: string;avatar: string;
}

javascript">// 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
}


http://www.ppmy.cn/news/1534996.html

相关文章

【Docker从入门到进阶】04.高效实践

【Docker从入门到进阶】04.高效实践

4. 高效实践 在现代软件开发中&#xff0c;Docker和容器技术使得应用程序的开发、部署和管理变得更为高效。然而&#xff0c;伴随而来的也是一些挑战&#xff0c;比如镜像优化、性能调优、安全性管理以及持续集成和持续交付&#xff08;CI/CD&#xff09;的集成等。以下是一些…
阅读更多...
分布式事务的解决方案（如两阶段提交、TCC、SAGA）。Spring的核心概念（如IOC、AOP）。

分布式事务的解决方案（如两阶段提交、TCC、SAGA）。Spring的核心概念（如IOC、AOP）。

分布式事务的解决方案&#xff08;如两阶段提交、TCC、SAGA&#xff09;。 分布式事务是指发生在多个数据节点之间的事务&#xff0c;它比单机事务要复杂得多。以下是几种常见的分布式事务解决方案&#xff1a; 一、两阶段提交&#xff08;2PC&#xff09; 两阶段提交协议是…
阅读更多...
Kafka学习笔记(一)Kafka基准测试、幂等性和事务、Java编程操作Kafka

Kafka学习笔记(一)Kafka基准测试、幂等性和事务、Java编程操作Kafka

文章目录 前言4 Kafka基准测试4.1 基于1个分区1个副本的基准测试4.2 基于3个分区1个副本的基准测试4.3 基于1个分区3个副本的基准测试 5 Java编程操作Kafka5.1 引入依赖5.2 向Kafka发送消息5.3 从Kafka消费消息5.4 异步使用带有回调函数的生产消息 6 幂等性6.1 幂等性介绍6.2 K…
阅读更多...
云原生化 - 工具镜像（完整版）

云原生化 - 工具镜像（完整版）

在微服务和云原生环境中，容器化的目标之一是尽可能保持镜像小型化以提高启动速度和减少安全风险。然而，在实际操作中，有时候需要临时引入一些工具来进行调试、监控或问题排查。Kubernetes提供了临时容器（ephemeral containers）的功能，允许在不改变原始容器镜像的情况下，…
阅读更多...
腾讯云SDK应用场景

腾讯云SDK应用场景

为适应不同业务需求的音视频场景&#xff0c;音视频终端 SDK&#xff08;腾讯云视立方&#xff09;为您提供了不同业务场景快速上手的解决方案。 直播 SDK 直播 SDK 支持直播推拉流、主播观众互动连麦、主播跨房 PK等能力&#xff0c;为您提供高质量直播服务&#xff0c;快速…
阅读更多...
git分支-创建、合并、删除

git分支-创建、合并、删除

Git会将每次提交串成一条时间线&#xff0c;这条时间线就是一个分支。在最初&#xff0c;只有一个master分支 在目录下创建项目 对目录进行输入 项目被修改 创建dev分支 合并分支 删除dev分支
阅读更多...
合成孔径雷达海上石油泄露分割数据集，共8000对图像，sentinel和palsar传感器，共400MB

合成孔径雷达海上石油泄露分割数据集，共8000对图像，sentinel和palsar传感器，共400MB

合成孔径雷达海上石油泄露分割数据集&#xff0c;共8000对图像&#xff0c;sentinel和palsar传感器&#xff0c;共400MB 名称 合成孔径雷达&#xff08;SAR&#xff09;海上石油泄露分割数据集 规模 图像对数&#xff1a;8000对图像传感器类型&#xff1a; Sentinel-1 SAR 传…
阅读更多...
php的urlencode和rawurlencode区别

php的urlencode和rawurlencode区别

urlencode和rawurlencode都是用于对URL进行编码的函数&#xff0c;但它们在处理方式和应用场景上存在明显的区别。以下是关于这两个函数的详细比较&#xff1a; 一、定义与标准 urlencode&#xff1a;基于rawurlencode标准&#xff0c;但有略微的不同&#xff0c;它定义在rfc…
阅读更多...
最新文章

Copyright @ 2022~2023