🎈 原创

Github 仓库地址：https://github.com/yydrowz3/notebook_app

之前在图书馆里找到了一本 React.js 实战，本来也正好在学习，就想着先借回来看看。

书很薄，内容不多。花了一个星期大致把书上的内容过了一遍，说实话没学到什么。React 基础的语法和组件化的思想其实之前就稍稍学过，所以这部分内容基本上看明白了。
但是其他的内容就不好说了，Webpack 还有测试的 Jest 都只是简单介绍了概念和基础的使用方法，不过对这些来说也够了。
但是其他很多重要的东西，比如 Redux 数据管理，React-router 路由等，都是大量的给出源代码，缺少对相关原理的解释，不太适合初学者。

书的最后也给出了几个例子，将书中的知识联系起来做个小练习，本篇博客就是这中的一个案例，觉得挺好的所以在这里写点东西复习一下整个的思路。

项目的总体结构

在项目文件夹下先创建两个文件夹backend和client，用于分开实现这个记事本的前端和后端，前端主要使用 React 完成，后端则使用 Node 的 Express 框架实现。

|----notebook_app
     |----backend
     |----client

后端搭建

先进入 backend 文件夹，使用npm init来初始化。

安装依赖

server 端使用 Node 来搭建，使用了 Express 框架。
数据库选择 Mongodb，使用的是 mongodb 官网提供的 512M 免费容量的数据库来实现。

通过 npm 或 yarn 安装需要用到的依赖工具

• npm install body-parser
• npm install express
• npm install mongoose
• npm install morgan

最终的 package.json

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "body-parser": "^1.19.0",
        "express": "^4.17.1",
        "mongoose": "^6.0.12",
        "morgan": "^1.10.0"
    }
}

MongoDB 数据库

创建数据库

在MongoDB 官网创建账号和免费的数据库套餐。创建完成后进入控制台界面。

在左边 Security 中选择进入 Database Access，在这里创建用户并赋予相应的权限。

回到控制台主界面，点击 connect，在选择链接方式的界面中选择 Application。这里因为这个数据库是在线的，所以有很多使用的方式，而我们这个只需要获得相应的链接在 mongoose 中使用就行。所以选择 Application 来查看连接地址 url。

这里就可以看到数据库的连接 url 了，在实际中只需要第一行就可以连接了，用户名：密码这个是刚才创建用户时设定的。@后面的是这个连接数据库的主机名。第一个/后面的是数据库的名称，MongoDB 允许在连接时连接到一个名称不存在的数据库，这时 MongoDB 默认会帮你创建这个数据库，所以不会像其他的数据库一样报错。

编写 Schema

创建 data.js 文件

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const DataSchema = new Schema(
    {
        id: Number,
        message: String,
    },
    { timestamps: true }
);

module.exports = mongoose.model("Data", DataSchema);

后端主程序

后端主要是接收客户端网页发送过来的请求来进行相应的操作。所以这里用了很多的路由来区分不同的操作。在编写后端 API 接口时应该要注意使用 RESTful 的 API 接口规范，这样更符合设计思路也能方便团队协作。

创建 Server.js

const mongoose = require("mongoose");
const express = require("express");
const bodyParser = require("body-parser");
const logger = require("morgan");

const Data = require("./data");

// express
const API_PORT = 3001;
const app = express();
//  路由
const router = express.Router();

// 连接数据库等相关，这里要看你自己在上一步中设定的数据库相关配置
const dbRouter =
    "mongodb+srv://你的用户名:你的密码@cluster0.2yv5h.mongodb.net/myFirstDatabase";
mongoose.connect(dbRouter, { useNewUrlParser: true });
let db = mongoose.connection;
db.once("open", () => console.log("connected to the database"));
// 检测是否连接成功
db.on("error", console.error.bind(console, "MongoDB connection error:"));

// 转换为可读的json格式
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 开启日志
app.use(logger("dev"));

// 获取数据的方法
// 用于获取数据库中所有可用数据
router.get("/getData", (req, res) => {
    Data.find((err, data) => {
        if (err) return res.json({ success: false, error: err });
        return res.json({ success: true, data: data });
    });
});

// 数据更新方法
// 用于对数据库中已有数据的更新
router.post("/updateData", (req, res) => {
    const { id, update } = req.body;
    Data.findOneAndUpdate(id, update, (err) => {
        if (err) return res.json({ success: false, error: err });
        return res.json({ success: true });
    });
});

// 删除数据方法
// 用于删除数据库中已有数据
router.delete("/deleteData", (req, res) => {
    const { id } = req.body;
    Data.findOneAndDelete(id, (err) => {
        if (err) return res.send(err);
        return res.json({ success: true });
    });
});

// 添加数据的方法
// 用于在数据库中添加数据
router.post("/putData", (req, res) => {
    let data = new Data();
    const { id, message } = req.body;
    if ((!id && id !== 0) || !message) {
        return res.json({
            success: false,
            error: "INVALID INPUTS",
        });
    }
    data.message = message;
    data.id = id;
    data.save((err) => {
        if (err) return res.json({ success: false, error: err });
        return res.json({ success: true });
    });
});

// 对http请求增加/api路由
app.use("/api", router);
// 开启端口
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

设置完成后可以在当前目录下node server.js测试一下看看数据库连接有没有问题。