1.服务器相关的基础概念
1-1 服务器
-
服务器的本质
- 也是一台电脑
-
服务器的作用
- 存储网站的文件
- 提供网站的文件给用户
-
如何获得服务器
- 购买（京东）
- 租赁（阿里云、腾讯云）
1-2 资源
- 服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容
- 数据也是资源
1-3 客户端
概念
在前端开发中，客户端特指web浏览器
作用
将互联网世界中的web资源加载、并呈现到浏览器窗口中供用户使用
常用的客户端浏览器
1-4 URL 地址
1-5 客户端与服务器通信的过程
-
请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
-
响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”
1-6 Ajax概念
-
Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。
-
它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。
2 请求方式
2-1 GET请求
GET 请求用于从服务器获取数据
2-2 POST请求
POST 请求用于向服务器新增数据
2-3 DELETE请求
DELETE 请求用于删除服务器上的数据
2-4 PUT请求
PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）：
2-5 PATCH请求
PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）：
3 Ajax基本用法
3-1 axios 的基础语法
axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库
中文官网地址：www.axios-http.cn/
3-2 基于 axios发起 GET 请求
测试 GET 请求的 URL 地址为 www.itcbc.com:3006/api/getbook…
GET 请求的查询参数
在 GET 请求中携带多个查询参数
如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可。示例代码如下：
案例图书管理
基于axios发起post请求
使用小时发起post请求时post时，只需要method属性的值设置为post，url地址改为 '/api/addbook'
POST 案例：添加图书 – 核心代码
请求方式为 POST，请求地址为 www.itcbc.com:3006/api/addbook
4 接口相关的基本概念
概念
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。
同时，每个接口必须有对应的请求方式
- www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求)
- http://www. itcbc.com:3006/api/addbook 添加图书的接口（POST 请求）
接口文档的格式
5 案例-图书管理
查询数据
// 调用数据
getData()
// 渲染数据
function getData() {
// 查询数据
axios({
method: 'get',
url: 'http://www.itcbc.com:3006/api/getbooks'
}).then(result => {
// console.log(result);
arr = result.data.data
let html = ``
arr.forEach((value, index) => {
html += `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
<td>
<a href="javascript:;" class="del" data-id="${value.id}">删除</a>
<a href="javascript:;" class="edit" data-index="${index}">编辑</a>
</td>
</tr>
`
});
tbody.innerHTML = html
})
}
添加数据
// 添加数据
add.addEventListener('click', function () {
console.log(123);
// 添加数据
axios({
method: 'post',
url: 'http://www.itcbc.com:3006/api/addbook',
data: {
bookname: booknameDom.value,
author: authorDom.value,
publisher: publisherDom.value
}
}).then(result => {
console.log(result);
// 添加后输入框清空
booknameDom.value=''
authorDom.value=''
publisherDom.value=''
// 重新渲染数据
getData()
})
})
删除数据
// 删除数据 编辑数据
tbody.addEventListener('click',function(event){
// // 删除确认框
// if(!confirm('你确定要删除数据么')){
// return
// }
// 删除数据
if(event.target.className==='del'){
console.log(123);
const {id} = event.target.dataset
axios({
method:'delete',
url:'http://www.itcbc.com:3006/api/delbook',
params:{id}
}).then(result=>{
getData()
})
}
修改数据
// 编辑数据 提交数据
editbtn.addEventListener('click',function(){
const data={
bookname:booknameDom.value,
author:authorDom.value,
publisher:publisherDom.value,
id:id
}
axios({ url:'http://www.itcbc.com:3006/api/updatebook',
method:'put',
data
}).then(result=>{
getData()
booknameDom.value = ''
authorDom.value = ''
publisherDom.value = ''
})
})
appkey身份认证
服务器存储的图书，分为通用数据和个人数据
- 默认获取、添加、删除、修改的都是通用数据
- 在获取、添加、删除、修改时，如果带appkey参数，则表示使用个人数据。
6 network面板
介绍
-
lnetwork，翻译为 “网络”
-
l浏览器的开发者工具中，有一个面板为 network。（新版的chrome浏览器是中文版本的）
-
l该工具可以抓取到所有的网络请求，当然包括ajax请求
-
l我们可以使用该工具，查看当前Ajax请求的详细信息
- l查看请求方式
- l查看请求的URL地址
- l查看请求参数
- l查看响应结果
使用
1
2 隐藏时间轴。初学阶段，用不到时间轴，可以将其隐藏，从而节省面板的空间
3 禁用浏览器缓存
4 模拟网络（网速）
5 显示请求方式
6 network****面板 查看 请求状态
7 network面板 查看请求方式和完整URL
8 network****面板 查看 传输到服务器的数据
9 network****面板 查看 服务器响应结果
7 form表单
作用
- 在网页中，表单主要负责数据采集功能
表单组成部分
- 表单标签 表单域 按钮表单
表单标签
HTML 的
就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：表单域
表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。
表单按钮
当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。
form标签属性
表单文件上传
以 get方式提交表单数据
在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：
以 POST 方式提交表单数据
在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded
通过 Ajax 提交表单数据
通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
①监听表单的 submit 提交事件
②阻止默认提交行为
③基于 axios 发起请求
④指定请求方式、请求地址
⑤指定请求体数据
jQuery 的 serialize**()** 函数
jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：
$('表单元素的选择器').serialize();
serialize() 函数的使用注意点
在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！
例如下面的示例中，只能通过 serialize() 函数获取到密码的值：
serialize() 函数的其他特点
该方法是jQuery封装的，使用时必须引入jQuery
使用serialize()，各表单域必须有 name 属性
使用该方法得到的结果是一个查询字符串结构：name=value&name=value
该方法 能够 获取 隐藏域的值
该方法不能得到禁用状态的值
该方法不能得到文件域中的文件信息，所以不能完成文件上传
8 axios请求方法的别名
9 axios全局配置和拦截器
全局配置请求根路径 - 语法格式
基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下：
axios.defaults.baseURL = '请求根路径'
拦截器
-
用来全局拦截 axios 的每一次请求与响应
-
可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
document.querySelector(".vir-wrap").style.display = "flex";
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
document.querySelector(".vir-wrap").style.display = "none";
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
10 FormData和文件上传
-
FormData 是一个浏览器对象。用于管理表单数据。
-
IE10+支持。
-
可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据
-
并且可以将创建的FormData对象直接提交给接口。
-
典型应用场景：FormData技术实现的功能
在提交数据前，可以使用下列API方法对数据进行查看和修改
FormData和serialize的区别
-
共同点：
- 都需要设置表单各项的name属性。
- 都能快速收集表单数据
- 都能够获取到隐藏域（）的值
- 都不能获取禁用状态（disabled）的值
-
不同点：
- FormData属于原生的代码；serialiaze是jQuery封装的方法
- FormData可以收集文件域（）的值，而serialize不能。如果有文件上传，则必须使用FormData。
- 得到的结果的数据类型不一样（知道即可
11 文件上传
主要的实现步骤：
①使用文件选择器选择图片文件
②把用户选择的文件存入 FormData 对象
③使用 axios 把 FormData 发送给服务器
④模拟文件选择器的点击事件
12 文件域
13-请求报文和响应报文
