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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
基于jquery实现五星好评
Nov 18 jQuery
JS字符串常用操作方法实例小结
Jun 24 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue实现todo应用的示例
Feb 20 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
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
用PHP发电子邮件
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP里的中文变量说明
2011/07/23 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python批量提取word内信息
2015/08/09 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python操作Jira库常用方法解析
2020/04/10 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
建筑人员岗位职责
2013/12/25 职场文书
十佳护士获奖感言
2014/02/18 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
小学校长汇报材料
2014/08/20 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
中班下学期个人总结
2015/02/12 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Nginx限流和黑名单配置
2022/05/20 Servers