博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodejs+express+mongodb+react+layui完整的小说阅读系统--悦读
阅读量:6272 次
发布时间:2019-06-22

本文共 6689 字,大约阅读时间需要 22 分钟。

一、起源

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

这套系统包括:后台服务、数据库存储、后台管理端、客户端APP。
后台管理端包括:书籍管理(增删改查)、用户管理(新增、冻结、解冻)
客户端包括:注册、登录、添加书架、阅读、分享等

二、技术栈

服务端:nodejs、express

数据库:mongodb
后台管理:layui、jquery
客户端:react

三、开发流程

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

1.安装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 是一个图形界面管理工具,我们可以在后面自己到官网下载安装,下载地址:。

图片描述

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类型的bodyapp.use(bodyParser.json());//string类型bodyapp.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地址:
安卓安装包下载二维码:
图片描述

转载地址:http://pqlpa.baihongyu.com/

你可能感兴趣的文章
Laravel 技巧锦集
查看>>
Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果
查看>>
Flutter之基础Widget
查看>>
写给0-3岁产品经理的12封信(第08篇)——产品运营能力
查看>>
ArcGIS Engine 符号自动化配置工具实现
查看>>
小程序 · 跳转带参数写法,兼容url的出错
查看>>
flutter error
查看>>
Flask框架从入门到精通之模型数据库配置(十一)
查看>>
10年重新出发
查看>>
2019年-年终总结
查看>>
聊聊elasticsearch的RoutingService
查看>>
让人抓头的Java并发(一) 轻松认识多线程
查看>>
从源码剖析useState的执行过程
查看>>
地包天如何矫正?
查看>>
中间件
查看>>
Android SharedPreferences
查看>>
css面试题
查看>>
Vue组建通信
查看>>
用CSS画一个带阴影的三角形
查看>>
前端Vue:函数式组件
查看>>