服务器相关的基础概念
服务器
服务器的本质：也是一台电脑。作用：存储一个网站的文件（HTML、CSS、JS、图片、音乐.....），提供网站的文件给用户
资源
通俗的讲，我们浏览网页时，从网络当中看到的内容都叫做资源
数据也是资源
网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等
数据
服务器存储数据的方式，多数会用数据表的形式来储存
客户端
在前端开发中，客户端特指“Web 浏览器”，它可以将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用
URL 地址（统一资源定位符）
URL 地址，表示服务器上每个资源的确切位置，服务器上的每个资源，都对应着独一无二的URL地址。对数据的操作（增删改查），也对应着不同的URL地址
客户端与服务器通信的过程
客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：
- 请求的概念：客户端通过网络去找服务器要资源的过程，叫做请求
- 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做响应
什么是 Ajax
Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据，英文全称是 Asynchronous Javascript And XML，简称 Ajax，网页中 Ajax 的应用场景无处不在，有数据的地方就有 Ajax
axios
axios是前端圈最火的、专注于数据请求的库
axios({
method: "请求类型",
url: "请求的资源地址",
// .then固定写法，是axios封装的一个代码，意思是服务器把数据返回了，then里面的代码就会被触发
}).then((result) => {
// then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
console.log(result); // 查看请求结果
});
请求方式
Ajax中，客户端浏览器在请求服务器上的数据时，根据**操作性质（增删改查）**的不同，可以分为以下 5 种常见的操作
GET 请求
GET 请求用于从服务器获取数据
method: "get",
// 完整写法请查看 axios描述
GET 请求的查询参数
axios({
method: "get",
url: "资源地址",
// 请求的查询参数
params:{
// 1. 如果想指定查询的条件，可以通过 params 选项来指定查询的参数
// 2. 指定参数的代码写法必须要写在 params 对象中，并且以键值对的形式存在，即 属性:属性值
// 3. params 对象中，写什么样的键值对，规定要由后端来决定，前端不可随意自定义命名
id:5913 // 根据id来查询指定的数据（后端已经做好了这个功能才能查询到）
// 4. 输入多个键值对来获取指定数据（精确的查找）
id:5913,
bookname:"水浒传",
author:"施耐庵"
// 5. 输入多个键值对时，需要注意键值对的值一定要正确，否则什么都不会返回
// 6. get请求传参第二种传参方式：url: "资源地址?id:5913&bookname:"水浒传"" ?后面接上键值对
}
}).then((result) => {
console.log(result);
});
简写-GET 请求
// axios.get(url) 固定写法
// axios.get(Url,{params:{{参数}})
axios.get("url").then((result) => {});
get请求-浏览器地址栏
直接在浏览器的地址栏输入接口地址来访问数据，这种方式也属于get请求
POST 请求
POST 请求用于向服务器新增数据
method: "post",
// 完整写法请查看 axios描述
发起 POST 请求
axios({
method: "post",
url: "资源地址",
// 请求体
data:{
bookname: '三国演义',
author: '罗贯中',
publisher: '上海出版社',
// 不能随意命名添加数据，必须按照规范来添加
}
}).then((result) => {
console.log(result);
});
简写-POST 请求
// axios.post(url,参数(对象));
// axios.post(url,参数(字符串格式));
axsio
.post("资源地址", {
bookname: "《静夜思》",
author: "李白",
publisher: "唐朝",
appkey: "hdj1232",
})
.then((result) => {
console.log(result);
});
DELETE 请求
DELETE 请求用于删除服务器上的数据
method: "delete",
// 完整写法请查看 axios描述
PUT 请求
PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
method: "put",
// 完整写法请查看 axios描述
PATCH 请求
PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
method: "patch",
// 完整写法请查看 axios描述
接口相关的基础概念
| 组成部分 | 说明 |
|---|---|
| 接口名称 | 接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口 |
| 接口 URL | 客户端发起 Ajax 调用此接口时，请求的 URL 地址 |
| 请求方式 | 接口的请求方式，如：GET、POST、PUT、DELETE 等 |
| 请求参数 | 请求此接口时，需要发送到服务器的查询参数或请求体 |
| 返回示例 | 当接口请求成功后，服务器响应回来的数据的基本格式 |
| 返回参数说明 | 接口响应结果的详细描述 |
易错点查询建议
network面板
开发或学习时，遇到ajax方面的错误，可以使用浏览器的 network 面板，来帮助我们更方便的排查错误。该工具可以抓取到所有的网络请求，当然包括ajax请求，我们可以使用该工具看当前Ajax的请求方式，请求的URL地址，请求参数，响应结果等
拓展
confirm确认框
JS中自带的确认框（confirm），绑定按钮点击事件会返回true和false
<body>
<button>删除</button>
<script>
document.querySelector('button').addEventListener('click', function () {
if (confirm('是否执行删除？')) {
// 点击确认 返回yrue
console.log('可以删除');
} else {
// 点击取消 返回false
console.log('取消删除');
}
});
</script>
</body>
快速获取form表单所有数据
<!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>13-快速获取到form表单所有数据.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input[name] {
/* <input type="text" name="username" /> */
/* 表示选择到了 有name属性的input标签 */
background-color: red;
}
</style>
</head>
<body>
<form class="f1">
<input value="111" type="text" name="username" />
<input value="222" type="text" name="password" />
<input value="333" type="text" name="address" />
<input value="444" type="text" name="phone" />
<input type="text" />
<input type="text" />
<input type="text" />
<button type="button">注册数据</button>
</form>
<form class="f2" action="">
<input type="text" name="nickname" value="aabbcc" />
</form>
<script>
// 获取表单1 数据 对象格式
const obj1 = getForm('.f1');
// 获取表单2 数据 对象格式
const obj2 = getForm('.f2');
// query 只能传入 form标签的选择器
function getForm(query) { // 在定义函数的时候写形参 - 名字都可以随意改
// 使用CSS中的属性选择器 获取所有带有name属性的input标签
const inputs = document.querySelectorAll(query + ' input[name]');
// .f1 = 传入参数修改的值（query） 后期谁调用 就输入谁的对应参数
// const inputs = document.querySelectorAll('.f1 input[name]');
const obj = {};
// 对伪数组进行遍历
// obj["a"] = 1; // 输出 {a:1}
// obj["c"] = 2; // 输出 {c:2}
inputs.forEach((dom) => {
// 添加新属性
obj[dom.name] = dom.value;
// dom.name = 属性名 dom.value = 属性值
});
return obj;
}
</script>
</body>
</html>
