用beego vue.js element axios 写flow办公流程——系列五

golang语言的办公工作流的包介绍——系列一

golang办公工作流workflow利用js-ojus/flow做测试——系列二

golang办公流程引擎初体验js-ojus/flow——系列三

golang办公流程引擎初体验js-ojus/flow——系列四

1.前言

第一次用vue.js，着实费了九牛二虎之力。

自己的认识：

开发的时候一定要用独立的前端，即vue.js前端项目必须是独立的，独立的服务，不要放beego里的view里作为tpl页面。虽然，放beego view里的tpl通过引用vue、element、axios等似乎可以实现不少功能，但是很虐心，不到万不得已不要再去尝试，原因之一当然是没有任何教程和现成的案例是这样搞的，好多东西需要去试验。

当独立搭建起nodejs和vue的环境后，使用淘宝镜像，初始化一个项目，然后各种抄网络代码，行如流水，很顺了。

部署的时候就简单了：

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语言的静态服务功能。

2.用到的知识

导航条点击切换页面；涉及到路由：搭建VueJS2.9+ElementUI单页面网站，编写导航页，导航栏跳转、切换

axios跨域，其实用beego写的服务端，在路由里设置一下，是允许跨域的了，所以不必在vue项目里再折腾跨域问题了。

element表格和表格服务端分页，和bootstrap table一样，需要数据总数total……

自定义图标，用阿里的图标，用一段代码批量加入购物车，https://www.jianshu.com/p/59dd28f0b9c9

sublime3手动添加vue代码高亮

element表单数据通过axios提交，服务端beego获取formdata或者url带的参数

3.踩到的坑

前端，css的写法最不擅长了。

vue项目拷贝到其他地方，那个node_moduls文件夹太大了，很难拷贝，而且拷不全。出现问题，删除这个文件夹，然后命令行到项目目录下，cnpm install即可。

初始化项目不要选代码规范检查啊，测试啊之类的，我很难写出非常规范的代码。

离flow的实操还有不少距离，比如：表格的在线编辑，一个完整flow流程的实现。

golang办公流程引擎初体验js-ojus/flow——系列四