资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ONE-sys 整合前后端脚手架 koa2 + pm2 + vue-cli3.0 + element

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

刘福 / 3257人阅读

摘要：项目地址干货求本脚手架主要致力于前端工程师的快速开发一键部署等快捷开发框架，主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。

</>复制代码 
  1. 项目地址
    https://github.com/fanshyiis/...

干货！求star

</>复制代码 
  1. 本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架，主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了自己的一些脚手架工具，第一次做脚手架的开发，如有问题，请在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的设定

注册 -重名检测 正确反馈 错误反馈

主要模块功能

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

后台koa2服务模块

配合koa-mysql-session进行session的设定储存

checkLogin中间件的实现

cors跨域白名单的设定

middlewer 中间件的设定

mysql连接池的封装

等等。。。

服务端

nginx 的基本配置与前端端分离的配置

pm2 多实例构建配置文件的配置文件 pm2config.json

使用流程

本地调试

安装mysql （过程请百度）

</>复制代码 
  1. // 进入sql命令行
  2. $ mysql -u root -p
  3. // 创建名为nodesql的数据库
  4. $ create database nodesql

安装pm2 (过程请百度)

拉取项目代码

</>复制代码 
  1. git clone https://github.com/fanshyiis/ONE-sys
  2. cd ONE-sys
  3. // 安装插件
  4. cnpm i 或 npm i 或者 yarn add
  5. // 安装link
  6. sudo npm link
  7. //  然后就能使用命令行工具了
  8. one start
  9. // 或者不愿意使用命令行的同学可以
  10. yarn run serve
主要代码解析

代码逻辑

server

bin

</>复制代码 
  1. one -h



启动效果

</>复制代码 
  1. 启动项目
  2. yarn run v1.3.2
  3. $ pm2 restart ./server/index.js && vue-cli-service serve
  4. Use --update-env to update environment variables
  5. [PM2] Applying action restartProcessId on app [./server/index.js](ids: 0,1)
  6. [PM2] [index](0) ✓
  7. [PM2] [one-sys](1) ✓
  8. ┌──────────┬────┬─────────┬─────────┬───────┬────────┬─────────┬────────┬─────┬───────────┬───────────┬──────────┐
  9. │ App name │ id │ version │ mode    │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user      │ watching │
  10. ├──────────┼────┼─────────┼─────────┼───────┼────────┼─────────┼────────┼─────┼───────────┼───────────┼──────────┤
  11. │ index    │ 0  │ 0.1.0   │ fork    │ 77439 │ online │ 2640    │ 0s     │ 0%  │ 15.4 MB   │ koala_cpx │ disabled │
  12. │ one-sys  │ 1  │ 0.1.0   │ cluster │ 77438 │ online │ 15      │ 0s     │ 0%  │ 20.2 MB   │ koala_cpx │ disabled │
  13. └──────────┴────┴─────────┴─────────┴───────┴────────┴─────────┴────────┴─────┴───────────┴───────────┴──────────┘
  14.  Use `pm2 show ` to get more details about an app
  15.  INFO  Starting development server...
  16.  98% after emitting CopyPlugin DONE  Compiled successfully in 10294ms16:31:55
  17.   App running at:
  18.   - Local:   http://localhost:8080/
  19.   - Network: http://192.168.7.69:8080/
  20.   Note that the development build is not optimized.
  21.   To create a production build, run yarn build.

页面展示

线上调试

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

</>复制代码 
  1. [root@iZm5e6naugml8q0362d8rfZ ~]# cd /home/
  2. [root@iZm5e6naugml8q0362d8rfZ home]# ls
  3. dist  server  test
  4. [root@iZm5e6naugml8q0362d8rfZ home]#

阿里云nginx配置

</>复制代码 
  1.        location ^~ /api {
  2.           proxy_pass http://127.0.0.1:3000;
  3.         }
  4.         location ^~ /redAlert/ {
  5.            root /home/dist/;
  6.            try_files $uri $uri/ /index.html =404;
  7.         }
  8.         location ^~ /file/ {
  9.             alias /home/server/controller/public/;
  10.         }
  11.         location / {
  12.             root   /home/dist/;
  13.             index  index.html index.htm;
  14.         }
</>复制代码 
  1. 其他方面如同本地配置

有问题可以加群联系

</>复制代码 
  1. 最后请star一个吧~~~
GPU云服务器 云服务器 前后端 前后端分离 webrtc前后端 前后端分离开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40309.html

相关文章

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

  • Vue+Express全栈购物商城

    摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲 基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。 二、历史版本 基于Vue-CLI2.0:点我查看 这个分支版本是一两年前...

    Richard_Gao 评论0 收藏0

  • Vue+Express全栈购物商城

    摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。 一、前言提纲 基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。 二、历史版本 基于Vue-CLI2.0:点我查看这个分支版本是一两...

    luzhuqun 评论0 收藏0

发表评论

登陆后可评论

0条评论

刘福

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<