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

78
历届学生/fontendsix/每日课程/2021-11-05/index.html Normal file
View File

@@ -0,0 +1,78 @@
<!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对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址！ 是后端给我们的，而且不止一个，每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化（string转object/array）
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败，请稍后再试")
}
}
}
//request req 请求
//response res 响应
// 请求头
// 响应头
// 请求体
// 请求方式
// GET 要的意图 读
// http://127.0.0.1:3000/api/index/class?username=刘兵&pwd=123456&age=18
// 地址栏传参
// POST 给的意图 写
// 请求体里面
// 二级制（文件流）
// form-data
// json
// PUT 给的意图，更新操作 更新
// DELETE 给的意图，删除操作 删除
// json
// xml
</script>
</html>

51
历届学生/fontendsix/每日课程/2021-11-05/index_2.html Normal file
View File

@@ -0,0 +1,51 @@
<!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>
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<img src="" alt="">
</body>
<script>
// 拿出手机 创建一个新的ajax对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址！ 是后端给我们的，而且不止一个，每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化（string转object/array）
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败，请稍后再试")
}
}
}
</scrip>
</html>

22
历届学生/fontendsix/每日课程/2021-11-05/jsonp.html Normal file
View File

@@ -0,0 +1,22 @@
<!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>jsonp</title>
</head>
<body>
</body>
<script>
function a (res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1:3000/api/index/test?cc=a"></script>
</html>

62
历届学生/fontendsix/每日课程/2021-11-05/笔记.txt Normal file
View File

@@ -0,0 +1,62 @@
ajax
web 开发模式
1: 服务端(后端)渲染
后端：1万 jquery 写页面（30% js+html+css） 数据库 实现功能 做安全 （70%）
前端：3千 写页面（70% html+css） ( 30% )
优：方便做 seo 优化
缺：后端工作任务量大，代码维护艰难
2: 前后端 分离
后端：1.8k 数据库 写功能（业务） 做安全
前端：1.7k 写页面 做功能（前端） 做安全 app，桌面端，后端
优：代码维护方便，分工明确，减少前后端扯皮的次数，提供研发效率
缺：
用什么开通讯？
ajax
xml http request xhr
GraphQL
ajax 同源策略(浏览器)
前端：file:///C:/Users/bmy/Desktop/2021-11-05/index.html
http://127.0.0.1:8080/index
后端：http://127.0.0.1:3000/api/index/hot
1：协议
http 80
https 443
2：域名
3：端口
解决浏览器的同源策略（解决跨域）
1：后端设置cors请求头，允许前端访问
2: jsonp+callback（回调函数） 资源文件请求绕过浏览器的ajax同源策略
3：服务端代理（后端语言，nginx，apache）
A（自己前端）
|
B（自己公司的后端）
|
C（别人后端）