本文介绍了Vue +瓶实现简单的登录验证跳转,分享给大家,具体如下:
文件位置:
login.html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Login
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/static/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/static/axios.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=暗锹肌北?
action=" # " novalidate> & lt;形式;
& lt;标签="用户名"祝辞Username
& lt;输入类型="文本" name="用户名" id="用户名"占位符=笔淙肽拿帧皏模型=坝没弊４? lt; br>
& lt;标签="密码"祝辞Password
& lt;输入类型="文本" name="密码" id=懊苈搿闭嘉环?v模型“输入密码”=懊苈搿弊４? lt; br>
& lt; br>
& lt;按钮类型=鞍磁ァ眝:点击=暗锹肌弊４茿pply
& lt;/form>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var登录=new Vue ({
埃尔:“#登录',
数据:{
用户名:”,
密码:"
},
方法:{
登录:函数(){
axios.post (http://127.0.0.1:5000登录,{
用户名:this.username,
密码:this.password
})。然后(函数(响应){
console.log (response.status)//其实是应该走后台路由
如果方法(response.status)===200) {
window.location。href=' https://www.yisu.com/zixun/index '
}
})。抓住(函数(错误){
console.log (error.response)
}）
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
index . html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Index
& lt;/head>
& lt; body>
& lt; h2>你好,这是索引页! & lt;/h2>
& lt;/body>
& lt;/html>
Login.py
# - * -编码:utf - 8 - *
从进口瓶瓶,请求、会话重定向,url_for, render_template, make_response jsonify
应用=瓶(__name__)
@app。路线(“/登录”,方法=(“得到”,“文章”))
def登录():
如果请求。方法==癙OST”:
会话(“用户名”)=request.json.get(用户名)
会话['密码']=request.json.get(密码)
#登录成功,则跳转到索引页面
返回jsonify({“代码”:200年,“令牌”:" 123456 "})
#登录失败,跳转到当前登录页面
返回render_template (“login.html”)
@app.route(“/指数”)
def指数():
#如果用户名和密码都存在,则跳转到索引页面,登录成功
如果会话的“用户名”和“密码”会话:
返回render_template (index . html)
#否,则跳转到登录页面
返回重定向(url_for('登录'))
@app.route(/注销)
def注销():
会话。流行(“用户名”,没有一个)
会话。流行(‘密码’,没有)
返回重定向(url_for('登录'))
#设置密钥。保持这个秘密:
app.secret_key=' A0Zr98j R/3 y ~ XHH ! jmN] LWX/& # 63; RT”
if __name__==癬_main__”:
app.run (debug=True)
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
