最新React+Ts+Node+MongoDB 构建 Todo App项目总结(1)，程序员进阶知识点

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

有了这些，我们现在就可以更新  package.json  的 scripts 来启动服务器。

• package.json

“scripts”: {

“build”: “tsc”,

“start”: “concurrently “tsc -w” “nodemon dist/js/app.js””

}

concurrently  帮助编译 TypeScript 代码，持续观察变化，同时启动服务器。也就是说，我们现在可以启动服务器了——但是，我们还没有创建一些有意义的东西。所以，让我们在下一节中解决这个问题。

创建 Todo 类型

• types/todo.ts

import { Document } from “mongoose”

export interface ITodo extends Document {

name: string

description: string

status: boolean

}

这里，我们有了继承  mongoose  提供的  Document  类型的 Todo 接口。稍后我们将使用它与 MongoDB 交互。也就是说，我们现在可以定义 Todo 模块。

创建 Todo 模块

• models/todo.ts

import { ITodo } from “./…/types/todo”

import { model, Schema } from “mongoose”

const todoSchema: Schema = new Schema(

{

name: {

type: String,

required: true,

},

description: {

type: String,

required: true,

},

status: {

type: Boolean,

required: true,

},

},

{ timestamps: true }

)

export default model(“Todo”, todoSchema)

首先导入  ITodo  接口和 一些  mongoose  导出的模块，后者是帮助定义 Todo schema 和在导出前把 ITodo 作为类型参数传入  model  。

这样，我们现在就可以在其他文件中使用 Todo 模块来与数据库交互。

创建 API 控制器

获取、新增、更新和删除 Todos

• controllers/todos/index.ts

import { Response, Request } from “express”

import { ITodo } from “./…/…/types/todo”

import Todo from “…/…/models/todo”

const getTodos = async (req: Request, res: Response): Promise => {

try {

const todos: ITodo[] = await Todo.find()

res.status(200).json({ todos })

} catch (error) {

throw error

}

}

这里，我们首先需要从  express  导入一些类型，因为我想显式指明类型。如果你想，你可以让 TypeScript 帮你推断。

接下来，我们使用 getTodos() 函数来获取数据，它接收  req  和  res  参数并返回 promise。

在前面创建的 Todo 模块的帮助下，我们现在可以从 MongoDB 获取数据并返回 Todo 数组。

• controllers/todos/index.ts

const addTodo = async (req: Request, res: Response): Promise => {

try {

const body = req.body as Pick<ITodo, “name” | “description” | “status”>

const todo: ITodo = new Todo({

n