nodejs+express+mongodb+react+layui完整的小說閱讀系統--悅讀

1、起源

本人是一個前端攻城獅，本着對全棧工程師的嚮往，學習了nodejs搭建web服務器，根據所學知識本身設計製做了一個簡易的小說閱讀系統——悅讀。先睹爲快：悅讀
這套系統包括：後臺服務、數據庫存儲、後臺管理端、客戶端APP。
後臺管理端包括：書籍管理（增刪改查）、用戶管理（新增、凍結、解凍）
客戶端包括：註冊、登陸、添加書架、閱讀、分享等

2、技術棧

服務端：nodejs、express
數據庫：mongodb
後臺管理：layui、jquery
客戶端：react

3、開發流程

聲明：如下安裝開發流程均爲Windows操做系統下。

1.安裝nodejs
nodejs安裝超級簡單，前往nodejs官網下載對應版本的nodejs安裝包

下載完成後點擊安裝，一直點擊next，直到安裝完成便可。安裝完成後，打開命令行工具（win+r,再輸入cmd），在命令行執行node -v命令，若輸出版本號則說明安裝成功，不然安裝失敗，自行檢查失敗緣由。

2.安裝MongoDB

nodejs的mongodb模塊只是用來鏈接mongodb數據庫的，並非真正的數據庫，下載安裝地址[MongoDB][4]

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;

六、使用layui建立後臺管理前端頁面並綁定接口
七、使用react建立APP客戶端項目，並使用hbuilder打包成apk安裝包

4、總結與收穫

以前並未系統學習過服務端開發，因此在開發過程當中遇到不少問題，好比：跨域問題、文件讀寫、上傳文件、下載文件、數據庫設計等。這些問題並無讓我感到挫敗，反而越戰越勇，想盡辦法一一解決，完成以後部署在雲服務器，推薦給朋友使用，成就感爆棚。固然這個系統仍是一個新生兒，還有不少不足和須要優化的地方，但願各位朋友不吝賜教。
完整項目github地址：https://github.com/jaxlix/hap...
安卓安裝包下載二維碼：