前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >接口测试平台6:html欢迎首页前端制作

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

作者头像
我去热饭
发布2022-05-19 10:23:32
1.8K0
发布2022-05-19 10:23:32
举报
文章被收录于专栏:测试开发干货

在上一节中,我们成功的返回了一个只有一段文案的字符串,我们和同事访问自己的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的静态语言,绝大部分就像是 积木一样的组装,就是很多的标签对。如 <head></head> 便是这个整个页面的头部,里面可以放title 和其他要引入的js ,css,和你自己写的全局style样式等等。 <title></title>标签内放的是这个页面的标头,我们可以随便改一下中间的白字: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页面,如何写最初的几个控件元素,并试着随便写了点样式。大家可以私下练习,设计出漂亮的主页。

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发干货 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档