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

88
历届学生/front-end-team/每天课程/2022-03-28/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!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>
// ajax 是什么东西？
// 请求
// 请求头 寄件人信息
// 请求体 包裹（快递的物品） 数据格式： json 解析 （字符串转化为数组或对象的） （数组和对象的组合） xml
// 响应头 收集人信息
//
// 异步的前后端数据交互的一种方式
// 单向的通讯技术 前端 ----> 后端
// 1 拿出电话 创建一个ajax对象
var http = new XMLHttpRequest();
// 2 设置号码 设置ajax请求的后端网址
// 请求方式：
// GET 找后端要数据
// http://www.bmy.com/index?page=index&action=video
// POST 给后端数据的过程
// 请求体里面
// 更多区别：https://www.cnblogs.com/logsharing/p/8448446.html
// PUT 给数据 + 更新的操作
// DELETE 给数据 + 删除的操作
http.open("GET", "http://127.0.0.1:3000/api/index/threeMeals")
// 3 拨号 发送ajax请求
http.send();
// json
http.onreadystatechange = function () {
if (http.readyState == 4) {
if (http.status == 200) {
var data = JSON.parse(http.response)
console.log(data);
data.result.forEach(function (item, index) {
document.querySelector("ul").innerHTML += `<li>${item.title}</li>`
console.log(item.title);
});
} else {
alert("网络请求错误")
}
}
}
// ajax 跨域
// 前端的地址： file:///C:/Users/bmy/Desktop/front-end-team/%E6%AF%8F%E5%A4%A9%E8%AF%BE%E7%A8%8B/2022-03-28/index.html
// 后端的地址： http://127.0.0.1:3000/api/index/threeMeals
// 同源策略 （CORS ）
// 从三方面进行安全检查：
// 协议 http (80) https (443)
// 域名
// 端口
// 什么是跨域？
// 跨域如何解决？有几种方式？
// 1：后端设置请求头 Access-Control-Allow-Origin ，告诉浏览器，放行这个前端
// 2：jsonp 将ajax请求伪装成 js 文件请求 + callback 回调函数 拿回数据
// 3: 服务端代理
// A(我的前端) --- C（别人的后端）
// A(我的前端) --- B (我的后端)
// B -- C
</script >
</html >

70
历届学生/front-end-team/每天课程/2022-03-28/kuaishou/ajax.js Normal file
View File

@@ -0,0 +1,70 @@
class ajax {
constructor() { // 类的参数初始化
this.baseUrl = "http://127.0.0.1:8090/api";
this.xhr = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: 'http://127.0.0.1:3000/api/index/threeMeals',
* data: {
* page: 1,
* id: 1
* },
* success: function() {}
* }
*/
get(params) {
// 判断你传的参数里面是否有 data，没有的话就报错提示你
if (params.hasOwnProperty("data")) {
var str = ""
// 将 object 类型的 data 转为为 ?key=value&key=value
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
// 设置请求地址
this.xhr.open("GET", `${this.baseUrl}${params.url}${str}`)
//
this.xhr.send();
// 状态监听
this.onreadystatechange(params.success)
} else {
throw new Error("data参数必传")
}
}
onreadystatechange(callback) {
// this 指向
// 如何解决 this 指向
// 提前保存this
// 箭头函数 es6 es5
// bind
// var self = this;
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
callback(JSON.parse(this.xhr.response))
} else {
alert("网络请求错误")
}
}
}
}
}
var http = new ajax();

87
历届学生/front-end-team/每天课程/2022-03-28/kuaishou/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>首页</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 220px;
margin-right: 10px;
}
li img {
width: 100%;
}
ul {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script>
var pcursor = "";
function getIndex() {
http.get({
url: '/likeList',
data: {
pcursor: pcursor
},
success: function (res) {
pcursor = res.pcursor;
renderPage(res.feeds)
}
});
}
function renderPage(feeds) {
feeds.forEach(item => {
document.querySelector("ul").innerHTML += `
<li>
<a target="_blank" href="./play.html?principalId=${item.author.id}&photoId=${item.photo.id}">
<img src="${item.photo.coverUrl}" alt="">
<p>${item.photo.caption}</p>
</a>
</li>
`
});
}
document.querySelector("button").onclick = () => {
getIndex()
}
getIndex();
</script>
</html>

42
历届学生/front-end-team/每天课程/2022-03-28/kuaishou/play.html Normal file
View File

@@ -0,0 +1,42 @@
<!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>
<video src="" controls autoplay muted></video>
</body>
<script src="./ajax.js"></script>
<script>
var video = document.querySelector("video");
function getVideoUrl() {
http.get({
url: '/play',
data: {
principalId: GetQueryString("principalId"),
photoId: GetQueryString("photoId")
},
success: function (res) {
video.src = res.playUrl
video.poster = res.poster
}
});
}
getVideoUrl();
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</html>

27
历届学生/front-end-team/每天课程/2022-03-28/笔记.txt Normal file
View File

@@ -0,0 +1,27 @@
web 网站
1：服务端渲染
前端: 写页面 3000k 20%
后端：写页面+写功能+数据库+服务器 15000 80%
优点：前后端沟通成本低
缺点：项目迭代成本高
ajax
2：前后端分离
前端：写页面 写功能 50% 12000
后端：数据库 服务器 50% 14000