成都网站建设设计

将想法与焦点和您一起共享

thinkjs之页面跳转同步异步操作

对于刚入手thinkjs项目的新手来说,时常会犯的一个错误就是“混用”各种代码逻辑,比如:我们经常在做后台管理系统的时候用到的登录框,

主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站开发、程序开发、微网站、小程序定制开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站设计、网站制作、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。

thinkjs之页面跳转同步异步操作

其实它原本是有一个路由专门存放自己的代码逻辑,而在点击提交按钮的时候,要达到的效果便是账号密码正确的时候,正常跳转页面,而错误的时候给出提示;为了发现问题,就先把源代码贴出来吧:




 
 用户登录



用户登录

用户登录

  • {{msg}}

页面效果:

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比较多,于是在不太清楚各个之间的区别时,就容易出现“互相冗杂”在一起的现象,于是就出现了这样的情况:




 
 用户登录
 
 
 
 
 
 
 


用户登录

{{msg}}

后台的处理逻辑:

'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之页面跳转同步异步操作
链接分享:http://chengdu.cdxwcx.cn/article/jchhij.html