nodejs+express+mongodb+react+layui完整的小说阅读系统--悦读

一、起源

本人是一个前端攻城狮，本着对全栈工程师的向往，学习了nodejs搭建web服务器，根据所学知识自己设计制作了一个简易的小说阅读系统——悦读。

这套系统包括：后台服务、数据库存储、后台管理端、客户端APP。

后台管理端包括：书籍管理（增删改查）、用户管理（新增、冻结、解冻）

客户端包括：注册、登录、添加书架、阅读、分享等

二、技术栈

服务端：nodejs、express

数据库：mongodb

后台管理：layui、jquery

客户端：react

三、开发流程

声明：以下安装开发流程均为Windows操作系统下。

1.安装nodejs

nodejs安装超级简单，前往nodejs官网下载对应版本的nodejs安装包

图片描述

下载完成后点击安装，一直点击next，直到安装完成即可。安装完成后，打开命令行工具（win+r,再输入cmd），在命令行执行node -v命令，若输出版本号则说明安装成功，否则安装失败，自行检查失败原因。

2.安装MongoDB

nodejs的 mongodb 模块只是用来连接mongodb数据库的，并不是真正的数据库，下载安装地址[MongoDB][3]

2.1下载完成后双击安装，可以选择custom自定义安装目录：

图片描述

2.2点击browser选择安装目录

图片描述

2.3点击next进入下一步，然后取消勾选install mongodb compass，否则可能要很长时间都一直在执行安装，MongoDB Compass 是一个图形界面管理工具，我们可以在后面自己到官网下载安装，下载地址： https://www.mongodb.com/downl... 。

图片描述

2.4创建数据目录，MongoDB将数据存储在 db 目录下，但是这个数据目录不会主动创建，我们在安装完成后需要创建data/db目录，请注意，数据目录应该放在根目录下（(如： C:datadb 或者 D:datadb 等 )。

2.5启动数据库，cd到mongodb安装目录的bin目录中cd c:mongodbbin，执行mongod --dbpath c:datadb,其中c:datadb是你创建的数据存储目录。

3.安装express

cd到项目目录下

在命令行执行 npm install express --save 安装express安装包

执行 npm install body-parser --save 用于处理 JSON, Raw, Text 和 URL 编码的数据

执行 npm install cookie-parser --save 解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象

执行 npm install multer --save 用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据

4.配置路由和http设置

新建文件app.js，内容如下：

var express = require("express");
var bodyParser = require("body-parser");

var app = express();

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    // res.header("access-control-expose-headers", "Authorization");
    res.header("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
    next();
});

// json类型的body
app.use(bodyParser.json());
//string类型body
app.use(bodyParser.urlencoded({
    extended: false
}));

// 静态文件目录
app.use(express.static(__dirname + '/public'));

// 图书馆系统后台管理端路由与业务逻辑
app.use('/baseWeb/book/', require('./routes/baseweb_book'));

// 图书馆系统app客户端路由与业务逻辑
app.use('/webphone/bookPhone/', require('./routes/webPhone_book'));

app.listen(8080);

4.nodejs连接mongodb数据库服务

执行 npm install mongodb 安装依赖包

const MongoClient = require('mongodb').MongoClient;
const ObjectID = require('mongodb').ObjectID;
const url = "mongodb://localhost:27017/books";
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    const DBO = db.db("books");
    
    // 在books数据库user表中添加数据
    // 插入一条
    let data = {name: 'lilei', sex:1};
    DBO.collection("user").insertOne(data, function(err, result) {
       if (err) throw err;
       console.log("添加成功");
    });
    // 插入多条
    let data = [
        {name: 'lilei', sex:1},
        {name: 'hanmeimei', sex:0}
    ];
    DBO.collection("user").insertMany(data, function(err, res) {
        if (err) throw err;
        console.log("插入了" + res.insertedCount + "条数据");
    });
    
    // 删除数据
    // 删除一条
    var whereStr = {name: 'lilei'}; //查询条件
    DBO.collection("user").deleteOne(whereStr , function(err, result) {
       if (err) throw err;
       console.log("删除成功");
    });
    //删除多条
    var whereStr = {name: 'lilei'}; //查询条件
    DBO.collection("user").deleteMany(whereStr , function(err, result) {
       if (err) throw err;
       console.log("删除成功");
    });
    
    // 修改
    // 修改一条
    let whereStr = {"name":'hanmeimei'};  // 查询条件
    let updateStr = {$set: { "name" : "missDeng" }};
    DBO.collection("user").updateOne(whereStr, updateStr, function(err, res) {
        if (err) throw err;
        console.log("更新成功");
    });
    // 修改多条
    let whereStr = {"name":'hanmeimei'};  // 查询条件
    let updateStr = {$set: { "name" : "missDeng" }};
    DBO.collection("user").updateMany(whereStr, updateStr, function(err, res) {
        if (err) throw err;
        console.log("更新成功");
    });
    
    // 查询
    let obj = {};//查询条件，空对象为查询所有
    DBO.collection("user").find(obj).toArray(function(err, result){
       if (err) throw err;
       console.log(result);
    });
});

