本节来讲一下,如何创造第一个页面 并且打通链路,让自己和同事可以正常访问:
上节课我们最后创建了一个叫myapp的应用,虽然它在项目下,但是并没有被安装,不安装的话我们后续很多操作都无法进行。安装很简单,打开我们的settings.py,给myapp 写到这里即可。
首先我们在这个新创建的myapp里,手动创建一个文件夹,叫:templates
注意 必须叫这个名字这里。
这个文件夹是用来干嘛的呢?它是用来创建和存放我们的 html模版文件的,也就是xxx.html, 一个网页,其实就是 html模版+静态资源+数据 形成的。
然后我们在手动创建一个文件夹叫static 来存放静态资源:必须叫这个名哦
现在我们来看这个图,它标记出来了 组成页面的三个部分 都分别在哪里:
好我们现在在templates上新建一个html文件,起个名字叫home, 作为我们平台的首页。
我们在这个home.html模版里 随便写一个标题,标题的标签 dom 是 h1
输入方法是 输入h1 直接按tab键,就可以自动变成 <h1></h1> 后面的个/ 代表标签收尾。建议大家先自学或看看本公众号的接口测试平台的前几章,熟悉一下html的写法和构成。
那么作为以后的使用者,他要怎么才能进入到这个home首页呢?当然是在浏览器里输入一个url地址进入。
那么为什么url地址 就可以 让浏览器展示这个home首页呢?
链路其实分为三大部分 :
url -> 视图逻辑层/事物层/数据层-> html模版
简单来说就是,用户输入url地址后,我们在urls.py中写好对照关系,让这个url关联到后台的一个函数,这个函数我们就暂时写在views.py中,然后这个函数去拿一些数据还有对应的html模版给 浏览器,浏览器又发现这个html模版需要一些静态资源比如图片之类的,就去static文件夹拿出来,最终组合成页面显示给用户。
所以我们的写法很简答,我们现在已经有了这个home.html,它并不需要任何静态资源,所以我们赶紧去views.py写好对应的那个函数,函数名字随意。
如上图,我取名和html模版一致,这样一眼就看出来它是干嘛的了。
它现在也不需要去数据库拿什么数据,就简简单单的返回home.html页面就好,新人写的时候注意格式,引号 等符号。
现在我们还差url和函数的对照关系映射设置。所以我们进入那个urls.py文件:
打开它后,先给它导入我们myapp下views.py内的所有函数,虽然现在只有一个home函数
这里可能有些小伙伴用的是django 3.x 所以和我这个2.2的会不一样,默认用的是path函数。其实按照那个自带的admin/ 这条的写法,照葫芦画瓢即可。
我这里会用俩种方法都展示下,他们实际作用都一样。
函数需要俩个参数,一个是url,一个是views里的具体函数名。
url方法:
仿照admin/ 添加了一样格式的新映射关系。我这里叫的也一样的名字home。这样 函数,url,html模版,都叫home, 就不会乱了。之后我们几百个页面的话,打眼也可以看得出来,当然你可以叫别的。url的第一个参数 是一个正则表达,其中home/是必须写,r'' 代表原始字符串,^代表正则表达式中匹配字符串起始。
path方法:
之后本教程会只是用url方法哦。小伙伴认真记住这个事,不要之后总问了~
现在url.py 三者都创建好并写好了关联。我们要重启服务,然后在浏览器输入:
127.0.0.1:8000/home 看看能不能进去:
可以看到成功进去了。现在你可以让你的同事 用在一个网段下的其他电脑或手机 输入你电脑ip:8000/home 来进入这个页面了。
比如我的ip是 192.168.43.15,那么 大家输入 192.168.43.15:8000/home 就可以进入了。
到这就算是我们第一个简单的页面成功实现并打通和部署了。
下节预告:安装vue并在home页面简单使用。