写个博客吧（Nest博客后台接口和与React前端的交互）

最新推荐文章于 2024-08-12 08:47:28 发布

eswang

最新推荐文章于 2024-08-12 08:47:28 发布

阅读量893

点赞数 2

分类专栏： React 学习日记 Nest.js学习日记我的网站

本文链接：https://blog.csdn.net/weixin_43870742/article/details/102731890

版权

本文总结了使用Nest.js构建博客后台接口，包括文章列表和详情，利用Typegoose和Swagger操作MongoDB，前端通过axios与后台交互实现数据展示。在Nest工程结构中创建posts文件夹，简化接口设计。遇到的问题是在React中处理接收到的数据时，错误地在JSX中直接展示了对象，导致错误。

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

前言

最近做完博客接口，主要是文章列表和详情的接口，使用Typegoose和swagger配合Nest.js，然后用mongo express生成了一些可以操作的数据，利用axios配合前台完成了数据交互，把文章列表和详情页做了出来。下面主要是总结一下。

接口

看过我之前文章的可能知道，nest.js操作mongoDB我更喜欢使用typegoose这个ORM，不仅仅是因为和TS结合的更加好，代码提示之类的也更方便，做一个模型文件，操作起来就比较简单。
关于数据库设计，文章列表和文章详情自然是可以使用同一个MongoDB文件了，关于评论，尽管还没有实现这个功能，但是还是先把评论放在同一个文件中，毕竟应该很难做大，而既然使用了NoSQL，就没必要再建立一个新的文件硬是去和其他的文件建立联系。
关于Nest工程结构的设计，暂时也没有想太多，直接在src目录下建立了新的"posts"文件夹用来处理博客相关内容。

-> src
    -> posts
        -> posts.controller.ts
        -> ...spect.ts
        -> post.dto.ts
        -> post.model.ts
    -> main.ts
    ->app.controller.ts
    -> ...

关于model文件，我是这样定义的：

/*
 * @Date: 2019-10-23 14:10:48
 * @LastEditors: Asen Wang
 * @LastEditTime: 2019-10-23 14:35:30
 * @content: I
 */
import {
    getModelForClass, prop } from '@typegoose/typegoose'

export class Posts {
   
  @prop()
  author: string
  @prop()
  title: string
  @prop()
  intro: string
  @prop()
  content: string
  @prop()
  tags: string[]
  @prop()
  time: string
  @prop()
  readtime: number
  @prop()
  img: string
  @prop()
  views: number
  @prop()
  zan: number
  @pro