摘要：項目地址干貨求本腳手架主要致力于前端工程師的快速開發(fā)一鍵部署等快捷開發(fā)框架，主要目的是想讓前端工程師在一個阿里云服務(wù)器上可以快速開發(fā)部署自己的項目。
項目地址
https://github.com/fanshyiis/...
干貨！求star
本腳手架主要致力于前端工程師的快速開發(fā)、一鍵部署等快捷開發(fā)框架，主要目的是想讓前端工程師在一個阿里云服務(wù)器上可以快速開發(fā)部署自己的項目。本著前端后端融合統(tǒng)一的邏輯進行一些輪子的整合、并加入了自己的一些腳手架工具，第一次做腳手架的開發(fā)，如有問題，請在issue上提出，如果有幫助到您的地方，請不吝賜個star~
技術(shù)棧選擇
前端整合：vue-cli3.0、axios、element等
命令行工具整合：commander、chalk、figlet、shelljs等
后端整合：node、 koa2、koa-mysql-session、mysql等
服務(wù)器整合：nginx、pm2、node等
基本功能模塊實現(xiàn)
聚合分離
所謂聚合分離，首先是‘聚合’，聚合代碼，聚合插件，做到一個項目就可完成前端端代碼的編寫，打包上線等功能的聚合。其后是‘分離’。前后端分離。雖然代碼會在同一個項目工程中但是前后端互不干擾，分別上線，區(qū)別于常規(guī)的ejs等服務(wù)端渲染的模式，做到前端完全分離
一鍵部署
基于本地的命令行工具，可以快速打包view端的靜態(tài)文件并上傳到阿里云服務(wù)器，也可快速上傳server端的文件到服務(wù)器文件夾，配合pm2的監(jiān)控功能進行代碼的熱更新，無縫更新接口邏輯
快速迭代
提供基本的使用案例，包括前端的view層的容器案例與組件案例，組件的api設(shè)定以及集合了axios的中間件邏輯，方便用戶快速搭建自己的項目，代碼清晰，易于分析與修改，server端對mysql連接池進行簡單的封裝，完成連接后及時釋放，對table表格與函數(shù)進行分層，代碼分層為路由層、控制器層、sql操作層
基本模塊舉例
1.登錄頁面
登錄 -正確反饋 錯誤反饋 登錄成功后session的設(shè)定
注冊 -重名檢測 正確反饋 錯誤反饋
主要模塊功能
模塊增刪查改基本功能的實現(xiàn)
后臺koa2服務(wù)模塊
配合koa-mysql-session進行session的設(shè)定儲存
checkLogin中間件的實現(xiàn)
cors跨域白名單的設(shè)定
middlewer 中間件的設(shè)定
mysql連接池的封裝
等等。。。
服務(wù)端
nginx 的基本配置與前端端分離的配置
pm2 多實例構(gòu)建配置文件的配置文件 pm2config.json
使用流程
本地調(diào)試
安裝mysql （過程請百度）
// 進入sql命令行
$ mysql -u root -p
// 創(chuàng)建名為nodesql的數(shù)據(jù)庫
$ 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
// 或者不愿意使用命令行的同學(xué)可以
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 ` 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.
頁面展示
線上調(diào)試
阿里云服務(wù)器文件存放目錄
[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;
}
其他方面如同本地配置
有問題可以加群聯(lián)系
最后請star一個吧~~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/40309.html
