Flask和Vue关于模板变量渲染冲突的解决方案

AhriProGramming

于 2024-05-07 10:10:08 发布

阅读量612

点赞数 23

文章标签： flask vue.js python

本文链接：https://blog.csdn.net/AhriProGramming/article/details/138521463

版权

Flask支持Jinja2语法，其中会用到{{}}来作为语法模板的标识符，同理，Vue也使用{{}}作为字符串的模板，所以在使用时会发生冲突

结合Flask框架通过前端传值

插入数据

 from flask import Flask, render_template, request
 import pymysql
 
 def create_connection():
     global conn
     global cursor
     conn = pymysql.connect(host='127.0.0.1', port=3306,
                            user='root', passwd='chen3243027', db='unicom', charset='utf8')
 
     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
 app = Flask(__name__)
 
 
 @app.route("/add/user", methods=['GET', 'POST'])
 def add_user():
     if request.method == "GET":
         return render_template("add_user.html")
     create_connection()
     print(request.form)
     username = request.form['username']
     password = request.form['password']
     mobile = request.form['mobile']
     print(username, password, mobile)
     sql = "INSERT INTO admin (username, password, mobile) VALUES (%s, %s, %s)"
     cursor.execute(sql, (username, password, mobile))
     conn.commit()
 
     cursor.close()
     conn.close()
     return "<h1>添加成功</h1>"

工作流程如下：

浏览器请求连接（GET请求） --> Flask框架服务器响应请求返回页面（即点击链接到显示页面）--> 用户前段提交表单（POST请求） --> Flask框架服务器响应请求通过ORM或执行SQL语句实现数据库操作

request.form['username']也可以写作request.form.get('username')

总体思路即使用Flask框架搭建HTTP请求与响应系统、使用前端表单提交数据，再通过Flask框架下利用Python连接数据库实现SQL语句操作数据库

查询数据并在页面打印

app.py

 @app.route("/show/user", methods=['GET', 'POST'])
 def show_user():
     # if request.method == "GET":
     #     return render_template("show_user.html")
     create_connection()
     sql = "SELECT * FROM admin"
     cursor.execute(sql)
     result = cursor.fetchall()
 
     cursor.close()
     conn.close()
 
     print(result)
     return render_template('show_user.html', data=result)

show_user.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>名单展示</title>
     <!--BootStrap开发版本-->
     <link href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
     <!--生产版本-->
     <link href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
     <!--FontAwesome开发版本-->
     <!--        <link href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">-->
     <!--    FontAwesome生产版本-->
     <!--        <link href="/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
     <!--FontAwesome在线版本，离线版本有错误暂未排除-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
           integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
           crossorigin="anonymous" referrerpolicy="no-referrer"/>
     <style>
         table {
             tr {
                 /*display: block;*/
                 width: 500px;
 
                 td {
                     width: 400px;
                     text-align: center;
                     height: 1.5em;
                     line-height: 1.2em;
                     vertical-align: middle;
                 }
             ;
             }
 
             th {
                 width: 400px;
                 text-align: center;
                 height: 1.5em;
                 line-height: 1.2em;
                 vertical-align: middle;
             }
 
             th[scope='col'] {
                 border: 1px solid crimson;
                 color: coral;
             }
 
             th[scope='row'] {
                 border: 1px solid;
                 color: peru;
             }
         ;
 
             td {
                 border: 1px solid #dafbe1;
                 color: lightblue;
             }
         }
     </style>
     <script type="text/javascript" src="/static/plugins/vue-3.4.21/vue.global.js"></script>
 </head>
 <body>
 <div id="app">
     <div>
         <table>
             <thead>
             <tr>
                 <th scope="col">编号</th>
                 <th scope="col">用户名</th>
                 <th scope="col">密码</th>
                 <th scope="col">TEL</th>
             </tr>
             </thead>
             <tbody>
             <tr v-for="(data, index) in user" :key="index">
                 <th scope="row">[[ data.id ]]</th>
                 <td>[[ data.username ]]</td>
                 <td>[[ data.password ]]</td>
                 <td>[[ data.mobile ]]</td>
             </tr>
             </tbody>
         </table>
     </div>
     <script>
         var vm = Vue.createApp({
             delimiters: ['[[', ']]'],
             data() { // data中的所有数据会被vm对象进行遍历循环，赋值给vm对象作为属性
                 return {
                     user: JSON.parse('{{ data | tojson | safe}}')
                 }
             },
             methods: {}, //存放函数对象的成员
             mounted() {
             }
         }).mount('#app')
     </script>
 </div>
 </body>
 </html>

关键在于使用

delimiters: ['[[', ']]'],

让Vue的字符串的模板修改，避免冲突