【补充】页面展示之多重模态框
【补充】页面展示之多重模态框
【前端页面代码展示】
{% block info %}
<div class="container-fluid">
<div class="row">
<h3>基本信息</h3>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">用户名</th>
<th class="text-center">注册时间</th>
<th class="text-center">最后登录时间</th>
</tr>
</thead>
<tbody>
<tr>
<td class="info">{{ request.user.username }}</td>
<td class="success">{{ request.user.create_time|date:"Y-m-d H:i:s" }}</td>
<td class="danger">{{ request.user.last_login|date:"Y-m-d H:i:s" }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h3>账号与安全</h3>
<div class="list-group">
<ul class="list-group ">
{# 修改头像 #}
<li class="list-group-item"
style="border-bottom: #E3B8B8FF solid 2px; border-top: none; border-left: none; border-right: none">
<div class="row align-items-center">
<div class="col-md-6 text-left">
<h4>头像</h4>
</div>
<div class="col-md-6 text-right">
<img src="/Source/{{ request.user.avatar }}/" alt="" style="width: 50px; height: 50px"
class="img-circle">
<a href="{% url 'set_avatar' %}">
<img src="{% static 'img/edit.png' %}" alt=""
style="width: 20px; height: 20px; margin-left: 10px" class="">
</a>
</div>
</div>
</li>
{# 修改密码模态框 #}
<li class="list-group-item"
style="border-bottom: #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
<div class="row align-items-center">
<h4>密码</h4>
<div class="col-md-6 text-left">
<input type="password" value="{{ request.user.password }}" class="form-control"
style="border: none;outline: none" id="set_password">
</div>
<div class="col-md-6 text-right">
<a>
<img src="{% static 'img/edit.png' %}" alt="" href="#" id="set_password_a"
style="width: 20px;height: 20px ;margin-left: 10px" class="">
</a>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" id="set_password_model">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="">用户名</label>
<input type="text" disabled value="{{ request.user.username }}"
class="form-control">
</div>
<div class="form-group">
<label for="">原密码</label>
<input type="password" id="id_old_password"
class="form-control">
</div>
<div class="form-group">
<label for="">新密码</label>
<input type="password" id="id_new_password"
class="form-control">
</div>
<div class="form-group">
<label for="">确认密码</label>
<input type="password" id="id_confirm_password"
class="form-control">
</div>
<button type="button" class="btn btn-default pull-right"
data-dismiss="modal">
取消修改
</button>
<button class="btn btn-danger center-block pull-right"
style="margin-bottom: 30px;margin-right: 10px" id="id_edit">
确认修改
</button>
<span style="color: red" id="id_pwd_error"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{# 用户名 #}
<li class="list-group-item"
style="border-bottom: #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
<div class="row align-items-center">
<h4>用户昵称</h4>
<div class="col-md-6 text-left">
<input type="text" value="{{ request.user.username }}" class="form-control"
style="border: none;outline: none" id="username_set">
</div>
<div class="col-md-6 text-right">
<img src="{% static 'img/edit.png' %}" alt="" id="username_set_a"
style="width: 20px;height: 20px ;margin-left: 10px"
class="">
</div>
<div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" id="set_username_model">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改昵称</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="">原昵称</label>
<input type="text" disabled value="{{ request.user.username }}"
class="form-control">
</div>
<div class="form-group">
<label for="">新昵称</label>
<input type="password" id="id_new_username"
class="form-control">
</div>
<button type="button" class="btn btn-default pull-right"
data-dismiss="modal">
取消修改
</button>
<button class="btn btn-danger center-block pull-right"
style="margin-bottom: 30px;margin-right: 10px"
id="id_edit_username">
确认修改
</button>
<span style="color: red" id="id_username_error"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{# 邮箱 #}
<li class="list-group-item"
style="border-bottom: #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
<div class="row align-items-center">
<h4>邮箱 </h4>
<div class="col-md-6 text-left">
<input type="text" value="{{ request.user.email }}" class="form-control"
style="border: none;outline: none" id="email_set">
</div>
<div class="col-md-6 text-right">
<img src="{% static 'img/edit.png' %}" alt="" id="email_set_a"
style="width: 20px;height: 20px ;margin-left: 10px"
class="">
</div>
<div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" id="set_email_model">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改邮箱</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="">原邮箱</label>
<input type="text" disabled value="{{ request.user.username }}"
class="form-control">
</div>
<div class="form-group">
<label for="">新邮箱</label>
<input type="password" id="id_new_email"
class="form-control">
</div>
<button type="button" class="btn btn-default pull-right"
data-dismiss="modal">
取消修改
</button>
<button class="btn btn-danger center-block pull-right"
style="margin-bottom: 30px;margin-right: 10px"
id="id_edit_email">
确认修改
</button>
<span style="color: red" id="id_email_error"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{# 手机 #}
<li class="list-group-item"
style="border-bottom: #E3B8B8FF solid 2px;border-top: none;border-left: none;border-right: none">
<div class="row align-items-center">
<h4>手机 </h4>
<div class="col-md-6 text-left">
<input type="text" value="{{ request.user.mobile }}" class="form-control"
style="border: none;outline: none" id="mobile_set">
</div>
<div class="col-md-6 text-right">
<img src="{% static 'img/edit.png' %}" alt="" id="email_set_a"
style="width: 20px;height: 20px ;margin-left: 10px"
class="">
</div>
<div class="modal fade bs-example-modal-lg model_username" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" id="set_mobile_model">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改手机</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="">原手机号</label>
<input type="text" id="id_old_mobile"
class="form-control">
</div>
<div class="form-group">
<label for="">新手机号</label>
<input type="password" id="id_new_mobile"
class="form-control">
</div>
<div class="form-group">
<label for="">确认手机号</label>
<input type="text" id="id_confirm_password"
class="form-control">
</div>
<button type="button" class="btn btn-default pull-right"
data-dismiss="modal">
取消修改
</button>
<button class="btn btn-danger center-block pull-right"
style="margin-bottom: 30px;margin-right: 10px"
id="id_edit_mobile">
确认修改
</button>
<span style="color: red" id="id_mobile_error"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
【一】JQ未优化版本点击不同标签触发不同的模态框
$(document).ready(function () {
$("#username_set").click(function () {
$("#set_username_model").modal("show");
});
$("#username_set_a").click(function () {
$("#set_username_model").modal("show");
});
$("#email_set_a").click(function () {
$("#set_email_model").modal("show");
});
$("#email_set").click(function () {
$("#set_email_model").modal("show");
});
$("#mobile_set_a").click(function () {
$("#set_mobile_model").modal("show");
});
$("#mobile_set").click(function () {
$("#set_mobile_model").modal("show");
});
$("#set_password").click(function () {
$("#set_mobile_model").modal("show");
});
$("#set_password_a").click(function () {
$("#set_password_model").modal("show");
});
function showModal(type) {
// 通过判断type的值来触发不同的方法
switch (type) {
case "username":
$("#set_username_model").modal("show");
break;
case "email":
$("#set_email_model").modal("show");
break;
case "mobile":
$("#set_mobile_model").modal("show");
break;
case "password":
$("#set_password_model").modal("show");
break;
default:
// 如果有其他类型，可以在这里处理
break;
}
}
});
【二】JQ优化版本通过传递参数来触发不同的操作
$(document).ready(function () {
// 存储选择器为变量
var setUsernameModel = $("#set_username_model");
var setEmailModel = $("#set_email_model");
var setMobileModel = $("#set_mobile_model");
var setPasswordModel = $("#set_password_model");
// 绑定点击事件，通过传递参数来触发不同的操作
$("#username_set, #username_set_a").click(function () {
showModal("username");
});
$("#email_set, #email_set_a").click(function () {
showModal("email");
});
$("#mobile_set, #mobile_set_a").click(function () {
showModal("mobile");
});
$("#set_password, #set_password_a").click(function () {
showModal("password");
});
function showModal(type) {
// 通过判断type的值来触发不同的方法
switch (type) {
case "username":
setUsernameModel.modal("show");
break;
case "email":
setEmailModel.modal("show");
break;
case "mobile":
setMobileModel.modal("show");
break;
case "password":
setPasswordModel.modal("show");
break;
default:
// 如果有其他类型，可以在这里处理
break;
}
}
});
【三】发送Ajax请求传递数据未优化版本
$('#id_edit_username').click(function () {
$.ajax({
url: "/user/{{ request.user.username }}/set_username/",
type: "post",
data: {
"new_username": $("#id_new_username").val(),
"csrfmiddlewaretoken": "{{ csrf_token }}",
},
success: function (result) {
if (result.code === 1000) {
// 刷新页面
alert(result.message);
window.location.reload();
} else {
$("#id_username_error").text(result.message['new_username'][0])
}
}
})
});
$('#id_edit_email').click(function () {
$.ajax({
url: "/user/{{ request.user.username }}/set_email/",
type: "post",
data: {
"new_email": $("#id_new_email").val(),
"csrfmiddlewaretoken": "{{ csrf_token }}",
},
success: function (result) {
if (result.code === 1000) {
// 刷新页面
alert(result.message);
window.location.reload();
} else {
$("#id_email_error").text(result.message['new_email'][0])
}
}
})
});
//提交ajax请求
$('#id_edit_mobile').click(function () {
$.ajax({
url: "/user/{{ request.user.username }}/set_mobile/",
type: "post",
data: {
"old_mobile": $("#id_old_mobile").val(),
"new_mobile": $("#id_new_mobile").val(),
"confirm_mobile": $("#id_confirm_mobile").val(),
"csrfmiddlewaretoken": "{{ csrf_token }}",
},
success: function (result) {
if (result.code === 1000) {
// 刷新页面
alert(result.message);
window.location.reload();
} else {
$("#id_pwd_error").text(result.message["new_mobile"][0])
}
}
})
})
【四】发送Ajax请求传递数据未优化版本
// 提取公共部分，减少重复代码
function sendAjaxRequest(url, dataKey, successCallback, errorCallback) {
$.ajax({
url: url,
type: "post",
data: {
...dataKey,
"csrfmiddlewaretoken": "{{ csrf_token }}",
},
success: function (result) {
if (result.code === 1000) {
// 刷新页面
alert(result.message);
window.location.reload();
} else {
errorCallback(result.message[dataKey][0]);
}
}
});
}
$('#id_edit_username').click(function () {
const url = "/user/{{ request.user.username }}/set_username/";
const dataKey = {
"new_username": $("#id_new_username").val(),
};
sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
$("#id_username_error").text(errorMessage);
});
});
$('#id_edit_email').click(function () {
const url = "/user/{{ request.user.username }}/set_email/";
const dataKey = {
"new_email": $("#id_new_email").val(),
};
sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
$("#id_email_error").text(errorMessage);
});
});
$('#id_edit_mobile').click(function () {
const url = "/user/{{ request.user.username }}/set_mobile/";
const dataKey = {
"old_mobile": $("#id_old_mobile").val(),
"new_mobile": $("#id_new_mobile").val(),
"confirm_mobile": $("#id_confirm_mobile").val(),
};
sendAjaxRequest(url, dataKey, function() {}, function (errorMessage) {
$("#id_pwd_error").text(errorMessage);
});
});
【五】后端接收需要修改的数据未优化
def set_info(request, **kwargs):
user_obj = models.User.objects.filter(username=request.user).first()
if not user_obj:
return render(request, 'error.html')
if kwargs:
condition = kwargs.get('condition')
else:
return render(request, 'error.html')
if request.is_ajax():
if request.method == 'POST':
back_dict = {"code": 1000, "message": ""}
form_obj = None
params_new = None
if condition == "set_username":
params_new = request.POST.get('new_username')
form_obj = MyUsernameForm()
form_obj = MyUsernameForm(request.POST)
user_obj.username = params_new
elif condition == "set_email":
params_new = request.POST.get('new_email')
form_obj = MyEmailForm()
form_obj = MyEmailForm(request.POST)
user_obj.email = params_new
elif condition == "set_mobile":
params_new = request.POST.get('new_mobile')
form_obj = MyMobileForm()
form_obj = MyMobileForm(request.POST)
user_obj.mobile = params_new
if form_obj.is_valid():
user_obj.save()
back_dict["message"] = "设置成功"
else:
back_dict["code"] = 1003
back_dict["message"] = form_obj.errors
print(back_dict)
return JsonResponse(back_dict)
【六】后端接收需要修改的数据优化之根据不同的条件执行相应的操作
def set_info(request, **kwargs):
# 获取当前用户对象
user_obj = models.User.objects.filter(username=request.user).first()
# 如果用户对象不存在，则返回错误页面
if not user_obj:
return render(request, 'error.html')
# 检查是否提供了关键字参数
if kwargs:
condition = kwargs.get('condition')
else:
return render(request, 'error.html')
# 检查是否为Ajax POST请求
if request.is_ajax() and request.method == 'POST':
back_dict = {"code": 1000, "message": ""}
# 初始化表单对象和新参数
form_obj = None
params_new = None
# 根据不同的条件执行相应的操作
if condition == "set_username":
params_new = request.POST.get('new_username')
form_obj = MyUsernameForm(request.POST)
user_obj.username = params_new
elif condition == "set_email":
params_new = request.POST.get('new_email')
form_obj = MyEmailForm(request.POST)
user_obj.email = params_new
elif condition == "set_mobile":
params_new = request.POST.get('new_mobile')
form_obj = MyMobileForm(request.POST)
user_obj.mobile = params_new
# 检查表单是否有效
if form_obj.is_valid():
# 保存用户对象
user_obj.save()
back_dict["message"] = "设置成功"
else:
back_dict["code"] = 1003
back_dict["message"] = form_obj.errors
# 返回JSON响应
return JsonResponse(back_dict)
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/17578274.html
