苹果CMS V10用户资料修改表单模板开发教程
发布时间：2025-04-11共9人阅读
一、用户资料修改模板概述
苹果CMS V10 用户个人资料修改页面模板文件路径为 html/user/info.html，该模板是用户中心核心功能页面，支持展示、编辑用户基础资料与账号安全信息，包含昵称、密码、联系方式、密保问题修改，同时集成邮箱、手机号的绑定与解绑功能，通过AJAX异步提交实现无刷新资料更新。
二、完整用户信息修改表单源码
以下为适配苹果CMS V10的用户资料修改完整模板代码，包含全部表单字段、状态判断、绑定解绑交互与异步提交逻辑，可直接替换使用。
<form name="fm" method="post" action="" >
<p><span >用户名：</span>{$obj.user_name}</p>
<p><span >昵称：</span><input type="text" name="user_nick_name" value="{$obj.user_nick_name}"></p>
<p><span >原始密码：</span><input type="password" name="user_pwd" ></p>
<p><span >新密码：</span><input type="password" name="user_pwd1" ><span class="tishi">不修改请留空</span></p>
<p><span >重复密码：</span><input type="password" name="user_pwd2" ></p>
<p><span >QQ号码：</span><input type="text" name="user_qq" value="{$obj.user_qq}"></p>
{if condition="$obj.user_email neq ''"}
<p><span >邮箱：</span><input type="text" name="user_email" readonly="readonly" value="{$obj.user_email}">[<a class="btn_unbind" ac="email" href="javascript:;">解绑</a>]</p>
{else/}
<p><span >邮箱：</span><input type="text" name="user_email" value="">[<a href="{:url('user/bind')}?ac=email">绑定</a>]</p>
{/if}
{if condition="$obj.user_phone neq ''"}
<p><span >手机：</span><input type="text" name="user_phone" readonly="readonly" value="{$obj.user_phone}">[<a class="btn_unbind" ac="phone" href="javascript:;">解绑</a>]</p>
{else/}
<p><span >手机：</span><input type="text" name="user_phone" value="">[<a href="{:url('user/bind')}?ac=phone">绑定</a>]</p>
{/if}
<p><span >找回密码问题：</span><input type="text" name="user_question" value="{$obj.user_question}"></p>
<p><span >找回密码答案：</span><input type="text" name="user_answer" value="{$obj.user_answer}"></p>
<p><span ></span><input type="button" class="search-button" id="btn_submit" value="保存">
<span class="wjmm"><a href="{:url('user/findpass')}">忘记密码了？</a></span></p>
</form>
<script type="text/javascript">
$('.btn_unbind').click(function(){
var ac = $(this).attr('ac');
if(ac!='email' && ac!='phone'){
alert('参数错误');
}
if(confirm('确认解除绑定吗？此操作不可恢复？')) {
$.ajax({
url: "{:url('user/unbind')}",
type: "post",
dataType: "json",
data: {ac: ac},
beforeSend: function () {
//开启loading
},
success: function (r) {
alert(r.msg);
if(r.code==1){
location.href="{:url('user/info')}";
}
},
complete: function () {
//结束loading
}
});
}
});
$("#btn_submit").click(function() {
var data = $("#fm").serialize();
$.ajax({
url: "{:url('user/info')}",
type: "post",
dataType: "json",
data: data,
beforeSend: function () {
//开启loading
//$(".loading_box").css("display","block");
$("#btn_submit").css("background","#fd6a6a").val("loading...");
},
success: function (r) {
alert(r.msg);
if(r.code==1){
location.href="{:url('user/info')}";
}
},
complete: function () {
//结束loading
//$(".loading_box").css("display","none");
$("#btn_submit").css("background","#fa4646").val("提交");
}
});
});
</script>三、表单字段功能解析
模板所有用户数据均通过 $obj 变量调取系统用户信息，覆盖基础资料与安全账号配置，各字段功能如下：
用户名 {$obj.user_name}：固定展示账号用户名，不支持前端修改，保证账号唯一标识稳定。
昵称 user_nick_name：可自定义修改用户展示昵称，实时同步用户数据。
密码修改模块：分为原始密码、新密码、重复密码三项，预留空值不修改的适配逻辑，无需改密可直接留空。
QQ号码 user_qq：支持自定义编辑、更新用户绑定QQ信息。
邮箱绑定模块：通过判断用户邮箱是否为空，自动切换已绑定只读展示+解绑按钮、未绑定输入框+绑定跳转按钮两种状态。
手机绑定模块：逻辑与邮箱模块一致，区分手机号绑定状态，适配账号安全管理需求。
密保问题与答案：支持自定义设置和修改，用于后续密码找回验证。
四、核心交互功能说明
1. 账号解绑功能
针对已绑定的邮箱和手机号，点击解绑按钮可触发AJAX请求，调用系统接口 user/unbind，携带对应类型参数完成解绑操作。操作前二次弹窗确认，防止误操作，执行成功后自动刷新个人资料页面同步最新状态。
2. 资料异步提交
点击保存按钮后，自动序列化表单全部数据，通过 user/info 接口异步提交更新，提交过程修改按钮状态与文字实现加载提示。服务端返回成功状态后弹窗提示并刷新页面，无页面刷新卡顿，提升用户体验。
3. 密码找回跳转
页面内置忘记密码跳转链接，直接对接系统密码找回页面 user/findpass，方便用户快速重置密码。
五、模板修改注意事项
用户数据变量
$obj为系统固定变量，禁止随意更名，否则所有用户信息无法渲染。user/unbind、user/info、user/bind、user/findpass均为系统原生接口，不可修改路径，避免功能失效。邮箱、手机号的 if 判断逻辑为系统状态适配核心，删除后会导致绑定解绑状态错乱。
页面样式、提示文字、按钮样式可自由美化，不影响核心数据提交与交互逻辑。
脚本依赖 jQuery 环境，需保证页面正常加载jQuery，否则AJAX交互功能无法使用。
六、功能总结
该用户信息修改模板完整覆盖苹果CMS用户中心资料编辑、账号安全配置需求，依托系统原生变量与接口实现数据读写、绑定解绑、异步更新等核心功能。代码结构规范、状态适配完善，可直接用于站点模板搭建，也可在保留核心逻辑的前提下进行个性化样式优化。