vlambda博客
学习文章列表

接口测试平台6:html欢迎首页前端制作

       在上一节中,我们成功的返回了一个只有一段文案的字符串,我们和同事访问自己的ip:8000/welcome/ 后都成功的看到了这个字符串,但是这并不是一个真正的网页。

所以本节想分享一下如何做一个html页面。让我们先回顾一下html页面就是一个xxxx.html,是由哪些部分组成:
  1. html静态语言

  2. js

  3. css


很好理解,现在让我们打开项目。

我们在MyApp下新建一个文件夹叫,templates,用来存放所有的html,注意,这个名字不能随便改,因为这是已经写死在settings.py的配置里了。


接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

取名为welcome

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作


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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

浏览器打开看一下:

接口测试平台6:html欢迎首页前端制作


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

接口测试平台6:html欢迎首页前端制作

改成:

接口测试平台6:html欢迎首页前端制作

到这里我们会发现它提示说 没找到这个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中添加这一句:

接口测试平台6:html欢迎首页前端制作

添加我们app的名字:MyApp

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

发现已经没问题了。

   

现在我们鼠标点击pycharm之外的地方,来让django自动重启,或者你嫌慢可以直接手动强制重启。

然后让我们进入网址:http://127.0.0.1:8000/welcome/

接口测试平台6:html欢迎首页前端制作

发现已经可以正常展示我们亲手打造的主页了。

下面我们来进行简单的美化

先给这个文案变成大标题看看?

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

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

接口测试平台6:html欢迎首页前端制作

看看效果:

接口测试平台6:html欢迎首页前端制作

现在我们进行美化:

接口测试平台6:html欢迎首页前端制作

背景颜色改成了渐变色,增加了圆角和阴影。

点击左侧颜色小方块可以直接进行修改颜色:

看看效果:

好了,今天就先到这里了。主要就是介绍了如何返回一个html页面,如何写最初的几个控件元素,并试着随便写了点样式。大家可以私下练习,设计出漂亮的主页。


下节预告:顶部菜单的开发 和 如何在任何页面都可以看到菜单。


喜欢的小伙伴继续分享吧,老规矩,观看量过百日更!