接口测试平台代码实现9：菜单常显

上节我们说到了一个问题：就是如何让菜单出现在每个页面的左侧。

比如我们刚研发好的home.html，配上菜单看才会更好看。

这里有三个方法：

1. 把菜单的html代码复制粘贴到 其他各个页面 特点：完全不推荐这个方式。一百个页面难道要粘一百段菜单代码么。然后我新改动了菜单，就要手动去改动一百个页面，这简直在开玩笑。
2. 把菜单的html代码做成组件，然后其他各个页面去调用，在页面上生成菜单

特点：比较不错。

3. 把菜单作为后台唯一能返回的html，也就是唯一的render函数内的那个html参数。然后在菜单welcome.html 中 把其他各个页面都当作一个子页面 一个来引入。

特点：和方法2逻辑相反，而且在很多js等静态资源导入上更简洁。比如100个页面都需要引入jquery.min.js文件，那么你只需要在welcome.html中引入一次，即可在所有页面中生效。

综上所述，各有利弊。我这里选用第三种方式了。

进行思考：后台以后所有的函数，返回的renede函数中的html 都是welcome.html菜单了，那么自己本身的页面要怎么传入呢？这里就需要我们再加一个参数，来作为真正要访问的页面html了。

所以本节先引入一个知识点:render函数都能往里面加什么东西。

render 我们之前的用法是：

里面只有俩个参数，一个request是本次请求的http信息。一个是html文件名。那么其实它还可以加第三个参数：字典。这一个字典 其实就等于 可以加无限个参数了。

比如这样：

那么这些参数 会用在哪呢？也就是说，怎么去调用出来呢？答案就是 这些参数是会作用在 html页面上！

用法就是。在html的静态代码中，加入{{ key1 }} 那么真正用户看到的 这里就变成来 字典中key1的值 1

我们来做个实验：

在home.html这个html里加入username参数名：一定用俩个大括号包起来。这样浏览器才会知道这里是个变量 需要去赋值。

我们进入url：http://127.0.0.1:8000/home/ 中看看效果：

暂时并没有什么显示，那是因为我们后台还没给返回username这个参数。让我们在后台函数home中加上username参数：

好，我们修改了后台views.py ，那么切换回浏览器后，django会自动重启，你需要等待它一下。然后刷新页面：

可以看到，已经显示出来了，这就是后台如何给前端html返回数据的一个途径。

好了。我们理解了这个概念，那么接下来还要学习新知识点：如何引入，这里大家如果听不太明白，就照葫芦画瓢即可，慢慢的自会了解。

打开welcome.html，在它里面 body标签内的最后位置加上一个空div,给这个div写一个属性。id 为 page1 ,如图：

然后在下面写一个script标签，script标签就是专门存放我们js代码的地方。

在script标签内写上一句代码：

$('#page1').load('/child/'+'{{ whichHTML }}/{{ oid }}/')

大家看到这句话可能问题比较多，这里直接复制就好，先简单跟大家说说是什么意思，这句话的意思是，一旦打开welcome.html， 那么就运行这句代码，这句代码会把id为page1的那个空div，给它的内容加载另一个url返回的页面。

这个url 我定位：'/child/'+'{{ whichHTML }}/{{ oid }}/' 它会返回我们真正的要访问的页面 home.html 其中的/child/一级路由只是我的个人习惯，以便自己知道这个路由是来找孩子（子页面）的。后面俩个 {{大括号，我们前面说了，浏览器会识别成变量，把我们的俩个参数的值都替换进来。这个whichHTML 就是我们真实要拿到的html的名字。后面的oid，也就是我预留出来的一个参数。以后可能用的上。万一welcome去接儿子home,结果home说你怎么证明你是我爸爸？拿出来证明。证明对了，儿子就跟着回家，证明不对，那么就👮‍♀️同志跟你回家了，虽然我们今天的教程用不上这个证明参数，但是后续是一定用上的相信我。

好现在完成后是这样：

接下来去urls.py中，写这个/child/ url的映射关系吧～

打开urls.py 加入这样一句：

 url(r"^child/(?P<eid>.+)/(?P<oid>.*)/$", child),  # 返回子页面

我们发现，多出来俩个没见过的东西：

这里解释一下，这是标准的正则写法。目的是获取url中的这俩个变量。

也就是说，这个url后面的俩段，并不是写死的一成不变的。而是一个变量，对应的是我们welcome.html中的 whichHTML 和 oid

因为是变量，所以我们这个正则写法可以完全匹配到并且获取里面的值。

接下来我们去写后端child函数。打开views.py，新增child函数

它只做一件事，就是真实的返回 我们目标html,在这里就是home.html，其中的eid，就是获取url中的 (?P<eid>.+) 的值，也就是我们welcome.html中的

{{ whichHTML }} ，也就是我们后台函数返回的子页面html的真实名字。

现在让我们来修改home函数，因为现在除了child函数外，所有的后台函数都要返回的是welcome.html，而原来的真正目标页面home.html则变成了区区字典里的一个值，它的key是 whichHTML 。

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

oid 暂时用不上，为空即可。

让我们切换到浏览器，等待django重启(若中间报错停止了，就手动点击运行)，再刷新页面看看效果：

可以看到，左侧的菜单成功显示了。但是我们发现。home.html的排版出问题了，怎么居中的东西全变成靠左了呢？

这是因为它现在的js/css静态资源 全被welcome.html给影响了，同一类型的js/css 在welcome.html和home.html中都被引入。而且版本不同，势必产生冲突。这就需要我们去解决了，这种情况之后会很常见。因为我们总是从网络上下载，导致资源不统一，我们这里可以采取一些办法，给它纠正过来。

我们打开home.html，发现我们设置居中的属性在body中，但是作为一个子页面加入了welcome.html后，body中的css设置被无视了

既然body不行了，那我弄个div 装这些东西吧，div的样式可不会被无视掉目前。

所以我们在body内 写个div

然后给它中间回车，分的大一点。

然后把下面的内容 剪切到这个div中来

变成如下图所示：

然后我们把body中的居中样式 给挪到div上：

然后回去刷新页面看看吧。

一切正常了～

之后的所有页面，都会和home.html的出现形势一样，都是作为子页面嵌入到welcome.html这个菜单页面中去。后面我就不会再详细关于这里的细节了。

好了今天分享到这里了。老规矩：过百日更，希望大家不要吝啬技术。勇于分享哦～