一、這是個(gè)什么的項(xiàng)目？

基于 Node.js Koa2 實(shí)戰(zhàn)開(kāi)發(fā)的一套完整的博客項(xiàng)目網(wǎng)站，使用 Koa2 二次開(kāi)發(fā)一套適合多端的 RESTful API，同時(shí)配套完整的后臺(tái)管理系統(tǒng)，且前端展示既有基于 ejs 服務(wù)端渲染，也有基于 Vue.js 前后端分離的 2 套前端網(wǎng)站。

二、項(xiàng)目包含什么功能？

2.1.Node.js Koa2服務(wù)端 RESTful API

管理員與權(quán)限控制接口

文章管理接口

評(píng)論/回復(fù)功能接口

分類接口

廣告接口

2.2.博客前端展示網(wǎng)站

ejs 服務(wù)端渲染

Vue.js 前后端分離

2.2.后臺(tái)管理系統(tǒng)

[x] 使用 Vue.js iviewui design 搭建的后臺(tái)管理系統(tǒng)

2.3.優(yōu)勢(shì)

使用精小而強(qiáng)大的 Node.js Koa2 框架做服務(wù)端 API 接口。

前端既有服務(wù)端渲染，也有前后端分離，且做了大量的優(yōu)化工作，前端展示網(wǎng)站打開(kāi)快。

性能優(yōu)化方面的工作：

服務(wù)端使用了緩存機(jī)制，減少服務(wù)器的請(qǐng)求壓力，如Redis 緩存，HTTP緩存

使用了 CND 加速，靜態(tài)文件存儲(chǔ)在七牛服務(wù)器上

ejs 服務(wù)端渲染盡量減少文件的引入，減少對(duì) DOM的操作，且封裝使用了圖片懶加載，事件防抖和節(jié)流控制瀏覽器滾動(dòng)監(jiān)聽(tīng)事件。

Vue.js 項(xiàng)目使用了模塊按需加載，使用瀏覽器緩存機(jī)制減少對(duì)服務(wù)器請(qǐng)求的壓力

...

2.4.知識(shí)點(diǎn)

服務(wù)端：Node.js, Koa, MySQL, Sequelize, Redis

前端服務(wù)端渲染：ejs, jQuery, Bootstrap, 體驗(yàn)網(wǎng)址：www.boblog.com

前后端分離：Vue.js, iviewui, 體驗(yàn)網(wǎng)址：vue.boblog.com

后端管理系統(tǒng)：Vue.js, iviewui

性能優(yōu)化

非常適合想用 Node.js Koa2 做網(wǎng)站的朋友，相信你一定能學(xué)到知識(shí)。

三、如何學(xué)習(xí)？

3.1.數(shù)據(jù)庫(kù)

啟動(dòng)項(xiàng)目前一定要在創(chuàng)建好 boblog 數(shù)據(jù)庫(kù)，以下是執(zhí)行數(shù)據(jù)庫(kù)命令：

# 登錄數(shù)據(jù)庫(kù)

$ mysql -uroot -p密碼

# 創(chuàng)建 wxapp 數(shù)據(jù)庫(kù)

$ CREATE DATABASE IF NOT EXISTS boblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3.2.修改 Koa2 項(xiàng)目數(shù)據(jù)庫(kù)配置

請(qǐng)?jiān)诟夸浵碌?|——config/config.js 文件下修改您本地的數(shù)據(jù)庫(kù)名字(boblog)和數(shù)據(jù)庫(kù)密碼 ( password )。

3.3.克隆項(xiàng)目

首先使克隆項(xiàng)目，然后進(jìn)入項(xiàng)目根目錄使用命令安裝包，最后命令啟動(dòng)項(xiàng)目，代碼會(huì)根據(jù)模型自動(dòng)創(chuàng)建數(shù)據(jù)庫(kù)表的。

