前言

在學習了koa2和express並寫了一些demo後，打算自己寫一個專案練練手，由於是在校生，沒什麼好的專案做，即以開發一個前端論壇為目標，功能需求參照一下一些社群擬定，主要有：

1. 登入註冊
2. 個人資訊維護、頭像等基本資訊
3. 發表文章，富文字編輯器採用wangEditor外掛，編輯、刪除文章,文章分類等
4. 文章評論、文章收藏、點贊等
5. 支援文章分頁、評論分頁載入
6. 關注取關使用者
7. 資源（檔案）上傳分享、下載、檢視
8. 學習資源推薦.....

作者個人日記
but。。。。由於種種原因，目前僅實現了部分功能，資源分享還沒寫
專案執行效果：http://120.77.211.212/home

專案技術棧應用：node-koa2-ejs-bootstrap3—jquery， github地址：

開發環境

node: v8.3.0

koa: ^2.4.1

mysql: 5.7.1

npm: 5.3.0及以上

如何執行專案

將專案clone至本地 git clone [email protected]:Jay214/myblog-koa2.git
安裝模組中介軟體 npm install
安裝mysql
mysql版本推薦使用5.7以下的，5.7的有個bug，圖形化介面推薦使用navicat for mysql
執行可以安裝supervisor（npm install supervisor 專案執行工具，開啟後即處於監聽模式，修改檔案後儲存即可，無需再啟動專案） node index 或npm supervisor index
localhost:8080/home 埠號可自行修改
若發現專案有存在什麼bug或有比較好的建議歡迎多多提議，qq:2752402930。

準備工作

由於koa2是基於es6的promise和es7的await/async語法，所以如果對es6/es7不懂的話請先過一遍文件，後臺搭建資料庫是關鍵，所以請先安裝好mysql，mysql建議安裝5.7版本以下的，因為5.7.0版本有個bug，需要更改配置檔案，具體若你們安裝的時候便知道了。

安裝node環境，使用node -v檢視node版本，node需要較新版本能夠支援es6的promise和es7的await/async語法，現在node版本都會自帶npm的，所以不需要再去安裝npm。

專案結構

1.config存放預設檔案(資料庫連線配置）
2.lib存放資料庫檔案
3.middlewares存放判斷登陸註冊與否中介軟體
4.public存放靜態檔案，js,引用bootstrap框架等檔案
5.routers存放路由檔案
6.views存放模板檔案
7.index是程式主檔案，定義介面，資料庫介面，引用模組等
8.package.json專案的配置檔案，包括專案名，作者，依賴，模組等

專案用vscode開發的，用起來很舒服，還沒嘗試過的小夥伴趕緊去試一下吧。
專案初始化：cd myblog1 -> npm init 此時已經建立好了package.json檔案了。

由於koa2是輕量級的框架，小巧精悍，所以我們為了促進我們的開發效率和方便性，我們需要安裝一些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 處理資料庫的中介軟體
koa-router 路由中介軟體
koa-static 靜態資源載入中介軟體
ejs 模板引擎
md5 密碼加密
moment 時間中介軟體
mysql 資料庫
koa-views 模板呈現中介軟體
koa-static-cache 檔案快取

專案基本框架搭建

配置資料庫連線
在config資料夾新建default.js :

const config = {   
 //啟動埠    
port: 8080,
    //資料庫配置   
 database: {      
  DATABASE: 'nodesql',        
  USERNAME: 'root',       
 PASSWORD: '123456',      
  PORT: '3306',        
HOST: 'localhost'  
  }
}
module.exports = config;  

var mysql = require('mysql');
var config = require('../config/default.js')
//建立資料庫連線池
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(); //為每一個請求都建立一個connection使用完後呼叫connection.release(); 直接釋放資源。 
                                         //query用來操作資料庫表
                })
            } 
            }) 
   })}

這裡建立了一個數據庫連線池和封裝了一個操作資料庫表的函式，如果對於資料庫連線有不懂的話請自行百度。

建立入口檔案

在主目錄新建index.js，即專案入口檔案：

const koa = require("koa");   //node框架
const path = require("path");  
const bodyParser = require("koa-bodyparser"); //表單解析中介軟體
const ejs = require("ejs");   //模板引擎
const session = require("koa-session-minimal");   //處理資料庫的中介軟體
const MysqlStore = require("koa-mysql-session");  //處理資料庫的中介軟體
const router = require("koa-router");     //路由中介軟體
const config = require('./config/default.js');    //引入預設檔案
const views = require("koa-views");   //模板呈現中介軟體
const koaStatic = require("koa-static");  //靜態資源載入中介軟體
const staticCache = require('koa-static-cache')
const app = new koa();

//session儲存配置，將session儲存至資料庫
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)
}))

//配置靜態資源載入中介軟體
app.use(koaStatic(
    path.join(__dirname , './public')
))

//配置服務端模板渲染引擎中介軟體
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())
//註冊
app.use(require('./routers/signup.js').routes())
//退出登入
app.use(require('./routers/signout.js').routes())
//首頁
app.use(require('./routers/home.js').routes())
//個人主頁
app.use(require('./routers/personal').routes())
//文章頁
app.use(require('./routers/articles').routes())
//資源分享
app.use(require('./routers/share').routes())
//個人日記
app.use(require('./routers/selfNote').routes())
//監聽在8080埠
app.listen(8080) 

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

上面程式碼都有註釋，我就不一一說明了，由於資源分享和個人日記還沒寫，所以暫時統一share...替代。

接下來向mysql.js新增資料庫操作語句，建表、增刪改查。。。

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);
//註冊使用者
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);
}
//更新使用者資訊
let updateUser = function(value){
    let _sql = "update users set name=?,job=?,company=?,introdu=?,userhome=?,github=? where id=?"
    return query(_sql,value);
}
//發表文章
let insertPost = function(value){
    let _sql = "insert into posts(name,title,content,uid,moment,type,avator) values(?,?,?,?,?,?,?);"
    return query(_sql,value);
}

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

總共六張表：使用者表、文章表、文章評論表、文章收藏表、文章點贊表、使用者關注表。

這裡引用了外來鍵，但是現在的開發不推薦使用外來鍵了，所以你們可以自行修改，這裡在專案第一次啟動時會出現資料庫建立失敗（由於外來鍵原因），只要重新啟動就ok了，如果對mysql還不瞭解的，這裡附送大家一個傳送門：mysql入門視訊教程 密碼：c2q7 。

專案基本框架搭建好後，我們就可以開始開發頁面和介面。

由於學業繁忙，後續內容持續更新。。。