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

39次阅读

共计 5261 个字符,预计需要花费 14 分钟才能阅读完成。

一、起源
本人是一个前端攻城狮,本着对全栈工程师的向往,学习了 nodejs 搭建 web 服务器,根据所学知识自己设计制作了一个简易的小说阅读系统——悦读。这套系统包括:后台服务、数据库存储、后台管理端、客户端 APP。后台管理端包括:书籍管理(增删改查)、用户管理(新增、冻结、解冻)客户端包括:注册、登录、添加书架、阅读、分享等
二、技术栈
服务端:nodejs、express 数据库:mongodb 后台管理:layui、jquery 客户端:react
三、开发流程
声明:以下安装开发流程均为 Windows 操作系统下。
1. 安装 nodejsnodejs 安装超级简单,前往 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. 安装 expresscd 到项目目录下在命令行执行 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/- 安卓安装包下载二维码:

正文完
 0