🎈 原创

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测试一下看看数据库连接有没有问题。