在上一节中,我们成功的返回了一个只有一段文案的字符串,我们和同事访问自己的ip:8000/welcome/ 后都成功的看到了这个字符串,但是这并不是一个真正的网页。
所以本节想分享一下如何做一个html页面。让我们先回顾一下html页面就是一个xxxx.html,是由哪些部分组成:
html静态语言
js
css
很好理解,现在让我们打开项目。
我们在MyApp下新建一个文件夹叫,templates,用来存放所有的html,注意,这个名字不能随便改,因为这是已经写死在settings.py的配置里了。

注意,创建好之后,所有的html文件都要放在它下面,django是不给你返回其他地方的html的。


创建好之后,我们会看到,welcome.html内其实已经默认写好了基本格式头:

html的静态语言,绝大部分就像是 积木一样的组装,就是很多的标签对。如 <head></head> 便是这个整个页面的头部,里面可以放title 和其他要引入的js ,css,和你自己写的全局style样式等等。 <title></title>标签内放的是这个页面的标头,我们可以随便改一下中间的白字:Title ,改成:首页。
然后已浏览器模式打开这个页面,看看 首页俩个字 出现在了哪?
我们鼠标点击这个页面的黑色空白处,右上角出现一排浏览器标志,点击一个你安装过的就可以打开了。

在左侧项目中找到这个html文件右键,Open in Browser,然后选择一个浏览器打开。

手动打开浏览器,在浏览器中输入这个html的绝对路径也可以。
如何快速复制文件路径呢?还是在左侧项目中的html文件上右键,点击复制路径即可。

好了,现在我们已经成功打开这个页面,我们看看 我们写的title:首页,在哪吧?

现在让我们来进去接着看html,来接着写其他的,body标签内写的就是该页面的主体部分了,让我们加入如图一句话:


发现看样子是成功了。现在让我们打开后端函数,就是之前只返回了一个字符串的函数,给它改成返回这个主页面:

改成:

到这里我们会发现它提示说 没找到这个welcome.html文件,这时即使我们去访问127.0.0.1:8000/welcome/也会报错说找不到html。
这时我们要知道一个概念,就是我们的这个项目ApiTest,它和我们创建的app:MyApp,并不是1对1 的关系,而是1对多。也就是说,我们这个项目内可以创建很多个app。所以为了让django知道我们正在启用哪个app好让django知道去哪个app的下面的templates文件去找html。 就需要我们手动对这个app:MyApp进行注册,注册后,一切都将正常。
很简单,打开settings.py。在列表INSTALLED_APPS中添加这一句:


这样就完成了。我们再回到views.py中看看 还说不说找不到welcome.html了?

发现已经没问题了。
现在我们鼠标点击pycharm之外的地方,来让django自动重启,或者你嫌慢可以直接手动强制重启。
然后让我们进入网址:http://127.0.0.1:8000/welcome/

发现已经可以正常展示我们亲手打造的主页了。
下面我们来进行简单的美化

其实就是用h1标签 给包裹上,我们修改html页面的话,只需切换到浏览器后,直接刷新即可,django并不会因为区区前端代码改动就重启后台服务。

效果上呢?变邪恶了。现在让我们给它改个颜色看看:

就是给这个标签,加上一个style熟悉,然后style的值都是用英文分号隔开的,我们添加了一个color,就是字体颜色,值为绿色green。看看效果!

我们接下来可以做一个div容器,这个div就相当于一个空白容器,来包装好内部的一堆东西,它几乎什么都能装进去。并且自身的样式也很灵活。

把h1放进了div中之后,我们顺便给div增加了样式,背景颜色:background-color,值为灰色grey。看看效果:

很难看?没错。审美好的可以自己多设置一下,我们接下来让这个h1标题在div的内部居中显示,就需要我们在div中继续增加样式,这个样式会影响到它内部的所有标签,都会变居中。

看看效果:

现在我们进行美化:

背景颜色改成了渐变色,增加了圆角和阴影。
点击左侧颜色小方块可以直接进行修改颜色:
看看效果:
好了,今天就先到这里了。主要就是介绍了如何返回一个html页面,如何写最初的几个控件元素,并试着随便写了点样式。大家可以私下练习,设计出漂亮的主页。
下节预告:顶部菜单的开发 和 如何在任何页面都可以看到菜单。
喜欢的小伙伴继续分享吧,老规矩,观看量过百日更!