【模板语法初识】
【模板语法初识】
将一个字典传给html页面，让页面操作这个字典
jinjia2模块
【1】模板语法之数据交互
<h1>传过来的字典</h1>
{{user}}
<h1>姓名</h1>
{{user.get('username')}}
<h1>年龄</h1>
{{user.age}}
<h1>自定义hobby</h1>
{{user['hobby']}}
- urls
- main
- get_dict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地 链接 引入方法 -->
<!-- Websource 文件夹 拷贝到当前文件夹下即可使用 -->
<!-- jQuery 文件 -->
<script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
<!-- bootstrap-sweetalert(弹框) 的 CSS 文件 -->
<link rel="stylesheet" href="Websource\bootstrap-sweetalert\dist\sweetalert.css">
<!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
<script src="Websource\bootstrap-sweetalert\dist\sweetalert.js"></script>
<!-- CDN 链接 引入方法 -->
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
<!-- jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
<h1>传过来的字典</h1>
{{user}}
<h1>姓名</h1>
{{user.get('username')}}
<h1>年龄</h1>
{{user.age}}
<h1>自定义hobby</h1>
{{user['hobby']}}
</body>
</html>
- views
【2】模板语法之数据交互循环
后端获取数据库中的数据展示到页面中
- 语法
{% for user_dict in info_data %}
<tr>
<td>{{user_dict.id}}</td>
<td>{{user_dict.username}}</td>
<td>{{user_dict.password}}</td>
<td>{{user_dict.hobby}}</td>
</tr>
{% endfor %}
- urls
- views
- main
- divt_info
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地 链接 引入方法 -->
<!-- Websource 文件夹 拷贝到当前文件夹下即可使用 -->
<!-- jQuery 文件 -->
<script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
<!-- bootstrap-sweetalert(弹框) 的 CSS 文件 -->
<link rel="stylesheet" href="Websource\bootstrap-sweetalert\dist\sweetalert.css">
<!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
<script src="Websource\bootstrap-sweetalert\dist\sweetalert.js"></script>
<!-- CDN 链接 引入方法 -->
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
<!-- jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">用户数据</h1>
<table class="table table-hover table-striped">
<thead>
<th>ID</th>
<th>USERNAME</th>
<th>PASSWORD</th>
<th>HOBBY</th>
</thead>
<tbody>
{% for user_dict in info_data %}
<tr>
<td>{{user_dict.id}}</td>
<td>{{user_dict.username}}</td>
<td>{{user_dict.password}}</td>
<td>{{user_dict.hobby}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>