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

项目地址
https://github.com/fanshyiis/...

干货！求star

本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架，主要目的是想让前端工程师在一个阿里云服务器上能够快速开发部署本身的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了本身的一些脚手架工具，第一次作脚手架的开发，若有问题，请在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的设定
• 注册 -重名检测 正确反馈 错误反馈

1. 主要模块功能

• 模块增删查改基本功能的实现

1. 后台koa2服务模块

• 配合koa-mysql-session进行session的设定储存
• checkLogin中间件的实现
• cors跨域白名单的设定
• middlewer 中间件的设定
• mysql链接池的封装

等等。。。

1. 服务端

• 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.

页面展现

1. 线上调试

• 阿里云服务器文件存放目录

[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一个吧~~~