ONE-sys 整合先後端腳手架 koa2 + pm2 + vue-cli3.0 + element

項目地址 github.com/fanshyiis/O…

本腳手架主要致力於前端工程師的快速開發、一鍵部署等快捷開發框架，主要目的是想讓前端工程師在一個阿里雲服務器上能夠快速開發部署本身的項目。本着前端後端融合統一的邏輯進行一些輪子的整合、並加入了本身的一些腳手架工具，第一次作腳手架的開發，若有問題，請在issue上提出，若是有幫助到您的地方，請不吝賜個star~

#####技術棧選擇

• 前端整合：vue-cli3.0、axios、element等
• 命令行工具整合：commander、chalk、figlet、shelljs等
• 後端整合：node、 koa二、koa-mysql-session、mysql等
• 服務器整合：nginx、pm二、node等

#####基本功能模塊實現

• 聚合分離 所謂聚合分離，首先是‘聚合’，聚合代碼，聚合插件，作到一個項目就可完成前端端代碼的編寫，打包上線等功能的聚合。其後是‘分離’。先後端分離。雖然代碼會在同一個項目工程中可是先後端互不干擾，分別上線，區別於常規的ejs等服務端渲染的模式，作到前端徹底分離
• 一鍵部署 基於本地的命令行工具，能夠快速打包view端的靜態文件並上傳到阿里雲服務器，也可快速上傳server端的文件到服務器文件夾，配合pm2的監控功能進行代碼的熱更新，無縫更新接口邏輯
• 快速迭代 提供基本的使用案例，包括前端的view層的容器案例與組件案例，組件的api設定以及集合了axios的中間件邏輯，方便用戶快速搭建本身的項目，代碼清晰，易於分析與修改，server端對mysql鏈接池進行簡單的封裝，完成鏈接後及時釋放，對table表格與函數進行分層，代碼分層爲路由層、控制器層、sql操做層

#####基本模塊舉例 1.登陸頁面

• 登陸 -正確反饋 錯誤反饋 登陸成功後session的設定
• 註冊 -重名檢測 正確反饋 錯誤反饋

2. 主要模塊功能

• 模塊增刪查改基本功能的實現

3. 後臺koa2服務模塊

• 配合koa-mysql-session進行session的設定儲存
• checkLogin中間件的實現
• cors跨域白名單的設定
• middlewer 中間件的設定
• mysql鏈接池的封裝 等等。。。

4. 服務端

• nginx 的基本配置與前端端分離的配置
• pm2 多實例構建配置文件的配置文件 pm2config.json

#####使用流程

1. 本地調試

• 安裝mysql （過程請百度）

// 進入sql命令行
$ mysql -u root -p
// 建立名爲nodesql的數據庫
$ create database nodesql
複製代碼

• 安裝pm2 (過程請百度)
• 拉取項目代碼

git clone https://github.com/fanshyiis/ONE-sys
cd ONE-sys
// 安裝插件
cnpm i 或 npm i 或者 yarn add
// 安裝link
sudo npm link
//  而後就能使用命令行工具了
one start
// 或者不肯意使用命令行的同窗能夠
yarn run serve
複製代碼

#####主要代碼解析

• 代碼邏輯

  

• server

  

• bin

one -h
複製代碼

• 啓動效果

啓動項目
yarn run v1.3.2
$ pm2 restart ./server/index.js && vue-cli-service serve
Use --update-env to update environment variables
[PM2] Applying action restartProcessId on app [./server/index.js](ids: 0,1)
[PM2] [index](0) ✓
[PM2] [one-sys](1) ✓
┌──────────┬────┬─────────┬─────────┬───────┬────────┬─────────┬────────┬─────┬───────────┬───────────┬──────────┐
│ App name │ id │ version │ mode    │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user      │ watching │
├──────────┼────┼─────────┼─────────┼───────┼────────┼─────────┼────────┼─────┼───────────┼───────────┼──────────┤
│ index    │ 0  │ 0.1.0   │ fork    │ 77439 │ online │ 2640    │ 0s     │ 0%  │ 15.4 MB   │ koala_cpx │ disabled │
│ one-sys  │ 1  │ 0.1.0   │ cluster │ 77438 │ online │ 15      │ 0s     │ 0%  │ 20.2 MB   │ koala_cpx │ disabled │
└──────────┴────┴─────────┴─────────┴───────┴────────┴─────────┴────────┴─────┴───────────┴───────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app
 INFO  Starting development server...
 98% after emitting CopyPlugin DONE  Compiled successfully in 10294ms16:31:55


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.7.69:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
複製代碼

頁面展現

2. 線上調試

• 阿里雲服務器文件存放目錄

[root@iZm5e6naugml8q0362d8rfZ ~]# cd /home/
[root@iZm5e6naugml8q0362d8rfZ home]# ls
dist  server  test
[root@iZm5e6naugml8q0362d8rfZ home]#
複製代碼

• 阿里雲nginx配置

location ^~ /api {
          proxy_pass http://127.0.0.1:3000;
        }

        location ^~ /redAlert/ {
           root /home/dist/;
           try_files $uri $uri/ /index.html =404;
        }

        location ^~ /file/ {
            alias /home/server/controller/public/;
        }

        location / {
            root   /home/dist/;
            index  index.html index.htm;
        }
複製代碼

其餘方面如同本地配置

有問題能夠加羣聯繫

最後請star一個吧~~~