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

时间：2021-05-26

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

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

<!DOCTYPE html><html xmlns="http://mon/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的并不是很多，所以时常会混淆其中，以为这样很正确，其实在浏览器自身的js运行机制中，该方法是行不通的。因此建议初接触thinkjs的小伙伴们，在写页面跳转的逻辑，比如用到redirect或assign渲染时，前台就不要使用ajax提交；而后台用json返回时，就不要使用sumbit()提交。而这种非常隐蔽的问题，一般初学者也不会意识到问题存在哪里，因此还是需要小伙伴们多多看看相关的教程，增长自己的经验。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章