接口测试平台代码实现17:帮助模块1

开始之前给大家说说上节课的主页吐槽功能，其实大家可以按照我们已经掌握的前端技术，对首页进行重新排版，力求好看+实用，吐槽功能比较重要，是我们收到反馈的一个重要途径，而且也是趁这个机会给大家展示如何使用sqlite3数据库orm映射技术。我们在本系列后期的某节课，仍然会对首页进行改版。具体改版的效果可以参考如下主页：

只是因为此主页技术要求很高，非常复杂。所以只能留到本系列最后，小伙伴不要心急，这么大的工程要一步一步来。

好了 言归正传。

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

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

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

1.页面布局

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

2.数据

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

好。让我们开始做：

首先，在templates文件夹下创建help.html

然后我们做一个 div，用来存放目录，其实就是一堆a标签 超链接。

并在里面放一些a标签，以便我们来调试样式

别忘了修改title 为 帮助文档：

让我们停下脚步，先去把映射调通，然后就可以在浏览器上不断的看我们修改的效果了。

打开urls.py ，添加我们之前写好的帮助文档的超连接：/help/

这个是我们之前在welcome.html中写菜单时候，给帮助菜单写的url:

urls.py中这么写：

然后我们发现这个help貌似颜色不对啊，怎么是紫色？

那是因为我们django的库函数中已经有函数叫help了。我们要是也这么起名，就很容易产生各种未知冲突，所以我们今后在写代码时候，要尽量避免取这种大众简单的单词。

所以我们给help函数的名字改成api_help，

好了，这次正常了。

让我们打开views.py，在最下面创造api_help()函数：这个函数只是单纯进入而已。我们别写错了。前面是welcome.html，后面是help.html

好，让我确保服务运行，且自动重启后。我们点击页面上的帮助菜单看看能否进入：

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

好的，让我们打开welcome.html :

让我们写一段js代码，来点击这个按钮。在body内的最后写一个script用来存放这段js代码：

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

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

大家可以学到：document.getElement('你要操作的元素id').click() 这句代码是点击一个元素的，这里我们要点击菜单隐藏按钮，所以我们要放入菜单的隐藏按钮的id，我们找到这个按钮

它的id是menu_btn

让我们把它填入js：

好，我们现在刷新浏览器，看看效果：

可以看到它自己自动就点击了，形成了我们想要的效果。

之后无论进入任何页面都会如此，但是我们想要的是并不完全是主页的效果，我们想要的是，在home主页的时候 不要隐藏菜单，在其他页面自动隐藏菜单。

那么我们就要在这段js上继续改。加一个if判断，如果不是home主页，那么就点。

这里我们要怎么知道当前子页面是不是home呢，别忘了。我们welcome中的有个后端传过来的参数，恰好是子页面的html文件名！

就是上图的{{ whichHTML }}

所以我们就要在if中进行判断。注意{{ 变量名 }} 只会忠诚的替换，你要是直接写，它会报错，你要想把它当作一个字符串，外面就要写双引号或单引号：

写好后。我们刷新浏览器测试一下，

1. 在home主页，菜单不隐藏
2. 在帮助页面，菜单自动隐藏

好了。测试完毕，毫无问题。

我们之前的设计,在welcome.html中引入子页面的架构设计，看来在这上有好处，可以很灵活的控制各种页面。大家继续往后学，会有很多这样的巧妙设计慢慢被发现。

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

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

喜欢的小伙伴点个赞和分享吧～