对于刚入手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 * {边距33600 pxpadding:0pxlist样式的： none}正文，html { height :100%；font :12 px/1.5 5 FAE 8F6F 96 C5 9ED1，tahoma，arial，无衬线；} html {背景： URL(/static/img/BG。gif)重复-x；}正文{背景： URL(/static/img/ftbg。巴布亚新几内亚)0底部重复-x；} .主{后台： URL(/static/img/mbg。巴布亚新几内亚)无重复中心底部；绝对位置：宽度：100%;高度：500 px前：50%；左边距：0;边距-top :-290 px；z-index:99} .loginbox { width :410 px h8 :375 px background : URL(/static/img/border BG。巴布亚新几内亚)；绝对位置：左侧：50%;前：50%；边距-左侧：-200像素；边距-top :-200 px；边界半径：8 px-moz-border-radius : 8px；-web套件-边框-半径：8 pxz指数：999;} .loginbg { width :310 xpadding :40 pxmargin 33600 auto margin-top :10 px；背景-color : # fff；边界半径：8 px-moz-border-radius : 8px；-web套件-边框-半径：8 px} .loginbox H3 { font-size :18 px；字体粗细：正常；颜色： # 333填充-底部：15 px文本对齐：居中；} .loginbox输入{宽度：260像素高度：46 pxborder:1px实心# dbdbdbpadd :0 5px font-size :14 px；color : # 666 border-radius :5 px rgba(0，0，0，0.5)；-moz-border-radius : 5px；-web套件-边框-半径：5 px左填充左：45px线高：46 px} .loginbox ul Li { padd :15 px 0；位置：相对；} .loginbox .用户{后台： URL(/static/img/lgicon。png)0 0不重复；显示：内嵌块；位置：绝对；宽度：19 px高度：20 pxleft :15 xtop :27 px }。loginbox .pwd {后台： URL(/static/img/lgicon。巴布亚新几内亚)0底部无重复；显示：内嵌块；位置：绝对；宽度：19 px高度：22 pxleff :15 xtop :27 px }。loginbox输入。lgbtn { width :312 px背景-颜色： # f86 c6bborder :0 pxcolor : # ffffont-size :18 px；font-family : 5 FAE 8F6F 96 C5 9ED1；线高：46 px文本对齐：居中；光标：指针指针；文本-缩进：0像素；padding:0px }。主H2 {边缘-顶部：-40px；font-size :30 px文本对齐：居中；color: # fff字体粗细：正常；} .页脚{ position:fixedz索引：9;底部：0像素文本对齐：居中；颜色： # 666宽度：100%;填充-底部：20 pxfont-size :14 px}/stylebodydiv class='main' h2用户登录/H2H3用户登录/H3表单id=' FM ' action='/index/log in ' method=' post ' ul lispan class=' user '/span put type=' text ' name=' name ' required=' true ' value=' '/Li lispan class=' pwd '/span put type=' password ' name=' pwd ' required=' true ' value=' span style=' color : red；绝对位置：top : 70pxleft : 10px ' id=' msg ' { msg } }/span/Li Li输入类型='submit '值='登录李/ul/form/div/div/div！- div class='footer '陕西钢谷电子商务股份有限公司版权所有2016/div - /body/html页面效果：

而正常的后台处理逻辑也便是：

使用"严格";/* * *作者： XXX *创建： 2017-02-05 *更新： 2017-02-05 * desc :登录控制器*/从""导入基础/基地。js '；从导入随军牧师././common/config/config '；导出默认类扩展了Base { indexAction() {//登录页面//自动渲染模板文件index_index.html返回这个。显示()；};/** * 登录方法* @返回{ * } */async loginAction(){ 0让结果=等待这个。模型(“管理员”).其中({name: this.post().名称，pwd :薄。MD5(这个。post().pwd)}).select()；if(结果结果。长度0){ if(结果[0]).state==1){ 0让adminrole=等待此消息。模型(' adminroles ').其中({id:result[0]).rids}).select()；if(adminroleadminrole[0]).状态！=1){ this.assign('msg '，'该用户的身份已经被禁用或删除，请联系管理员!');返回这个。显示('索引')；//错误信息渲染至登录页面}else{让a结果=等待这个。模型(“管理操作”).其中({rid:结果[0])。rids}).字段("操作")。select()；//查询该权限编号的集合结果[0]["actions"]=结果；//把集合赋予会话等待此。会话(参见会话密钥，结果[0]);等待this.model('adminlog ').添加({uid:结果[0])。标识，创建时间：新日期()。getTime()/1000，ip: this.ip()})//添加登录日志返回这个。重定向('/main ')；//跳转主要的路由（主要是修改页面显示url) } }else{ this.assign('msg '，'该用户已经被停用或删除，请联系管理员!');返回这个。显示('索引')；//错误信息渲染至登录页面} } else { this.assign('msg '，'用户名或密码错误!');返回这个。显示('索引')；//错误信息渲染至登录页面} } /** * 退出方法* @返回{ promise | * | void | prevent rozee } */async loginoutacon(){请稍候。session()；//清除会话返回这个。重定向('/')；//跳转登录页面}}原本这样处理下来的代码算是最简洁的方式。但是对于新手来说，因为在easyui官网上看到的演示比较多，于是在不太清楚各个之间的区别时，就容易出现"互相冗杂"在一起的现象，于是就出现了这样的情况：

！DOCTYPE html html head meta charset=' UTF-8 '标题用户登录/title样式。表单组{边距-底部： 30px} .表单组标签{左侧浮动：宽度： 80px} .表单组输入{向右浮动right } h1 {文本对齐： }居中；边距-底部： 50px} /style link rel='样式表href='/static/js/jquery-measuri/themes/default/measuri。CSS ' link rel='样式表href='/static/js/jquery-measuri/themes/icon。CSS '！-easy ui js-script src=' http :/static/js/jquery-easy ui/jquery。量滴js '/script script src=' http :/static/js/jquery-easy ui/jquery。简单的用户界面。量滴js '/script script src=' http :/static/js/jquery-easy ui/locale/easy ui-lang-zh _ cn。js '/脚本/head dydiv style=' width 3333高度：400 px余量： 200像素汽车；border: 2px实心# 9cc 8f 7边框-半径： 10pxpadd :20 px 0 0 10px ' id=' login 1 '按钮=' # DLG-巴顿斯h1用户登录/h1表单id='ff1 '方法=' post ' URL='/index/log in ' div class=' form-group '标签用户名：/label input class=' measuri-textbox ' name=' name ' style=' width :300 px ' data-options=' required : true '/div class=' form-group ' label密码：/label input class=' measuri-textbox ' type=' password ' name=' pwd ' style=' width :300 px ' data-options=' required : true '/div/form div id=' DLG-buttons '！ -a href=' JAVAScript : submit form()' class=' measuri-link button ' iconCls=' icon-ok '普通='true '提交/a-a href=' JavaScript : void(0)' class=' measuri-link button ' onclick=' submit form()' iconCls=' icon-ok ' plain=' true '提交/a a href=' JavaScript : void(0)' class=' measuri-link button ' onclick=' clearForm()' iconCls=' icon-cancel ' plain=' true '取消/a/-b id=' msg ' style=' display : none；'- {{msg}} /div/divscript函数提交表单(){ jquery。Ajax({ URL : '/index/log in '，async: false，method:'POST '，data: { name: ' 123 '，pwd : ' 123 ' })；}函数clearForm() { jQuery('#ff1 ').形式(“清除”)；}/脚本/正文/html后台的处理逻辑：

使用"严格";从""导入基地/基地。js '；导出默认类扩展基数{ /** *索引操作* @ return { Promise }[]*/index action(){//自动呈现模板文件索引_ index。html返回这个。显示()；}异步登录(){ //返回这个。重定向('/log in ')；控制台。日志(这个。post())；let name=this.post().姓名；让pwd=this.post().显示当前工作目录让模型=这个。模型('用户')；让数据=等待模型。其中({ name : name，pwd:pwd}).find()；if(！好好想想。isempty(data)){ console。日志('//////////')；返回这个。重定向('/log in 888 ')；//返回这个。JSON({ ' succ ' : true })；}else{ this.assign('msg '，'账号或者密码错误！');返回这个。显示('索引')；//返回this.json({'succ':false，' msg': '账号或者密码错误！'});} }}而这样处理的结果却是：

出现了浏览器自身报错：此方法已被弃用。新手因为接触thinkjs的并不是很多，所以时常会混淆其中，以为这样很正确，其实在浏览器自身的射流研究…运行机制中，该方法是行不通的。因此建议初接触thinkjs的小伙伴们，在写页面跳转的逻辑，比如用到再直接的或分配渲染时，前台就不要使用创建交互式、快速动态网页应用的网页开发技术提交；而后台用json返回时，就不要使用sumbit()提交。而这种非常隐蔽的问题，一般初学者也不会意识到问题存在哪里，因此还是需要小伙伴们多多看看相关的教程，增长自己的经验。