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

60
历届学生/zheng-yuqing/项目练习/上课项目/ajax案例/ajax.js Normal file
View File

@@ -0,0 +1,60 @@
class AJAX {
constructor() {
// 请求基地址
// this.baseUrl = "http://127.0.0.1:3000/api/json";
this.baseUrl = "http://127.0.0.1:3000/api";
this.http = new XMLHttpRequest();
}
/**
*
* @param {*object} parmas
* {
* url: '', // 请求地址
* data : { page: 1, count: 15 } // 请求参数
* success: () => {} // ajax成功后，回调拿回请求结果
* error: () => {} // ajax 失败后，回调拿回错误结果
* }
*/
get(parmas) {
// 将data 参数转化为 ?key=value&key=value
var str = ""
for (const key in parmas.data) {
str += `&${key}=${parmas.data[key]}`
}
str = str.replace("&", "?")
this.http.open("GET", `${this.baseUrl}${parmas.url}${str}`);
this.http.send();
this.readyState(parmas.success, parmas.error)
}
post(parmas) {
this.http.open("POST", `${this.baseUrl}${parmas.url}`);
this.http.setRequestHeader('Content-type', 'application/json; charset="utf-8"');
this.http.send(JSON.stringify(parmas.data));
this.readyState(parmas.success, parmas.error)
}
put() { }
delete() { }
// 给 get post put delete 进行状态监听的封装
readyState(success, error) {
this.http.onreadystatechange = () => {
if (this.http.readyState == 4) {
if (this.http.status == 200) {
var data = JSON.parse(this.http.response);
success(data)
} else {
error(this.http)
}
}
}
}
}
var http = new AJAX();

151
历届学生/zheng-yuqing/项目练习/上课项目/ajax案例/caipu.html Normal file
View File

@@ -0,0 +1,151 @@
<!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>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #efefef;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content ul {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<div class="content">
</div>
</body>
<script src="./ajax.js"></script>
<script>
var index = 0;
var title = [
{ type: 1, title: '推荐', page: 1, total_page: 0, content: [] },
{ type: 2, title: '时令', page: 1, total_page: 0, content: [] },
{ type: 3, title: '食肉', page: 1, total_page: 0, content: [] },
{ type: 4, title: '素食', page: 1, total_page: 0, content: [] },
{ type: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
];
// 渲染tabs切换的标题
function renderTitle() {
title.forEach((v, i) => {
$(".title").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
`;
$(".content").innerHTML += `
<ul class="${i == 0 ? 'active' : ''}">
</ul>
`
});
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((item, index) => {
item.classList.remove("active");
_(".content ul")[index].classList.remove("active")
})
v.classList.add("active")
_(".content ul")[i].classList.add("active")
index = i;
getList();
}
});
// 默认调用接口获取 推荐 的数据
getList();
}
function getList() {
if (title[index].content.length == 0) {
http.get({
url: '/index/class',
data: {
type: title[index].type,
page: title[index].page
},
success: (res) => {
var data = res.result;
title[index].total_page = data.total_page;
title[index].content = title[index].content.concat(data.items);
();
},
error: (err) => { }
});
}
}
function renderContentLi() {
title[index].content.forEach((v, i) => {
_(".content ul")[index].innerHTML += `
<li>
<p>${v.title}</p>
</li>
`
})
}
renderTitle();
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

43
历届学生/zheng-yuqing/项目练习/上课项目/ajax案例/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>Document</title>
</head>
<body>
<ul>
</ul>
</body>
<script src="./ajax.js"></script>
<script>
http.get({
url: '/class',
data: {},
success: (res) => {
console.log(res);
renderLi(res.result.principal)
},
error: (err) => {
}
});
function renderLi(data) {
console.log(data);
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">${v.title}</a>
</li>
`
});
}
</script>
</html>

66
历届学生/zheng-yuqing/项目练习/上课项目/ajax案例/info.html Normal file
View File

@@ -0,0 +1,66 @@
<!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>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script>
var page = 1,
total_page = 0;
function getData() {
http.get({
url: '/classList',
data: {
id: location.search.split("=")[1],
page: page
},
success: (res) => {
console.log(res);
total_page = res.result.total_page
renderLi(res.result.data)
},
error: (err) => {
}
});
}
function renderLi(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<p>${v.title}</p>
<img src="${v.preview}" alt="">
</li>
`
});
}
getData()
document.querySelector("button").onclick = () => {
page += 1;
if (page <= total_page) {
getData()
}
}
</script>
</html>

3
历届学生/zheng-yuqing/项目练习/上课项目/ajax案例/笔记.txt Normal file
View File

@@ -0,0 +1,3 @@
封装的思想：
把重复部分封装起来，不同的地方作为参数传入