首页
所有分类
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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
微信小程序（三）：网络请求
Jan 13 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
R71E(1) SONY600GR(1) R72E(1) DE1107(3) DE1102(1) ICOM(2) 对讲机(1) WR-800F(1) R9700(1) 胆机(1)
You might like
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
对联广告js flash激活
2006/10/19 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Angular2+国际化方案（ngx-translate）的示例代码
2017/08/23 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
大二学习计划书范文
2014/04/27 职场文书
2014年招商工作总结
2014/11/22 职场文书
个人创业事迹材料
2014/12/30 职场文书
护林员个人总结
2015/03/04 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL