zoukankan      html  css  js  c++  java
  • wex5 实战 登陆帐号更换与用户id一致性

    一 前言   

       关于用户登陆,注册,页面跳转,我讲了很多,都是页面框架级别的。有人问到这个问题,索性总结一下,今天是收尾最后一篇。

       以往初学时的设计是:

       1 注册

       2 登陆

       3 进入页面。

       这种很简单,没有id就进不了主页面。

       但是实际上,除了通讯类的软件,一般软件不是先进入登陆页面,而是先进入主页,当操作某个功能时,再提示登陆。或者登陆后,在某个时刻更换帐号,重新进入登陆页面。

       像这种后来进入登陆页后,用户登陆成功后如何保证再回到web时,各个页面的用户id唯一性呢??

       用户id更换,web中的每一个页面必须同时更换。

       也就是说,每个页面的首要任务是:随时接收用户id,并判断用户id是否更改,如有更换,则即时更新用户信息和权限。

       登陆页作为一个任意页面的公共目标页面,如何跳转到来源页面并正确传参呢?

       带着这些问题,我们完成页面框架的收尾工作。

    二 效果演示:

      1 进入主页后登陆

          

    2  更换帐号

        

       

      如果用户已经登陆,则弹出更换帐号对话框

      

      用户更换成功,头像和号码同步进行了更新

      

    三  设计思路:

       页面同步,modeload可以不要,它只能初始化页面,刷新一次data.但是modelParamsReceive异常重要,在页面加载之前,监听参数状态,并进行参数接收,触发data刷新。这个我在页面同步的博文中简单提过,现在深入一下。

    四  页面逻辑与代码实现

       1 监听参数并接参,所有页面都作如此处理,来保证用户id是否更换,如有更接,即时过滤并得到当前行。data自动加载关闭掉,设置过滤条件后,接管刷新事件,效能问题影响不大。setFilter里的语句为ksql拼接写法,其实是通过XHR的双向联接,用sql语句过滤数据库,这就是说,每一个页面,都用这种方法,保证用户id一致性,效能不会有太大影响。

        

       2 帐号更换

        登陆与帐号的显示切换,很简单,一个三目表达式

        

        未登陆与登陆后的头像更换,同上

       

        提示帐号更换的窗口弹出,用innerHTML得到span元素的值来判断 

        

       justep.shell.showPage页面跳转并传参,比以往多了一个from,这是一个键,我的定义是,哪个页面跳转到登陆页,给它一个来源,登陆页根据from,登陆成功后再回到

    mine页面。如果是其它页面,则跳转到其它页面。不能每次登陆后去一个页面,就要这么来设置。

       3 登陆页面

         

           参数接收,不看不知道,一看,多了这么多判断。登陆页作为一个公共页面,哪个页面都能传参回来,不能直接刷新data,根据来源页面的this.params.from的值,得到来源是哪个页面,才能决定,如何动作。

        

        登陆成功后,跳转到来源页面。这里用变量,呵呵,这么写还真行。

        每个页面都要接参并传参,作为用户id一致性的必要判断。

       4 所有页面接参,再次重申

        

       5 用户id在传参判断中居首要地位。比如下图中,一个页面,左右两个页面都对它传参,这个页面就要首先判断用户id,然后根据来源执行不同的动作。

        没想到,后期登陆,带了如此复杂的传参问题。

        

       我发现,有的同学中modeload里强制刷data,还有的是在modelactive时接参,这都是不对的。

       经过反复测试,我抛弃了window.xxxx的全局变量,而是使用了逻辑复杂的传参与接参。原因是window.xxxx变量虽然可以全局,但是需要手动得到,不能触发类似于modelParamsReceive那种类似于监听器的事件来触发data刷新。以前探讨过的全局可观察变量,反复测试,在不同的页面跳转过程中,不能向上级页面传递可观察属性。

       比如,mine页面已经打开过,再跳转回来就不行了。

       跟那个modeload一样,只能初始化一次页面。除非你关掉web重新打开。

       

    五  总结:

      1 modelParamReceive,是一个实时的监控事件,无论页面是否打开过,都可以接参

      2 modelParamReceive看似代码复杂,实际简单,可以实现更复杂的页面控制

     3 传参,不仅仅是页面跳转,在多级页面中,还起到中间页面,控制简单流程的作用。

    相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251

     

     扫描二维码,看高清教学视频。

  • 相关阅读:
    Go语言如何判断是否是零值
    世界、中国大事记(古代时间线)
    微服务架构带来的分布式单体
    golang如何优雅的编写事务代码
    项目管理的一些知识
    高并发葵花宝典
    深度学习-常见神经网络
    教你用Cobra开发类似docker的命令行
    深度学习是什么
    人工神经网络是什么
  • 原文地址:https://www.cnblogs.com/fangziffff123/p/6222920.html
Copyright © 2011-2022 走看看