首页
所有分类
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技术很烂的五个原因
Apr 26 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
js实现下一页页码效果
Mar 07 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
JS实现使用POST方式发送请求
Aug 30 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) 微信小程序(9) WeUI(1) vue-esign(1) Pillow(2) map(4) 指针(1) pdfkit(1) random(1) 蒙特卡罗(1)
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vue实现axios图片上传功能
2019/08/20 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python读取各种文件数据方法解析
2018/12/29 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
英国领先的运动营养品牌：Protein Dynamix
2018/01/02 全球购物
c语言常见笔试题总结
2016/09/05 面试题
中学生自我评价范文
2014/02/08 职场文书
中秋客户感谢信
2015/01/22 职场文书
建议书格式
2015/02/04 职场文书
通知函的格式
2015/04/27 职场文书
《打电话》教学反思
2016/02/22 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python