node項(xiàng)目實(shí)戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個(gè)前端論壇

RobinQu 發(fā)布于2019-08-02 10:22 / 849人閱讀

摘要：項(xiàng)目初始化此時(shí)已經(jīng)創(chuàng)建好了文件了。接下來(lái)向添加數(shù)據(jù)庫(kù)操作語(yǔ)句，建表增刪改查。。。前端頁(yè)面開(kāi)發(fā)項(xiàng)目基本結(jié)構(gòu)搭建好后，就可以進(jìn)行前端頁(yè)面的編寫(xiě)了。

前言

在學(xué)習(xí)了koa2和express并寫(xiě)了一些demo后，打算自己寫(xiě)一個(gè)項(xiàng)目練練手，由于是在校生，沒(méi)什么好的項(xiàng)目做，即以開(kāi)發(fā)一個(gè)前端論壇為目標(biāo)，功能需求參照一下一些社區(qū)擬定，主要有：

登錄注冊(cè)

個(gè)人信息維護(hù)、頭像等基本信息

發(fā)表文章，富文本編輯器采用wangEditor插件，編輯、刪除文章,文章分類(lèi)等

文章評(píng)論、文章收藏、點(diǎn)贊等

支持文章分頁(yè)、評(píng)論分頁(yè)加載

關(guān)注取關(guān)用戶(hù)

資源（文件）上傳分享、下載、查看

學(xué)習(xí)資源推薦.....

作者個(gè)人日記
but。。。。由于種種原因，目前僅實(shí)現(xiàn)了部分功能，資源分享還沒(méi)寫(xiě)
項(xiàng)目運(yùn)行效果：http://120.77.211.212/home

項(xiàng)目技術(shù)棧應(yīng)用：node-koa2-ejs-bootstrap3—jquery， github地址：https://github.com/Jay214/myb...，如果覺(jué)得對(duì)你有幫助或者還看得下去，歡迎star~~鼓勵(lì)鼓勵(lì)我這前端渣渣輝。

開(kāi)發(fā)環(huán)境

node: v8.3.0

koa: ^2.4.1

mysql: 5.7.1

npm: 5.3.0及以上

如何運(yùn)行項(xiàng)目

將項(xiàng)目clone至本地 git clone git@github.com:Jay214/myblog-koa2.git
安裝模塊中間件 npm install
安裝mysql
mysql版本推薦使用5.7以下的，5.7的有個(gè)bug，圖形化界面推薦使用navicat for mysql
運(yùn)行可以安裝supervisor（npm install supervisor 項(xiàng)目運(yùn)行工具，開(kāi)啟后即處于監(jiān)聽(tīng)模式，修改文件后保存即可，無(wú)需再啟動(dòng)項(xiàng)目） node index 或npm supervisor index
localhost:8080/home 端口號(hào)可自行修改
若發(fā)現(xiàn)項(xiàng)目有存在什么bug或有比較好的建議歡迎多多提議，qq:2752402930。

準(zhǔn)備工作

由于koa2是基于es6的promise和es7的await/async語(yǔ)法，所以如果對(duì)es6/es7不懂的話(huà)請(qǐng)先過(guò)一遍文檔，后臺(tái)搭建數(shù)據(jù)庫(kù)是關(guān)鍵，所以請(qǐng)先安裝好mysql，mysql建議安裝5.7版本以下的，因?yàn)?.7.0版本有個(gè)bug，需要更改配置文件，具體若你們安裝的時(shí)候便知道了。

安裝node環(huán)境，使用node -v查看node版本，node需要較新版本能夠支持es6的promise和es7的await/async語(yǔ)法，現(xiàn)在node版本都會(huì)自帶npm的，所以不需要再去安裝npm。

項(xiàng)目結(jié)構(gòu)

1.config存放默認(rèn)文件(數(shù)據(jù)庫(kù)連接配置）
2.lib存放數(shù)據(jù)庫(kù)文件
3.middlewares存放判斷登陸注冊(cè)與否中間件
4.public存放靜態(tài)文件，js,引用bootstrap框架等文件
5.routers存放路由文件
6.views存放模板文件
7.index是程序主文件，定義接口，數(shù)據(jù)庫(kù)接口，引用模塊等
8.package.json項(xiàng)目的配置文件，包括項(xiàng)目名，作者，依賴(lài)，模塊等

項(xiàng)目用vscode開(kāi)發(fā)的，用起來(lái)很舒服，還沒(méi)嘗試過(guò)的小伙伴趕緊去試一下吧。
項(xiàng)目初始化：cd myblog1 -> npm init 此時(shí)已經(jīng)創(chuàng)建好了package.json文件了。

由于koa2是輕量級(jí)的框架，小巧精悍，所以我們?yōu)榱舜龠M(jìn)我們的開(kāi)發(fā)效率和方便性，我們需要安裝一些koa2的模塊中間件：

npm install i koa koa-bodyparser koa-mysql-session koa-router koa-session-minimal koa-static koa-views md5 moment mysql ejs koa-static-cache --save-dev

各模塊用處

koa node框架
koa-bodyparser 表單解析中間件
koa-mysql-session、koa-session-minimal 處理數(shù)據(jù)庫(kù)的中間件
koa-router 路由中間件
koa-static 靜態(tài)資源加載中間件
ejs 模板引擎
md5 密碼加密
moment 時(shí)間中間件
mysql 數(shù)據(jù)庫(kù)
koa-views 模板呈現(xiàn)中間件
koa-static-cache 文件緩存

項(xiàng)目基本框架搭建

配置數(shù)據(jù)庫(kù)連接
在config文件夾新建default.js :

const config = {   
 //啟動(dòng)端口    
port: 8080,
    //數(shù)據(jù)庫(kù)配置   
 database: {      
  DATABASE: "nodesql",        
  USERNAME: "root",       
 PASSWORD: "123456",      
  PORT: "3306",        
HOST: "localhost"  
  }
}
module.exports = config;

然后在lib文件夾新建mysql.js:

var mysql = require("mysql");
var config = require("../config/default.js")
//建立數(shù)據(jù)庫(kù)連接池
var pool = mysql.createPool({
    host: config.database.HOST,
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE
});
let query = function(sql, values) {    
return new Promise((resolve, reject)=>{
        pool.getConnection(function (err,connection) {
            if(err){      reject(err);
                }else{                
connection.query(sql,values,(err,rows)=>{ 
                   if(err){ 
                       reject(err);
                    }else{
                        resolve(rows); 
                   }                   
 connection.release(); //為每一個(gè)請(qǐng)求都建立一個(gè)connection使用完后調(diào)用connection.release(); 直接釋放資源。 
                                         //query用來(lái)操作數(shù)據(jù)庫(kù)表
                })
            } 
            }) 
   })}

這里建立了一個(gè)數(shù)據(jù)庫(kù)連接池和封裝了一個(gè)操作數(shù)據(jù)庫(kù)表的函數(shù)，如果對(duì)于數(shù)據(jù)庫(kù)連接有不懂的話(huà)請(qǐng)自行百度。

建立入口文件

在主目錄新建index.js，即項(xiàng)目入口文件：

const koa = require("koa");   //node框架
const path = require("path");  
const bodyParser = require("koa-bodyparser"); //表單解析中間件
const ejs = require("ejs");   //模板引擎
const session = require("koa-session-minimal");   //處理數(shù)據(jù)庫(kù)的中間件
const MysqlStore = require("koa-mysql-session");  //處理數(shù)據(jù)庫(kù)的中間件
const router = require("koa-router");     //路由中間件
const config = require("./config/default.js");    //引入默認(rèn)文件
const views = require("koa-views");   //模板呈現(xiàn)中間件
const koaStatic = require("koa-static");  //靜態(tài)資源加載中間件
const staticCache = require("koa-static-cache")
const app = new koa();

//session存儲(chǔ)配置，將session存儲(chǔ)至數(shù)據(jù)庫(kù)
const sessionMysqlConfig = {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

//配置session中間件
app.use(session({
    key: "USER_SID",
    store: new MysqlStore(sessionMysqlConfig)
}))

//配置靜態(tài)資源加載中間件
app.use(koaStatic(
    path.join(__dirname , "./public")
))

//配置服務(wù)端模板渲染引擎中間件
app.use(views(path.join(__dirname, "./views"),{
    extension: "ejs"
}))

//使用表單解析中間件
app.use(bodyParser({
    "formLimit":"5mb",
    "jsonLimit":"5mb",
    "textLimit":"5mb"
}));

//使用新建的路由文件
//登錄
app.use(require("./routers/signin.js").routes())
//注冊(cè)
app.use(require("./routers/signup.js").routes())
//退出登錄
app.use(require("./routers/signout.js").routes())
//首頁(yè)
app.use(require("./routers/home.js").routes())
//個(gè)人主頁(yè)
app.use(require("./routers/personal").routes())
//文章頁(yè)
app.use(require("./routers/articles").routes())
//資源分享
app.use(require("./routers/share").routes())
//個(gè)人日記
app.use(require("./routers/selfNote").routes())
//監(jiān)聽(tīng)在8080端口
app.listen(8080) 

console.log(`listening on port ${config.port}`)

上面代碼都有注釋?zhuān)揖筒灰灰徽f(shuō)明了，由于資源分享和個(gè)人日記還沒(méi)寫(xiě)，所以暫時(shí)統(tǒng)一share...替代。