根目錄都是 Node.js + Koa2 API 開(kāi)發(fā)源代碼，重點(diǎn)是 app 文件夾下的 api 開(kāi)發(fā)；根目錄下的 view 文件夾是 ejs 渲染項(xiàng)目；web 文件夾下都是前端網(wǎng)站項(xiàng)目源代碼；根目錄下的 admin 文件夾下都是后臺(tái)管理系統(tǒng)的源代碼。

以下是啟動(dòng)服務(wù)端項(xiàng)目的操作命令：

# 克隆項(xiàng)目代碼

$ git clone https://github.com/liangfengbo/nodejs-koa-blog.git

# 進(jìn)入項(xiàng)目根目錄

$ cd nodejs-koa-blog

# 安裝依賴包

$ npm install

# 啟動(dòng) Node.js Koa2 項(xiàng)目

$ npm run dev

打開(kāi)瀏覽器輸入回車：http://localhost:3000 可以看到服務(wù)端渲染的前端網(wǎng)站，當(dāng)然可能該網(wǎng)站是個(gè)空數(shù)據(jù)網(wǎng)站，可以查看目錄下的 ./app/api/v1 下的接口或者看 doc 目錄下的 markdown 接口文檔，在 postman 測(cè)試接口。

以下是啟動(dòng)后臺(tái)管理系統(tǒng)的操作命令：

# 啟動(dòng)后臺(tái)管理系統(tǒng)

1. 在根目錄下進(jìn)入admin項(xiàng)目：cd admin，

2. 安裝包，執(zhí)行: npm install 命令，

3. 啟動(dòng)服務(wù): npm run dev; 瀏覽器打開(kāi)：http://localhost:8083/ 即可以訪問(wèn)。

以下啟動(dòng) Vue.js 前端項(xiàng)目

# 啟動(dòng) Vue.js 前端項(xiàng)目

1. 在根目錄下進(jìn)入web項(xiàng)目：cd web，

2. 安裝依賴包，執(zhí)行: yarn install 或者 npm install 命令，

3. 啟動(dòng)項(xiàng)目: yarn serve 或者 npm run serve; 瀏覽器打開(kāi)：http://localhost:8080/ 即可以訪問(wèn)。

四、接口說(shuō)明(重要)

項(xiàng)目的所有接口文檔都這里，可以逐個(gè)文檔看。

五、FAQ

沒(méi)有yarn環(huán)境，npm 可以嗎？

答：可以的，建議使用 yarn，yarn 比 npm 速度快，主要是安裝版本統(tǒng)一。

啟動(dòng) Koa2 項(xiàng)目報(bào)錯(cuò)，請(qǐng)問(wèn)原因？

答：首先，請(qǐng)檢查一下使用 npm 或 yarn 安裝依賴包沒(méi)。然后，再請(qǐng)檢查一下確保安裝好數(shù)據(jù)庫(kù)，新建好數(shù)據(jù)庫(kù)：boblog，請(qǐng)看上面的數(shù)據(jù)庫(kù)配置。最后看下啟動(dòng)打印日志是否有報(bào)錯(cuò)的信息。

... 更多問(wèn)題請(qǐng)到 Issues查閱，或者有問(wèn)題請(qǐng)到 Issues 提問(wèn)。

License

項(xiàng)目已實(shí)現(xiàn)管理員、權(quán)限管理、文章、分類、評(píng)論等接口，前端模板網(wǎng)站和后臺(tái)管理系統(tǒng)。自己可以根據(jù)項(xiàng)目代碼學(xué)習(xí)，可以到 postman 軟件中測(cè)試API或?qū)W習(xí)。

喜歡或?qū)δ阌袔椭脑?#xff0c;請(qǐng)你點(diǎn)一個(gè)星星 star 鼓勵(lì)我，或者您有更好的建議和意見(jiàn)，請(qǐng)?zhí)岢鰜?lái)告知我，可以留言 Issues。希望能夠幫助到你學(xué)習(xí)！Thanks！共勉！

MIT, by 梁鳳波

總結(jié)

以上是生活随笔為你收集整理的node koa2 mysql_Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。