数据工厂平台-6：继续VUE和DJANGO的踩坑

最近终于倒出时间来继续更新这个系列了。

这里给大家说下这个系列的特点：

用的是Django和VUE技术。 正常来说，vue并不支持DJANGO，它和DJANGO的冲突很多也很麻烦，甚至python2的话会有无解的问题出现。

所以你看到的很多教程，都是用的vue-cli来配合DJANGO或者其他框架进行WEB开发。

那么vue-cli又是什么呢？它是VUE自己的前端开发框架，相当于一个完整的前端，和django配合的时候呢，是必须要前后端分离的，vue-cli专注于前端,django专注于后端。

但是vue-cli的上手难度要高于vue.js，甚至官网教程一开头就明确到告诉你，新手建议不要用vue-cli。

但是如果不用vue-cli，那就只能用vue.js，也就是在html模板页面内引入vue.js，来实现dom和bom的数据交互。

结果这种没有分离的架构，因为和django有太多的冲突问题几乎没人能用的起来，这也就逼着大家不惜提高开发，人力，稳定性，物理资源等成本去写一个前后端分离的大型平台来做一些小事。

不过这种没什么亮点，也没什么意思。教程随处都搜的到。我既然想花费巨大精力和时间代价来更新这个系列，就是准备趟平所有django和vue的冲突，实现一个二者完美的融合平台。它有着开发快，维护简单，理解容易等优点。

抛开前端的数据框架和项目架构，来从产品上考虑下数据工厂的实现：

有俩种方案：

1. 你作为主要实现者，作为唯一测试开发，接收各种需求，来快速实现这种造数据的功能
2. 你作为测试架构，服务于全体测开和测试。不再接收需求，而是创造一个低代码平台，让其他人根据自己的业务需求简单的 无代码的 去开发所需的工具。

显然第二种的级别更高，后续维护也更简单。但是这需要更强的设计和技术思维，甚至代码的质量要求都会非常高，读者受众也会小很多。所以本系列我们选择第一种，比较传统，但可以吃遍各种场合的 方案。

（而第二种属于进阶设计，我会在我的培训小班中当做教程题材来进行讲解，这种高端定制化的培训是需要提前预约和报名的，第一期很抱歉限制了人数，导致近百人没有报名成功，二期的话也不打算涨价了，大家量力而氪吧。）

好了废话不多说，我们回归主题，继续开发。之前我们成功引入了VUE.JS在home页面，解决了几个和Django的冲突问题。

我打开了项目运行后：

这里先来小小的优化一下：

打开urls.py 添加这行，为空时候也一样跳转到首页home。

再访问就成功进来了：

然后这里我们回顾下我们的home.html：

注意红线部分代码。

这里我们用[[ ]] 来代替原始的{{ }} 来避免 dom层获取数据的时候，从后台直接拿，而不是从vue函数里拿。

当然还有其他解决办法，比如给dom的div前后 用 {% verbatim %} {% endverbatim %} 包裹起来，一样会起到这个效果，就是麻烦一点而已。

这里大家也可以发现一个真理，解决问题的答案永远不止一种。

当然还有一个吐槽：就是出现了错误或者不生效的时候，vue的高度封装让我很难去定位问题原因和自己动手想办法解决问题，而只能通过百度的方式去查这些固定写法语法。这样虽然看似简单，但是也给我们带来一种极不安全的感觉，万一搜不到解决方案呢？万一作者也没更新解决办法呢？是不是这就没办法了？ 所以，这也是为什么某些js高手 不喜欢用vue的原因，毕竟上限被别人卡死的感觉很不好。就好像一个会自己组装相机摄影的高玩，不喜欢用傻瓜相机一样。一个Photoshop的高手不喜欢用抖音自带的美颜瘦脸一样

好了，吐槽完毕。毕竟越简单的东西 推广越快，受众越多。认可度也高。最重要的是：它很适合我们测试人员使用，我们本来就不该去把大量精力放在js这种高难度的脚本语法里，我们应该把精力省出来留在宝贵的设计和后台和整体架构上。

截止到现在， 我们成功让views.py从数据库拿出数据 传递给前端的vue，vue又成功把数据显示到了Dom层 也就显示在了浏览器上。

现在我们来引进一个bootstrap3的顶部菜单。

具体的做法，我们同样用线程的，本教程和接口测试平台系列教程 最大的不同点就是 本教程力求最快 最简单的方式，绝对不造轮子。

所以为了引入这个菜单，我们可以很简单的去 JQUERY上找个第三方菜单来使用。

注意，为了后续各个页面都可以简单的用这个菜单，所以我们要把菜单单独放在一个HTML模板中，然后其他页面引入即可~

打开：http://www.htmleaf.com/jQuery/Menu-Navigation/

找到这个左侧菜单，很漂亮的左侧菜单：

http://www.htmleaf.com/jQuery/Menu-Navigation/201509152576.html

点击下载插件：

下载后，解压，放到我们项目的static文件夹下：

然后我们打开它的index.html，也就是它的例子模板：

点击右上角的谷歌浏览器按钮：

意思是在浏览器中打开这个文件：

可以看到是可以成功展示这个左侧菜单的，注意此时的url是本地打开文件的，并不是通过平台host:8000进去的，所以我们一会要想从平台域名+路由进去，那么需要改这个文件内的很多导入其他文件的 相对路径。

现在我们要把这个index文件，整个拖拽到我们下面的templates文件夹，拖拽成功后，这个html文件就相当于是被我们平台正式征用了。

然后注意给它改个名字，改成menu.html，意思是它就是个菜单html模板。

现在我们将要对其进行 导入文件的路径修正了，注意，除非是外链引进的，否则全部改为/static/开头的路径，不要问为什么，这是django的规定~

也不要去写什么相对 绝对路径，没意义。django只会从固定的几个位置去查找资源文件，这也是出于安全的考虑。

而且其中有一些没有用的，我们删掉即可：

从上往下：

改成如下：

你可以发现，其实就是在各种相对路径前 加了：

然后继续往下找：

现在理论上，我们就改完了。可以在其他页面直接引入了。那么我们现在进入home.html，在body内的最上，写下红圈内的代码，意思是引入。

现在我们再通过平台来访问我们的主页看看效果：

可以看到这个菜单已经完好无损的 展示了。

现在我们来观察这个菜单，其实它上面很多哦功能我们都用不到，可以删掉对应的HTML代码，也可不删除。

甚至左上角的这个色块条，其实就是个logo的位置，我们可以去改变下这个色块的图片，换个名还是用新图片代替这个都可以：

总之，这个菜单上的内容，其实都是demo，目的是方便于使用者看到外观，也方便自行去替换成真正的菜单链接。