本教程基於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頁面使用 {{ }}，在里面加入后端給前端提供的數據，前端就可以顯示出來