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

130 阅读5分钟

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

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

  1. html静态语言

  2. js

  3. css

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

图片

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

图片

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

右键新建html文件:

图片

取名为welcome

图片

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

图片

html的静态语言,绝大部分就像是 积木一样的组装,就是很多的标签对。如 便是这个整个页面的头部,里面可以放title 和其他要引入的js ,css,和你自己写的全局style样式等等。 标签内放的是这个页面的标头,我们可以随便改一下中间的白字:Title ,改成:首页。

然后已浏览器模式打开这个页面,看看 首页俩个字 出现在了哪?

如何用浏览器打开?

方法1:

我们鼠标点击这个页面的黑色空白处,右上角出现一排浏览器标志,点击一个你安装过的就可以打开了。

图片

方法2:

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

图片

方法3:

手动打开浏览器,在浏览器中输入这个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中添加这一句:

图片

添加我们app的名字:MyApp

图片

这样就完成了。我们再回到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页面,如何写最初的几个控件元素,并试着随便写了点样式。大家可以私下练习,设计出漂亮的主页。

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

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

本文使用 文章同步助手 同步