基于MUI+Flask+MongoDB+HBuilderX的APP登录系统以及个人中心变量显示

🍋欢迎关注
🍋APP开发从0到1
🍋共同努力

文章目录

一，前言

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(){returnfalse;}});

这样就避免了登录成功，点击返回键又返回了登录页面。

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无报错