加载失败，
第七次课 网络编程复习&Axios
第七次课 网络编程复习&Axios
本文讨论了因寒假考核中不少人未真正实现动态网页，而进行网络编程复习并学习现代网络请求库Axios的相关内容，还涉及WebSocket实践及布置了作业。关键要点包括：
1.
复习上次作业：展示了上次作业的网页代码，包含注册、登录、聊天等功能及相关的HTML、CSS和JavaScript代码实现。
2.
Axios介绍：是基于promise的网络请求库，可用于浏览器和node.js，同一套代码可在两端运行，服务端用原生node.js http模块，客户端用XMLHttpRequests ，能简化发起ajax请求的操作。
3.
Axios安装与基本使用：采用cdn引入方式。在浏览器中使用时，相比fetch，axios默认添加常用的json格式解析，对支持的请求方法提供别名，请求配置接受配置对象。
4.
Axios请求配置与响应：配置对象包含url、headers、timeout等多个参数；响应体默认序列化为JSON，结构包含data、status等多个属性。
5.
Axios高级使用：可通过创建实例配置默认情况；通过响应拦截器和请求拦截器在请求前后执行逻辑。
6.
WebSocket实践：给出了WebSocket示例代码，展示了连接、关闭、接收消息和错误处理的监听设置。
7.
作业布置：用axios改写上次作业，要求特定字段只出现1次，用拦截器实现发送提示；用websocket做在线五子棋等小游戏或基本在线聊天室。
📘前言
这是我们这学期第一次课，鉴于寒假考核有不少人都没有真正的实现动态网页，我们打算重新复习一下网络编程和学习现代网络请求库。
现在我们就不再从基础知识开始，先简单提一下上次的作业吧🐶。
上次作业
<!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>参考答案</title>
</head>
<style>
.main-container{
display: flex;
flex-direction: column;
align-items: center;
width:60vw;
margin: 0 auto;
background-color: rgb(211, 211, 211);
}
#chat{
width: 80%;
background-color: rgb(247, 247, 247);
max-height: 500px;
min-height: 200px;
overflow-y:scroll;
box-sizing: border-box;
padding: 10px 20px 10px 20px;
}
.chatUl{
display: flex;
width: 80%;
list-style: none;
flex-direction: column;
}
li{
display:flex;
justify-content: start;
align-items: center;
height: 50px;
}
img{
display: block;
margin: 0 auto;
width: 30px;
height: 30px;
}
</style>
<body>
<main class="main-container">
<div id="register">
<label for="registerInput">昵称:</label><input type="text" id="registerInput"><button id="registerBut">注册</button>
</div>
<div id="login">
<label for="loginInput">昵称:</label><input type="text" id="loginInput"><button id="loginBut">登录</button>
</div>
<div id="chat">
<ul class="chatUl">
</ul>
</div>
<div id="send">
<input id="sendInput" type="text"><button id="sendBut">发送</button>
</div>
</main>
</body>
<script>
const baseURL="http://runninglili.club:8080";
//直接渲染消息
fetch(baseURL+"/getAllMessages")
.then(res=>res.json())
.then(res=>{
const html=res.map(item=>
`<li>
<section class="imf">
<div>${item.username}</div>
<img src="${item.avatar}" alt="">
</section>
<h3 class="mes">${item.words}</h3>
</li>`
).join("")
document.querySelector(".chatUl").insertAdjacentHTML("beforeend",html)
});
//监听注册
document.querySelector("#registerBut").addEventListener("click",()=>{
fetch(
baseURL+"/register",
{
method:"POST",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
body:`username=${registerInput.value}`
}
)
});
//监听登录
document.querySelector("#loginBut").addEventListener("click",()=>{
fetch(
baseURL+"/login",
{
method:"POST",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
body:`username=${loginInput.value}`
}
)
.then(res=>res.json())
.then(res=>{
localStorage.setItem("token",res.token)
})
});
//监听发送
document.querySelector("#sendBut").addEventListener("click",()=>{
fetch(
baseURL+"/sendMes",
{
method:"POST",
headers:{
"Content-Type":"application/x-www-form-urlencoded",
"Authorization":localStorage.getItem("token")
},
body:`words=${sendInput.value}`
}
)
})
</script>
</html>