《大事件项目》之基于Ajax&Layui&git开发的简易后台管理页面之用户资料修改页面
这是一个简易的后台管理界面
·
1. 首先还是准备好我们前期需要的文件夹
2. 然后接下来就是我们的user_info.html的代码部分
<!--
* @Author: 孙大大
* @Date: 2022-01-22 16:13:07
* @LastEditTime: 2022-01-22 18:37:38
* @FilePath: \user\user_info.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
<link rel="stylesheet" href="../assets/css/user_info.css" />
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">用户基本资料</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="formUserInfo">
<input type="hidden" name="id" />
<div class="layui-form-item">
<label class="layui-form-label">登录名称</label>
<div class="layui-input-block">
<input
type="text"
name="username"
required
lay-verify="required"
placeholder="请输入登录名称"
autocomplete="off"
class="layui-input"
readonly
/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户昵称</label>
<div class="layui-input-block">
<input
type="text"
name="nickname"
required
lay-verify="required|nikename"
placeholder="请输入用户昵称"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户邮箱</label>
<div class="layui-input-block">
<input
type="text"
name="email"
required
lay-verify="required|email"
placeholder="请输入用户邮箱"
autocomplete="off"
class="layui-input"
/>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">
提交修改
</button>
<button type="reset" class="layui-btn layui-btn-primary" id="btnReset">
重置
</button>
</div>
</div>
</form>
</div>
</div>
<script src="../assets/lib/layui/layui.all.js"></script>
<script src="../assets/lib/jquery.js"></script>
<script src="../assets/js/baseAPI.js"></script>
<script src="../assets/js/user_info.js"></script>
</body>
</html>
3. 然后是我们的user_info.css的代码部分
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #f2f3f5;
padding: 15px;
}
4. 再然后就是我们的index.js的代码部分
/*
* @Author: 孙大大
* @Date: 2022-01-22 16:42:45
* @LastEditTime: 2022-01-22 18:55:18
* @FilePath: \assets\js\user_info.js
*/
$(function () {
var form = layui.form
var layer = layui.layer
form.verify({
nickname: function (value) {
if (value.length > 6) {
return '昵称长度必须在 1 ~ 6 个字符之间!'
}
},
})
initUserInfo()
function initUserInfo() {
$.ajax({
method: 'GET',
url: '/my/userinfo',
success: function (res) {
if (res.code !== 0) {
return layer.msg('获取用户信息失败!')
}
console.log(res)
form.val('formUserInfo', res.data)
},
})
}
$('#btnReset').on('click', function (e) {
// 阻止表单的默认重置行为
e.preventDefault()
// 调用函数,把数据重新填入表单
initUserInfo()
})
$('.layui-form').on('submit', function (e) {
// 阻止表单的默认提交事件
e.preventDefault()
$.ajax({
method: 'PUT',
url: '/my/userinfo',
data: $(this).serialize(),
success: function (res) {
if (res.code !== 0) {
return layer.msg('更新用户信息失败!')
}
layer.msg('用户信息更新成功!')
window.parent.getUserInfo()
},
})
})
})
4. 最后就是我们的老演员了baseAPI.js
/*
* @Author: 孙大大
* @Date: 2022-01-21 17:11:40
* @LastEditTime: 2022-01-22 15:55:20
* @FilePath: \assets\js\baseAPI.js
*/
$.ajaxPrefilter(function (options) {
// 在发起真正的ajax请求之前,统一请求的根路径
options.url = 'http://www.baidu.top:3008' + options.url
if (options.url.indexOf('/my/') !== -1) {
options.headers = {
Authorization: localStorage.getItem('token') || '',
}
}
options.complete = function (res) {
// console.log('执行了回调')
// console.log(res)
// 在complete 回调函数中,可以使用res.responseJSON拿到响应回来的数据
if (res.responseJSON.code === 1 && res.responseJSON.message === '身份认证失败!') {
// 1.强制清空 tokoen
localStorage.removeItem('token')
// 2.强制跳转到登录页面
location.href = 'login.html'
}
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)