通过上篇Django的web开发,我们已经实现了交互,接下来我们试试创建一个学生信息列表页。
要求:
展示至少10条学生信息,有姓名、年龄、电话、邮箱。
效果图:
需要用到的知识
1、构建模板对象
2、构建数据结构
3、模板加载数据
4、前端传递数据
5、使用Django进行前端的模板渲染
来吧,走起
根据上篇的知识,我们建立了一个school的项目,简单回顾一下步骤;
- 创建开发的虚拟环境
- 创建Django项目
- 使用python打开项目
- 创建一个views视图文件
- 导入response模块
- 修改urls.py文件,指出路径
- 运行结果
我们接着做:
创建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根据自己实力进行美化,有时间的话,尽量做得漂亮一点。