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

栏目: Node.js · 发布时间: 5年前

内容简介:本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架,主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了自己的一些脚手架工具,第一次做脚手架的开发,如有问题,请在issue上提出,如果有帮助到您的地方,请不吝赐个star~所谓聚合分离,首先是‘聚合’,聚合代码,聚合插件,做到一个项目就可完成前端端代码的编写,打包上线等功能的聚合。其后是‘分离’。前后端分离。虽然代码会在同一个项目工程中但是前后端互不干扰,分别上线,区别于常

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

本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架,主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了自己的一些脚手架工具,第一次做脚手架的开发,如有问题,请在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. 主要模块功能
  • 模块增删查改基本功能的实现
  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

主要代码解析

  • 代码逻辑

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

  • server

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

  • bin
one -h

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

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

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

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

页面展示

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

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

  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;
        }

其他方面如同本地配置

有问题可以加群联系

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

最后请star一个吧~~~


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码整洁之道

代码整洁之道

马丁 / 人民邮电出版社 / 2011-1 / 59.00元

《代码整洁之道(英文版)》提出一种观念:代码质量与其整洁度成正比。干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。作为编程领域的佼佼者,《代码整洁之道(英文版)》作者给出了一系列行之有效的整洁代码操作实践。这些实践在《代码整洁之道(英文版)》中体现为一条条规则(或称“启示”),并辅以来自现实项目的正、反两面的范例。只要遵循这些规则,就能编写出干净的代码,从而有效提升代码质量。 ......一起来看看 《代码整洁之道》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具