这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍。真是浪费人生啊。
golang+sqlite写的东西,直接传到任意文件里,运行即可。——当然,适用于小型的东西。
vue.js,要安装node.js环境,要nginx环境,要配置nginx跨域;要安装mysql数据库,要配置用户。体验地址:
有问题多多交流啊:qq504284 微信hotqin999
只有这个nginx的配置文件值得贴出来,其他都忒复杂了。
[root@VM_16_4_centos nginx]# vim nginx.conf
server {
listen 8080 default_server;
listen [::]:8080 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
location ^~/api {
proxy_pass https://bjys.itdos.com/v1/admin;——以分号结束
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}——结尾括号
对应的vue.js_config_index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
"/api": {
target: "https://bjys.itdos.com/v1/admin", //https://bjys.itdos.com/v1/admin---218.78.187.216/api/v1设置调用的接口域名和端口
changeOrigin: true,
pathRewrite: {
"^/api": "" //用'/api' 代替 'http://218.78.187.216/api/v1'
}
}
},
只有这样,vue.js才能axios请求api:https://bjys.itdos.com/v1/admin之类的,比如vue某个页面:
axios({
// headers: {
// 'X-Requested-With': 'XMLHttpRequest',
// 'Content-Type': 'application/json; charset=UTF-8',
// 'Access-Control-Allow-Origin': '*'
// },//设置跨域请求头
method: "POST",//请求方式
url: "/api/flowtype",//请求地址
params:{
name:this.ruleForm2.typename,
},
当然,后端的flow作为一种通用流程包,是golang目前唯一的吧,对于第一次做流程的开发人员来讲还是蛮拗口的。
默认页的文档我还没写完呢~
1 设计说明
什么是文档流程?
一个文档流程的本质就是改变文档状态state);对应的,我们再设计一个改变状态的动作action;如果再给文档分类doctype,比如合同流程,采购流程的文档;再配合用户-角色-权限(accesscontex);当一个文档处于一个state的时候,谁有权限permission操作action它?就要预设置好当前状态state下transition:从state1通过动作action1改为state2;那么一个文档如何按照指定的流程来往下走呢,就要先定义一系列节点node,再将这些节点组合到workflow下,见下面的数据结构和说明:
Document Type : docType1 //1.定义文档类型-流程类型
Document States : [
docState1, docState2, docState3, docState4 // 2.定义4个状态
]
Document Actions : [
docAction12, docAction23, docAction34 // 3.定义修改状态的动作,实际应用中,除了向前传递,还要定义向后回退的动作。for the above document states
docAction21, docAction31, docAction41 //每个都直接回退到1
]
Document Type State Transitions : [
docState1 --docAction12--> docState2, //前进流程
docState2 --docAction21--> docState1, //回退流程
docState2 --docAction23--> docState3,
docState3 --docAction31--> docState1,
docState3 --docAction34--> docState4,
docState4 --docAction41--> docState1,
]
Access Contexts : [
accCtx1, accCtx2 // 主要是为了用户-角色-权限用的
]
Workflow : {
Name : wFlow1, //一个doctype只能对应一个workflow
Initial State : docState1 //一个流程的初始状态
}
Nodes : [
node1: {
Document Type : docType1,
Workflow : wFlow1,
Node Type : NodeTypeBegin, // 开始节点 note this
From State : docState1,
Access Context : accCtx1,
},
node2: {
Document Type : docType1,
Workflow : wFlow1,
Node Type : NodeTypeLinear, // 中间节点可以是线性的,也可以是平行的 note this
From State : docState2,
Access Context : accCtx2, // a different context
},
node3: {
Document Type : docType1,
Workflow : wFlow1,
Node Type : NodeTypeEnd, // note this
From State : docState3,
Access Context : accCtx1,
},
]
以上都是系统管理员设置的部分,当一个用户使用这个系统的时候,他在某个板块(doctype分类)新建(上传)一个文档document,系统自动根据这个分类,设置了文档的初始state,在这个state下,一般只有一个动作可选,就是传递给下一个状态的操作,还要选接受的人或组(也可以系统固定),还可以写上注释、说明,最后点击按钮提交apply;系统要做的,记录下来谁在什么时间操作了,把信息message发送给对应的用户的信箱mailbox,当对应的用户登录系统的时候,可以查看message。
当用户点击信箱里某个信息,转到对应的文档详情detail上,能看到这个文档以往(历史)操作记录时间线,可以对这个文档进行操作:选择动作action,选择接受的组,提交apply。
2 设置部分
1.1 设置doctype docstate和docaction
1.1.1 文档类型doctype,只是给定一个名字而已,每个doctype对应一个workflow流程,如果文档某些需要签署到总经理,有些则只要签署到部门经理,咋办?
1.1.2 文档状态,即每一级给定一个状态,也只是定一个名字而已;
1.1.3 用户动作,从一个状态到另一个状态对应的动作,只是一个名字而已;
1.2 设置transition node 和workflow
1.2.1 transition转变,就是定义一个状态到另一个状态以及动作;
1.2.2 workflow流程,一种文档类型完整流程,将节点纳入到这个流程中,就完成了一个文档流程的设置;
1.2.3 node节点,给流程定义完整流程中各个节点,包括节点类型:比如是单线过来的还是这个节点有多线过来,有开始节点,和结束节点……;
1.3 设置accesscontex
1.3.1 accesscontex访问环境,就是给某个流程定义一下用户-角色-权限;
1.3.2 user用户,每个用户会自动生成一个单用户组,因为flow都是针对group的;
1.3.3 group用户组;
1.3.3 user_group将用户加入组;
1.3.3 role定义角色;
1.3.3 permission定义角色权限,即action;
1.3.3 group_role将group加入角色;
3 用户部分
3.1 新建文档
其实走了弯路了。
大家知道,golang开发的东西部署简单是它很大的卖点,一般的应用,生成的可执行文件直接放服务器上运行即可,不需要任何环境。当然,大型的应用才需要比如mysql,nginx等。
但是当vue.js出现后,前端几乎都是它(vue.js)的天下了,因为用了vue.js就回不去了,无法再回到beego的view里写tpl或html页面了,很受伤,没办法,vue.js实在太方便了,所谓双向绑定,这是神马概念,百度吧,我也讲不清楚……
之前很懵逼,将vue.js开发的前端,完完全全独立地部署在云上(用nginx作为前端静态服务器,配置一堆,完全没必要),很傻很傻,其实,将vue.js打包的东西放beego的view文件夹下和static文件夹下即可……
自己的认识:
开发的时候一定要用独立的前端,即vue.js前端项目必须是独立的,独立的服务,不要放beego里的view里作为tpl页面。虽然,放beego view里的tpl通过引用vue、element、axios等似乎可以实现不少功能,但是很虐心,不到万不得已不要再去尝试,原因之一当然是没有任何教程和现成的案例是这样搞的,好多东西需要去试验。比如axios,路由啊之类。
当独立搭建起nodejs和vue的环境后,使用淘宝镜像,初始化一个项目,然后各种抄网络代码,行如流水,很顺了。
独立开发好vue.js项目后,打包后就可以放beego里面了。
部署的时候就简单了:
1.在vue.js里,cnpm run build打包,得到dist文件夹,里面有index.html和static文件夹。
2.直接将index.html放到beego的view文件夹下,然后在beego的route里和controllers里加上路由,指向这个index.html即可访问了。
3.进入dist文件夹下static文件夹内,拷贝里面所有文件和文件夹,在来到beego的static文件夹,粘贴,有相同的,则合并文件夹。
4.输入路由,就可以访问了。
原理其实就是利用go语言的静态服务功能。