首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

thinkjs之页面跳转同步异步操作

Posted in Javascript onFebruary 05, 2017

对于刚入手thinkjs项目的新手来说，时常会犯的一个错误就是“混用”各种代码逻辑，比如：我们经常在做后台管理系统的时候用到的登录框，

thinkjs之页面跳转同步异步操作

其实它原本是有一个路由专门存放自己的代码逻辑，而在点击提交按钮的时候，要达到的效果便是账号密码正确的时候，正常跳转页面，而错误的时候给出提示；为了发现问题，就先把源代码贴出来吧：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>用户登录</title>
</head>
<style>
 *{ margin:0px; padding:0px; list-style:none;}
 body,html{ height:100%;font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,sans-serif;}
 html{ background:url(/static/img/bg.gif) repeat-x;}
 body{ background:url(/static/img/ftbg.png) 0 bottom repeat-x;}
 .main{ background:url(/static/img/mbg.png) no-repeat center bottom;position: absolute;width:100%;height:500px;top:50%;
 margin-left:0;margin-top:-290px; z-index:99}
 .loginbox{ width:410px; height:375px;background:url(/static/img/borderbg.png); position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px; z-index:999;}
 .loginbg{ width:310px;padding:40px; margin:0 auto; margin-top:10px; background-color:#fff; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px;}
 .loginbox h3{ font-size:18px; font-weight:normal; color:#333; padding-bottom:15px; text-align:center;}
 .loginbox input{ width:260px; height:46px; border:1px solid #dbdbdb; padding:0 5px; font-size:14px; color:#666;border-radius:5px rgba(0,0,0,0.5);-moz-border-radius: 5px; -webkit-border-radius:5px; padding-left:45px; line-height:46px;}
 .loginbox ul li{ padding:15px 0; position:relative;}
 .loginbox .user{ background:url(/static/img/lgicon.png) 0 0 no-repeat; display:inline-block; position:absolute; width:19px; height:20px; left:15px; top:27px;}
 .loginbox .pwd{ background:url(/static/img/lgicon.png) 0 bottom no-repeat; display:inline-block; position:absolute; width:19px; height:22px; left:15px; top:27px;}
 .loginbox input.lgbtn{ width:312px; background-color:#f86c6b; border:0px; color:#fff; font-size:18px; font-family:\5FAE\8F6F\96C5\9ED1;line-height:46px; text-align:center; cursor:pointer; text-indent:0px; padding:0px;}
 .main h2{ margin-top:-40px; font-size:30px; text-align:center; color:#fff; font-weight:normal;}
 .footer{ position:fixed; z-index:9; bottom:0px; text-align:center; color:#666; width:100%; padding-bottom:20px; font-size:14px;}
</style>
<body>
<div class="main">
 <h2>用户登录</h2>
 <div class="loginbox">
 <div class="loginbg">
 <h3>用户登录</h3>
 <form id="fm" action="/index/login" method="post">
 <ul>
  <li><span class="user" ></span><input type="text" name="name" required="true" value=""></li>
  <li><span class="pwd" ></span><input type="password" name="pwd" required="true" value=""><span style="color: red;position: absolute;top: 70px;left: 10px" id="msg">{{msg}}</span></li>
  <li><input type="submit" value="登录" class="lgbtn"/></li>
 </ul>
 </form>
 </div>
 </div>
</div>
<!--<div class="footer">陕西钢谷电子商务股份有限公司 版权所有2016</div>-->
</body>
</html>

页面效果：

thinkjs之页面跳转同步异步操作

而正常的后台处理逻辑也便是：

'use strict';
/**
 * author: xxx
 * create: 2017-02-05
 * update: 2017-02-05
 * desc: 登录controller
 */
import Base from './base.js';
import cf from '../../common/config/config';
export default class extends Base {
 indexAction() {//登录页面
 //auto render template file index_index.html
 return this.display();
 };
 /**
 * 登录方法
 * @returns {*}
 */
 async loginAction() {
  let result = await this.model('admin').where({name: this.post().name, pwd: think.md5(this.post().pwd)}).select();
  if (result&&result.length > 0) {
  if(result[0].state==1){
   let adminrole= await this.model('adminroles').where({id:result[0].rids}).select();
   if(adminrole&&adminrole[0].state!=1){
   this.assign('msg', '该用户的身份已经被禁用或删除，请联系管理员！');
   return this.display("index");//错误信息渲染至登录页面
   }else{
   let acresult = await this.model('adminaction').where({rid: result[0].rids}).field('action').select();//查询该权限id的集合
   result[0]['actions'] = acresult;//把集合赋予session
   await this.session(cf.sessionKey, result[0]);
   await this.model('adminlog').add({uid: result[0].id, createtime: new Date().getTime() / 1000, ip: this.ip()})//添加登录日志
   return this.redirect('/main');//跳转main路由（主要是修改页面显示url）
   }
  }else{
   this.assign('msg', '该用户已经被停用或删除，请联系管理员！');
   return this.display("index");//错误信息渲染至登录页面
  }
  } else {
  this.assign('msg', '用户名或密码错误！');
  return this.display("index");//错误信息渲染至登录页面
  }
 }
 /**
 * 退出方法
 * @returns {promise|*|void|PreventPromise}
 */
 async loginoutAction() {
  await this.session();//清除session
  return this.redirect('/');//跳转登录页面
 }
}

原本这样处理下来的代码算是最简洁的方式。但是对于新手来说，因为在easyui官网上看到的demo比较多，于是在不太清楚各个之间的区别时，就容易出现“互相冗杂”在一起的现象，于是就出现了这样的情况：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>用户登录</title>
 <style>
 .form-group {
  margin-bottom: 30px;
 }
 .form-group > label {
  float: left;
  width: 80px;
 }
 .form-group > input {
  float: right;
 }
 h1 {
  text-align: center;
  margin-bottom: 50px;
 }
 </style>
 <link rel="stylesheet" href="/static/js/jquery-easyui/themes/default/easyui.css">
 <link rel="stylesheet" href="/static/js/jquery-easyui/themes/icon.css">
 <!--easyui js-->
 <script src="/static/js/jquery-easyui/jquery.min.js"></script>
 <script src="/static/js/jquery-easyui/jquery.easyui.min.js"></script>
 <script src="/static/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div>
 <div style="width:400px;height:400px;margin: 200px auto ;border: 2px solid #9cc8f7;border-radius: 10px;padding:20px 0 0 10px"
  id="login1" buttons="#dlg-buttons">
 <h1>用户登录</h1>
 <form id="ff1" method="post" url="/index/login">
  <div class="form-group">
  <label>用户名：</label>
  <input class="easyui-textbox" name="name" style="width:300px" data-options="required:true">
  </div>
  <div class="form-group">
  <label>密码：</label>
  <input class="easyui-textbox" type="password" name="pwd" style="width:300px"
   data-options="required:true">
  </div>
 </form>
 <div id="dlg-buttons">
  <!--<a href="javascript:submitForm()" class="easyui-linkbutton" iconCls="icon-ok" plain="true">提交</a>-->
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" iconCls="icon-ok"
  plain="true">提交</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" iconCls="icon-cancel"
  plain="true">取消</a>
 </div>
 <!--<b id="msg" style="display: none;"></b>-->
 {{msg}}
 </div>
</div>
<script>
 function submitForm() {
 jQuery.ajax({
  url: "/index/login",
  async: false,
  method:"POST",
  data:{
  name:"123",
  pwd:"123"
  }
 });
 }
 function clearForm() {
 jQuery('#ff1').form('clear');
 }
</script>
</body>
</html>

后台的处理逻辑：

'use strict';
import Base from './base.js';
export default class extends Base {
 /**
 * index action
 * @return {Promise} []
 */
 indexAction(){
 //auto render template file index_index.html
 return this.display();
 }
 async loginAction(){
 // return this.redirect('/login');
 console.log(this.post());
 let name=this.post().name;
 let pwd=this.post().pwd;
 let model=this.model('user');
 let data = await model.where({name:name,pwd:pwd}).find();
 if(!think.isEmpty(data)){
 console.log("//////////");
 return this.redirect('/login888');
 // return this.json({'succ':true});
 }else{
 this.assign('msg','账号或者密码错误！');
 return this.display('index');
 // return this.json({'succ':false,'msg':'账号或者密码错误！'});
 }
 }
}

而这样处理的结果却是：

thinkjs之页面跳转同步异步操作

出现了浏览器自身报错：此方法已被弃用。新手因为接触thinkjs的并不是很多，所以时常会混淆其中，以为这样很正确，其实在浏览器自身的js运行机制中，该方法是行不通的。因此建议初接触thinkjs的小伙伴们，在写页面跳转的逻辑，比如用到redirect或assign渲染时，前台就不要使用ajax提交；而后台用json返回时，就不要使用sumbit()提交。而这种非常隐蔽的问题，一般初学者也不会意识到问题存在哪里，因此还是需要小伙伴们多多看看相关的教程，增长自己的经验。

thinkjs之页面跳转同步异步操作

- Author -

叶叶Yeah

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
清空上传控件input file的值
Jul 03 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
微信小程序实战之登录页面制作（5）
Mar 30 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 #Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 #Javascript
js仿小米手机上下滑动效果
Feb 05 #Javascript
简单实现js无缝滚动效果
Feb 05 #Javascript
完美的js图片轮换效果
Feb 05 #Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
本地化存储(1) TimePickerView(1) vue-router-link(1) Jmerte(1) Vue(10) KVM(1) Storage(1) Yolov5(1) click(1) 自定义组件(1)
You might like
memcache一致性hash的php实现方法
2015/03/05 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
JS编程小常识很有用
2012/11/26 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
python函数的5种参数详解
2017/02/24 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python for循环生成列表的实例
2018/06/15 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
美国知名保健品网站：LuckyVitamin（支持中文）
2017/08/09 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
财务会计毕业生个人求职信
2014/02/03 职场文书
服务员岗位责任制
2014/02/11 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2015年市场部工作总结
2015/04/30 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
python基础之爬虫入门
2021/05/10 Python
Element实现动态表格的示例代码
2021/08/02 Javascript