接口测试平台-5：菜单的开发

1. 控件平台：

jquery之家：http://www.htmleaf.com/

vue组件：https://element.eleme.cn/#/zh-CN/component/installation

 

选择：菜单和导航，下载下图

 

2. apitest下新建文件夹：static，存放静态资源，将下载的菜单和导航放入static中

 

3. 双击index.html，拆出有用的拿走

• 首先拿走head标签内的 link标签 和 script标签（没有就不拿了），复制到我们的welcome.html中

• 快速折叠代码：mac按住键盘的shift+command+ 减号，windows系统的可以按住 shift+ctrl+减号；慢慢展开body，拿走如图

 

看看效果：http://127.0.0.1:8000/welcome/#

 

因为偷走后需要修改静态资源路径，在welcome.html代码中的所有带路径的都在前面加上/static/201908059658/ ，要去掉./

 

看看效果：

看看效果：http://127.0.0.1:8000/welcome/#

 

4. 删掉没用的文案

 

注意底下的script等 千万别乱删。看看效果：

 

5. 删掉多余的菜单，留下一两个，照葫芦画瓢；每一个li 都代表了左侧一个菜单，这里留下第二个，其他都删掉

 

6. 展开html，看看它的格式，顺便给它改一下文案：

• 最上面的a 标签内的是外层的菜单总文案，下面的ul-li-a标签 全是它的子菜单。
• 最上面的i标签，是菜单文案前面的图标：

改成如下文案：

 

看看效果：

 

7. 去掉炸眼的红色，welcome.html中无任何 红色的 设置。这个颜色一定藏在了引入的css文件中，依次打开，进去滑动到底，注意观察左侧是否出现了红色色块：

• 找到差不多的红色，将其变成需要的颜色，回到页面上刷新看看是否生效，如果生效则找到了，不生效就改回来然后继续找；注意刷新页面一定要去缓存强制刷新才能使很多css样式更新哦～mac是shift+cmmand+R，windows是shift+ctrl+R
• 在面对未显示色块的，也可以搜索color关键字

 

经排查，发现 htmleaf-demo.css和 normalize.css没有用，真实的颜色设置在src文件夹内的 jquery-rvnm.css文件中的第390行

让我们改成金色gold，看看效果

 

8. 回到welcome.html中，删掉这俩个link标签，很多标签是jquery之家自带的，删除发现没什么变化就删了吧，减少代码冗余

 

9. 加上超链接，注意超链接一般都放在 a标签的href属性里，这里前后必须有 /

看看效果：

 

10. 先urls.py中写好对照关系，去views.py中写后台函数，返回case_list.html；然后去新建一个case_list.html好让后台函数返回

 

这里就介绍完了如何开发一个左侧菜单了，讨巧的办法，最上面的search…测试发现也很好用。