资讯专栏INFORMATION COLUMN

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

laoLiueizo / 3099人阅读

摘要:一起源本人是一个前端攻城狮,本着对全栈工程师的向往,学习了搭建服务器,根据所学知识自己设计制作了一个简易的小说阅读系统悦读。先睹为快悦读这套系统包括后台服务数据库存储后台管理端客户端。

一、起源

本人是一个前端攻城狮,本着对全栈工程师的向往,学习了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][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;
   

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

四、总结与收获

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/19467.html

相关文章

  • 全栈最后一公里 - Node.js 项目线上服务器部署与发布

    摘要:没有耐心阅读的同学,可以直接前往学习全栈最后一公里。我下面会罗列一些,我自己录制过的一些项目,或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文,阅读需谨慎,长约 7000 字,通读需 5 分钟 大家好,我是 Scott,本文通过提供给大家学习的方法,...

    singerye 评论0 收藏0
  • 全栈最后一公里 - Node.js 项目线上服务器部署与发布

    摘要:没有耐心阅读的同学,可以直接前往学习全栈最后一公里。我下面会罗列一些,我自己录制过的一些项目,或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文,阅读需谨慎,长约 7000 字,通读需 5 分钟 大家好,我是 Scott,本文通过提供给大家学习的方法,...

    Nosee 评论0 收藏0
  • node技术栈 - 收藏集 - 掘金

    摘要:异步最佳实践避免回调地狱前端掘金本文涵盖了处理异步操作的一些工具和技术和异步函数。 Nodejs 连接各种数据库集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 编写 Node.js Rest API 的 10 个最佳实践 - 前端 - 掘金全文共 6953 字,读完需 8 分钟,速读需 2 分钟。翻译自...

    王伟廷 评论0 收藏0
  • 服务器小白我,是如何成功将 node+mongodb 项目部署在服务器上并进行性能优化

    摘要:前言本文讲解的是做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将项目部署在阿里云的服务器上,并进行性能优化,达到页面秒内看到,秒内看到首屏内容的。搭建的项目是采用了主流的前后端分离思想的,这里只讲服务器环境搭建与性能优化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文讲解的是:做为前...

    zsy888 评论0 收藏0
  • 前端开发收集 - 收藏集 - 掘金

    摘要:责编现代化的方式开发一个图片上传工具前端掘金对于图片上传,大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前,在本人目前的研究中,只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景 在没有ajax之前,前端与后台传数据都是靠表单传输,使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面,用...

    ygyooo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<