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

已于 2024-10-03 21:35:40 修改
阅读量552 收藏
点赞数 3
文章标签： vue.js 前端 javascript
于 2024-10-01 21:59:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51621120/article/details/142674083
版权

一、项目搭建

前端基于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、Post

    Param：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.ts

import { 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.ts

import {
  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.ts

export class CreateUserDto {
  username: string;
  password: string;
  role: string;
  nickname: string;
  avatar: string;
}

// user.module.ts

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 {}

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
}

天生不爱笑
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值