外贸网站设计公司/谷歌浏览器官网手机版

这次总算把js-ojus/flow的ui部署到腾讯云上，比较吐槽的就是，为啥这么复杂，vue.js前后端分离，比golang编写的部署方面复杂几万倍。真是浪费人生啊。

golang+sqlite写的东西，直接传到任意文件里，运行即可。——当然，适用于小型的东西。

vue.js，要安装node.js环境，要nginx环境，要配置nginx跨域；要安装mysql数据库，要配置用户。体验地址：

http://111.230.181.182:8080

有问题多多交流啊：qq504284 微信hotqin999

github.com/3xxx 

只有这个nginx的配置文件值得贴出来，其他都忒复杂了。

[root@VM_16_4_centos nginx]# vim nginx.confserver {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: {// PathsassetsSubDirectory: '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 statesdocAction21, 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只能对应一个workflowInitial State : docState1  //一个流程的初始状态}Nodes : [node1: {Document Type : docType1,Workflow : wFlow1,Node Type : NodeTypeBegin, // 开始节点 note thisFrom State : docState1,Access Context : accCtx1,},node2: {Document Type : docType1,Workflow : wFlow1,Node Type : NodeTypeLinear, // 中间节点可以是线性的，也可以是平行的 note thisFrom State : docState2,Access Context : accCtx2, // a different context},node3: {Document Type : docType1,Workflow : wFlow1,Node Type : NodeTypeEnd, // note thisFrom 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语言的静态服务功能。