接下來(lái)向mysql.js添加數(shù)據(jù)庫(kù)操作語(yǔ)句，建表、增刪改查。。。

var users = `create table if not exists users(
    id INT(200) NOT NULL AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    pass VARCHAR(40) NOT NULL,
    avator VARCHAR(100) DEFAULT "default.jpg", 
    job VARCHAR(40),
    company VARCHAR(40),
    introdu VARCHAR(255),
    userhome VARCHAR(100),
    github VARCHAR(100),
    PRIMARY KEY (id)
);`

var posts = `create table if not exists posts(
    id INT(200) NOT NULL AUTO_INCREMENT,
        name VARCHAR(100) NOT NULL,
        title VARCHAR(100) NOT NULL,
        content TEXT NOT NULL,
        uid INT(200) NOT NULL,
        moment VARCHAR(40) NOT NULL,
        comments VARCHAR(255) NOT NULL DEFAULT "0",
        pv VARCHAR(40) NOT NULL DEFAULT "0",
        likes INT(200) NOT NULL DEFAULT "0",
        type VARCHAR(20) NOT NULL,
        avator VARCHAR(100),
        collection INT(200) NOT NULL DEFAULT "0", 
        PRIMARY KEY (id) ,
        FOREIGN KEY (uid) REFERENCES users(id)
        ON DELETE CASCADE

);`

var comment= `create table if not exists comment(
 id INT(200) NOT NULL AUTO_INCREMENT,
 name VARCHAR(100) NOT NULL,
 content TEXT NOT NULL,
 moment VARCHAR(40) NOT NULL,
 postid INT(200) NOT NULL,
 avator VARCHAR(100),
 PRIMARY KEY ( id ),
 FOREIGN KEY (postid) REFERENCES posts(id)
 ON DELETE CASCADE
);`

var likes = `create table if not exists likes(
    id INT(200) NOT NULL AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    postid INT(200) NOT NULL,
    PRIMARY KEY (id),
    FOREIGN KEY (postid) REFERENCES posts(id)
    ON DELETE CASCADE
);`
 var collection = `create table if not exists collection(
     id INT(200) NOT NULL AUTO_INCREMENT,
     uid VARCHAR(100) NOT NULL,
     postid INT(200) NOT NULL,
     PRIMARY KEY (id),
     FOREIGN KEY (postid) REFERENCES posts(id) 
     ON DELETE CASCADE
 );`
 var follow = `create table if not exists follow(
         id INT(200) NOT NULL AUTO_INCREMENT,
         uid INT(200) NOT NULL,  
         fwid INT(200) NOT NULL DEFAULT "0",
         PRIMARY KEY (id),
         FOREIGN KEY (uid) REFERENCES users(id)
         ON DELETE CASCADE
     )
     `

let createTable = function(sql){
    return query(sql, []);
}

//建表
createTable(users);
createTable(posts);
createTable(comment);
createTable(likes);
createTable(collection);
createTable(follow);
//createTable(follower);
//注冊(cè)用戶(hù)
let insertData = function(value){
    let _sql = "insert into users(name,pass) values(?,?);"
    return query(_sql,value);
}
//更新頭像
let updateUserImg = function(value){
    let _sql = "update users set avator=? where id=?"
    return query(_sql,value);
}
//更新用戶(hù)信息
let updateUser = function(value){
    let _sql = "update users set name=?,job=?,company=?,introdu=?,userhome=?,github=? where id=?"
    return query(_sql,value);
}
//發(fā)表文章
let insertPost = function(value){
    let _sql = "insert into posts(name,title,content,uid,moment,type,avator) values(?,?,?,?,?,?,?);"
    return query(_sql,value);
}

