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

70
历届学生/fontendseven/每天课程/2021-11-26/ajax.html Normal file
View File

@@ -0,0 +1,70 @@
<!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/?v=getData"></script> -->
<script>
// 创建一个新的ajax对象，拿出电话
var xhr = new XMLHttpRequest();
// methos 四种 请求方式
// POST 给的动作，新增
// GET 要的动作
// PUT 给的动作，更新
// DELETE 给的动作，删除
// 设置请请求方式和地址
xhr.open("POST", "http://127.0.0.1/my.php")
// 发送请求，开始拨号
// xhr.setRequestHeader("Content-Type","application/json; charset = UTF-8");
// var res = new FormData();
// res.append("id", 1)
// res.append("name", 2)
// var dara = JSON.stringify({ id: 1, name: 2 });
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
// data.result.model.res.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.preview}" alt="">
// </li>
// `
// });
} else {
console.log("暂无数据");
}
}
}
</script>
</html>

43
历届学生/fontendseven/每天课程/2021-11-26/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>
<body>
<ul>
</ul>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
async function GetIndex() {
var res = await server.classList({
page: 0,
id: 124
});
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<h2>${v.title}</h2>
<img src="${v.preview}" alt="">
</a>
</li>
`
});
}
GetIndex();
</script>
</html>

53
历届学生/fontendseven/每天课程/2021-11-26/info.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
var page = 1, total_page = null;
async function GetInfo() {
var res = await server.info({
id: location.search.split("=")[1],
page: page
})
total_page = res.result.total_page
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<img src="${v.src}" alt="">
</li>
`
});
}
document.querySelector("button").onclick = function () {
page+=1;
if (page <= total_page) {
GetInfo();
}
}
GetInfo()
</script>
</html>

31
历届学生/fontendseven/每天课程/2021-11-26/js/config.js Normal file
View File

@@ -0,0 +1,31 @@
// 专门用来存放所有的接口地址
var config = {
// 基地址 dev（开发阶段） test（测试阶段） prod（正式）
devUrl: 'http://127.0.0.1:3000/api/json',
testUrl: 'http://127.0.0.1:9090/api/json',
prodUrl: 'http://127.0.0.1/api/json',
stage: 'dev',
urlList: {
index: '/index',
info: '/info',
classList: '/classList'
},
checkUrl: function () {
switch (this.stage) {
case "dev":
return this.devUrl
break;
case "test":
return this.testUrl
break;
case "prod":
return this.prodUrl
break;
default:
break;
}
},
}

39
历届学生/fontendseven/每天课程/2021-11-26/js/http.js Normal file
View File

@@ -0,0 +1,39 @@
class HTTP {
constructor() {
this.xhr = new XMLHttpRequest();
}
get(option) {
return new Promise((success, error) => {
var GetParams = ""
for (const key in option.data) {
GetParams += `&${key}=${option.data[key]}`
}
GetParams = GetParams.replace("&", "?")
option.url += GetParams;
this.xhr.open("GET", config.checkUrl() + option.url)
this.xhr.send()
this.onreadystatechange(success, error)
})
}
post() { }
onreadystatechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
success(JSON.parse(this.xhr.responseText));
} else {
console.log("暂无数据");
error(this.xhr)
}
}
}
}
}

25
历届学生/fontendseven/每天课程/2021-11-26/js/server.js Normal file
View File

@@ -0,0 +1,25 @@
class Server {
async index(data) {
return (new HTTP()).get({
url: config.urlList.index,
data: data
})
}
async classList(data) {
return (new HTTP()).get({
url: config.urlList.classList,
data: data
})
}
async info(data) {
return (new HTTP()).get({
url: config.urlList.info,
data: data
})
}
}
var server = new Server()

108
历届学生/fontendseven/每天课程/2021-11-26/plugins.html Normal file
View File

@@ -0,0 +1,108 @@
<!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>
<div class="two"></div>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
// callback
// function ajax(option) {
// var xhr = new XMLHttpRequest();
// var GetParams = ""
// if (option.type == "GET") {
// for (const key in option.data) {
// GetParams += `&${key}=${option.data[key]}`
// }
// GetParams = GetParams.replace("&", "?")
// option.url += GetParams
// }
// xhr.open(option.type, option.url)
// xhr.setRequestHeader("Content-Type", "application/json; charset = UTF-8");
// xhr.send(option.type == "GET" ? null : JSON.stringify(option.data))
// xhr.onreadystatechange = function () {
// if (xhr.readyState == 4) {
// if (xhr.status == 200) {
// option.success(JSON.parse(xhr.responseText))
// } else {
// console.log("暂无数据");
// option.error(xhr)
// }
// }
// }
// }
// callback
// ajax({
// type: "POST",
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '张三'
// },
// success: function (res) {
// console.log("====== success: ", res);
// },
// error: function (err) {
// console.log("====== error: ", err);
// },
// })
// promise
// var http = new HTTP();
// http.get({
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '222'
// }
// })
// .then(function(res){
// console.log(res);
// })
// .catch(function(err){
// console.log(err);
// })
// console.log("=======");
var a = async () => {
let res = await server.index({ id: 1, name: '222' });
// var res = await http.get({
// url: 'http://127.0.0.1/index2.php',
// data: {
// id: 1,
// name: '222'
// }
// });
console.log("=== ",res);
}
a()
</script>
</html>

30
历届学生/fontendseven/每天课程/2021-11-26/笔记.txt Normal file
View File

@@ -0,0 +1,30 @@
ajax 主要是前后端数据交互的一种方式（通讯技术）
单向通讯技术
前端 ----> 后端
ajax 同源策略 跨域(Access-Control-Allow-Origin)
协议
域名
端口
前端：http://127.0.0.1:8000/api/demo/js
后端：http://127.0.0.1:3000/api/json/index
解决 跨域
1：cors 后端设置请求头（Access-Control-Allow-Origin），允许跨域
2：jsonp，通过js资源文件请求，绕过同源策略，再加上callback拿回数据 是js文件请求，不是ajax
3：后端代理
get
http://127.0.0.1/my.php?id=1&page=2&num=10
post
请求体