将数据库数据以表格形式展示到前端的极简教程
本教程基于Django框架和Mysql数据库
1.models.py中创建表，并实施数据库迁移动作
#创建 Zhu 表
class Zhu(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=32)
password = models.IntegerField()
# 数据库迁移
python manage.py makemigrations # makemigrations一定要加s,不能忘记了
python manage.py migrate
2.向创建好的表中填入三条数据
user_obj1 = models.Zhu(id=1, name='jack', password=123)
user_obj1.save()
user_obj2 = models.Zhu.objects.create(id=2 ,name='Lily', password=234)
user_obj3 = models.Zhu.objects.create(id=3, name='Lisa'， password=456)
3.urls.py中登记
urlpatterns = [url(r'^exercise/', views.exercise)]
4.视图函数中书写代码
def exercise(request):
zhu_obj = models.Zhu.objects.all()
return render(request, 'exercise.html', locals()) # locals（）的操作方法是将当前函数名称空间的所有名字传出去
5.html页面展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格展示</title>
<link href="/static/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
# 上面两步引用bootstrap的部分需要提前将bootstrap下载到本地，不然css,js效果展现不出来
# 如果不想下载，可以同jquery引用的方法一致，连接需要去cdn.bootcdn.net查找
</head>
<body>
<h1 class="text-center">表格展示</h1>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user_obj in zhu_obj %} # 要将循环体放在for循环语法内部
<tr>
<td>{{ user_obj.id }}</td>
<td>{{ user_obj.name }}</td>
<td>{{ user_obj.password }}</td>
<td>
<a href="" class="btn btn-xs btn-success">编辑</a>
<a href="" class="btn btn-xs btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
</html>
展示的效果如下
6.补充知识点
- 表格书写，书写的格式如下
<table>
<thead>
<tr><th>……</th></tr>
</thead>
<tbody>
<tr><td>……</td></tr>
</tbody>
</table>
| 标签种类 | 标签功能 |
|---|---|
| table | 里面放的是表格内容 |
| thead | 里面放的是表头，放些字段信息 |
| tbody | 里面是表单，放的是数据信息 |
| tr | 代表一行，一行数据需要用tr括一下 |
| th | 加粗内部书写的文本 |
| td | 正常内部的文本 |
- 模板语法传值
在Html页面使用 {{ }}，在里面加入后端给前端提供的数据，前端就可以显示出来