//更新文章評(píng)論數(shù)
let updatePostComment = function(value){
    let _sql = "update posts set comments=? where id=?"
    return query(_sql,value);
}
.......

總共六張表：用戶(hù)表、文章表、文章評(píng)論表、文章收藏表、文章點(diǎn)贊表、用戶(hù)關(guān)注表。

這里引用了外鍵，但是現(xiàn)在的開(kāi)發(fā)不推薦使用外鍵了，所以你們可以自行修改，這里在項(xiàng)目第一次啟動(dòng)時(shí)會(huì)出現(xiàn)數(shù)據(jù)庫(kù)創(chuàng)建失?。ㄓ捎谕怄I原因），只要重新啟動(dòng)就ok了，如果對(duì)mysql還不了解的，這里附送大家一個(gè)傳送門(mén)：mysql入門(mén)視頻教程密碼：c2q7 。

前端頁(yè)面開(kāi)發(fā)

項(xiàng)目基本結(jié)構(gòu)搭建好后，就可以進(jìn)行前端頁(yè)面的編寫(xiě)了。用node開(kāi)發(fā)web時(shí)我們一般會(huì)配合模板引擎，這個(gè)項(xiàng)目我采用的是ejs，除了ejs之外較為常用的還有jade,但是jade相對(duì)ejs來(lái)說(shuō)的話(huà)代碼結(jié)構(gòu)不夠清晰。關(guān)于ejs語(yǔ)法，這里做個(gè)簡(jiǎn)單的介紹：
header.ejs



    
        
        Myblog

nav.ejs

 
   
   
       
           
               首頁(yè)
                資源分享
                推薦
                個(gè)人日記
               關(guān)于作者
               
             
               <% if(session.user){ %>
                   
                       
                      
                       
                           主頁(yè)
                        
                           寫(xiě)文章
                           登出
                       
                   
                   
                   <% }else{ %>
                       
                                注冊(cè) | 登錄
                          
                           
                           <% } %>


    ×
    
        用戶(hù)注冊(cè)
        來(lái)吧騷年們!
    
    

            
                
            
        
            
        
        
            
        
            
            
            

    
    
       
           
       
       
           
       
      
          
      
    
    
        已有賬號(hào)？
        登錄

footer.ejs

header為頁(yè)面頭部結(jié)構(gòu)，nav為頁(yè)面導(dǎo)航條，login為登錄、注冊(cè)內(nèi)容、footer為頁(yè)面頂部結(jié)構(gòu)?？梢钥吹轿以趀js文件里有很多的if else 判斷語(yǔ)句，這是根據(jù)session來(lái)判斷用戶(hù)是否登錄渲染不同的內(nèi)容?，F(xiàn)在我們需要我們的頁(yè)面編寫(xiě)樣式：分別是home.css和index.css

為了增強(qiáng)對(duì)原生js的理解，在項(xiàng)目里我用了大量的原生ajax(顯然jquery封裝的ajax比較好哈哈），因此這里先編寫(xiě)一個(gè)原生ajax請(qǐng)求：

ajax.js

var xhr = null;
    function ajax(method,url,data,types) {   //封裝一個(gè)ajax方法
      //  var text;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }else {
            alert("你的瀏覽器不支持ajax");
            return false;
        }
      
        xhr.onerror = function (err) {
            alert("some err have hapened:",err);
        }
        xhr.open(method,url,true);
        if(method=="post"){
            xhr.setRequestHeader("Content-type",types);
         // xhr.setRequestHeader("Conent-Type","application/json""application/x-www-form-urlencoded")
        }
        try{
            setTimeout(()=>{
                xhr.send(data);
        },0);
        }catch(err) {
            alert("some error have hapened in font:",err);
        }
        return xhr;
    }

實(shí)現(xiàn)登錄注冊(cè)

前端基本頁(yè)面開(kāi)發(fā)好后，我們就可以寫(xiě)后臺(tái)登錄接口了：

注冊(cè)：signup.js

var router = require("koa-router")();
var userModel = require("../lib/mysql.js");
var md5 = require("md5")

    // 注冊(cè)頁(yè)面
  
    // post 注冊(cè)
