<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 40%;
margin: 0 auto;
}
.uploadCon {
width: 150px;
height: 150px;
margin: 15px auto;
text-align: center;
position: relative;
}
.uploadCon input {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #b6b3b35c;
position: absolute;
top: 0;
left: 0;
font-size: 0px;
outline: none;
}
.uploadCon p {
position: absolute;
left: 42px;
top: 42px;
z-index: -1
}
.uploadCon img {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1
}
form {
text-align: center;
position: relative;
left: -30px;
}
form input {
margin-bottom: 15px;
}
form label {
display: inline-block;
width: 80px;
text-align: right;
}
.result {
margin: 50px;
padding: 20px;
border: 1px solid black;
}
.opera {
margin: 15px 60px;
}
table {
width: 100%;
text-align: center;
}
table th,
table td {
padding: 10px;
}
tbody img {
width: 80px;
}
</style>
</head>
<body>
<div class="container">
<h3>填写用户信息</h3>
<div class="uploadCon">
<input type="file" name="file" onchange="onUpload()">
<p>上传头像</p>
</div>
<form>
<label for="">用户名：</label><input type="text" name="name"><br>
<label for="">账号：</label><input type="text" name="account"><br>
<input type="hidden" name="id">
<label for=""></label>
<button onclick="onSave()">提交</button>
<button onclick="document.querySelector('form').reset()">重置</button>
</form>
<div class="result">
<div class="opera">
<input type="text" placeholder="请输入要搜索的用户名" id="name">
<button onclick="onGetList()">搜索</button>
</div>
<table>
<thead>
<th>头像</th>
<th>用户名</th>
<th>操作</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script src="./fetch.js"></script>
<script>
var fileUrl = ''
// 插入图片
var appendImg = function () {
const img = new Image()
img.src = fileUrl
// 判断图片是否已经存在
if (document.querySelector('.uploadCon img')) {
document.querySelector('.uploadCon img').remove()
}
document.querySelector('[name="file"]').after(img)
}
// 上传头像
var onUpload = function () {
// 获取上传的文件
var file = document.querySelector('[name="file"]').files[0]
var formData = new FormData
formData.append('file', file)
myFetch.post('/upload', formData).then(function (data) {
fileUrl = data.file.url
appendImg()
})
}
// 提交form表单
var onSave = function () {
console.log('按钮被处罚了')
// 获取form表单数据
var name = document.querySelector('[name="name"]').value
var account = document.querySelector('[name="account"]').value
myFetch.post('/user/add', { name: name, account: account, file: fileUrl }, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (data) {
console.log(data)
})
}
// 获取用户数据
var onGetList = function () {
// 获取tbody
var tbody = document.querySelector('tbody')
// 获取要搜索的用户名
var name = document.querySelector('#name').value
myFetch.get('/user/list?name=' + name).then(function (data) {
tbody.innerHTML = null
console.log(data)
var records = data.records
records.forEach(function (item) {
var tr = document.createElement('tr')
var td = document.createElement('td')
var img = new Image()
img.src = item.file
var imgTd = td.cloneNode()
imgTd.append(img)
tr.append(imgTd)
var nameTd = td.cloneNode()
nameTd.innerHTML = item.name
tr.append(nameTd)
var operaTd = td.cloneNode()
var button1 = document.createElement('button')
var button2 = document.createElement('button')
button1.innerHTML = '删除'
button2.innerHTML = '编辑'
button1.onclick = function () {
onRemove(item)
}
button2.onclick = function () {
onEdit(item)
}
operaTd.append(button1)
operaTd.append(button2)
tr.append(operaTd)
tbody.append(tr)
})
})
}
// 删除用户
var onRemove = function (item) {
console.log('删除用户')
myFetch.post('/user/remove', { id: item.id }, {
headers: {
"Content-Type": "application/json"
}
}).then(function (data) {
onGetList()
})
}
// 编辑用户
var onEdit=function (item) {
document.querySelector('[name="name"]').value=item.name
document.querySelector('[name="account"]').value=item.account
document.querySelector('[name="id"]').value=item.id
fileUrl = item.file
appendImg()
}
window.onload = function () {
onGetList()
}
</script>
</body>
</html>
当我点击编辑按钮时提示onEdit为被定义是为什么呀
为啥我点了修改，会成这样子
老师，为啥我会程序终止？？
京公网安备 11011402011233号