艺灵设计

全部文章
×

帝国CMS7.5二次开发之制作Ajax版找回密码插件

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2021-01-24 17:00:20 - 阅: - 评:0 - 积分:0

摘要:昨天分享了帝国CMS7.5Ajax版快捷注册插件,今天继续分享关于找回密码的。今天的改动比较少,只需要修改2个系统文件。这两个文件在昨天都有出现过,下面开始今天的教程......

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

上一篇我们实现了《Ajax版快捷注册插件(戳我访问)》,今天我们继续来改造找回密码功能。在开始今天的讲解前,强烈建议看官先阅读1月17号的文章→→《Ajax版快捷登录插件(戳我访问)》。这篇文章中会延续之前的风格,比如:继续使用第三方UI库-layui,使用$is_ajax来识别ajax,使用$return_json来返回我们需要的ajax结果给前端展示等。

1、效果演示

插件最终的效果见下方视频,有兴趣的看官可以在看完视频后动手练习下。如图:(0~17秒演示的弹窗版,17秒之后演示的是系统默认页面)帝国CMS7.5Ajax版找回密码插件视频封面(友情提示:点击上面的图片即可播放视频)

2、手把手带你制作Ajax版找回密码插件

2.1、插件目录

完整源码在文章末尾,解压文件后目录结构见下方所示。

  1. e
  2. --class
  3. ----connect.php /* 系统文件,有修改 */
  4. --member
  5. ----class
  6. ------member_actfun.php /* 系统文件,有修改 */
  7. skin
  8. --layui /* 新增第三方UI库 */
  9. --ylsj
  10. ----css
  11. ------getPassword.css /* 新增文件,修改css样式*/
  12. ----js
  13. ------ajaxGetPassword.js /* 新增文件,负责弹窗、表单校验、ajax提交等操作 */
  14. ----ajax-getPassword.html /* 新增文件,弹窗时实际上打开的是这个页面 */

2.2、修改e目录下的系统文件

接下来就是把解压文件中的e文件夹直接复制到自己本地网站的根目录中进行替换,强烈建议看官在修改或替换前做好数据备份工作!

  1. /e/member/class/member_actfun.php
  2. /e/class/connect.php

此次修改注册会影响上面提到的2个文件,已经做好备份的小伙伴可以继续往下看了,下面来逐个修改。

2.2.1、修改“发送取回密码邮件”函数SendGetPasswordEmail

打开member_actfun.php这个文件,然后搜索SendGetPasswordEmail(。大概位置是52行,然后新增我们的代码。如图:修改发送取回密码邮件函数.png修改发送取回密码邮件函数

2.2.2、修改“检查验证码”函数ecmsCheckShowKey

除此之外,还要修改“检查验证码”这个函数ecmsCheckShowKey,把$is_ajax = 0作为一个新参数传入,然后再根据条件判断写入我们的代码。如图:修改connect文件中的检查验证码函数.png修改connect文件中的检查验证码函数

2.2.3、粘贴skin模板文件到本地

系统文件修改完毕后,我们把skin整个目录粘贴到看官本地网站根目录。正常情况下不会出现文件冲突,若出现冲突,看官可参照1月17号的文章→→《Ajax版快捷登录(戳我访问)》进行解决,此处不再赘述。

2.3、插件的调用

在插件调用方面,艺灵提供了两种模式。分别是:弹窗系统默认页面,两种模式各有优缺点,详见下方表格。

优缺点对比
模式优点缺点
弹窗1、精简表单字段
2、配合三方UI库,错误提示更加友好。
3、单文件好管理,不需要去后台更新
4、任意页面可实现弹窗调用,无需把代码写到每个页面中
1、需要引入三方UI库,增加文件体积。大概就几百kb吧,影响不大
2、为了用户体验,不得不写大量的代码。包括界面美化、功能优化。
默认页帝国自带的表单页面,页面改动最小前端没有了表单校验,只有后端校验

通过上方的对比,看官可以根据实际情况选择使用哪种模式,下面来具体说下如何调用。

2.3.1、弹窗版只需要3行代码

一共就3行代码,非常简单。如果看官不想在页面上添加一个新按钮“弹窗版”的话,可以在页面上给需要有弹窗功能的元素添加一个名为button__ajaxGetPassword的类名即可。

  1. <strong class="button__ajaxGetPassword">弹窗版</strong>
  2. <script src="/skin/layui/layui.js"></script>
  3. <script src="/skin/ylsj/js/ajaxGetPassword.js"></script>

2.3.2、系统默认找回密码页面也支持ajax

如果看官不想使用弹窗的方式,没关系,系统默认的注册页此时也是支持的。我们只需要复制前面的2行js代码到后台粘贴并给“提交”按钮添加一个 id="ajaxGetPassword_default"即可。

为了方便演示效果,此处直接修改找回密码页面。具体步骤如下:进入后台-模板-动态页面模板管理-会员基本页面-取回密码页面。操作如图:在帝国CMS后台修改取回密码模板页面修改完后刷新前台页面,即可看到ajax生效了。动态gif演示如下图:默认的取回密码页也支持ajax了

需要注意的是,前面提到的button__ajaxGetPassword id="ajaxGetPassword_default"不建议修改,除非你在修改后把/skin/ylsj/js/ajaxGetPassword.js文件中对应的代码也进行修改,否则会出现代码无效的情况!

3、积分下载插件

资源下载→→帝国CMS7.5-Ajax版找回密码插件.7z 下载需要30积分,慎重点击!

4、最后

登录、注册、找回密码都已经搞定了,下一篇会继续干重发帐号激活邮件,敬请期待哦!

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/jquery/2021-01-24/EmpireCMS75-ajax-getPassword.html

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

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 帝国CMS7.5 网站管理系统 EmpireCMS ajax找回密码插件 正则表达式 jquery layui 用户体验 表单校验 php开发 二次开发

上一篇: 帝国CMS7.5二次开发之使用Ajax实现快捷注册并检测密码强弱度   下一篇: 返回列表

评论区