摘要:一起源本人是一個前端攻城獅,本著對全棧工程師的向往,學(xué)習(xí)了搭建服務(wù)器,根據(jù)所學(xué)知識自己設(shè)計制作了一個簡易的小說閱讀系統(tǒng)悅讀。先睹為快悅讀這套系統(tǒng)包括后臺服務(wù)數(shù)據(jù)庫存儲后臺管理端客戶端。
一、起源
本人是一個前端攻城獅,本著對全棧工程師的向往,學(xué)習(xí)了nodejs搭建web服務(wù)器,根據(jù)所學(xué)知識自己設(shè)計制作了一個簡易的小說閱讀系統(tǒng)——悅讀。先睹為快:悅讀
這套系統(tǒng)包括:后臺服務(wù)、數(shù)據(jù)庫存儲、后臺管理端、客戶端APP。
后臺管理端包括:書籍管理(增刪改查)、用戶管理(新增、凍結(jié)、解凍)
客戶端包括:注冊、登錄、添加書架、閱讀、分享等
服務(wù)端:nodejs、express
數(shù)據(jù)庫:mongodb
后臺管理:layui、jquery
客戶端:react
聲明:以下安裝開發(fā)流程均為Windows操作系統(tǒng)下。
1.安裝nodejs
nodejs安裝超級簡單,前往nodejs官網(wǎng)下載對應(yīng)版本的nodejs安裝包
下載完成后點擊安裝,一直點擊next,直到安裝完成即可。安裝完成后,打開命令行工具(win+r,再輸入cmd),在命令行執(zhí)行node -v命令,若輸出版本號則說明安裝成功,否則安裝失敗,自行檢查失敗原因。
2.安裝MongoDB
nodejs的mongodb模塊只是用來連接mongodb數(shù)據(jù)庫的,并不是真正的數(shù)據(jù)庫,下載安裝地址[MongoDB][4]
2.1下載完成后雙擊安裝,可以選擇custom自定義安裝目錄:
2.2點擊browser選擇安裝目錄
2.3點擊next進(jìn)入下一步,然后取消勾選install mongodb compass,否則可能要很長時間都一直在執(zhí)行安裝,MongoDB Compass 是一個圖形界面管理工具,我們可以在后面自己到官網(wǎng)下載安裝,下載地址:https://www.mongodb.com/downl...。
2.4創(chuàng)建數(shù)據(jù)目錄,MongoDB將數(shù)據(jù)存儲在 db 目錄下,但是這個數(shù)據(jù)目錄不會主動創(chuàng)建,我們在安裝完成后需要創(chuàng)建data/db目錄,請注意,數(shù)據(jù)目錄應(yīng)該放在根目錄下((如: C:datadb 或者 D:datadb 等 )。
2.5啟動數(shù)據(jù)庫,cd到mongodb安裝目錄的bin目錄中cd c:mongodbbin,執(zhí)行mongod --dbpath c:datadb,其中c:datadb是你創(chuàng)建的數(shù)據(jù)存儲目錄。
3.安裝express
cd到項目目錄下
在命令行執(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的工具。通過req.cookies可以取到傳過來的cookie,并把它們轉(zhuǎn)成對象
執(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è)置跨域訪問 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 })); // 靜態(tài)文件目錄 app.use(express.static(__dirname + "/public")); // 圖書館系統(tǒng)后臺管理端路由與業(yè)務(wù)邏輯 app.use("/baseWeb/book/", require("./routes/baseweb_book")); // 圖書館系統(tǒng)app客戶端路由與業(yè)務(wù)邏輯 app.use("/webphone/bookPhone/", require("./routes/webPhone_book")); app.listen(8080);
4.nodejs連接mongodb數(shù)據(jù)庫服務(wù),執(zhí)行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數(shù)據(jù)庫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"}; //查詢條件 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目錄下創(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ù)庫 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:"參數(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ī)號碼已注冊"}) } }); }); // 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: "該手機(jī)號暫未注冊"}); } }) }else{ res.json({code: 4, content: "參數(shù)異常"}); } }); }); module.exports = router;
6、使用layui創(chuàng)建后臺管理前端頁面并綁定接口
7、使用react創(chuàng)建APP客戶端項目,并使用hbuilder打包成apk安裝包
之前并未系統(tǒng)學(xué)習(xí)過服務(wù)端開發(fā),所以在開發(fā)過程中遇到很多問題,比如:跨域問題、文件讀寫、上傳文件、下載文件、數(shù)據(jù)庫設(shè)計等。這些問題并沒有讓我感到挫敗,反而越戰(zhàn)越勇,想盡辦法一一解決,完成之后部署在云服務(wù)器,推薦給朋友使用,成就感爆棚。當(dāng)然這個系統(tǒng)還是一個新生兒,還有很多不足和需要優(yōu)化的地方,希望各位朋友不吝賜教。
完整項目github地址:https://github.com/jaxlix/hap...
安卓安裝包下載二維碼:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/19467.html
摘要:沒有耐心閱讀的同學(xué),可以直接前往學(xué)習(xí)全棧最后一公里。我下面會羅列一些,我自己錄制過的一些項目,或者其他的我覺得可以按照這個路線繼續(xù)深入學(xué)習(xí)的項目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術(shù)軟文,閱讀需謹(jǐn)慎,長約 7000 字,通讀需 5 分鐘 大家好,我是 Scott,本文通過提供給大家學(xué)習(xí)的方法,...
摘要:異步最佳實踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
摘要:前言本文講解的是做為前端開發(fā)人員,對服務(wù)器的了解還是小白的我,是如何一步步將項目部署在阿里云的服務(wù)器上,并進(jìn)行性能優(yōu)化,達(dá)到頁面秒內(nèi)看到,秒內(nèi)看到首屏內(nèi)容的。搭建的項目是采用了主流的前后端分離思想的,這里只講服務(wù)器環(huán)境搭建與性能優(yōu)化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言 本文講解的是:做為前...
摘要:責(zé)編現(xiàn)代化的方式開發(fā)一個圖片上傳工具前端掘金對于圖片上傳,大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前,在本人目前的研究中,只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒有ajax之前,前端與后臺傳數(shù)據(jù)都是靠表單傳輸,使用表單的方法傳輸數(shù)據(jù)有一個比較大的問題就是每次提交數(shù)據(jù)都會刷新頁面,用...
閱讀 2422·2021-11-24 09:39
閱讀 3247·2021-10-09 09:53
閱讀 1138·2021-09-22 16:06
閱讀 4462·2021-09-02 10:18
閱讀 807·2021-08-23 09:42
閱讀 1770·2021-08-17 10:11
閱讀 2691·2019-08-30 13:02
閱讀 2129·2019-08-30 12:49