首页
所有分类
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之ESC(第二类混淆)
May 06 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
详解JavaScript对象类型
Jun 16 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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
KDKA(1) 中波(3) 短波(8) 保养(1) 立体声(1) 收音机(62) 长波(3) 调频(4) Harman Kardon(1) 电台频率(32)
You might like
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
Python collections模块实例讲解
2014/04/07 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python解释器spython使用及原理解析
2019/08/24 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
Vans荷兰官方网站：美国南加州的原创极限运动潮牌
2018/01/23 全球购物
NHL官方在线商店：Shop.NHL.com
2020/05/01 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
中英文求职信范文
2014/01/27 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
作文评语大全
2014/04/23 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年采购员工作总结
2015/04/27 职场文书
班主任工作总结范文
2015/08/13 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers