目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.css">
<style>
#avatar{width:100%;}
</style>
</head>
<body>
<div class="container-xl">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="../index.html">后台管理系统</a>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- <ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul> -->
</div>
<div class="navbar-text ml-5">
<span id="userInfo" class="mr-2"></span>
<button class="btn btn-success btn-sm" id="btnLogout">退出</button>
</div>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">商品管理</a></li>
<li class="breadcrumb-item active" aria-current="page">添加</li>
</ol>
</nav>
<div class="row">
<!-- <div class="col col-xs-12 col-sm-4 col-lg-3"> -->
<div class="col-sm-3" style="min-width:200px">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action"><a href="../user.html">用户管理</a></li>
<li class="list-group-item list-group-item-action"><a href="../goods.html">商品管理</a></li>
<li class="list-group-item list-group-item-action"><a href="../order.html">订单管理</a></li>
</ul>
</div>
<!-- <div class="col col-xs-12 col-sm-8 col-lg-9"> -->
<div class="col col-sm-9">
<div class="row">
<div class="col col-sm-9">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" disabled>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" class="form-control" id="password">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select class="form-control" id="gender">
<option>男</option>
<option>女</option>
<option>其他</option>
</select>
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" id="age" class="form-control">
</div>
<button type="submit" class="btn btn-success btn-lg mb-2" id="btnSubmit">提交</button>
</div>
<div class="col col-sm-3">
<img src="/img/g3.jpg" id="avatar" />
<!-- <from enctype="multipart/form-data" method="post" action="http://localhost:2003/api/upload/avatar"> -->
<input type="file" class="form-control-file" id="uploadAvatar">
<!-- </from> -->
</div>
</div>
</div>
</div>
</div>
<script src="/js/common.js"></script>
<script src="/js/tools.js"></script>
<script>
(async () => {
const username = document.querySelector('#username')
const password = document.querySelector('#password')
const gender = document.querySelector('#gender')
const age = document.querySelector('#age')
const btnSubmit = document.querySelector('#btnSubmit')
const uploadAvatar = document.querySelector('#uploadAvatar')
// 获取当前用户信息
let currentUser = localStorage.getItem('currentUser');
currentUser = JSON.parse(currentUser);
// 通过用户id获取用户信息
// let _id;
// let params = location.search.slice(1);
// params = params.split('&');
// params.forEach(item=>{
// const arr = item.split('=')
// if(item[0] === 'id'){
// _id = arr[1];
// }
// });
let _id = location.search.match(/id=([\da-z]{24})/)[1];
console.log(_id);
const {data} = await request.get('/user/'+_id);
// 把数据写入表单
username.value = data.username
// password.value = data.password
gender.value = data.gender
age.value = data.age
avatar.src = data.avatarUrl || '/uploads/avatar.jpg'
btnSubmit.onclick = async () => {
const result = await request.put('/user/' + currentUser._id, {
password: password.value,
gender: gender.value,
age: age.value
});
if (result.code === 1) {
alert('更新成功')
// 如果修改的用为为自己
if(_id === currentUser._id){
Object.assign(currentUser, result.data);
localStorage.setItem('currentUser', JSON.stringify(currentUser));
}
} else {
alert('更新失败')
}
}
// 上传头像
uploadAvatar.onchange = async(e)=>{
// html5新特性：FormData
console.log(e);
// 创建一个用户存放数据的容器
const data = new FormData();
data.set('_id',_id);
data.set('avatar',e.target.files[0]);
// 一次性上传多张图片时
// for(let i=0;i<e.target.files.length;i++){
// data.append('goods',e.target.files[i]);
// }
const result = await request.post('/upload/avatar', data,{
contentType:false, // 告诉fetch，不需要自定义content-type
// headers:{
// 'Content-Type':'multipart/form-data'
// }
});
// 更新页面
avatar.src = result.data.avatarUrl;
// 更新本地存储数据
if(_id === currentUser._id){
currentUser.avatarUrl = result.data.avatarUrl;
localStorage.setItem('currentUser',JSON.stringify(currentUser));
}
}
})();
</script>
</body>
</html>
