Node.js + Koa2 + MySQL + Vue.js 實戰(zhàn)開發(fā)一套完整個人博客項目網(wǎng)站

wangxinarhat 發(fā)布于2019-08-23 18:21 / 3773人閱讀

摘要：前端打造了前端網(wǎng)站和后臺管理系統(tǒng)。根目錄都是開發(fā)源代碼，根目錄下的文件夾下都是前端網(wǎng)站項目源代碼，根目錄下的文件夾下都是后臺管理系統(tǒng)的源代碼。后臺管理系統(tǒng)使用在根目錄下進入項目，安裝包，執(zhí)行命令，啟動服務瀏覽器打開即可以訪問。

這是個什么的項目？

使用 Node.js + Koa2 + MySQL + Vue.js 實戰(zhàn)開發(fā)一套完整個人博客項目網(wǎng)站。

博客線上地址：www.boblog.com

Github地址：https://github.com/liangfengbo/nodejs-koa-blog

解決了什么問題？

服務端：使用 Node.js 的 Koa2 框架二次開發(fā) Restful API。

前端：Vue.js 打造了前端網(wǎng)站和后臺管理系統(tǒng)。

項目包含什么功能？

Koa2服務端

管理員與權限控制

文章

文章分類

評論文章

前端博客網(wǎng)站 Vue.js

后臺管理系統(tǒng) Vue.js

項目的特點

Koa 與 Koa 二次開發(fā)API

多 koa-router 拆分路由

require-directory 自動路由加載

異步編程 - async/await

異步異常鏈與全局異常處理

Sequelize ORM 管理 MySQL

JWT 權限控制中間件

參數(shù)驗證器 Validator

nodemon 修改文件自動重啟

前后端分離

使用 Vue.js 搭建前端網(wǎng)站和后臺管理系統(tǒng)

如何使用和學習？ 數(shù)據(jù)庫

啟動項目前一定要在創(chuàng)建好 boblog 數(shù)據(jù)庫。

# 登錄數(shù)據(jù)庫
$ mysql -uroot -p密碼

# 創(chuàng)建 wxapp 數(shù)據(jù)庫
$ CREATE DATABASE IF NOT EXISTS boblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

克隆項目

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

根目錄都是 Node.js + Koa2 API開發(fā)源代碼，根目錄下的 web 文件夾下都是前端網(wǎng)站項目源代碼，根目錄下的 admin 文件夾下都是后臺管理系統(tǒng)的源代碼。

# 克隆項目代碼
$ git clone https://github.com/liangfengbo/nodejs-koa-blog.git

# 進入koa項目根目錄
$ cd nodejs-koa-blog

# 安裝包
$ npm install

# 運行服務
$ npm run dev

# 打開瀏覽器輸入回車：http://localhost:3000

// 前端項目使用
1. 在根目錄下進入web項目：cd web，
2. 安裝包，執(zhí)行: npm install 命令，
3. 啟動服務: npm run dev; 瀏覽器打開：http://localhost:8080/ 即可以訪問。

// 后臺管理系統(tǒng)使用
1. 在根目錄下進入admin項目：cd admin，
2. 安裝包，執(zhí)行: npm install 命令，
3. 啟動服務: npm run dev; 瀏覽器打開：http://localhost:8083/ 即可以訪問。

接口說明（重要）

項目的所有接口文檔都這里，可以逐個文檔看。

管理員接口文檔說明

文章接口文檔說明

分類接口文檔說明

評論接口文檔說明

License

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

喜歡或對你有幫助的話，請你點一個星星 star 鼓勵我，或者您有更好的建議和意見，請?zhí)岢鰜砀嬷遥梢粤粞?Issues。希望能夠幫助到你學習！Thanks！

MIT, by 梁鳳波

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

轉載請注明本文地址：http://m.hztianpu.com/yun/105092.html

2017年1月前端月報

摘要：平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報提交原則：技...

FuisonDesign 2019-08-29 12:35 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報提交原則：技...

ivyzhang 2019-08-20 16:29 評論0 收藏0
2017年1月前端月報

摘要：平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。年以前看這個網(wǎng)址概況在線地址前端開發(fā)群月報提交原則技術文章新的為主。平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 概況在線地址：http://www.kancloud.cn/jsfront/month/82796 JS前端開發(fā)群月報提交原則：技...

CloudwiseAPM 2019-08-01 16:48 評論0 收藏0