5.新建routes目录，在routes目录下创建webPhone_book.js文件，内容如下：

const express = require("express");

const fs = require('fs');

const path = require('path');

const crypto = require('crypto'); //加载加密文件

const router = express.Router();

const MongoClient = require('mongodb').MongoClient;

const ObjectID = require('mongodb').ObjectID;

const url = "mongodb://localhost:27017/books";

// 缓存区

const buf = new Buffer.alloc(2048);

// 连接数据库

MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {

if (err) throw err;
const DBO = db.db("books");

// app端注册
router.post('/enroll', function(req, res){
    let data = {
        userName: req.body.userName,
        sex: req.body.sex,
        userPhone: req.body.userPhone,
        userEmail: req.body.userEmail,
        password: req.body.password,
        status: 1
    }
    for(let k in data){
        if(!data[k]){
            res.json({code:4, content:"参数异常"});
            return false
        }
    }
    DBO.collection("user").find({userPhone: data.userPhone}).count(function(err, num){
        if(err) throw err;
        if(num == 0){
            // 密码加密
            let pwObj = encrypt(data.password);
            data.password = pwObj.pw;
            data.key = pwObj.key;
            DBO.collection("user").insertOne(data, function(err, result) {
                if (err){
                    res.json({code:4, content: "服务器异常"});
                    throw err;
                }
                res.json({code:1, content: "添加成功"});
            })
        }else{
            res.json({code:2, content: "此手机号码已注册"})
        }
    });
});

// APP端验证登录
router.post('/login', function(req, res){
    let userPhone = req.body.userPhone;
    let password = req.body.password;
    if(userPhone && password){
        DBO.collection("user").find({userPhone: userPhone}).toArray(function(err, resArr) {
            if (err) throw err;
            if (resArr.length > 0) {
                password = password + resArr[0].key;
                let md5 = crypto.createHash('md5');
                let r = md5.update(password).digest('hex');
                if (r == resArr[0].password) {
                    res.json({code: 1,content: resArr[0]._id});
                } else {
                    res.json({code: 2,content: "密码错误"});
                }
            } else {
                res.json({code: 2,content: "该手机号暂未注册"});
            }
        })
    }else{
        res.json({code: 4, content: "参数异常"});
    }
});
});
module.exports = router;

6、使用layui创建后台管理前端页面并绑定接口
7、使用react创建APP客户端项目，并使用hbuilder打包成apk安装包

**四、总结与收获**
===========

之前并未系统学习过服务端开发，所以在开发过程中遇到很多问题，比如：跨域问题、文件读写、上传文件、下载文件、数据库设计等。这些问题并没有让我感到挫败，反而越战越勇，想尽办法一一解决，完成之后部署在云服务器，推荐给朋友使用，成就感爆棚。当然这个系统还是一个新生儿，还有很多不足和需要优化的地方，希望各位朋友不吝赐教。
项目github地址：https://github.com/jaxlix/-
安卓安装包下载二维码
![图片描述][7]


  [1]: https://nodejs.org/en/
  [2]: /img/bVbo92f
  [3]: https://www.mongodb.com/download-center/community
  [4]: /img/bVHE4A
  [5]: /img/bVHE4B
  [6]: /img/bVbphZX