接口测试平台-15：帮助模块1

1. 整体具体效果如下

接口测试平台-15：帮助模块1

为啥要开发个帮助模块呢？

几乎每一个软件菜单都有帮助
新人的确很需要帮助模块来熟悉如何使用平台，效果比发教程ppt在群里要好的多
恰好可以设计设计漂亮的帮助页面，练练js/css

那我们要养成一个习惯，在写一个新的模块之前，先好好设计设计。一是页面布局，二是数据

页面布局：页面布局的话，我们用最简单的方式，左侧目录，右侧说明文案。

接口测试平台-15：帮助模块1

数据：这些帮助文档，要放在哪呢？首先这些文档不经常维护，是可以写死的。那么写在某些文件中如word/txt，提取的时候有点麻烦，而且要给其中某行换字体，加粗，变色等操作很难。那么最简单的方式就是写死在html文件中，样式随意设置，简单。

2. 添加帮助页面

在templates文件夹下创建help.html

接口测试平台-15：帮助模块1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助文档</title>
</head>
<body>
    <div>
        <a href="">项目列表</a>
        <a href="">接口库</a>
        <a href="">接口测试</a>
        <a href="">后台</a>
        <a href="">账户</a>
    </div>
</body>
</html>

添加映射：

urls.py

接口测试平台-15：帮助模块1

url(r'^help/$', help),  # 匿名吐槽

welcome.html

接口测试平台-15：帮助模块1

<li><a href="/help/">帮助</a></li>

views.py

接口测试平台-15：帮助模块1

def api_help(request):
    return render(request, 'welcome.html', {"whichHTML": "help.html", "oid": ""})

这个help貌似颜色不对啊，怎么是紫色？

那是因为django的库函数中已经有函数叫help了。要是也这么起名，就很容易产生各种未知冲突，所以写代码时，要避免取这种大众简单的单词。所以，url.py中改为api_help

看看效果：

接口测试平台-15：帮助模块1

3. 解决菜单挡害问题

有一个问题，就是进入各个子页面，这个左侧菜单都比较挡害，那么有什么办法可以在进入任何子页面后，它自己主动隐藏呢？也就是说，让它自己自动点一下菜单的隐藏按钮

解决：在welcome.html写入js，默认隐藏菜单

往常写完script后都会在里面写一个function xxx(){}，然后在function里面才写js代码

这就好比是python的def xxxx()，要是不调用这个函数，那么它永远也不会运行。所以这里我们不写function了，直接在script里面写js代码，这样就会达到页面刚打开，它自动就运行了这段js这样的效果：

看看效果：

接口测试平台-15：帮助模块1

需求：在home主页的时候不要隐藏菜单，在其他页面自动隐藏菜单。加一个if判断，如果不是home主页，那么就隐藏。

welcome中的有个后端传过来的参数，恰好是子页面的html文件名！所以就要在if中进行判断。

接口测试平台-15：帮助模块1

<script>
    $('#page').load('/child/'+'{{ whichHTML }}/{{ oid }}/')
</script>

<script>
    if ("{{ whichHTML }}" !== 'home.html') {
        document.getElementById('menu_btn').click();
    }
</script>

注意{{ 变量名 }} 只会忠诚的替换，要是直接写，它会报错，要想把它当作一个字符串，外面就要写双引号或单引号：

写好后。刷新浏览器

1. 在home主页，菜单不隐藏

2. 在帮助页面，菜单自动隐藏

之前设计在welcome.html中引入子页面的架构设计，看来在这上有好处，可以很灵活的控制各种页面。

好了。本节打通了帮助页面的链路，也优化了左侧菜单的显示。

下一节，就来完成帮助模块吧～

接口测试平台-15：帮助模块1

相关推荐