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

前言

最近做完博客接口，主要是文章列表和详情的接口，使用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
  @prop()
  comments: number
}

export const PostModel = getModelForClass(Posts)

typegoose 之前讲过，这种方式个人挺喜欢的，props里面也可以传递参数，比如{default}，{required}等。
这里为了测试添加数据还设置了DTO，当然这里还没有涉及到后台管理系统，所以这里先不讲。
关于控制器，由于逻辑很简单，没必要设置服务：

@Controller('posts')
@ApiUseTags('代码文章')
export class PostsController {
  @Get()
  @ApiOperation({title: '显示文章的列表界面'})
  async getPosts() {
    return await PostModel.find()
  }

  @Post()
  @ApiOperation({title: '添加文章'})
  async addPost(@Body() createPostsDto: CreatePostsDto) {
    await PostModel.create(createPostsDto)
    return {success: true}
  }

  @Get(':id')
    @ApiOperation({title: '显示文章的详情页面'})
    async getPostByID(@Param('id') id: string) {
      return await PostModel.findById(id)
    }
}

关于POST的部分暂时不需要看，typegoose使用起来还是很方便的。
最后关于main.ts的编写，注意设置一下跨域和swagger的配置编写即可，因为nest和next的默认端口都是3000，这里我把nest的端口换成了4000：

async function bootstrap() {
mongoose.connect('mongodb://localhost/myblog', {
  useNewUrlParser: true,
  useFindAndModify: false,
  useCreateIndex: true,
  useUnifiedTopology: true,
})
const app = await NestFactory.create(AppModule, {cors: true});
app.useGlobalPipes(new ValidationPipe())

const options = new DocumentBuilder()
  .setTitle('我的博客')
  .setDescription('博客API接口的Swagger文档')
  .setVersion('1.0')
  .addTag('blog')
  .build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('api-docs', app, document);

await app.listen(4000);
Logger.log(`App run in http://localhost:4000`)
}
bootstrap();

因为目前主要测试博客功能，其他的还没有编写，这里就先写成了博客部分的内容。

前后交互

整个逻辑还是比较简单的，之前讲过axios在next中的使用，这里直接写即可，拿到数据后传给子组件然后设置即可，这里举个小例子：

//index.js
const PostsContext = createContext()

const Home = ({data}) =>  (
  <>
  ...
  <PostsContext.Provider value={data}>
            <PostList />
  </PostsContext.Provider>
  ...
  </>
)

Home.getInitialProps = async() => {
  const res = await axios.get('http://localhost:4000/posts')
  return { data: res.data }
}

//组件中拿到数据
  const data = useContext(PostsContext)

Bug

数据直接使用即可，没什么需要注意的，不过我个人在这个过程中遇到了一个问题，其实之前就遇到过，只不过没怎么注意：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

其实错误很简单，我在测试接收到的数据时，不小心在JSX的语法中直接把接收到的对象加上{}展示出来，类似：

const Home = (res) => (
 {res}
)

注意这样的错误就好了。