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

40
历届学生/18课程/class18/课程/2020-10-24/backend/index.js Normal file
View File

@@ -0,0 +1,40 @@
const e = require('express');
const express = require('express')
const app = express()
const port = 3000
// 我自己后端
app.all('*', (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "*");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", 'bmy')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.post('/index', (req, res) => {
// var c = req.query.c;
// var data = {
// title: '测试',
// list: [
// { id:1, title: '测试1' },
// { id:2, title: '测试2' },
// { id:3, title: '测试32d3e21e21e' },
// ]
// };
// console.log(c);
// // eee(data)
// res.end(`${c}(${JSON.stringify(data)})`)
res.json({
title: '测试',
list: [
{ id: 1, title: '测试1' },
{ id: 2, title: '测试2' },
{ id: 3, title: '测试32d3e21e21e' },
]
})
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

26
历届学生/18课程/class18/课程/2020-10-24/backend/my.js Normal file
View File

@@ -0,0 +1,26 @@
const e = require('express');
const express = require('express')
const request = require('request')
const app = express()
const port = 8080
// 我自己后端
// 设置跨域访问
app.all('*', (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",'bmy')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/my', (req, res) => {
request('http://127.0.0.1:3000/index', function (error, response, body) {
console.log('body:', body); // Print the HTML for the Google homepage.
res.json(JSON.parse(body))
});
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

16
历届学生/18课程/class18/课程/2020-10-24/backend/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"request": "^2.88.2"
}
}

59
历届学生/18课程/class18/课程/2020-10-24/index.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<h2></h2>
<ul></ul>
</body>
<script>
// 拿出电话（创建一个新的ajax对象）
var ajax = new XMLHttpRequest();
// 设置电话号码
// 是否异步
ajax.open('GET', 'http://127.0.0.1:3000/index', true)
// 拨号
ajax.send();
// 监听网络状态，只有网络请求成功的时候才渲染页面，否则显示错误信息
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(ajax.responseText);
var data = JSON.parse(ajax.responseText);
console.log(data);
document.querySelector("h2").innerText = data.title;
data.list.forEach(v => {
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
});
// 将符合object或者array的字符串数据转化为 object 或 array类型 JSON.parse
// 将标准的object或者array 转换为string JSON.stringify(a)
} else {
console.log("数据请求失败，稍后再试");
}
}
}
// function getData(res) {
// console.log(res);
// var data = res;
// console.log(data);
// document.querySelector("h2").innerText = data.title;
// data.list.forEach(v => {
// document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
// });
// }
</script>
<!-- <script src="http://127.0.0.1:3000/index?c=getData"></script> -->
</html>

64
历届学生/18课程/class18/课程/2020-10-24/笔记.txt Normal file
View File

@@ -0,0 +1,64 @@
ajax :
wx.request({
})
uni.request({})
vue axios
react axios
jquery $.ajax
xhr XMLHttpRequest
ajax是什么？无刷新的网页数据交互方式、
类似：电话
web开发模式：
纯后端渲染：
优势：对浏览器的搜索引擎优化有更好的帮助，一个后端就能搞定一个网站的开发，成本更低
缺点：项目后期维护成本非常非常高，代码逻辑和组织结构混乱
80% + 20%
前后端分离：50% + 50%
后端：给数据（数据库，服务器安全）,
前端：调接口，拿数据，写页面，实现前端功能
ajax 跨域
跨域是谁导致的: --> 浏览器（同源策略）
同源策略
协议
域名
端口
三者都一模一样的时候才能正常请求
http://127.0.0.3:9090/index.html
http://127.0.0.1:3000/index
解决跨域问题
1：后端设置cors
2：jsonp + 回调
浏览器不阻挡js,css,img的资源文件请求,所以将ajax伪装成js文件请求绕过浏览器的 同源策略
jsonp不是ajax
3：服务端代理
A我的自己的前端 ---浏览器x--- B别人的后端
A我的自己的前端 ------ C我们自己的后端 ---- B别人的后端