3.5 信息系统的数据呈现

3.5信息系统的数据呈现 3.5信息系统的数据呈现 --基于Django的校园疫情信息管理系统 第三单元 信息系统的设计与开发 高中 必修2 信息系统与社会 第 页 能够根据现实需求确定需要输出的数据。 学会使用SQL中的聚合查询、TOP、ORDER BY等子句解决问题。 理解数据输出样式对信息应用的影响。 第 页 学 习 目 标 第 页 情 景 导 入 校园疫情信息管理系统 ＋ ＋ 方便管理，实时查看 ＋ _ B/S模式下，数据如何显示？ 第 页 第 页 情 景 导 入 信息系统以各种各样的方式向系统使用者输出信息，以屏幕显示方式输出各种数据是最为常见的方式。 数据库各项数据 操 作 系统标题 记录条数 …… 第 页 第 页 一.HTML标签及属性 <h1>校园疫情信息管理系统<font style ='color:black; font-size=15 '</font></h1> <h1></h1>:HTML中是用于定义大标题的一个标签 CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML对象显示属性的语言。HTML标记中的style属性即为该标记的CSS代码。 style: CSS中的style属性(设置字体大小、颜色、是否加粗等) <form><table> <img>…… 第 页 探 索 新 知 第 页 二.表格标签 <table border="1" > <tr> <td > 第一行第一列 </td> <td > 第一行第二列 </td> <td > 第一行第三列 </td> </tr> <tr> <td > 第二行第一列 </td> <td > 第二行第二列 </td> <td > 第二行第三列 </td> </tr> </table> 两行三列 在HTML中，用<table></table>来定义一个表格。 表格包含若干行<tr></tr>,每一个行包括若干单元格<td></td>。 第 页 探 索 新 知 第 页 活动一：打开表格网页文件，添加年龄、班级两列 <table border="1" > <thead > <th>编号</th> <th>姓名</th> <th>性别</th> </thead> <tbody > <tr> <td > 第一行第一列 </td> <td > 第一行第二列 </td> <td > 第一行第三列 </td> </tr> <tr> <td > 第二行第一列 </td> <td > 第二行第二列 </td> <td > 第二行第三列 </td> </tr> </tbody> </table> 提 示 <thead >定义表格的页眉 <tbody >定义表格的主体 课 堂 活 动 第 页 表格的数据从哪里来？ 数据库 课 堂 活 动 第 页 1.连接数据库，创建游标 2.查询学生信息 3.将数据传递给index.html文件显示 sql1 = 'select * from [student]' cursor.execute(sql1) all_users = cursor.fetchall() return render(request, "index.html", context={"students": all_users} {% for student in students %} <tr> <td>{{ student.sid }}</td> <td>{{ student.sname }}</td> …… views.py文件 index.html文件 MVC框架 4.关系数据库与游标 第 页 探 索 新 知 第 页 MVC框架 MVC(模型-视图-控制器)把代码的定义和数据访问的方法（模型，model）与请求逻辑（控制器，control）以及用户接口（视图，view）分开来。这种设计模式关键的优势在于各种组件都是松散结合的。 从事系统开发的人员能够更好地进行分工合作，提高开发效率。 页面设计师→设计HTML页面的样式而不用接