1.图书管理-编辑
就是点一下编辑的时候把需要编辑的数据渲染到编辑框内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>02-编辑</title>
<style>
body {
height: 100vh;
display: flex;
justify-content: space-around;
}
.left {
width: 1000px;
}
.right {
flex: 1;
}
form {
width: 90%;
margin: 0 auto;
background-color: #eee;
}
h3 {
background-color: brown;
color: #fff;
padding: 10px;
}
input {
display: block;
width: 80%;
margin: 10px auto;
height: 50px;
border-radius: 5px;
font-size: 25px;
color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 800px;
margin: 0 auto;
}
thead tr {
background-color: blue;
color: #fff;
font-size: 20px;
}
tbody tr:nth-child(odd) {
background-color: green;
color: #fff;
font-size: 18px;
}
tbody tr:nth-child(even) {
background-color: peru;
color: #fff;
font-size: 18px;
}
td,
th {
padding: 10px;
}
input {
width: 800px;
display: block;
margin: 30px auto;
height: 100px;
border-radius: 50px;
border: none;
background-color: skyblue;
font-size: 40px;
text-indent: 20px;
color: #666;
outline: none;
}
</style>
</head>
<body>
<div class="left">
<input type="text" class="keyword" />
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="right">
<form>
<h3>编辑</h3>
<input type="text" placeholder="书名" class="bookname" />
<input type="text" placeholder="作者" class="author" />
<input type="text" placeholder="出版社" class="publisher" />
<input type="button" value="编辑" class="btnadd" />
</form>
</div>
<script src="../lib/axios.js"></script>
<script>
const tbody = document.querySelector('tbody');
// 全局变量
let arr;
const booknameValue = document.querySelector('.bookname');
const authorValue = document.querySelector('.author');
const publisherValue = document.querySelector('.publisher');
tbody.addEventListener('click', function (event) {
if (event.target.className === 'editbtn') {
// 获取a身上的下标
const { index } = event.target.dataset;
// 获取到 另外一个方法中的 数组
console.log(arr[index]);
// 把对应的数据显示到表单中
booknameValue.value = arr[index].bookname;
authorValue.value = arr[index].author;
publisherValue.value = arr[index].publisher;
}
});
getData();
// 定义一个方法 发送请求 获取数据 渲染页面
function getData() {
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'get',
params: {
appkey: 'lishupeng123',
},
}).then((result) => {
console.log(result);
arr = result.data.data;
const html = arr
.map((value, index) => {
return `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td><a class="editbtn" data-index="${index}" href="javascript:;" >编辑</a></td>
</tr>
`;
})
.join('');
tbody.innerHTML = html;
});
}
</script>
</body>
</html>
2.图书管理-编辑-完成编辑功能案例
点编辑的时候把需要更改的内容编辑到需要更改的内容中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-编辑</title>
<style>
body {
height: 100vh;
display: flex;
justify-content: space-around;
}
.left {
width: 1000px;
}
.right {
flex: 1;
}
form {
width: 90%;
margin: 0 auto;
background-color: #eee;
}
h3 {
background-color: brown;
color: #fff;
padding: 10px;
}
input {
display: block;
width: 80%;
margin: 10px auto;
height: 50px;
border-radius: 5px;
font-size: 25px;
color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 800px;
margin: 0 auto;
}
thead tr {
background-color: blue;
color: #fff;
font-size: 20px;
}
tbody tr:nth-child(odd) {
background-color: green;
color: #fff;
font-size: 18px;
}
tbody tr:nth-child(even) {
background-color: peru;
color: #fff;
font-size: 18px;
}
td,
th {
padding: 10px;
}
input {
width: 800px;
display: block;
margin: 30px auto;
height: 100px;
border-radius: 50px;
border: none;
background-color: skyblue;
font-size: 40px;
text-indent: 20px;
color: #666;
outline: none;
}
</style>
</head>
<body>
<div class="left">
<input type="text" class="keyword" />
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="right">
<form>
<h3>编辑</h3>
<input type="text" placeholder="书名" class="bookname" />
<input type="text" placeholder="作者" class="author" />
<input type="text" placeholder="出版社" class="publisher" />
<input type="button" value="编辑" class="btnedit" />
</form>
</div>
<script src="./lib/axios.js"></script>
<script>
const tbody = document.querySelector('tbody');
// 全局变量
let arr; // 列表数据
let id; // 被点击的数据的id
const booknameValue = document.querySelector('.bookname');
const authorValue = document.querySelector('.author');
const publisherValue = document.querySelector('.publisher');
const btnedit = document.querySelector('.btnedit');
tbody.addEventListener('click', function (event) {
if (event.target.className === 'editbtn') {
// 获取a身上的下标
const { index } = event.target.dataset;
// 获取到 另外一个方法中的 数组
console.log(arr[index]);
// 把对应的数据显示到表单中
booknameValue.value = arr[index].bookname;
authorValue.value = arr[index].author;
publisherValue.value = arr[index].publisher;
// 获取到被编辑的数据id
id = arr[index].id;
}
});
btnedit.addEventListener('click', function () {
// 获取表单的值
const data = {
// 如何去获取
id: id,
bookname: booknameValue.value,
author: authorValue.value,
publisher: publisherValue.value,
appkey: 'wanshao1234'
};
// 发送一个编辑 请求
axios({
url: 'http://www.itcbc.com:3006/api/updatebook',
method: 'put',
// query - params
// body - data
data,
}).then((result) => {
console.log(result);
getData();
});
// 提示编辑成功 ->调用 getData 实现重新获取最新的数据
});
getData();
// 定义一个方法 发送请求 获取数据 渲染页面
function getData() {
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'get',
params: {
appkey: 'wanshao1234',
},
}).then((result) => {
console.log(result);
arr = result.data.data;
const html = arr
.map((value, index) => {
return `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td><a class="editbtn" data-index="${index}" href="javascript:;" >编辑</a></td>
</tr>
`;
})
.join('');
tbody.innerHTML = html;
});
}
</script>
</body>
</html>
3.form表单的一些概念
4.form表单提交数据
旧方式 提交数据 form标签的方式 提交 1 肯定会出现 刷新页面 调整页面的情况 （体验！ 很糟糕） 2 输入框没name属性 没有把数据 提交给到后端
新的方式 ajax 1 异步 网络请求 （异步 同时执行多个事情 - 你一边正在使用网页功能而且数据提交 同时进行（整个网页 ）） 2 规范 只要写到input标签想要数据提交 习惯的加上 name属性 如果使用ajax的技术来提交数据 是完全不给标签添加name属性 3 习惯下来 form input标签name 都一直在使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>03-form表单提交数据.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
旧方式 提交数据 form标签的方式 提交
1 肯定会出现 刷新页面 调整页面的情况 （体验！ 很糟糕）
2 输入框没name属性 没有把数据 提交给到后端
新的方式 ajax
1 异步 网络请求 （异步 同时执行多个事情 - 你一边正在使用网页功能而且数据提交 同时进行（整个网页 ））
2 规范 只要写到input标签想要数据提交 习惯的加上 name属性
如果使用ajax的技术来提交数据 是完全不给标签添加name属性
3 习惯下来 form input标签name 都一直在使用
-->
<form action="http://www.itcbc.com:3006/api/getbooks" method="get">
<div>
<label for="">用户名</label>
<input type="text" name="username">
</div>
<div>
<label for="">密码</label>
<input type="text" name="password">
</div>
<div>
<label for="">随便的测试</label>
<input type="text">
</div>
<!-- <button type="submit">提交</button> -->
<button>提交</button>
</form>
</body>
</html>
5.jq-序列化
序列化就是将数组，对象转为字符串的过程
反序列化就是将字符串转为数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>04-序列化.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<input type="text" name="username" />
<input type="text" name="password" />
<input type="text" />
<button type="button">获取表单数据</button>
</form>
<script src="./lib/jquery.js"></script>
<script>
// 序列化
// 把对象或者数组 转成 字符串格式 过程 序列化 JSON.stringify();
// 把字符串格式 转成 对象或者数组 反序列化 JSON.parse()
const button = document.querySelector('button');
// 假设我想要使用 快速获取表单数据 序列化 功能
// 1 直接用jq的 serialize
// 2 es6 新的对象 用这些新的对象 构造自己的序列化 方法 - 没有演示
// 3 传统- 自己写代码 获取每一个input标签的 自己写代码进行字符串拼接 没有演示
// 讲解js基础 对象 数组 字符串 转来转去
button.addEventListener('click', function () {
// 使用jq的方法 获取表单的数据 （字符串）
// username=11&password=22 get请求 两种传递参数的方式
// 1 params对象
// 2 在url上拼接字符串的形式 http:/api?username=11&password=22
// const data = $("form").serialize();
const data = myfunc('form'); // 不要这么做 人品坏
console.log(data);
});
// function $() {
// console.log(1);
// }
// $();
function myfunc(query) {
return $(query).serialize();
}
</script>
</body>
</html>
6. 自己实现快速获取表单数据
自己封装获取函数调用获取调单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input name="a" id="">
<input name="b" id="">
<input name="" id="">
<button type="button"> 提交</button>
</form>
<script>
const bu = document.querySelector('button')
bu.addEventListener('click', function () {
//使用函数
const da = form('form')
// 输出
console.log(da);
// 打断
return;
})
// FormData js内置的对象 处理表单数据 需要被new 出来使用
// 把 form表单-里面所有的表单标签-name属性 转成 formdta对象
// const formObj = new FormData(document.querySelector('form')); // formObj 对象 包含所有的表单数据（input name）
// console.log(formObj); // 直接打印 看不见里面的数据！！
// formObj 有forEach 方法 会遍历 它当中包含着 表单的数据
function form(i) {
// 1 快速 把 form表单中的带有name属性的数据 设置到 formdata 中,函数封装就用形参代替，使用代入就可以了
const forms = new FormData(document.querySelector(i))
// URL Search Params 用来处理 url上的参数 对象 也是可以被new
let urs = new URLSearchParams()
// forEach 方法 会遍历 它当中包含着 表单的数据
forms.forEach((value, key) => {
// // append:添加追加
urs.append(key, value)
})
// usp 有一个方法 toString() 把添加到它身上的 数据 转成 url 的参数的格式
const data = urs.toString()
return data;
}
/*
FormData 快速获取表单的数据
1 forEach
URLSearchParams 数据转成 get传参数据格式
1 append
2 toString()
*/
</script>
</body>
</html>
7.axios执行post请求传参格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>06-axios执行post请求传参格式</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<button>加载一个数据</button>
<script src="./lib/axios.js"></script>
<script>
/*
axios 执行post请求 传递参数 data 传参
data 可以接受的参数的类型
1 对象类型
2 字符串格式类型
bookname=从入门到精通&author=我自己&publisher=黑马出版社&appkey=wanshao1234
*/
const button = document.querySelector('button');
button.addEventListener('click', function () {
axios({
method: 'post',
url: 'http://www.itcbc.com:3006/api/addbook',
data: "bookname=从入门到出去123&author=我自己&publisher=黑马出版社&appkey=wanshao1234",
// data: {
// bookname: '从入门到精通',
// author: '我自己',
// publisher: '黑马出版社',
// appkey: 'wanshao1234',
// },
}).then((result) => {
console.log(result);
});
});
</script>
</body>
</html>
8. axios简写的代码
get和post的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>08-axios简写的代码.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script src="./lib/axios.js"></script>
<script>
// axios.get() 直接发送get请求
// axios.post() 直接发送post请求
// axios.delete() 直接发送delete请求
// axios.put() 直接发送put请求
// console.dir(axios);
// get 请求
// axios.get(Url)
// axios.get(Url,{params:{参数}}) ;
// axios.get("http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234")
// .then(result=>{
// console.log(result);
// })
// post请求
// axios.post(url,参数(对象));
// axios.post(url,参数(字符串格式));
// axios
// .post('http://www.itcbc.com:3006/api/addbook', {
// bookname: 'post请求1',
// author: 'post请求222',
// publisher: 'post请求33',
// appkey: 'wanshao1234',
// })
// .then((result) => {
// console.log(result);
// });
const url = 'http://www.itcbc.com:3006/api/addbook';
const query =
'bookname=111222&author=222222&publisher=33333&appkey=wanshao1234';
axios.post(url, query).then((result) => {
console.log(result);
});
</script>
</body>
</html>
9.文件上传-图片
用户上传图片并显示到页面上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>09-文件上传-图片.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<img src="" alt="" />
<input type="file" accept="image/*" />
<script>
/*
1 先允许用户选择本地的图片(很快 图片 上传视频)
1 指定文件上传的类型 只能是图片不能是其他 input标签一个属性 指定上传的文件的类型 accept
accept = "image/*"
accept = "image/*,video/*"
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#唯一文件类型说明符
2 给input标签绑定 change事件 图片上传浏览器内存中 就会触发
3 this.files来获取文件数组
4 可选
1 直接把文件开始上传
1 先在网页显示一下用户选择的图片 - 来确定是不是一张
2 把图片上传到指定服务器
1 图片文件？axios
*/
const input = document.querySelector('input');
const img = document.querySelector('img');
input.addEventListener('change', function () {
// console.log('浏览器拿到图片文件了');
// console.log(this.files);
const file = this.files[0]; // 要上传的文件对象
// 新的js对象 把浏览器内存中图片文件的地址 获取出来
const src = URL.createObjectURL(file);
// 让图片显示出来
img.src = src;
});
</script>
</body>
</html>
10.文件上传-图片-加上传到服务器
就是用户上传图片显示到页面的同时把图片上传到服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>10-文件上传-图片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<img src="" alt="" />
<input type="file" accept="image/*" />
<script src="./lib/axios.js"></script>
<script>
/*
2 把图片上传到指定服务器
2 根据接口文档的要求来代码
url、请求类型、请求参数（重点）
url http://www.itcbc.com:3006/api/formdata
method post
请求参数 上传文件 给后端的参数 肯定是 formdata 类型
*/
const input = document.querySelector('input');
const img = document.querySelector('img');
input.addEventListener('change', function () {
const file = this.files[0];
const src = URL.createObjectURL(file);
img.src = src;
// 参数名称 avatar 参数值 file
const formdata = new FormData(); // 创建一个空formdata对象
formdata.append('avatar', file); // 接口要求 把文件追加到 formdata对象
// 把数据上传到服务器中 即可
axios({
method: 'post',
url: 'http://www.itcbc.com:3006/api/formdata',
data: formdata,
}).then((result) => {
console.log(result);
});
// 简写
// axios
// .post('http://www.itcbc.com:3006/api/formdata', formdata)
// .then((result) => {
// console.log(result);
// });
});
</script>
</body>
</html>
11.拦截器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>11-拦截器.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
</style>
</head>
<body>
<img src="./images/1.gif" alt="" />
<script src="./lib/axios.js"></script>
<button>发送请求</button>
<script>
// 很多功能 都需要和服务器 交互 发送网络请求
// 上传头像 网络很慢、上传的文件很大
// 整个页面 没有相应的 状态
// 发送请求的时候 都显示一个 加载中的友好提示
// 复杂项目来说， 几百个接口 - 几百个网络请求 如何方便优雅的实现
// 自己根据发送的请求来 显示加载中！！
// 1 html+css 来实现加载中
// 1 很多的ul框架 全部都会提供 加载中的 小小效果
// 2 自己来简单写一个加载中 即可
// 2 自己根据发送的请求来 显示加载中！ axios内置的拦截器代码功能 在任意的请求
// 在发送请求前 拦截 处理一下 - 显示加载中
// 在数据响应来 拦截 处理一下 - 关闭加载中
// 普通人 想出去吉山
// 出去前 验证你核酸
// 回来后 验证你核算
// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// console.log('发送前 拦截器 ');
document.querySelector('img').style.display = 'block';
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
document.querySelector('img').style.display = 'none';
return response;
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
const button = document.querySelector('button');
button.addEventListener('click', function () {
// 发送网络请求
axios
.get('http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234')
.then((result) => {
console.log(result);
});
});
</script>
</body>
</html>
