模板的基本使用

星哥玩云

发布于 2022-09-14 18:41:25

6540

发布于 2022-09-14 18:41:25

文章被收录于专栏：开源部署

一、概述

模板是HTML页面，可以根据传递的数据进行填充

二、模板存放目录

在工程下创建templates模板目录进行模板文件的存放

三、将templates标记为模板文件夹

如果使用的pycharm进行工程的创建则templates已经选好为Jinja2模板引擎
如果为手动创建工程则需手动选择模板引擎

选择templates->Mark Directory as -> Template Folder

选择Template language -> Jinja2 -> ok

四、定义模板 index.html

目的

作为主页使用

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>Lucky is a ver good man</h1>
</body>
</html>

视图函数

<span class="hljs-keyword">from</span> flask <span class="hljs-keyword">import</span> Flask,render_template  <span class="hljs-comment"># 导入Flask类与渲染模板render_template</span>

<span class="hljs-meta">@app.route('/')  # 路由地址</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>:</span>  <span class="hljs-comment"># 视图函数</span>
    <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">'index.html'</span>)  <span class="hljs-comment"># 渲染首页模板</span>

测试网址 http://127.0.0.1:5000

五、展示所有用户

视图

<span class="hljs-meta">@app.route('/user/')</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">user</span><span class="hljs-params">()</span>:</span>
    <span class="hljs-comment"># 查询所有用户数据</span>
    userData = User.query.all()
    <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">"user.html"</span>, userData=userData)

模板 user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <style>
        table{
            border-collapse: collapse; /*合并单元格*/
            margin: auto; /*居中*/
        }
        tr>td{
            width: 150px; /*宽度*/
            border:1px solid chartreuse; /*边框*/
            text-align: center; /*文字水平居中*/
        }
    </style>
</head>
<body>
    <table>
        <caption><h2>用户信息展示表</h2></caption>
        <tr>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        {% for user in userData %}
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.sex }}</td>
            <td>{{ user.age }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>