flask+vue开发学习

ArcfGo

已于 2022-07-21 18:14:42 修改

阅读量2k

点赞数

文章标签： flask python 后端

于 2022-07-21 18:06:10 首次发布

本文链接：https://blog.csdn.net/m0_56061901/article/details/125918085

版权

全栈开发

前言：开发打算采取的方案是前端vue+后端flask框架进行web开发

1.后端基础（python-flask）

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/result')
def result():
   dict = {'phy':50,'che':60,'maths':70}
   return render_template('hello.html', result = dict)
if __name__ == '__main__':
   app.run(debug = True)

基础代码

从flask中通过模板返回html代码

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
   return render_template(‘hello.html’)  #会从templates目录下寻找 hello.html
if __name__ == '__main__':
   app.run(debug = True)

render_template函数，开发人员在开发flask的过程中，如果使用jinga2的引擎，应当注意避免SSTI漏洞

页面form提交跳转

在以下示例中， '/' URL呈现具有表单的网页（student.html）。 填充的数据将发布到'/result' result'URL，触发result()函数。

code

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def student():
   return render_template('student.html')
@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'POST':
      result = request.form
      return render_template("result.html",result = result)
if __name__ == '__main__':
   app.run(debug = True)

<html>
   <body>
      <form action = "http://localhost:5000/result" method = "POST">
         <p>Name <input type = "text" name = "Name" /></p>
         <p>Physics <input type = "text" name = "Physics" /></p>
         <p>Chemistry <input type = "text" name = "chemistry" /></p>
         <p>Maths <input type ="text" name = "Mathematics" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
   </body>
</html>

html代码解析:

<form大标签 action表示输入表单后提取到的入口页面，表示提交的form表单会根据post的方法送到http://localhost:5000/result这个页面中。同时观察后端处理代码，后端检测了访问的方法，如果是POST的话，就获取表单并且把结果赋给result再return给result.html

<form action="form_action.asp" method="get">
 <p>这里输名字: <input type="text" name="fname" /></p>
 <p>接着输名字: <input type="text" name="lname" /></p>
 <input type="submit" value="Submit" />
</form>

比如说这里的话就会把页面送到form_action.asp页面。

这里把form提交给了result

result.html代码如下

<!doctype html>
<html>
   <body>
      <table border = 1>
         {% for key, value in result.items() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

用了循环语句 emmmm，前端确实还挺好玩的

cookie

在Flask中，cookie设置在响应对象上。使用make_response()函数从视图函数的返回值中获取响应对象。之后，使用响应对象的set_cookie()函数来存储cookie。

Sessions

Sessions存储在服务器上，想必打ctf的小伙伴都有了解，。会话是客户端登录服务器并注销服务器的时间间隔。需要在此会话中保存的数据存储在服务器上的临时目录中。为每个客户端的Session ID分配Session ID 。会话数据存储在cookie之上，服务器以加密方式对其进行签名。对于此加密，Flask应用程序需要定义的SECRET_KEY 。

Session对象也是一个字典对象，包含会话变量和关联值的键值对。

例如，要设置'username'会话变量，请使用以下语句 -

Session[‘username’] = ’admin’
12

要释放会话变量，请使用pop()方法。

session.pop('username', None)