我的做品：一個技術棧koa2+ mysql+react + antd的我的博客

時間 2019-11-08

標籤我的一個技術 koa2 koa mysql+react mysql react antd 博客欄目 MySQL 简体版

原文原文鏈接

前言

此項目是我的博客，有前端界面+後臺管理系統；目的是當作react和node的練手項目，同時還能夠了解到服務器nginx部署web站點以及備案和域名的基本操做流程。前端

項目預覽地址

https://www.lxsblog.cnvue

GitHub地址

https://github.com/LinWeb/blognode

體驗地址

博客主頁

http://39.105.133.130:8088/mysql

後臺管理系統，管理員帳號密碼：admin/admin

http://39.105.133.130:8088/adminreact

界面截圖

博客主頁

後臺系統主頁

技術棧

前端技術棧

react + antd + react-router + react-redux + axioswebpack

後端技術棧

koa2 + koa-router + mysql + sequelizeios

項目結構詳解

後端項目結構

├── app                             //前端項目
├── config                          //項目配置
│   ├── db.js                       //數據庫配置文件
│   └── index.js                    //token的key名
├── controller                      //控制器
├── lib                             //工具
│   ├── bcrypt.js                   //密碼加密
│   └── token.js                    //登陸token
├── middlewares                     //中間件
│   ├── checkAuth.js                //檢查是普通用戶仍是管理員
│   ├── checkToken.js               //檢查是否已經登陸用戶
│   └── errorHandler.js             //錯誤中間件
├── model                           //數據表模型
├── router                          //路由配置
├── app.js                          //項目入口
└── README.md                       //項目說明

前端項目結構

└── src                             //項目主體
    ├── assets                      //資源文件夾
    ├── component                   //組件庫
    │   ├── web                     //前臺界面組件庫
    │   ├── common                  //公共組件庫
    │   └── admin                   //後臺管理系統組件庫
    ├── config                      //配置文件夾
    │   ├── api.js                  //接口配置文件
    │   └── routerConfig.js         //路由配置
    ├── lib                         //放置插件和工具
    │   ├── axios.js                //axios全局配置
    │   ├── checkAuth.js            //檢查是不是普通用戶仍是管理員
    │   └── marked.js               //markdown轉換器
    ├── router                      //路由
    │   ├── admin.js                //後臺路由
    │   ├── index.js                //路由入口
    │   ├── main.js                 //路由中間件
    │   └── web.js                  //前臺路由
    ├── service                     //接口請求
    ├── store                       //數據倉庫
    ├── view                        //前臺頁面
    │   ├── web                     //前臺界面頁面
    │   ├── common                  //公共頁面
    │   └── admin                   //後臺管理系統頁面
    └── index.js                    //項目入口