nodejs + express + mongodb + react + layui 완전한 소설 읽 기 시스템 - 열 독

기원
저 는 전단 공 성 사자 입 니 다. 스 택 엔지니어 에 대한 동경 에 따라 nodejs 가 웹 서버 를 구축 하 는 것 을 배 웠 습 니 다. 배 운 지식 에 따라 간단 하고 간단 한 소설 읽 기 시스템 인 열 독 을 만 들 었 습 니 다.먼저 보 는 것 이 즐겁다. 이 시스템 은 백 스테이지 서비스, 데이터 베이스 저장, 백 스테이지 관리 단, 클 라 이언 트 APP 를 포함한다.배경 관리 단 은 책 관리 (첨삭 검사), 사용자 관리 (신규, 동결, 해동) 클 라 이언 트 를 포함한다. 등록, 로그 인, 책장 추가, 읽 기, 공유 등 이다.
기술 창고
서버: nodejs, express 데이터베이스: mongodb 배경 관리: layui, jquery 클 라 이언 트: react
3. 개발 절차
성명: 아래 의 설치 개발 절 차 는 모두 윈도 운영 체제 아래 이다.
1. nodejsnodejs 설치 가 매우 간단 합 니 다. nodejs 홈 페이지 에 가서 해당 버 전의 nodejs 설치 패 키 지 를 다운로드 하 십시오.
다운로드 가 완 료 된 후 설 치 를 클릭 하고 설치 가 완 료 될 때 까지 next 를 계속 클릭 하면 됩 니 다.설치 완료 후 명령 행 도구 (win + r, cmd 입력) 를 열 고 명령 행 에서 node - v 명령 을 실행 합 니 다. 출력 버 전 번 호 는 설치 성공 을 설명 합 니 다. 그렇지 않 으 면 설치 에 실패 하고 실패 원인 을 스스로 검사 합 니 다.
2. MongoDB 설치

nodejs mongodb        mongodb    ，         ，      [MongoDB][4]

2.1 다운로드 완료 후 설 치 를 더 블 클릭 하면 custom 사용자 정의 설치 디 렉 터 리 를 선택 할 수 있 습 니 다.
2.2 브 라 우 저 를 클릭 하여 설치 디 렉 터 리 선택
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 를 통 해 쿠키 를 분석 하 는 도 구 를 실행 합 니 다. req. cookies 를 통 해 전 송 된 쿠키 를 가 져 오고 npm install mul 을 대상 으로 전환 할 수 있 습 니 다.ter -- 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 설치 패키지 로 포장 합 니 다.
4. 총화 와 수확
이전에 서버 개발 을 체계적으로 배 운 적 이 없어 서 개발 과정 에서 많은 문제 에 부 딪 혔 습 니 다. 예 를 들 어 크로스 도 메 인 문제, 파일 읽 기와 쓰기, 파일 업로드, 파일 다운로드, 데이터 베이스 디자인 등 이 있 습 니 다. 이런 문제 들 은 저 를 좌절 시 키 지 않 았 고 오히려 싸 울 수록 용감 해 졌 습 니 다. 어떻게 든 해결 하려 고 했 습 니 다. 완 성 된 후에 클 라 우 드 서버 에 배치 되 어 친구 에 게 사용 하 는 것 을 추천 합 니 다. 성취 감 이 폭발 적 입 니 다.물론 이 시스템 은 신생아 입 니 다. 아직 부족 하고 최적화 해 야 할 부분 이 많 습 니 다. 여러분 의 아 낌 없 는 가르침 을 바 랍 니 다. 전체 프로젝트 github 주소:https://github.com/jaxlix/hap...안 드 로 이 드 패키지 QR 코드 다운로드: