Nest.js从0到1搭建博客系统---Ts+Axios 二次封装（12）

2023-12-14 20:34:10

前言

Nest.js 是一个渐进式的 Node.js 框架，用于构建高效、可测试和可扩展的服务器端应用程序。TypeScript 是一种由微软开发的开源编程语言，是 JavaScript 的超集，具有类型系统和面向对象的特性。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

搭建博客系统

1. 安装 Nest.js 和 TypeScript

首先，我们需要安装 Nest.js 和 TypeScript。可以使用以下命令进行安装：

npm install -g @nestjs/cli
npm install -g typescript

安装完成后，就可以使用以下命令创建一个新的 Nest.js 项目：

nest new blog

2. 安装 Axios

接下来，我们需要安装 Axios 库。可以使用以下命令进行安装：

npm install axios

3. 创建模块

在 Nest.js 中，模块是应用程序的逻辑单元。每个模块都可以包含自己的控制器、服务、管道和过滤器。

首先，我们需要创建一个新的模块。可以使用以下命令创建：

nest generate module blog

4. 创建控制器

控制器是处理 HTTP 请求的类。在 Nest.js 中，控制器使用 @Controller() 装饰器进行修饰。

首先，我们需要创建一个新的控制器。可以使用以下命令创建：

nest generate controller blog

5. 创建服务

服务是处理业务逻辑的类。在 Nest.js 中，服务使用 @Injectable() 装饰器进行修饰。

首先，我们需要创建一个新的服务。可以使用以下命令创建：

nest generate service blog

6. 配置路由

在 Nest.js 中，路由是将 HTTP 请求映射到控制器的类和方法的规则。

首先，我们需要在 src/app.module.ts 文件中配置路由。可以使用以下代码进行配置：

@Module({
  controllers: [BlogController],
  providers: [BlogService],
})
export class AppModule {}

7. 二次封装 Axios

在 Nest.js 中，我们可以使用 @Injectable() 装饰器来将类注入到其他类中。

首先，我们需要创建一个新的类来二次封装 Axios。可以使用以下代码创建：

@Injectable()
export class HttpService {
  constructor(private axios: AxiosInstance) {}

  get(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.axios.get(url, config);
  }

  post(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.axios.post(url, data, config);
  }

  put(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.axios.put(url, data, config);
  }

  delete(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.axios.delete(url, config);
  }
}

然后，我们需要在 src/app.module.ts 文件中将 HttpService 类注入到 BlogService 类中。可以使用以下代码进行注入：

@Module({
  controllers: [BlogController],
  providers: [BlogService, HttpService],
})
export class AppModule {}

8. 使用二次封装的 Axios

现在，我们就可以在 BlogService 类中使用二次封装的 Axios 库了。可以使用以下代码进行使用：

export class BlogService {
  constructor(private httpService: HttpService) {}

  getPosts(): Promise<AxiosResponse> {
    return this.httpService.get('/posts');
  }

  getPost(id: number): Promise<AxiosResponse> {
    return this.httpService.get(`/posts/${id}`);
  }

  createPost(post: Post): Promise<AxiosResponse> {
    return this.httpService.post('/posts', post);
  }

  updatePost(id: number, post: Post): Promise<AxiosResponse> {
    return this.httpService.put(`/posts/${id}`, post);
  }

  deletePost(id: number): Promise<AxiosResponse> {
    return this.httpService.delete(`/posts/${id}`);
  }
}