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()提交。而这种非常隐蔽的问题,一般初学者也不会意识到问题存在哪里,因此还是需要小伙伴们多多看看相关的教程,增长自己的经验。

Javascript 相关文章推荐
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
vue构建单页面应用实战
Apr 10 Javascript
js评分组件使用详解
Jun 06 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 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
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
可输入的下拉框
2006/06/19 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python日志模块logging基本用法分析
2018/08/23 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python3 求约数的实例
2019/12/05 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
销售文员的岗位职责
2013/11/20 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL