10-21 12:36 阅读 98

接口测试平台代码实现5:亲手创造第一个首页

上节我们学的主要是如何启动服务，并让同事进入你的django默认页面，接下来要学习如何理解和操作一个自造页面来让同事可以访问。

可能大家都已经知道百度首页中暗藏的小彩蛋，在f12的console里可以看到，总是更换，现在是这个：

我记得很多年前我第一次发现的时候，彩蛋是：“一个网页是如何来到用户眼前，一个....是如何....，一个....是如何。那么就来投递我们吧”

所以我们本节要讨论的问题就是，一个html网页，是如何通过django展现出到你和你同事的浏览器中的。

首先要明白一个事：一个最终呈现在用户眼前的网页是由以下几部分构成的：

1.html模版：相当于树干树枝

2.具体展现的数据：就是动态的各种树叶

3.html静态语言:就是形成树干树枝的语言

4.js脚本语言：就是我们看到页面内的各种动作行为的脚本

5.css样式：就是美化这些树干树叶的装饰方法

好，我们现在开始梳理一下用户访问你平台首页的逻辑：

好，我们来在项目中按照上述过程具体实践出来：

首先要在django服务中写好，你的url 和后台函数的映射关系，好让django知道根据url找到对应后台函数。

这个映射关系就在urls.py中写，其实听着很高大上，实际上就是一个列表，每个元素是一个映射。每个元素都调用一个库函数，给他传俩个值，第一个是你的url，第二个是你后台函数名字。

如下格式：

[

库函数('你的url 1'，‘你的后台函数名1 ’),

库函数('你的url 2'，‘你的后台函数名2 ’),

]

这就是所谓的url分发路由管理器。

下面来找到urls.py文件，进去看到

它已经自动给你生成了一个映射，你可以按照它的格式去写后续的。

但是我们的后台函数是写在views.py中的，当然可以自己新建其他的。所以这里我们要导入views.py的所有内容：

再在下面的urlpattens 这个大列表中，添加一个新元素：

url(r'^welcome/$',welocme), #进入主页

如图，虽然welcom下面标红了，但是这是正常的，因为我们还没有写这个welcome函数，所以不红就怪了，（小技巧：这时候鼠标不要去点击pycharm之外的地方，否则django会监控到你的文件更改，自动重启，然后重启过场发现代码错误标红，服务就会终止，我们还要修改代码重启。）

我们现在必须直接进入views.py文件，来写这个welcome函数。

注意，参数中一定要写一个request(可以自己改), 这个参数是必须存在的，只要是urls.py中映射的函数，必须有。它里面包含了所有这次请求的东西，比如请求者的ip，登陆的用户名，http请求等等，都会包含在此。

简单点，就输出进来了字符串。

现在我们回到urls.py发现已经不标红了，这说明已经映射成功。

前面的这个写法，是正则匹配写法，大家有兴趣后续可以研究，这里新人建议照葫芦画瓢即可。前面不写/ 后面必写/$ 。

我们现在打开网页，输入网址：127.0.0.1:8000/welcome 看看效果：

网页报错，不要慌，这是正常的。它是在说，你没有给浏览器返回个东西，让它展示个毛线？

但是我们的后台函数中却有print，这个print是打印在你的控制台的，所以你去看看有没有吧？

这个输出证明我们的这条链路其实已经打通了。这里的报错也不用管，这也是在说你没有给浏览器返回一个页面或者什么。

所以我们接下来就给浏览器返回个东西，先来个简单的，返回一句话。

先导入俩个重要的包，是给前端返回用的。

from django.http import HttpResponse,HttpResponseRedirect
from django.shortcuts import render复制代码

调用的HttpResponse函数是用来返回一个字符串的，后续返回的json格式字符串也是用它，HttpResponseRedirect 是用来重定向到其他url上的。render是用来返回html页面和页面初始数据的。

写好后，我们鼠标点击pycharm外的其他地方，比如微信，qq，网页。这样pycharm会开始检查你的代码，发现你修改了之后，会重启django来让你的修改生效。

看到控制台又输出来一次启动时候才有的白色文字后，没有其他报错信息，证明重启成功，你的修改应该生效了。再次进入刚刚的网址或刷新：

http://127.0.0.1:8000/welcome/

看看这次展示什么？

看看这是不是成功展示出来了？我们的文案！

好，今天的内容先到这里，下节开始正式制作一个网页，然后调用render函数来返回。

喜欢的朋友点个分享和在看，感谢～

作者：我去热饭
链接：https://juejin.cn/post/7021334937651544095