一,前言
1.1,表单传值给子页面及其状态登录保持【MUI+Flask+MongoDB+HBuilderX】【全栈】
之前的文章已经写过webapp采用前后端分离,以及采用MongoDB实现登录操作。现在写一篇关于主页面表单传值给子页面,以及保持登录状态的文章。
二,关于主页面表单传值给子页面
2.1,思路设计(已废弃)
关于我的app,我是这样设计的,打开app,首先打开登录页面,登录之后跳转到主页面。 传递用户名给首页,然后已首页的用户名,在底部的导航页再传值给每一个子页面。已用户名为唯一键,这样可以实现一个伪保持登录的功能,但是弊端还是有的。 之后换了后端的flask保持登录状态。详细看文章下半部分。
2.2,传值给子页面
前端给后端传值用POST方法。 mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
众所周知,js还有一个extras方法。因为在其他平台交稿有文章代码不超过占比要求。我尽量重要的代码贴出来,其他无伤大雅的代码就截图看一下吧。 理解就好。 post方法,涉及个人IP地址,已打码处理。
2.3 登录成功禁止返回登录页面
在登录之后跳转的主页面设置禁止返回登录页面。
//禁止返回登录页面
mui.init({
beforeback: function() {
return false;
}
});
这样就避免了登录成功,点击返回键又返回了登录页面。
2.3 子页面接受登录页传来的参数
采用.plusReady方法。 self接受主页面传值(json),之后获取到里面的username,赋值为变量name。
mui.plusReady(function(){
// 在这里调用plus api
var self = plus.webview.currentWebview();
var name = self.username;
// var version = self.version;
console.log ("我的用户名为"+name);
});
之后这个变量可以以相同的方法,传值给各个子页面。但是繁琐。理论来说可以实现伪保持登录状态。 我之后采用了更加简单的flask后端session方法,见下文。
三,后端保持登录状态(优方法)
3.1,保持session
我采用了session。 首先,引入session。和设置密码。 之后在登录成功的if语句下写:
session['username'] = request.form['username']
这样成功把username存入了session。
3.2,其他页面申请获取后端值
3.2.1,前端:以我的myappindex为例哈
我还是用了熟练的mui.post方法; 前端的html代码,已span或者div标签的id固定值接受js传递的变量参数:
<p>当前登录账号</p>
<h4><span id="username"></span></h4>
3.2.2,后端:
设置前端请求的对应路由:
@app.route("/myappindex",methods=['POST','GET'])
def myappindex():
图上表达的已经相当的清楚了。
3.3,登出
在个人主页写一个退出当前账号按钮。 已同样的方法,在后端写一个,清除session方法即可。
四,成果展示:
4.1,数据库
4.2,前端
登录成功: 个人主页: 前端返回值: