ONE-sys integration front and rear scaffolding koa2+pm2+vue-cli3.0+element

  koa2, nginx, pm2, vue-cli, vue.js

Project address
https://github.com/fanshyiis/ …

Dry goods! Ask star

one-sys gogogo!

This scaffold is mainly dedicated to the quick development framework of front-end engineers, such as quick development and one-click deployment. The main purpose is to enable front-end engineers to quickly develop and deploy their own projects on an Aliyun server. In line with the logic of front-end and back-end integration, some wheels are integrated and some scaffolding tools are added. It is the first time to develop scaffolding. If you have any questions, please put forward on the issue. If there is any help for you, please give a star~

技术栈选择
  • Front-end integration: vue-cli3.0, axios, element, etc.
  • Command line tool integration: commander, chalk, figlet, shelljs, etc.
  • Back-end integration: node, koa2, koa-mysql-session, mysql, etc.
  • Server Consolidation: nginx, pm2, node, etc
基本功能模块实现
  • Polymerization separation

The so-called aggregation and separation, first is’ aggregation’, aggregation code, aggregation plug-in, accomplish a project can complete the front-end code writing, packaging online and other functions of aggregation. This was followed by’ separation’. The front and rear ends are separated. Although the code will be in the same project project, the front and back ends will not interfere with each other and will be online respectively, which is different from the conventional rendering mode of ejs and other service ends, so that the front ends are completely separated.

  • One-touch deployment

Based on local command-line tools, static files at view end can be quickly packaged and uploaded to ariyun server, and files at server end can also be quickly uploaded to server folder, so as to carry out code hot update in coordination with pm2 monitoring function and seamlessly update interface logic

  • Fast iteration

Basic use cases are provided, including container cases and component cases in the view layer at the front end, api settings of components and middleware logic that integrates axios, so as to facilitate users to quickly build their own projects. the code is clear and easy to analyze and modify. the server side simply encapsulates mysql connection pool and releases it in time after connection is completed. table tables and functions are layered. the code is layered into routing layer, controller layer and sql operation layer

基本模块举例

1. Login page

  • Login-correct feedback error feedback session settings after successful login
  • Registration-Duplicate Name Detection Correct Feedback Error Feedback
  1. Main module functions
  • Implementation of Basic Functions of Module Addition, Deletion, Query and Modification
  1. Background koa2 service module
  • Cooperate with koa-mysql-session to store session settings
  • Implementation of checkLogin Middleware
  • Cors Cross-Domain Whitelist Setting
  • Setting of Middleware Middleware
  • Encapsulation of mysql Connection Pool

Wait. . .

  1. Server side
  • The basic configuration of nginx is separated from the front end
  • Json
使用流程
  1. Local debugging
  • Install mysql (process please Baidu)
//Enter sql Command Line
 $ mysql -u root -p
 //Create a database named nodesql
 $ create database nodesql
  • Install pm2 (process please Baidu)
  • Pull project code
git clone  https://github.com/fanshyiis/ONE-sys
 cd ONE-sys
 //install plug-ins
 Cnpm i or npm i or yarnad
 //install link
 sudo npm link
 //Then you can use the command line tool
 one start
 //or students who do not want to use the command line can
 yarn run serve
主要代码解析
  • Code logic

image.png

  • server

image.png

  • bin
one -h

image.png
image.png
image.png

  • Starting effect
Start project
 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.

Page display
image.png
image.png

  1. Online debugging
  • Aliyun Server File Storage Directory
[root@iZm5e6naugml8q0362d8rfZ ~]# cd /home/
 [root@iZm5e6naugml8q0362d8rfZ home]# ls
 dist  server  test
 [root@iZm5e6naugml8q0362d8rfZ home]#
  • Nginx configuration of ariyun
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 ;
 }

Other aspects are like local configuration

If you have problems, you can add groups to contact.
欢迎交流

Finally please star one ~ ~ ~