摘要：论网站管理后台，我只服帝国CMS！几年前我也分享过一些自己制作的帝国cms插件，当时还是6.6版本。现在7.5版本已经发布快3年了，刚好前两天又有网友因插件的事情咨询我。于是我便抽了周末的时间，搞两个插件出来更新更新......

说明：本插件为帝国CMS7.5简体UTF-8版，非升级程序。从本站下载的插件无后门，但不保证转手后的安全性。检测插件安全性也很简单，直接拿帝国CMS官方的与下载的源码进行对比即可。

好了，下面开始今天的内容。

1、开更了

早在2016年的时候，艺灵就分享过一些关于帝国插件的文章。上周又有个小伙伴在qq上问我一篇古老的文章→→《jquery.ajax制作帝国cms6.6快速登录插件》。由于他使用的是7.5版本，所以6.6的代码自然就不能用了。想想帝国CMS7.5出来快3年了，而且猛哥前段时间在微博上还说要搞8.0版本，我到现在连个更新都没有，确实有点儿过不去。那接下来，空的时间我就尽力更新吧。

2、一睹插件容颜

当当当当，大概就长这个样。如图：（友情提示：点击上面的图片即可播放视频）
UI界面基本没有修改，使用的是第三方UI插件默认样式，主要是把表单的交互修改了，大大提升了用户体验。可能有些看官对这个用户体验不是很敏感，想像一下你在某网站上需要填写又臭又长的表单。有些术语你也看不懂，填写了也不知道对错。当你点击提交按钮后页面跳转出现了一个大红x并告诉你xxx字段不合法。你可能会很郁闷，更让你崩溃的是有可能刚才填写的那一堆内容已经全部清空了，你又要重新填写一遍！（唉，突然找不到这种网站了，之前还看到过。）

3、手把手带你实现Ajax版快捷登录

3.1、现状与需求

现状：点击“登录”按钮后，啪，很快嗷，页面直接就跳转到了信息提示页。
需求：
1、点击“登录”按钮时，前端先做表单校验（想省事也可不做，一般后端会做，但个人建议前端也做校验。）；
2、当前端校验通过后，直接在当前页面提示信息成功与否，阻止跳转到原来的信息提示页。

3.2、断点调试，一步步修改

其实3.1说了跟没说一样，下面分享下我自己在修改过程中的思路。
1、从原网页的表单中找到form提交时对应的接口文件地址。如图：
2、打开对应的文件doaction.php定位代码。比如：搜索login、登陆等关键字。一般程序猿都会写注释，要是没写的话可能他想坑你[:笑哭]。如图：
3、跟踪qlogin函数，此时可以看到第2行有明显注释“登录函数”。此时可以打个断点看看我们有没有跟踪对。如图：事实证明这个就是我们要找了地方。
4、定义一个名为$is_ajax的变量来识别我们的Ajax，这样就做到了既兼容原代码又支持ajax。接下来在原条件判断的基础上，只需要在输出错误信息printerror的地方添加上我们的代码即可，完美！如图：
5、若开启了验证码，则需要跟踪检查验证码的ecmsCheckShowKey函数，继续第4步。如图：

整理一下，需要注意如下函数：qlogin、ecmsCheckShowKey。改动不算太多，照葫芦画瓢就行了。

3.2.1、$return_json是啥？

刚才的截图中有一块儿需要注意下，就是那个$return_json。这个是我自定义的一个数组，用于返回json数据给前端的，具体声明在/e/class/connect.php文件中第66行。

    
$return_json = array(); /* 定义一个变量，用于返回ajax结果 20210116 */
    
/* 构造返回的数据格式 */
    
$return_json['code'] = 0; /* 只有100时表示登录成功 */
    
$return_json['message'] = $qmessage_r['OutKeytime']; /* 返回帝国自带的提示文本 */
    
exit(json_encode($return_json)); /* 转成json并返回给前端，前端可以根据拿到的结果做处理 */
    

3.3、插件使用及修改

接下来说下如何使用插件，所有源码可从文章末尾的下载链接处进行下载，解压后会看到如下目录。

    
e
    
--class
    
----connect.php /* 系统文件，有修改 */
    
--member
    
----class
    
------member_loginfun.php /* 系统文件，有修改 */
    
skin
    
--layui /* 新增第三方UI库 */
    
--ylsj
    
----css
    
------login.css /* 新增文件，修改登录样式*/
    
----js
    
------ajaxLogin.js /* 新增文件，负责弹窗、表单校验、ajax提交等操作 */
    
----ajax-login.html /* 新增文件，弹窗时实际上打开的是这个页面 */
    

3.4、替换e目录下的系统文件

