备案 控制台
开发者社区 开发与运维 文章 正文

Vue3 + Nest 实现权限管理系统 后端篇(一):NestJS入门与基础配置(上)

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
推荐场景:
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: Vue3 + Nest 实现权限管理系统 后端篇(一):NestJS入门与基础配置(上)

image.png

NestJS 是一个 NodeJS 的后端服务框架,它与传统的 NodeJS 框架不一样的是采用了控制反转(IOC)和依赖注入(DI)的模式进行开发,当然如果你对这中开发模式不熟悉的话也没关系,你可以查找资料去了解这种模式,或者直接开始阅读本篇文章你就会用 NestJS 了(会用就行)。接下来我们开始介绍 NestJS


全局安装 NestJS



npm i -g @nestjs/cli


第一个 NestJS 程序



nest new management_nest

执行完毕就会看到 src 下有这样一个目录

image.png

  • app.controller.ts

这里控制层,这里主要是写路由相关代码以及处理前端传来的一些参数(后面文章会介绍如何接收参数)

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}
  • app.service.ts

这里是业务层,在这里写一些与业务相关的逻辑。比如对数据库的 CRUD 就可以写到这里

import { Injectable } from "@nestjs/common";
@Injectable()
export class AppService {
  getHello(): string {
    return "Hello World!";
  }
}
  • app.module.ts

它可以组织应用程序中的许多功能,如控制器、服务以及可以导入其他模块等

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
  • main.ts
import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

main.ts 则是整个程序的入口文件

我们可以执行pnpm run start:dev开启一个可以热更新的 NestJS 服务,浏览器打开http://localhost:3000/便可发送一个 get 请求到app.controller.ts中的 getHello 函数,然后再调用app.service.ts里的 getHello 函数返回Hello World!

image.png

这里我们发现app.controller.ts的 appService 并没有实例化就可以直接使用了,其实这里是因为在app.module.ts已经进行了依赖注入(providers)这里已经将其处理好了


装饰器



在上面的代码中我们看到了譬如@Controller(),@get(),@Module()之类的东西,其实这些东西就是装饰器,你可以把它看作一个函数就行了,比如@Controller()它属于一个类装饰器,他会把下面的类当作参数传入然后进行一些处理从而实现处理路由的功能

为了更好的演示,我们新建一个模块,NestJS 给我们提供了一些命令可以创建对应文件,比如

  • 生成一个 module (nest g mo) 。
  • 生成一个 controller (nest g co) 。
  • 生成一个 service (nest g s) 。

你可以执行nest -h 查看这些命令

我们可以执行nest g res user生成一个 user 模块,包括它的module,controller,service,执行之前可以在nest-cli.json中配置

"generateOptions": {
    "spec": false
  }

让其不生成测试文件,执行命令我们可以选择 REST API 的形式,这样我们 src 下就会出现了 user 模块

我们可以看到user.controller.ts引入了很多装饰器,已经给我们写好了 CRUD 的模板

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
} from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
  @Post()
  create(@Body() createUserDto: CreateUserDto) {
    return this.userService.create(createUserDto);
  }
  @Get()
  findAll() {
    return this.userService.findAll();
  }
  @Get(':id')
  findOne(@Param() id: string) {
    return this.userService.findOne(+id);
  }
  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.userService.update(+id, updateUserDto);
  }
  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(+id);
  }
}

@Post,@Get,@Patch等就是对应的请求方式装饰器,比如你用 POST 请求调用http://localhost:3000/user就会进入@Post()下面的 create()方法,@Body,@Params则是请求参数装饰器,我们可以从中获取到前端传来的参数

拿第一个Post请求举例,发送 post 请求我们可以使用postman,apifox等工具进行测试,这里我使用apifox进行演示

我们可以先打印一下前端@Body()装饰的createUserDto,然后发送一个 Post 请求

@Post()
  create(@Body() createUserDto: CreateUserDto) {
    console.log(createUserDto);
    return this.userService.create(createUserDto);
  }

image.png

此时我们就会发现控制台打印了前端传来的 Body 参数

image.png

如果想使用别的请求路径,可以在@Post 传入路径,比如@Post('list'),请求路径就会变成/user/list


如果你想获取 Get 请求传来的参数可以使用@Query,获取 Header 中的参数可以使用@Header 等等,这些装饰器有很多这里就不过多介绍了,后面的教程中遇到会作一个详细说明


连接 MySql 数据库



作为一个后端框架肯定是离不开数据库的,NestJS 连接数据库其实很简单,可以先安装@nestjs/typeormmysql,typeorm可以让对数据库的 sql 操作映射成对象的操作

pnpm install @nestjs/typeorm typeorm mysql -S

