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

59
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/index.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>
<form action="">
<input type="text" name="id">
</form>
<ul>
</ul>
</body>
<script>
// 1 创建一个新的对象 举例：拿出手机
// fetch 全新的ajax请求方式 后面再用 //XHR
var ajax = new XMLHttpRequest()
//2 传入后端地址 （配置需要访问的后端地址和请求方式）举例：设置号码
ajax.open("POST","http://127.0.0.1/index.php?")
var form = new FormData();
form.append("id",1)
var params = {
id:1
}
//更改请求头类型，系统为Content-Type 更改为application 中文格式charset=UTF-8
// ajax.setRequestHeader('Content-Type','application/json,charset=UTF-8') //json格式发送后端
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8') //form表单格式传给后端
//3 发送请求 举例：拨号
// ajax.send(JSON.stringify(params))
ajax.send(form)
//监听请求状态
ajax.onreadystatechange = function () {
if (ajax.readyState == 4){
if (ajax.status ==200){
var data = JSON.parse(ajax.responseText)
//字符串转换为对象 JSON.parse //对象转换为字符串 JSON.stringify
console.log(data);
data.result.forEach(v => {
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
});
}else{
alert("网络请求失败")
}
}
}
</script>
</html>

20
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/封装/ajax.js Normal file
View File

@@ -0,0 +1,20 @@
class ajax{
constructor(){
this.ajax = new XMLHttpRequest();
}
get(params){
for (const key in params.data) {
console.log("key",key);
}
}
}

30
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/封装/ajax封装.html Normal file
View File

@@ -0,0 +1,30 @@
<!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="./ajax.js"></script>
<script>
ajax.get({
url: 'http://127.0.0.1/my.php',
data: {
id: 1,
page: 2
},
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
)
</script>
</html>

0
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/css/clear.css Normal file
View File

0
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/css/index.css Normal file
View File

0
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/css/public.css Normal file
View File

51
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/js/ajax/index.js Normal file
View File

@@ -0,0 +1,51 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: '',
* data: {
* id: 1,
* page: 2
* },
* header: {
* 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
* }
* }
*/
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", `${params.url}${str}`)
this.ajax.send()
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
// console.log(data);
success(data)
} else {
error(this.ajax)
}
}
}
}
}
var ajax = new Ajax();

32
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/js/config/index.js Normal file
View File

@@ -0,0 +1,32 @@
var config = {
devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发阶段
testBaseUrl: 'http://127.0.0.1:3000/api/test', // 测试阶段
prodBaseUrl: 'http://192.168.31.100:3000/api/json', // 上线阶段
stage: 'prod', // dev test prod
apiList: {
index: '/index',
info: '/info',
classList: '/class'
},
footerList: [
{ title: '首页', icon: 'icon-home', url: 'index.html' },
{ title: '机构', icon: 'icon-jigou', url: 'mechanism.html' },
{ title: '模特', icon: 'icon-me', url: 'model.html' },
{ title: '我的', icon: 'icon-wo', url: 'my.html' },
],
checkUrl: function () {
switch (this.stage) {
case "dev":
return this.devBaseUrl
break;
case "test":
return this.testBaseUrl
break;
case "prod":
return this.prodBaseUrl
break;
default:
break;
}
}
}

0
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/js/page/index.js Normal file
View File

0
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/js/serve/index.js Normal file
View File

38
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/js/util/index.js Normal file
View File

@@ -0,0 +1,38 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
HTMLElement.prototype.text = function (text) {
this.innerText = text;
}
}
query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
click(className, callback) {
$(className).onclick = (e) => {
callback(e)
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject, query } = new Util()
inject()

20
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/枸杞社/page/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!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>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
</body>
<script src="../js/util/index.js"></script>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/page/index.js"></script>
</html>

51
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/ajax.js Normal file
View File

@@ -0,0 +1,51 @@
class Ajax {
constructor() {
this.ajax = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: '',
* data: {
* id: 1,
* page: 2
* },
* header: {
* 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
* }
* }
*/
get(params) {
return new Promise((success, error) => {
var str = ""
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
this.ajax.open("GET", `${params.url}${str}`)
this.ajax.send()
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.ajax.onreadystatechange = () => {
if (this.ajax.readyState == 4) {
if (this.ajax.status == 200) {
var data = JSON.parse(this.ajax.responseText)
// console.log(data);
success(data)
} else {
error(this.ajax)
}
}
}
}
}
var ajax = new Ajax();

19
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/index.html Normal file
View File

@@ -0,0 +1,19 @@
<!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 class="more">下一页</button>
</body>
<script src="./ajax.js"></script>
<script src="./utils.js"></script>
<script src="./index.js"></script>
</html>

40
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/index.js Normal file
View File

@@ -0,0 +1,40 @@
class Index {
constructor(){
this.page = 1
this.bindEvent()
this.getClassList()
}
bindEvent(){
click(".more",() => {
this.page+=1
this.getClassList()
}
)
}
async getClassList(){
var res = await ajax.get({
url: 'http://127.0.0.1:3000/api/index/class',
data: {
type: 1,
page: this.page
},
});
var data = res.result.items;
data.forEach(v => {
$("ul").innerHTML += `
<li>
<a href="./info.html?url=${v.path}">
<img src="${v.img}" alt="">
<p>${v.title}</p>
</a>
</li>
`
});
}
}
new Index();

21
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/info.html Normal file
View File

@@ -0,0 +1,21 @@
<!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>
<div class="main">
<img src="" alt="">
<p class="posttime"></p>
<p class="title"></p>
</div>
</body>
<script src="./ajax.js"></script>
<script src="./utils.js"></script>
<script src="./info.js"></script>
</html>

29
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/info.js Normal file
View File

@@ -0,0 +1,29 @@
class info {
constructor(){
this.getInfo()
}
async getInfo() {
var res = await ajax.get({
url: 'http://127.0.0.1:3000/api/index/info',
data: {
url: query("url")
},
});
document.querySelector("body").innerText
$(".main img").src = res.result.backImg
$(".main .posttime").text(res.result.posttime)
$(".main .title").text(res.result.title)
console.log(res.result);
}
}
new info()

38
历届学生/font-end-nine/项目练习/学生项目/冯文焌/6ajax/菜谱/utils.js Normal file
View File

@@ -0,0 +1,38 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
HTMLElement.prototype.text = function (text) {
this.innerText = text;
}
}
query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
click(className, callback) {
$(className).onclick = (e) => {
callback(e)
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject, query } = new Util()
inject()