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

2019-01-14 admin

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

one-sys gogogo!

本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架,主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了自己的一些脚手架工具,第一次做脚手架的开发,如有问题,请在issue上提出,如果有帮助到您的地方,请不吝赐个star~

技术栈选择
  • 前端整合:vue-cli3.0、axios、element等
  • 命令行工具整合:commander、chalk、figlet、shelljs等
  • 后端整合:node、 koa2、koa-mysql-session、mysql等
  • 服务器整合:nginx、pm2、node等
基本功能模块实现

所谓聚合分离,首先是‘聚合’,聚合代码,聚合插件,做到一个项目就可完成前端端代码的编写,打包上线等功能的聚合。其后是‘分离’。前后端分离。虽然代码会在同一个项目工程中但是前后端互不干扰,分别上线,区别于常规的ejs等服务端渲染的模式,做到前端完全分离

基于本地的命令行工具,可以快速打包view端的静态文件并上传到阿里云服务器,也可快速上传server端的文件到服务器文件夹,配合pm2的监控功能进行代码的热更新,无缝更新接口逻辑

提供基本的使用案例,包括前端的view层的容器案例与组件案例,组件的api设定以及集合了axios的中间件逻辑,方便用户快速搭建自己的项目,代码清晰,易于分析与修改,server端对mysql连接池进行简单的封装,完成连接后及时释放,对table表格与函数进行分层,代码分层为路由层、控制器层、sql操作层

基本模块举例

1.登录页面

  • 登录 -正确反馈 错误反馈 登录成功后session的设定
  • 注册 -重名检测 正确反馈 错误反馈
  1. 主要模块功能

  2. 后台koa2服务模块

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

等等。。。

  1. 服务端
  • nginx 的基本配置与前端端分离的配置
  • pm2 多实例构建配置文件的配置文件 pm2config.json
使用流程
  1. 本地调试
// 进入sql命令行
$ mysql -u root -p
// 创建名为nodesql的数据库
$ create database nodesql
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
主要代码解析

image.png

image.png

one -h

image.png image.png image.png

启动项目
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.

页面展示 image.png image.png

  1. 线上调试
[root@iZm5e6naugml8q0362d8rfZ ~]# cd /home/
[root@iZm5e6naugml8q0362d8rfZ home]# ls
dist  server  test
[root@iZm5e6naugml8q0362d8rfZ home]#
       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一个吧~~~

[转载]原文链接:https://segmentfault.com/a/1190000017886867

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50991.html

文章标题:ONE-sys 整合前后端脚手架 koa2 + pm2 + vue-cli3.0 + element

相关文章
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
回到顶部