Django实例:试着做些简单的网页

通过上篇Django的web开发,我们已经实现了交互,接下来我们试试创建一个学生信息列表页。

要求:
展示至少10条学生信息,有姓名、年龄、电话、邮箱。

效果图:
在这里插入图片描述

需要用到的知识
1、构建模板对象
2、构建数据结构
3、模板加载数据
4、前端传递数据
5、使用Django进行前端的模板渲染

来吧,走起
根据上篇的知识,我们建立了一个school的项目,简单回顾一下步骤;

  1. 创建开发的虚拟环境
  2. 创建Django项目
  3. 使用python打开项目
  4. 创建一个views视图文件
  5. 导入response模块
  6. 修改urls.py文件,指出路径
  7. 运行结果

我们接着做:
创建HTML文件存放目录template
创建存放静态资源的文件夹static
在这里插入图片描述

1、加载HTML文件返回模块
在这里插入图片描述
加载模块:from django.shortcuts import render_to_response
我们的前辈已经帮我们写好了,目前只需要我们调用就可以了

2、配置HTML文件路径
在这里插入图片描述
配置的文件名与创建的文件名一致

3、查看HTML样式
在这里插入图片描述
我们的HTML文件没有问题,接下来可以添加学生信息了

4、构建学生信息数据
在这里插入图片描述
我们来看看效果:
在这里插入图片描述
没有传到前端页面;
问题点:我们没有在return中返回,也就是漏掉了locals()。
return render_to_response(“index.html”,locals())
加上后,我们在看看:
在这里插入图片描述
没问题,我们添加的学生信息已经全部加载,但是样式不好看,图片也没出来。
所以我们接下来要对前端样式进行装饰。

5、调用静态文件配置
在这里插入图片描述
进入settings.py,配置静态文件,文件名与创建的文件名一致。

6、优化HTML界面
HTML讲究结构与样式分离,所以我们的css样式重新写入文件,创建index.css,并添加样式。
在这里插入图片描述
HTML根据自己实力进行美化,有时间的话,尽量做得漂亮一点。
在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

成都—大数据开发工程师—杨洋

你的打赏是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值