一，前言

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，前端

登录成功： 个人主页： 前端返回值：

4.3，后端:状态码200无报错