Vue3与NestJS结合：全栈开发企业后台的最佳实践

"夏哉ke"：quangneng.com/4962/

Vue3和NestJS是目前前端和后端开发中非常流行的技术。Vue3是Vue.js的升级版，它在前端开发中具有更好的性能和更小的体积。NestJS则是一个基于Node.js的后端开发框架，它使用了TypeScript，并提供了许多强大的功能，如模块化、依赖注入等。在本文中，我们将介绍如何使用Vue3和NestJS进行全栈开发，以构建一个企业级管理后台。

1. 环境搭建

首先，我们需要安装Node.js和npm。然后，我们可以使用Vue CLI来创建一个Vue3项目。在命令行中运行以下命令：

npm install -g @vue/clivue create vue3-admin

接下来，我们需要创建一个NestJS项目。在命令行中运行以下命令：

npm install -g @nestjs/clinest new nestjs-api

2. 项目结构

在Vue3项目中，我们通常会将前端代码放在src目录下。在NestJS项目中，我们通常会将后端代码放在src目录下。因此，我们可以将两个项目放在同一个目录下，如：

- vue3-admin  - src    - assets    - components    - views    - App.vue    - main.js- nestjs-api  - src    - modules      - user        - user.controller.ts        - user.service.ts    - app.module.ts    - main.ts

3. 前端开发

在Vue3项目中，我们可以使用Vue Router进行页面路由管理，使用Vuex进行状态管理。我们可以在src/views目录下创建不同的页面组件，如登录页、主页等。在src/components目录下创建可复用的组件，如表格、表单等。

例如，我们可以创建一个登录页，使用Element UI组件库中的表单和按钮组件：

<template>  <el-form ref="loginForm" :model="loginForm" :rules="rules">    <el-form-item label="用户名" prop="username">      <el-input v-model="loginForm.username"></el-input>    </el-form-item>    <el-form-item label="密码" prop="password">      <el-input type="password" v-model="loginForm.password"></el-input>    </el-form-item>    <el-form-item>      <el-button type="primary" @click="login">登录</el-button>    </el-form-item>  </el-form></template><script>export default {  data() {    return {      loginForm: {        username: '',        password: ''      },      rules: {        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]      }    };  },  methods: {    login() {      this.$refs.loginForm.validate((valid) => {        if (valid) {          // 发送请求到后端进行登录验证        }      });    }  }};</script>

4. 后端开发

在NestJS项目中，我们可以使用TypeORM进行数据库操作，使用Passport进行身份验证。我们可以在src/modules目录下创建不同的模块，如用户模块、订单模块等。

例如，我们可以创建一个用户模块，包括用户控制器和用户服务：

// user.controller.tsimport { Controller, Post, Body, UseGuards } from '@nestjs/common';import { AuthGuard } from '@nestjs/passport';import { UserService } from './user.service';@Controller('user')export class UserController {  constructor(private userService: UserService) {}  @UseGuards(AuthGuard('local'))  @Post('login')  async login(@Body() loginDto: any) {    return this.userService.login(loginDto);  }}

// user.service.tsimport { Injectable } from '@nestjs/common';import { JwtService } from '@nestjs/jwt';import { User } from './user.entity';import { Repository } from 'typeorm';import { InjectRepository } from '@nestjs/typeorm';@Injectable()export class UserService {  constructor(    @InjectRepository(User)    private userRepository: Repository<User>,    private jwtService: JwtService  ) {}  async login(loginDto: any) {    const user = await this.userRepository.findOne({      where: { username: loginDto.username, password: loginDto.password }    });    if (user) {      const payload = { username: user.username };      const token = this.jwtService.sign(payload);      return { token };    } else {      return null;    }  }}

5. 前后端联调

在前端项目中，我们可以使用axios库进行HTTP请求。

在后端项目中，我们需要使用NestJS提供的装饰器来处理HTTP请求和响应。例如，在上面的用户登录示例中，我们使用了@Post('login')装饰器来指定处理POST请求的路由，并使用@Body()装饰器来获取请求体中的数据。

为了联调前后端，我们需要确保前端发送的请求能够正确地到达后端，并且后端能够正确地处理这些请求并返回响应。这通常涉及到跨域资源共享（CORS）的问题。在NestJS中，我们可以使用@nestjs/cors包来处理CORS问题。

首先，我们需要在NestJS项目中安装@nestjs/cors包：

npm install --save @nestjs/cors

然后，我们可以在NestJS的主模块中引入并配置CORS：

// app.module.tsimport { Module } from '@nestjs/common';import { AppController } from './app.controller';import { AppService } from './app.service';import { UsersModule } from './users/users.module';import { CorsModule } from '@nestjs/cors';@Module({  imports: [    UsersModule,    CorsModule.forRoot({      origin: 'http://localhost:8080', // 允许来自指定源的跨域请求      credentials: true, // 允许发送Cookie    }),  ],  controllers: [AppController],  providers: [AppService],})export class AppModule {}

在前端项目中，我们可以使用axios拦截器来全局处理请求和响应，例如添加Token到请求头中：

// src/axios-interceptors.jsimport axios from 'axios';import store from './store';const instance = axios.create({  baseURL: 'http://localhost:3000', // 后端API地址});instance.interceptors.request.use(  (config) => {    const token = store.state.token;    if (token) {      config.headers['Authorization'] = 'Bearer ' + token;    }    return config;  },  (error) => {    return Promise.reject(error);  });instance.interceptors.response.use(  (response) => {    return response;  },  (error) => {    // 处理响应错误    return Promise.reject(error);  });export default instance;

现在，我们可以使用这个配置好的axios实例来发送请求到后端：

// src/views/Login.vue<script>import axios from '../axios-interceptors';export default {  // ...之前的代码  methods: {    async login() {      this.$refs.loginForm.validate((valid) => {        if (valid) {          axios.post('/user/login', this.loginForm)            .then((response) => {              // 存储Token并跳转到主页              this.$store.commit('SET_TOKEN', response.data.token);              this.$router.push({ name: 'Home' });            })            .catch((error) => {              // 处理登录失败              console.error(error);            });        }      });    }  }};</script>

6. 测试和部署

在开发完成后，我们需要对前后端进行测试，确保所有的功能都能正常工作。在NestJS中，我们可以使用Jest进行单元测试和集成测试。在Vue3中，我们可以使用Jest或Mocha进行单元测试。

测试完成后，我们可以使用Docker容器化我们的应用，并使用CI/CD工具（如Jenkins、GitLab CI/CD等）进行自动化部署。

总结

使用Vue3和NestJS进行全栈开发可以让我们构建出高性能、易于维护的企业级管理后台。Vue3提供了响应式和组件化的前端开发体验，而NestJS则提供了模块化、易于测试的后端开发体验。通过合理地组织项目结构和前后端联调，我们可以快速地开发出高质量的全栈应用。