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/axios.js"></script>
<script src="./libs/jquery/jquery.js"></script>
<script src="./libs/bootstrap/js/bootstrap.js"></script>
<!-- 引入页面js -->
<script src="./js/index.js"></script>
</body>
</html>
js代码
window.onload = function () {
//获取去注册，自定义类名goRegister
let goRegister = document.querySelector('.goRegister')
//获取去登陆，自定义类名goLogin
let goLogin = document.querySelector('.goLogin')
//获取登陆按钮
let login = document.querySelector('.login')
//获取注册按钮
let register = document.querySelector('.register')
//校验规则
// 比如，验证一个用户名和密码
function test() {
return {
fields: {
username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
validators: {
//添加真正的校验规则
notEmpty: { //不能为空
message: '用户名不能为空.'
},
stringLength: { //检测长度
min: 2,
max: 15,
message: '用户名需要2~15个字符'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: { //检测长度
min: 6,
max: 15,
message: '密码需要6~15个字符'
}
}
}
}
}
}
goRegister.addEventListener('click', function () {
//点击去注册，登录页面隐藏，注册页面显示
login.style.display = 'none'
register.style.display = 'block'
})
goLogin.addEventListener('click', function () {
//点击去登录，注册页面隐藏，登录页面显示
login.style.display = 'block'
register.style.display = 'none'
})
//单机实现注册，比如注册
$('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
e.preventDefault();
// 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
// toastr.success('注册成功')
//获取数据
let username = register.querySelector('[name="username"]').value
let password = register.querySelector('[name="password"]').value
//发请求
axios({
method: 'post',
url: '/api/register',
data: `username=${username}&password=${password}`
// data: { username, password }
}).then(res => {
if (res.data.code == 0) {
toastr.success(res.data.message)
login.style.display = 'block'
register.style.display = 'none'
} else {
toastr.warning(res.data.message)
}
})
})
//单机实现登陆
$('.login form').bootstrapValidator(test()).on('success.form.bv', function (e) {
e.preventDefault();
// 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
//获取数据
let username = login.querySelector('[name="username"]').value
let password = login.querySelector('[name="password"]').value
//发请求
axios({
method: 'post',
url: '/api/login',
// data: `username=${username}&password=${password}`
data: { username, password }
}).then(res => {
if (res.data.code == 0) {
toastr.success(res.data.message)
//本地存储token
localStorage.setItem('mytoken_73', res.data.token)
//登陆成功，实现页面的跳转
location.href = './index.html'
} else {
toastr.warning(res.data.message)
}
})
});
}
说明：
- 01-点击搜索，输入要搜索的英雄名称，下面会出现相对应的值
- 02-点击添加，会弹出提示框
- 03-点击上传头像，弹出选择文件提示框，点击确定选择头像，将头像上传
- 04-点击删除，删除该条英雄的信息
加载
搜索
添加
上传头像
删除
