flask+vue开发学习

全栈开发

前言:开发打算采取的方案是前端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漏洞

相关漏洞学习网站如下:

https://morblog.cc/posts/2946623354/

Jinga2模板引擎使用以下分隔符从HTML转义。

  • 控制结构: {%...%}用于语句

  • 变量取值: {{...}}表达式可以打印到模板输出

  • 注释: {#...#}用于注释未包含在模板输出中

  • #... ##用于行语句

<html>
   <head>
      <script type = "text/javascript"
         src = "{{ url_for('static', filename = 'hello.js') }}" ></script>
   </head>
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

这里的input type是button,按钮,onclik则是按钮触发后触发的函数,这段代码的解析需要具有html和js的一般基础。

页面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)

Flask是一个用于构建Web应用程序的Python微框架,它简洁而灵活。它提供了可扩展的特性,可以帮助我们轻松地构建和部署Web应用。FlaskVue是两个不同的技术,但可以搭配使用,以构建更强大和用户友好的应用程序。 Vue是一个流行的JavaScript前端框架,被广泛用于构建交互式Web界面。它具有响应式数据绑定和组件化的特点,使得开发人员可以轻松地构建复杂的前端应用程序和数据可视化界面。 深度学习是一种人工智能技术,可以通过模拟人脑的神经网络来处理和分析大量的数据,从而实现各种智能任务。深度学习有助于从图像、文本和声音等各种数据源中提取有用的信息,可以应用于图像识别、自然语言处理和推荐系统等领域。 将FlaskVue和深度学习结合起来可以实现一些有趣和强大的应用。例如,我们可以使用Flask作为后端API框架,处理用户的请求,并调用深度学习模型来处理图片、语音或文本的数据。然后,我们可以使用Vue来构建前端界面,将模型的结果可视化并与用户进行交互。 在这种结合中,Flask负责处理后端逻辑和提供API接口,Vue负责前端界面的构建和数据展示,深度学习则扮演着处理复杂数据的角色。通过这种方式,我们可以构建出能够满足用户需求的智能应用程序,为用户提供更好的体验和服务。 总而言之,FlaskVue和深度学习是三个不同的技术,但它们可以搭配使用,以构建功能强大和用户友好的Web应用。这种组合可以让我们充分利用每个技术的优势,从而实现更多有趣和有用的应用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值