router.post("/signup", async(ctx, next) => {
    console.log(ctx.request.body)
    var user = {
        name: ctx.request.body.username,
        pass: ctx.request.body.pass,
        repeatpass: ctx.request.body.repeatpass
    }
    let flag = 0;
    await userModel.findDataByName(user.name)
        .then(result => {
            console.log(result)
            if (result.length) {
               
                    //處理err
                    console.log("用戶(hù)已存在")
                    ctx.body = {
                        code: 1
                    };               
                
            } else if (user.pass !== user.repeatpass || user.pass == "") {
                ctx.body = {        //應(yīng)把這個(gè)邏輯放到前端
                    code: 2
                };

            } else {
                flag = 1;             
                
            }
        })
    if(flag==1){
        let res = await  userModel.insertData([user.name, md5(user.pass + "asd&$BH&*") ])
       console.log(res.insertId)
        await  userModel.findDataByName(user.name)
        .then((result)=>{
            
          //  var res = JSON.parse(JSON.stringify(result))
            console.log(result[0]["avator"])
            ctx.session.id = res.insertId;
            ctx.session.user=user.name;
            ctx.session.avator = "default.jpg";
            ctx.body = {
            code: 3
            };
            console.log("注冊(cè)成功")
         })
    }

})

module.exports = router

密碼采用md5加密，注冊(cè)后為用戶(hù)創(chuàng)建session并將其添加到數(shù)據(jù)庫(kù)，寫(xiě)完別忘了在最后加上module.exports = router將接口暴露出來(lái)。

登錄：signin.js

var router = require("koa-router")();
var userModel = require("../lib/mysql.js")
var md5 = require("md5")

router.post("/signin", async(ctx, next) => {
    console.log(ctx.request.body)
    var name = ctx.request.body.username;
    var pass = ctx.request.body.pass;

    await userModel.findDataByName(name)
        .then(result => {

            var res = JSON.parse(JSON.stringify(result))

            if (name === res[0]["name"]&&(md5(pass + "asd&$BH&*") === res[0]["pass"])) {
                    console.log("登錄成功")
                    ctx.body = {
                        code: 1,
                    }
    
                    ctx.session.user = res[0]["name"]
                    ctx.session.id = res[0]["id"]
                    ctx.session.avator = res[0]["avator"]   

            }else if(md5(pass + "asd&$BH&*") != res[0]["pass"]){
                ctx.body = {
                    code: 2 //密碼錯(cuò)誤
                }
            }
        }).catch(err => {
            ctx.body = {
                code: 3 //賬號(hào)不存在+
            }
            console.log("用戶(hù)名或密碼錯(cuò)誤!")

        })

})

module.exports = router

退出登錄：signout.js

//使用新建的路由文件
//登錄
app.use(require("./routers/signin.js").routes())
//注冊(cè)
app.use(require("./routers/signup.js").routes())
//退出登錄
app.use(require("./routers/signout.js").routes())

登錄注冊(cè)完成，由于學(xué)習(xí)繁忙，內(nèi)容只能一點(diǎn)一點(diǎn)寫(xiě)了，后續(xù)內(nèi)容持續(xù)更新。。。

云數(shù)據(jù)庫(kù)MySQL 用阿里云搭建一個(gè)文件服務(wù)器項(xiàng)目實(shí)戰(zhàn) 怎么部署node項(xiàng)目前端實(shí)戰(zhàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/52309.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

RobinQu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

0基礎(chǔ)C語(yǔ)言保姆教學(xué)——第五節(jié) 數(shù)組

閱讀 3971·2021-11-24 09:38
基于C-V2X的闖紅燈預(yù)警方法與流程

閱讀 3190·2021-11-17 09:33
Megalayer雙11香港服務(wù)器和美國(guó)服務(wù)器特惠（獨(dú)立服務(wù)器月付299元）

閱讀 3943·2021-11-10 11:48
#便宜VPS#Fiberia：1核/4G/50G SSD/2T流量/1Gbps/荷蘭/月付$2.9

閱讀 1294·2021-10-14 09:48
CSS三欄布局的四種方法

閱讀 3189·2019-08-30 13:14
CSS中position屬性（sticky）

閱讀 2601·2019-08-29 18:37
CSS 入門(mén)指南：（1）工作原理

閱讀 3476·2019-08-29 12:38
不簡(jiǎn)單的前端性能優(yōu)化

閱讀 1475·2019-08-29 12:30

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

node項(xiàng)目實(shí)戰(zhàn)-用node-koa2-mysql-bootstrap搭建一個(gè)前端論壇

用戶(hù)注冊(cè)

來(lái)吧騷年們!

相關(guān)文章