nodejs+express+mongodb+react+layui完整的小說(shuō)閱讀系統(tǒng)--悅讀

laoLiueizo 發(fā)布于2019-06-26 17:57 / 3384人閱讀

摘要：一起源本人是一個(gè)前端攻城獅，本著對(duì)全棧工程師的向往，學(xué)習(xí)了搭建服務(wù)器，根據(jù)所學(xué)知識(shí)自己設(shè)計(jì)制作了一個(gè)簡(jiǎn)易的小說(shuō)閱讀系統(tǒng)悅讀。先睹為快悅讀這套系統(tǒng)包括后臺(tái)服務(wù)數(shù)據(jù)庫(kù)存儲(chǔ)后臺(tái)管理端客戶(hù)端。

一、起源

本人是一個(gè)前端攻城獅，本著對(duì)全棧工程師的向往，學(xué)習(xí)了nodejs搭建web服務(wù)器，根據(jù)所學(xué)知識(shí)自己設(shè)計(jì)制作了一個(gè)簡(jiǎn)易的小說(shuō)閱讀系統(tǒng)——悅讀。先睹為快：悅讀
這套系統(tǒng)包括：后臺(tái)服務(wù)、數(shù)據(jù)庫(kù)存儲(chǔ)、后臺(tái)管理端、客戶(hù)端APP。
后臺(tái)管理端包括：書(shū)籍管理（增刪改查）、用戶(hù)管理（新增、凍結(jié)、解凍）
客戶(hù)端包括：注冊(cè)、登錄、添加書(shū)架、閱讀、分享等

二、技術(shù)棧

服務(wù)端：nodejs、express
數(shù)據(jù)庫(kù)：mongodb
后臺(tái)管理：layui、jquery
客戶(hù)端：react

三、開(kāi)發(fā)流程

聲明：以下安裝開(kāi)發(fā)流程均為Windows操作系統(tǒng)下。

1.安裝nodejs
nodejs安裝超級(jí)簡(jiǎn)單，前往nodejs官網(wǎng)下載對(duì)應(yīng)版本的nodejs安裝包

下載完成后點(diǎn)擊安裝，一直點(diǎn)擊next，直到安裝完成即可。安裝完成后，打開(kāi)命令行工具（win+r,再輸入cmd），在命令行執(zhí)行node -v命令，若輸出版本號(hào)則說(shuō)明安裝成功，否則安裝失敗，自行檢查失敗原因。

2.安裝MongoDB

nodejs的mongodb模塊只是用來(lái)連接mongodb數(shù)據(jù)庫(kù)的，并不是真正的數(shù)據(jù)庫(kù)，下載安裝地址[MongoDB][4]

2.1下載完成后雙擊安裝，可以選擇custom自定義安裝目錄：

2.2點(diǎn)擊browser選擇安裝目錄

2.3點(diǎn)擊next進(jìn)入下一步，然后取消勾選install mongodb compass，否則可能要很長(zhǎng)時(shí)間都一直在執(zhí)行安裝，MongoDB Compass 是一個(gè)圖形界面管理工具，我們可以在后面自己到官網(wǎng)下載安裝，下載地址：https://www.mongodb.com/downl...。

2.4創(chuàng)建數(shù)據(jù)目錄，MongoDB將數(shù)據(jù)存儲(chǔ)在 db 目錄下，但是這個(gè)數(shù)據(jù)目錄不會(huì)主動(dòng)創(chuàng)建，我們?cè)诎惭b完成后需要?jiǎng)?chuàng)建data/db目錄，請(qǐng)注意，數(shù)據(jù)目錄應(yīng)該放在根目錄下（(如： C:datadb 或者 D:datadb 等 )。

2.5啟動(dòng)數(shù)據(jù)庫(kù)，cd到mongodb安裝目錄的bin目錄中cd c:mongodbbin，執(zhí)行mongod --dbpath c:datadb,其中c:datadb是你創(chuàng)建的數(shù)據(jù)存儲(chǔ)目錄。

3.安裝express
cd到項(xiàng)目目錄下
在命令行執(zhí)行npm install express --save 安裝express安裝包
執(zhí)行npm install body-parser --save 用于處理 JSON, Raw, Text 和 URL 編碼的數(shù)據(jù)
執(zhí)行npm install cookie-parser --save 解析Cookie的工具。通過(guò)req.cookies可以取到傳過(guò)來(lái)的cookie，并把它們轉(zhuǎn)成對(duì)象
執(zhí)行npm install multer --save 用于處理 enctype="multipart/form-data"（設(shè)置表單的MIME編碼）的表單數(shù)據(jù)

4.配置路由和http設(shè)置
新建文件app.js，內(nèi)容如下：

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

var app = express();

//設(shè)置跨域訪問(wèn)
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類(lèi)型的body
app.use(bodyParser.json());
//string類(lèi)型body
app.use(bodyParser.urlencoded({
    extended: false
}));

// 靜態(tài)文件目錄
app.use(express.static(__dirname + "/public"));

// 圖書(shū)館系統(tǒng)后臺(tái)管理端路由與業(yè)務(wù)邏輯
app.use("/baseWeb/book/", require("./routes/baseweb_book"));

// 圖書(shū)館系統(tǒng)app客戶(hù)端路由與業(yè)務(wù)邏輯
app.use("/webphone/bookPhone/", require("./routes/webPhone_book"));

app.listen(8080);

4.nodejs連接mongodb數(shù)據(jù)庫(kù)服務(wù)，執(zhí)行npm install mongodb安裝依賴(lài)包

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數(shù)據(jù)庫(kù)user表中添加數(shù)據(jù)
    // 插入一條
    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 + "條數(shù)據(jù)");
    });
    
    // 刪除數(shù)據(jù)
    // 刪除一條
    var whereStr = {name: "lilei"}; //查詢(xún)條件
    DBO.collection("user").deleteOne(whereStr , function(err, result) {
       if (err) throw err;
       console.log("刪除成功");
    });
    //刪除多條
    var whereStr = {name: "lilei"}; //查詢(xún)條件
    DBO.collection("user").deleteMany(whereStr , function(err, result) {
       if (err) throw err;
       console.log("刪除成功");
    });
    
    // 修改
    // 修改一條
    let whereStr = {"name":"hanmeimei"};  // 查詢(xún)條件
    let updateStr = {$set: { "name" : "missDeng" }};
    DBO.collection("user").updateOne(whereStr, updateStr, function(err, res) {
        if (err) throw err;
        console.log("更新成功");
    });
    // 修改多條
    let whereStr = {"name":"hanmeimei"};  // 查詢(xún)條件
    let updateStr = {$set: { "name" : "missDeng" }};
    DBO.collection("user").updateMany(whereStr, updateStr, function(err, res) {
        if (err) throw err;
        console.log("更新成功");
    });
    
    // 查詢(xún)
    let obj = {};//查詢(xún)條件，空對(duì)象為查詢(xún)所有
    DBO.collection("user").find(obj).toArray(function(err, result){
       if (err) throw err;
       console.log(result);
    });
});

5.新建routes目錄，在routes目錄下創(chuàng)建webPhone_book.js文件，內(nèi)容如下：

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";
// 緩存區(qū)
const buf = new Buffer.alloc(2048);

// 連接數(shù)據(jù)庫(kù)
MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    const DBO = db.db("books");

    // app端注冊(cè)
    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:"參數(shù)異常"});
                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: "服務(wù)器異常"});
                        throw err;
                    }
                    res.json({code:1, content: "添加成功"});
                })
            }else{
                res.json({code:2, content: "此手機(jī)號(hào)碼已注冊(cè)"})
            }
        });
    });
    
    // APP端驗(yàn)證登錄
    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: "密碼錯(cuò)誤"});
                    }
                } else {
                    res.json({code: 2,content: "該手機(jī)號(hào)暫未注冊(cè)"});
                }
            })
        }else{
            res.json({code: 4, content: "參數(shù)異常"});
        }
    });
    });
    module.exports = router;

6、使用layui創(chuàng)建后臺(tái)管理前端頁(yè)面并綁定接口
7、使用react創(chuàng)建APP客戶(hù)端項(xiàng)目，并使用hbuilder打包成apk安裝包

四、總結(jié)與收獲

之前并未系統(tǒng)學(xué)習(xí)過(guò)服務(wù)端開(kāi)發(fā)，所以在開(kāi)發(fā)過(guò)程中遇到很多問(wèn)題，比如：跨域問(wèn)題、文件讀寫(xiě)、上傳文件、下載文件、數(shù)據(jù)庫(kù)設(shè)計(jì)等。這些問(wèn)題并沒(méi)有讓我感到挫敗，反而越戰(zhàn)越勇，想盡辦法一一解決，完成之后部署在云服務(wù)器，推薦給朋友使用，成就感爆棚。當(dāng)然這個(gè)系統(tǒng)還是一個(gè)新生兒，還有很多不足和需要優(yōu)化的地方，希望各位朋友不吝賜教。
完整項(xiàng)目github地址：https://github.com/jaxlix/hap...
安卓安裝包下載二維碼：