Nestjs RESTful API与前端Vue.js集成教程

我在学习Nestjs和Vue.js的集成过程中遇到了一些问题，想请教大家：

  1. 目前按照网上的教程搭建了Nestjs的RESTful API后端，但在前端Vue.js中调用接口时总是出现跨域问题，该如何正确配置CORS？

  2. 在Vue.js项目中应该用axios还是fetch来与Nestjs API交互更合适？两种方式与Nestjs配合使用时有什么特别的注意事项吗？

  3. 我看到有些教程在Nestjs中使用class-validator进行数据验证，而Vue.js前端也需要做表单验证，这两边的验证逻辑是否有必要保持一致？如何优雅地处理这种重复验证？

  4. 对于JWT认证的实现，Nestjs后端生成token后，Vue.js前端应该如何安全地存储和使用？特别是在axios拦截器中该如何正确处理token过期的情况？

希望有实际项目经验的朋友能分享一下最佳实践，谢谢！


3 回复

以下为基本步骤：

  1. 后端（NestJS）准备

    • 初始化项目：npm i -g @nestjs/cli，然后 nest new backend
    • 创建模块、控制器和服务，例如：nest g resource user
    • 编写REST接口，如GET /users返回用户列表。确保支持跨域（CORS），可在main.ts启用app.enableCors()。

  2. 数据模型设计

    • 使用TypeORM或Mongoose操作数据库，定义实体类。
    • 配置数据库连接（如MySQL、MongoDB）。

  3. 接口测试

    • 使用Postman或curl测试后端API是否正常。

  4. 前端（Vue.js）准备

    • vue create frontend创建Vue项目。
    • 安装Axios进行HTTP请求：npm install axios

  5. Vue集成后端

    • 在Vue组件中引入axios，编写方法调用后端接口，如：
      methods: {
  async fetchUsers() {
    const response = await axios.get('http://localhost:3000/users');
    this.users = response.data;
  }
}
    • 显示数据：使用v-for渲染到页面。

  6. 部署与联调

    • 确保前后端分离部署或同源运行。
    • 处理跨域问题（可使用NestJS代理或前端代理）。

完成以上步骤即可实现简单的NestJS与Vue.js集成。


要将NestJS的RESTful API与Vue.js集成，首先确保两者运行在同一域名下或配置CORS。以下是步骤：

  1. 创建NestJS项目：使用npm i -g [@nestjs](/user/nestjs)/cli初始化项目，并定义Controller（如@Get('users') getUsers()）和Service。

  2. 启动NestJS服务：运行npm run start:dev，确保API接口可用。

  3. 创建Vue.js项目：全局安装Vue CLI (npm install -g @vue/cli)，然后创建新项目(vue create frontend)。

  4. 安装Axios：在Vue项目中安装Axios (npm install axios)用于发送HTTP请求。

  5. 编写Vue组件：在Vue组件中使用Axios调用NestJS API，例如：

    <script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('http://localhost:3000/users')
      .then(response => this.users = response.data)
      .catch(error => console.error(error));
  }
};
</script>

  6. 配置跨域：在NestJS的main.ts中启用CORS：

    import { NestFactory } from '[@nestjs](/user/nestjs)/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

  7. 运行并测试：分别启动NestJS和Vue.js服务，访问Vue页面查看数据是否正常显示。

这样就完成了基本的前后端集成。记得处理错误、加载状态等用户体验细节。

NestJS与Vue.js集成教程

后端(NestJS)设置

  1. 首先创建一个NestJS RESTful API服务：
// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // 启用CORS以便前端访问
  app.enableCors({
    origin: 'http://localhost:8080', // Vue开发服务器地址
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true,
  });
  
  await app.listen(3000);
}
bootstrap();
  1. 创建示例控制器：
// cats.controller.ts
import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll() {
    return [{ id: 1, name: 'Whiskers' }, { id: 2, name: 'Mittens' }];
  }
}

前端(Vue.js)设置

  1. 在Vue项目中安装axios：
npm install axios
  1. 创建API服务文件：
// src/services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000',
  withCredentials: true,
});

export default {
  getCats() {
    return api.get('/cats');
  }
}
  1. 在Vue组件中使用：
<template>
  <div>
    <h1>Cats</h1>
    <ul>
      <li v-for="cat in cats" :key="cat.id">{{ cat.name }}</li>
    </ul>
  </div>
</template>

<script>
import api from '@/services/api';

export default {
  data() {
    return {
      cats: []
    }
  },
  async created() {
    try {
      const response = await api.getCats();
      this.cats = response.data;
    } catch (error) {
      console.error('Error fetching cats:', error);
    }
  }
}
</script>

注意事项

  1. 确保后端和前端运行在不同的端口上（如NestJS:3000，Vue:8080）
  2. 开发环境下启用CORS，生产环境应配置更严格的安全策略
  3. 可以考虑使用环境变量管理API base URL

这种集成方式允许Vue前端通过RESTful API与NestJS后端通信，实现数据交互。

回到顶部