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
Django实例:试着做些简单的网页_第1张图片

1、加载HTML文件返回模块
Django实例:试着做些简单的网页_第2张图片
加载模块:from django.shortcuts import render_to_response
我们的前辈已经帮我们写好了,目前只需要我们调用就可以了

2、配置HTML文件路径
Django实例:试着做些简单的网页_第3张图片
配置的文件名与创建的文件名一致

3、查看HTML样式
Django实例:试着做些简单的网页_第4张图片
我们的HTML文件没有问题,接下来可以添加学生信息了

4、构建学生信息数据
Django实例:试着做些简单的网页_第5张图片
我们来看看效果:
Django实例:试着做些简单的网页_第6张图片
没有传到前端页面;
问题点:我们没有在return中返回,也就是漏掉了locals()。
return render_to_response(“index.html”,locals())
加上后,我们在看看:
Django实例:试着做些简单的网页_第7张图片
没问题,我们添加的学生信息已经全部加载,但是样式不好看,图片也没出来。
所以我们接下来要对前端样式进行装饰。

5、调用静态文件配置
Django实例:试着做些简单的网页_第8张图片
进入settings.py,配置静态文件,文件名与创建的文件名一致。

6、优化HTML界面
HTML讲究结构与样式分离,所以我们的css样式重新写入文件,创建index.css,并添加样式。
Django实例:试着做些简单的网页_第9张图片
HTML根据自己实力进行美化,有时间的话,尽量做得漂亮一点。
Django实例:试着做些简单的网页_第10张图片

你可能感兴趣的:(Django)