英雄信息案列
文件目录创建好
获取英雄数据
获取数据操作
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Hero - Admin</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<style>
.hero-list img {
width: 100px;
height: 94px;
display: block;
border-radius: 80px;
}
.hero-list td {
height: 50px;
line-height: 50px;
}
</style>
</head>
<script src="../libs/jquery-1.12.4.js"></script>
<script src="../libs/template-web.js"></script>
<script src="../libs/index.js"></script>
<body>
<header>
<div class="page-header container">
<h1>王者荣耀 <small>英雄管理器</small></h1>
</div>
</header>
<div class="container hero-list">
<a class="btn btn-success pull-right" href="edit.html">添加英雄</a>
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>性别</th>
<th>头像</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
</html>
<!-- 使用模本引擎渲染数据 -->
<!-- 图片路径改成服务器基地址 -->
<script type="text/template" id="userTemp">
{{each data}},
<tr>
<td>{{$index+1}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender}}</td>
<td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
<td><a href="#">查看</a> <a href="javascript:;">修改</a>
<a href="javascript:;">删除</a></td>
</tr>
{{/each}}
</script>
<script>
//获取所有英雄数据
$.ajax({
// - 请求路径：http://127.0.0.1:3002/getalldata
// - 请求方法：get
url: "http://127.0.0.1:3002/getalldata",
dataType: "json",
success: function(res) {
console.log(res);
$('tbody').html(template('userTemp', res));
}
})
</script>
新增英雄数据
添加英雄操作
<script>
$("#img").on("change", function() {
//引入上传文件模块
//使用formdata收集数据
let formdata = new FormData();
// 获取图片数据的方式需要使用原生方式
let file = document.querySelector("#img").files[0];
// 将文件数据追加到formdata
formdata.append("img", file);
$.ajax({
//请求方式
type: "post",
// 请求路径
url: "http://127.0.0.1:3002/uploadFile",
dataType: "json",
data: formdata,
// processData:不要让ajax进行数据的处理，因为formdata已经处理了
// contentType:不要让ajax进行数据的编码，formdata已经实现编码了
processData: false,
contentType: false,
success: function(res) {
console.log(res)
if (res.code == 200) {
//图片文件预览
$('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
//图片上传成功后，将文件名称隐藏到文件域
$('#img1').val(res.img);
};
}
})
$('#sub').on("click",function(){
$.ajax({
type:"post",
url:"http://127.0.0.1:3002/add",
data:$("#myform").serialize(),
dataType:"json",
success:function(res){
if(res.code==200){
alert(res.msg);
location.href="index.html";
}
}
})
})
});
</script>
修改英雄信息
<script>
//截取拿到id的值
let id=itcast.getParameter(location.search).id;
$.ajax({
type:"get",
url:"http://127.0.0.1:3002/getHeroById",
dataType:"json",
data:{id:id},
success:function(res){
console.log(res)
if(res.code==200){
$("tbody").html(template("heroTemp", res.data));
}
}
})
// 实现图片文件上传
$("tbody").on("change", "#img", function() {
let myfile = document.querySelector("#img").files[0];
let formdata = new FormData();
formdata.append("img", myfile);
$.ajax({
type: "post",
url: 'http://127.0.0.1:3002/uploadFile',
data: formdata,
processData: false,
contentType: false,
dataType: "json",
success: function(res) {
if (res.code == 200) {
$("#photo").attr("src", 'http://127.0.0.1:3002/images/' + res.img);
// 将图片名称存储到隐藏域中
$('.myimg').val(res.img);
}
}
})
})
// - 请求路径：http://127.0.0.1:3002/edit
// - 请求方法：post
$("tbody").on("click","#sub",function(){
$.ajax({
type:"post",
url:"http://127.0.0.1:3002/edit",
dataType:"json",
data:$("form").serialize(),
success:function(res){
if(res.code==200){
alert(res.msg);
location.href = "index.html";
// $('.myimg').val(res.img);
}
}
})
})
</script>
删除英雄信息
删除操作
function del(id) {
if (window.confirm("确定要删除吗，小可爱？？")) {
$.ajax({
type: "get",
url: "http://127.0.0.1:3002/delete",
dataType: "json",
data: {
id: id
},
success: function(res) {
if (res.code == 200) {
alert(res.msg);
location.href = "14.使用模本引擎实现英雄渲染.html";
} else if (res.code == 201) {
alert("删除失败！！")
}
}
})
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
