html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我们的69-英雄管理</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
<style>
.panel {
width: 900px;
margin: 10px auto;
}
.table img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">英雄列表管理</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." autocomplete="true" />
<span class="input-group-btn">
<button class="btn btn-default" id="btn_search" type="button">
搜索
</button>
</span>
</div>
</div>
<div class="col-lg-3 col-lg-offset-3">
<!-- data-toggle:这个控制元素控制的是模态框的显示和隐藏 -->
<!-- data-target：指定当前按钮所控制的模态框是那一个，通过id对应 -->
<button type="button" class="btn btn-success openDialog" data-toggle="modal" data-target="#addHeroModal">
添加英雄
</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>英雄名称</th>
<th>英雄性别</th>
<th>头像</th>
<th>操作区</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody id="tbody">
<!-- <tr>
<td>1</td>
<td>73期小伙伴</td>
<td>男/女</td>
<td>
<img src="https://img1.baidu.com/it/u=1146390613,1184997859&fm=26&fmt=auto" alt="" />
</td>
<td>
<button type="button" class="btn btn-info">
上传头像
</button>
<button type="button" class="btn btn-warning">
删除
</button>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
<!-- 新增英雄模态框 -->
<div class="modal fade" id="addHeroModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">添加英雄</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="heroname" class="col-sm-2 control-label">英雄名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="heroname" placeholder="请输入英雄名称" />
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">英雄性别</label>
<div class="col-sm-10">
<select class="form-control" id="gender">
<option>男</option>
<option>女</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button type="button" class="btn btn-success btnAdd">确定</button>
</div>
</div>
</div>
</div>
<!-- 上传文件的模态框 -->
<div class="modal fade" id="uploadImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">上传头像</h4>
</div>
<div class="modal-body">
<input type="file" id="heroImg" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
取消
</button>
<button type="button" class="btn btn-primary btnHeroEdit">
确定
</button>
</div>
</div>
</div>
</div>
<script src="./libs/jquery/jquery.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入页面js -->
<script src="./js/axios.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
js
window.onload = function () {
// 获取元素
let tbody = document.querySelector('tbody')
let btn_search = document.querySelector('#btn_search')
let hname = document.querySelector('#hname')
let btnAdd = document.querySelector('.btnAdd')
let heroname = document.querySelector('#heroname')
let hrogender = document.querySelector('#gender')
let heroImg = document.querySelector('#heroImg')
let btnHeroEdit = document.querySelector('.btnHeroEdit')
// 封装渲染
function init(key = '') {
// 发送请求
axios({
url: 'http://127.0.0.1:3001/getHeroList',
params: {
heroName: key
}
}).then(res => {
let data = res.data.data
// 设置新字符串
let newStr = ''
// 遍历拼接
data.forEach(function (v, i) {
newStr += `
<tr>
<td>${i + 1}</td>
<td>${v.name}</td>
<td>${v.gender}</td>
<td>
<img src="${v.img}" alt="" />
</td>
<td>
<button type="button" class="btn btn-info btn-updata" data-id="${v.id}">
上传头像
</button>
<button type="button" class="btn btn-warning btndel" data-id="${v.id}">
删除
</button>
</td>
</tr>
`
})
tbody.innerHTML = newStr
})
}
init()
// 查找
btn_search.addEventListener('click', function () {
let key = hname.value
init(key)
})
// 新增
btnAdd.addEventListener('click', function () {
let name = heroname.value
let gender = hrogender.value
axios.post('http://127.0.0.1:3001/addHero', `name=${name}&gender=${gender}&img=''`
).then(res => {
if (res.data.code == 200) {
// 消除模态框
$('#addHeroModal').modal('hide')
init()
}
})
})
// 点击上传头像，打开模态框
let editId
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('btn-updata')) {
// 打开模态框
$('#uploadImgModal').modal('show')
// 获取id
editId = e.target.dataset.id
}
})
// 上传文件
btnHeroEdit.addEventListener('click', function () {
let myfile = heroImg.files[0]
if (!myfile) return
let fd = new FormData
fd.append('file_data', myfile)
// 发送axios请求
axios.post('http://127.0.0.1:3001/uploadFile', fd).then(res => {
if (res.data.code == 200) {
// 打开模态框
axios.post('http://127.0.0.1:3001/updateHero', `id=${editId}&img=${res.data.src}`).then(res => {
if (res.data.code == 200) {
// 消除模态框
$('#uploadImgModal').modal('hide')
init()
}
})
}
})
})
// 删除文件
tbody.addEventListener('click', function (e) {
if (e.target.classList.contains('btndel')) {
let id = e.target.dataset.id
// console.log(id);
axios.get('http://127.0.0.1:3001/delHeroById', { params: { id } }).then(res => {
// alert('res.data.msg')
if (res.data.code == 200) {
init()
}
})
}
})
}