然后你需要在本地安装 mysql 数据库,这里可以自行百度~(注意记住你的用户名和密码以及数据库安装位置)

推荐一个 VSCode 数据库可视化插件Database Client,安装完后连接我们的数据库就能进行一个可视化操作

image.png

一切准备就绪,我们新建一个数据库名为easyestadmin,然后开始连接 mysql,我们来到app.module.ts中进行数据库的配置,引入TypeOrmModule调用forRoot进行配置

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { UserModule } from "./user/user.module";
import { TypeOrmModule } from "@nestjs/typeorm";
@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: "mysql",
      synchronize: true,
      autoLoadEntities: true, //自动加载实体
      host: "localhost",
      port: 3306, // 端口号
      username: "root", // 用户名
      password: "root", // 密码
      database: "management", //数据库名
      synchronize: true, //是否自动同步实体文件,生产环境建议关闭
    }),
    UserModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

当我们将autoLoadEntities设置为 true 的时候,NestJS 会自动加载数据库实体文件xx.entity.ts文件来创建数据表(如果没有的话),比如 user/entities/user.entity.ts,我们简单加一些字段

import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";
@Entity("user")
export class User {
  @PrimaryGeneratedColumn("uuid")
  id: number; // 标记为主键,值自动生成
  @Column({ length: 30 })
  username: string; //用户名
  @Column()
  password: string; //密码
}

启动项目,然后就会发现自动创建了一个 user 表

image.png

如果我们想对 user 表进行一些 CRUD 的操作.可以在user.module.ts中导入

import { Module } from "@nestjs/common";
import { UserService } from "./user.service";
import { UserController } from "./user.controller";
import { User } from "./entities/user.entity";
import { TypeOrmModule } from "@nestjs/typeorm";
@Module({
  controllers: [UserController],
  providers: [UserService],
  imports: [TypeOrmModule.forFeature([User])],
})
export class UserModule {}

user.service.ts中引入使用,比如在 create 函数中创建一条数据

import { Injectable } from "@nestjs/common";
import { CreateUserDto } from "./dto/create-user.dto";
import { UpdateUserDto } from "./dto/update-user.dto";
import { User } from "./entities/user.entity";
import { InjectRepository } from "@nestjs/typeorm";
import { Repository } from "typeorm";
@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    private userRepository: Repository<User>
  ) {}
  async create(createUserDto: CreateUserDto) {
    return await this.userRepository.save(createUserDto);
  }
  async findAll() {
    return await this.userRepository.find();
  }
  findOne(id: number) {
    return `This action returns a #${id} user`;
  }
  update(id: number, updateUserDto: UpdateUserDto) {
    return `This action updates a #${id} user`;
  }
  remove(id: number) {
    return `This action removes a #${id} user`;
  }
}

再调用 user 接口,传入 username 和 password

image.png

我们就完成了一条数据的插入,在 findAll 中查询所有数据,调用 get 请求便可拿到 user 表中的数据

image.png

一般来说数据库的配置包含了一些敏感信息不宜写在代码中提交到远程仓库,所以我们可以将配置写在配置文件中,然后提交 git 时候将生产环境的配置文件其忽略,这里我们新建.env.env.prod两个文件分别存放开发与生产环境配置

我们还安装 cross-env 来判断我们是处于什么环境

pnpm install cross-env

然后修改package.json中的script

"start:prod": "cross-env NODE_ENV=production node dist/main",

这样我们生成环境的 NODE_ENV 就是 production 了,我们可以根据这个加载不同配置文件。想要加载配置文件,NestJS 给我们提供了@nestjs/config,这个需要手动安装,安装完成之后,在app.module.ts进行配置

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { UserModule } from "./user/user.module";
import { TypeOrmModule } from "@nestjs/typeorm";
import { ConfigModule } from "@nestjs/config";
import * as path from "path";
const isProd = process.env.NODE_ENV == "production";
@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: [isProd ? path.resolve(".env.prod") : path.resolve(".env")],
    }),
    TypeOrmModule.forRoot({
      type: "mysql",
      host: process.env.DB_HOST,
      port: parseInt(process.env.DB_PORT), // 端口号
      username: process.env.DB_USER, // 用户名
      password: process.env.DB_PASSWD, // 密码
      autoLoadEntities: true, //自动加载实体
      synchronize: !isProd, //是否自动同步实体文件,生产环境建议关闭
      database: process.env.DB_DATABASE, //数据库名
    }),
    UserModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}