在替换前，强烈建议您优先备份上面的两个系统文件
e/class/connect.php
e/member/class/member_loginfun.php。
在备份完成后，把解压后的e文件夹粘贴到您本地网站的根目录。此时会出现询问你弹窗，直接点击替换即可。如图：替换e目录时出现弹窗直接点替换目标中的文件.png

3.5、skin 模板样式文件

接下来说下skin这个目录，一共有两个文件夹，分别是layui (第三方UI库)和ylsj (艺灵设计的简拼，防止与您命名的目录重名)。

若您的skin目录下也有layui第三方库的话，可以不用管。若您的skin目录下也有ylsj这个目录的话，这下就比较尴尬了。最简单的方法就是文件夹合并，注意同名文件要修改。修改后ajax-login.html这个文件也要修改，主要是引入的css文件名和js文件名。

ajax-login.html就是我们的表单登录页面，在样式上我基本没有修改，直接使用了第三方UI库Layui。原因有以下几点：
1、一般的UI库功能齐全，像表单校验、弹层、样式美化全都有，不需要自己写造轮子；
2、UI库众多，不喜欢了可以随便换。当然看官也可以根据自己的需求进行手写，我提供的示例代码完全不会影响到您的发挥；
3、Layui基于jquery且包内已经内置了，不需要再重新引用即可使用。Layui在前两年挺受欢迎的，即使现在是Vue的天下，对于仍jquery的网站来说，也是个很好的选择。

为了方便管理新增的代码，我新建了一个名为ajaxLogin.js的js文件，这名字够直白吧！同样，css我也放在一个名为login.css的css文件中。

3.6、去后台修改模板

终于到了改模板这一步了，胜利就在眼前。为了便于展示效果，我就直接把代码加在页面顶部的登录区中。具体的步骤是：进入后台-模板-公共模板-JS调用登陆模板。注意粘贴的位置，是第一个</form>的后面。如图：

3.7、数据更新

这个时候直接刷新前台页面是看不到变化的，因为帝国的模板需要手动更新才行。如图：此时再打开首页即可看到刚才添加的代码已经生效了，然后点击那个新增的“ajax登录”即可弹出快捷登录窗口，效果如同文章开头中的视频。

就是这么简单，使用只需要3行代码即可！

4、一些答疑

Q1：在帝国CMS7.5的后台模板中，跟登录相关的模板有多个，每个都需要修改吗？

A1：后台中一共有三处，分别是：①【模板-公共模板-JS调用登陆模板】对应的是前台静态页面的顶部登录；
②【动态页面模板管理-会员基本页面-会员登录页面】对应的前台页面是/e/member/login/这个页面；如图：
③【动态页面模板管理-会员基本页面-会员登录弹出页面】对应的前台页面是/e/member/login/login这个页面；如图：本示例修改的是第一处，看官可根据自己的需求进行对应的修改，用不到的没必要修改。

Q2：可不可以不修改原登录界面css样式，只使用ajax提交？

A2：此种情况对应的是上面的②，只需要给登录按钮添加一个id="ajaxLogin_default"并在</table>和<br/>之间插入下面前面提到的两行js代码即可。如图：修改默认登录页为ajax提交表单数据.png

    
<script src="/skin/layui/layui.js"></script>
    
<script src="/skin/ylsj/js/ajaxLogin.js"></script>
    

动态gif效果如图：默认登录页也支持ajax了.gif怎么样，用户体验是不是比原来的好呀？而这只需要引入2行代码再加一个id就搞定了，根本不用做其他任何修改。

Q3：为什么要创建单独的css、js、html文件，直接写后台模板中不可以吗？

A3：没有可不可以，只有愿不愿意。只要您喜欢，艺灵也不阻拦。之所以拆分成单独的文件是因为，如果直接写后台模板中，当想修改时后台需要发布前台才会更新。而单文件引入就方便多了，想修改表单的验证、css样式啥的直接找到对应的文件进行修改就行了。后台不用去手动刷新，直接刷新前台页面就能看到变化了。单文件的方式，难道她不香吗？

Q4：id必须是ajaxLogin_default吗？

A4：ajaxLogin_default是艺灵自己取的。如果您想修改，在ajaxLogin.js中搜索并替换成您自己喜欢的，然后在后台模板中也要修改成您更改后的，否则无效！

5、积分下载插件

资源下载→→帝国CMS7.5-Ajax版快捷登录插件.zip 下载需要50积分，慎重点击！

6、最后

这篇文章从昨天写到今天，整理图片、整理代码太费时间。如果您下载源码后有不懂的地方或不会使用，可以扫下方二维码加艺灵，我会尽可能在空闲的时间帮您解答疑问。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2021-01-17/EmpireCMS75-ajax-login.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。