一个简单的Nest.js+Vue的项目调用

克里斯蒂亚诺更新

于 2024-04-23 08:53:43 发布

阅读量368

点赞数 6

分类专栏： NestJs 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_36152801/article/details/138106937

版权

NestJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js前端项目中使用Axios调用Nest.js后端服务，包括创建Nest.js项目、定义服务和控制器，以及在Vue组件中实现数据获取和展示的过程。

摘要由CSDN通过智能技术生成

下面我来演示一个简单的示例，展示如何使用 Vue 前端框架调用 Nest.js 后端服务。

首先，我们需要准备两个项目：一个是 Nest.js 的后端服务项目，另一个是 Vue.js 的前端项目。

Nest.js 后端服务项目：

首先创建一个 Nest.js 项目，假设项目名为 nestjs-backend，然后创建一个简单的控制器和服务。

安装 Nest.js CLI（如果没有安装）：

npm install -g @nestjs/cli

创建 Nest.js 项目：

nest new nestjs-backend

创建一个 Cats 控制器和 Cats 服务：

nest generate controller cats
nest generate service cats

在 cats.service.ts 中添加一个简单的方法：

// src/cats/cats.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class CatsService {
  getCats(): string[] {
    return ['Kitty', 'Garfield', 'Tom'];
  }
}

在 cats.controller.ts 中使用 CatsService：

// src/cats/cats.controller.ts

import { Controller, Get } from '@nestjs/common';
import { CatsService } from './cats.service';

@Controller('cats')
export class CatsController {
  constructor(private readonly catsService: CatsService) {}

  @Get()
  getCats(): string[] {
    return this.catsService.getCats();
  }
}

Vue.js 前端项目：

接下来创建一个 Vue.js 项目，假设项目名为 vue-frontend。

安装 Vue CLI（如果没有安装）：

npm install -g @vue/cli

创建 Vue.js 项目：

vue create vue-frontend

在 Vue.js 项目中，可以使用 Axios 或者 Fetch API 来调用 Nest.js 后端服务。这里以 Axios 为例。

首先安装 Axios：

npm install axios

然后在 Vue.js 项目中的组件中使用 Axios 来调用 Nest.js 后端服务，例如在 HelloWorld.vue 组件中：

<template>
  <div>
    <h1>Cats List</h1>
    <ul>
      <li v-for="cat in cats" :key="cat">{{ cat }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

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

<style scoped>
/* 样式 */
</style>

在上面的示例中，我们在 Vue.js 组件中使用 Axios 发起 GET 请求，调用 Nest.js 后端服务的 /cats 路由来获取猫咪列表数据，并在页面中展示。请注意将实际的后端服务地址替换为您的 Nest.js 后端服务地址。

这样就实现了 Vue.js 前端项目调用 Nest.js 后端服务的功能。您可以进一步扩展和优化这个示例，比如添加更多的 API 调用、处理错误、添加 Loading 状态等。