相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
东方小月
目录
相关文章
1941623231718325
|
17天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`&lt;router-link&gt;`用于创建导航链接,`&lt;router-view&gt;`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
1941623231718325
46 2
诺诺酱-
|
17天前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
诺诺酱-
20 0
前端菜鸟的自我修养
|
2天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
前端菜鸟的自我修养
18 0
vue路由从入门到进阶 --- 声明式导航详细教程
无糖可乐嘟嘟
|
2天前
|
存储 架构师 安全
构建高效可靠的后端系统:挑战与应对
在当今数字化时代,后端系统作为支撑着各种网络服务和应用的核心组成部分,承担着巨大的压力和责任。本文探讨了构建高效可靠的后端系统所面临的挑战,并提出了应对这些挑战的策略和方法,旨在帮助开发人员和系统架构师更好地应对日益复杂的技术环境。
无糖可乐嘟嘟
8 0
碳基肥宅
|
4天前
|
存储 JSON Java
【字节跳动青训营】后端笔记整理-1 | Go语言入门指南:基础语法和常用特性解析(三)
在 Go 语言里,符合语言习惯的做法是使用一个单独的返回值来传递错误信息。
碳基肥宅
19 0
碳基肥宅
|
4天前
|
存储 Go C++
【字节跳动青训营】后端笔记整理-1 | Go语言入门指南:基础语法和常用特性解析(二)
Go 语言中的复合数据类型包括数组、切片(slice)、映射(map)和结构体(struct)。
碳基肥宅
26 0
碳基肥宅
|
4天前
|
Java 编译器 Go
【字节跳动青训营】后端笔记整理-1 | Go语言入门指南:基础语法和常用特性解析(一)
本文主要梳理自第六届字节跳动青训营(后端组)-Go语言原理与实践第一节(王克纯老师主讲)。
碳基肥宅
26 1
yqcoder
|
15天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
yqcoder
25 1
球球不吃虾
|
16天前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
球球不吃虾
30 1
周盛欢
|
17天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
周盛欢
24 0

热门文章

最新文章

  • 1
    Vue+Django+MySQL搭建指南(个人全栈快速开发)
  • 2
    vue项目实战 — — 那些自己给自己挖的深坑
  • 3
    vue jsx 使用指南
  • 4
    在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
  • 5
    Vue2+VueRouter2+webpack 构建项目
  • 6
    使用 Vue 2.0 实现服务端渲染的 HackerNews
  • 7
    Vue中 使用 v-for 时动态绑定 ref
  • 8
    vue 路由demo
  • 9
    EasyExcel 实现导入与导出功能(Springboot+Vue)
  • 10
    vue router 4 源码篇:路由诞生——createRouter原理探索
  • 1
    [java后端研发]——文件上传与下载(2种方式)
    84
  • 2
    腾讯春招后端一面(八股篇)
    61
  • 3
    用友Java后端笔试2023-8-5
    48
  • 4
    百度后端笔试题知识点总结
    33
  • 5
    陌陌技术分享:陌陌IM在后端KV缓存架构上的技术实践
    51
  • 6
    构建高效微服务架构:后端开发的新趋势
    83
  • 7
    构建高效微服务架构:后端开发的最佳实践
    19
  • 8
    构建高效微服务架构:后端开发的新范式
    15
  • 9
    使用Python和Flask构建简单的博客后端
    30
  • 10
    构建高效微服务架构:后端开发的新趋势
    24
  • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发框架Bootstrap使用教程
  • React 入门教程开发文档
  • Python Web 框架 Flask 快速入门
  • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • 机器学习在互联网后端技术中的应用
  • Vue.js在前端服务化上的实践与探索
  • 相关实验场景

    更多
  • 前端开发基础6:Node.js和LESS预编译工具
  • 前端开发基础1:前端开发环境的安装和配置
  • Web Terminal环境使用指南
  • 零基础部署一个Django Blog到Serverless架构
  • 基于函数计算快速搭建Zblog等传统应用框架
  • 搭建Node.js编程环境
  • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考

    深圳SEO优化公司丽水至尊标王哪家好安顺网络推广同乐网站优化按天计费公司河池关键词按天扣费公司郴州优秀网站设计安阳百度关键词包年推广报价横岗模板推广推荐遂宁SEO按天扣费多少钱内江百姓网标王推广崇左企业网站建设莱芜阿里店铺运营公司锦州企业网站建设多少钱榆林网站设计价格鹰潭建网站推荐徐州模板制作推荐盐田阿里店铺运营报价韶关企业网站改版公司哈密关键词按天收费报价晋中百度网站优化价格坑梓百搜标王报价驻马店品牌网站设计多少钱龙岗网站推广工具公司喀什百度竞价推荐吴忠网站开发公司景德镇品牌网站设计价格漳州百度标王潮州百度网站优化排名报价怀化百姓网标王推广芜湖seo排名公司南山外贸网站建设公司歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

    深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化