bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
历届学生/front-end-team-11/每天上课/2023-05-10/demo.html Normal file
View File

@@ -0,0 +1,57 @@
<!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>
</body>
<script src="./http.js"></script>
<script>
// callback 获取异步返回值
// 回调地狱
// promise
let getIndex = async () => {
// TODO 后期项目中封装
// let res = await http.post({ id: 1, page: 1 });
let res = await http.post({
url: 'http://127.0.0.1:3000/api/json/index',
headers: {
'token': 'hahhaha'
},
data: {
id: 1,
page: 1
}
});
console.log(res);
}
getIndex()
// http.post({
// url: 'http://127.0.0.1:3000/api/json/index',
// headers: {
// 'token': 'hahhaha'
// },
// data: {
// id: 1,
// page: 1
// }
// })
// .then(res => {
// console.log(res);
// })
// .catch(err => {
// console.log(err);
// })
</script>
</html>

66
历届学生/front-end-team-11/每天上课/2023-05-10/http.js Normal file
View File

@@ -0,0 +1,66 @@
class Http {
defaultOption = {
timeout: 6000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}
constructor() {
this.xhr = new XMLHttpRequest()
}
get(par) {
return new Promise((success, error) => {
this.setOption(par)
let urlParams = ""
for (const key in par.data) {
urlParams += `&${key}=${par.data[key]}`
}
urlParams = urlParams.replace("&", "")
this.xhr.open("GET", `${par.url}?${urlParams}`)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send()
this.statechange(success, error);
})
}
post(par) {
return new Promise((success, error) => {
this.setOption(par)
this.xhr.open("POST", par.url)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send(JSON.stringify(par.data))
this.statechange(success, error);
})
}
setOption(par) {
this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
// ....
}
setHeader(headerObject = {}) {
Object.assign(headerObject, this.defaultOption.headers)
for (const key in headerObject) {
this.xhr.setRequestHeader(key, headerObject[key]);
}
}
statechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
let data = JSON.parse(this.xhr.response)
success(data)
} else {
error(this.xhr)
}
}
}
}
}
var http = new Http();

87
历届学生/front-end-team-11/每天上课/2023-05-10/index.html Normal file
View File

@@ -0,0 +1,87 @@
<!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>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/index.php?call=getData"></script> -->
<script>
// 拿出电话 初始化ajax 对象并存储
let xhr = new XMLHttpRequest()
// 输入号码 设置请求方式和地址
xhr.open("GET", "http://127.0.0.1/index.php")
// 拨号 发送ajax请求(http请求)
xhr.send()
// let res = await fetch("http://127.0.0.1:3000/api/json/index", {
// data: {}
// })
// fetch("http://127.0.0.1:3000/api/json/index")
// .then(res => res.json())
// .then(res => {
// console.log(res);
// })
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let data = JSON.parse(xhr.response)
console.log(data);
// data.result.list.forEach(v => {
// $("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
console.error(xhr);
throw new Error("请求失败")
}
}
}
// fetch("http://127.0.0.1:3000/api/json/index")
// .then(res => res.json())
// .then(res => {
// console.log(res);
// })
function $(className) {
return document.querySelector(className);
}
// GET 和 POST 请求有什么差别
// https://www.php.cn/faq/500696.html
// HTTP 协议
// https://www.cnblogs.com/coderwhytop/p/14769174.html
// GET 找服务器要资源
// POST 给服务器要资源
// PUT 给服务器要资源（更新的过程）
// DELETE 给服务器要资源（删除的过程）
</script>
</html>

52
历届学生/front-end-team-11/每天上课/2023-05-10/笔记.txt Normal file
View File

@@ -0,0 +1,52 @@
服务端渲染 （模板引擎） mvc
缺点：前后端代码混在一起，导致代码冗余，后期升级改造难
前端 20% （写页面）
后端 80% （写功能，做数据，安全，服务器）
前后端分离
前端 50% 写页面，功能，特效，路由
|
ajax ( XML, json )
|
后端 50% 做数据，安全，服务器
ajax：一种无刷新的前后端数据交互的方式
XMLHttpRequest
fetch
Access-Control-Allow-Origin （cors）
浏览器有一个安全策略（同源策略 cors）
如何判断？
协议 http 80 https 443
域名
端口
跨域请求
前端：http://127.0.0.1:8080/test
前端：https://www.runoob.com/ajax/ajax.html
后端：http://127.0.0.1:3000/api/json/index
如何解决ajax跨域？
1: 后端设置请求头 Access-Control-Allow-Origin（cors）
2: jsonp + callback
3: 服务端代理
A(自己的前端) --> C(别人的后端)
A(自己的前端) --> B(自己的后端)
B(自己的后端) --> C(别人的后端)