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

29
历届学生/罗朝/2019-05-07/back/jsonp.js Normal file
View File

@@ -0,0 +1,29 @@
const express = require('express')
const app = express()
app.get('/back/jsonp', function(req, res) {
var fun = req.query.fun;
console.log("前端函数名为："+fun)
var listdata = {
status: 200,
message: "nodejs 后端，请求成功",
data: [
{
id: 1,
title: "新闻1"
},
{
id: 2,
title: "新闻2"
}
]
};
res.end(`${fun}(${JSON.stringify(listdata)})`)
//getNodeJsData(listdata)
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})

15
历届学生/罗朝/2019-05-07/back/package.json Normal file
View File

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

27
历届学生/罗朝/2019-05-07/cors.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: 'http://127.0.0.1/myphp.php',
type: 'GET',
success: function(res) {
console.log(JSON.parse(res));
},
error: function(err) {
console.log("网络请求失败");
}
})
</script>
</body>
</html>

56
历届学生/罗朝/2019-05-07/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> ajax 跨域 </title>
</head>
<body>
<script>
// ajax 跨域
// 导致的原因：浏览器的 [ 同源策略 ] 规则
// 作用：为了保护后端api接口
// 同源策略 规则：
// 会检查你的前端的访问地址和ajax将要访问的接口地址 是否一致？
// 前端：http://127.0.0.1:5500/2019-05-05/ajax.html
// 后端：http://127.0.0.1:9999/api/v1.0/index
// 怎么检查？
// 1: 协议是否完全相同 (http协议 默认端口80，https协议 默认端口 443)
// 2: 域名是否完全相同
// 3: 端口是否完全相同
// 是否完全一致，只要有一个不一致，那么就会导致跨域，浏览器报错信息如下：
// Access-Control-Allow-Origin
// 解决跨域
// 1: 后端允许跨域(CORS)
// 2: jsonp 跨域 披着羊皮骗过保安
// 原理
// 1: 浏览器只会去拦截ajax请求，但是不会拦截资源文件请求(js,css,html,img,font,mp4)
// 实现
// 发请求：前端使用 script 文件请求绕过浏览器的安全检查，发送函数名给后端
// 接受数据：后端接受函数名，然后调用函数把数据传递给前端
// 3: 服务端代理
// A(自己的前端) ---> C(别人的后端) 跨域
// A(自己的前端) ---> B(自己的后端) 也存在跨域，但是可以设置 CORS
// B(自己的后端) ---> C(别人的后端) 完全访问
// C(别人的后端) --数据---> B(自己的后端) --数据---> A(自己的前端)
</script>
</body>
</html>

27
历届学生/罗朝/2019-05-07/jsonp.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
</head>
<body>
<script>
function getNodeJsData(res) {
console.log(res)
}
</script>
<script src="http://127.0.0.1:3000/back/jsonp?fun=getNodeJsData"></script>
</body>
</html>

29
历届学生/罗朝/2019-05-07/天气预报/css/clear.css Normal file
View File

@@ -0,0 +1,29 @@
@font-face {
font-family: qj;
src: url("../font/qianqian.ttf")
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
body,ul,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

15
历届学生/罗朝/2019-05-07/天气预报/css/index.css Normal file
View File

@@ -0,0 +1,15 @@
.header {
display: flex;
justify-content: space-between;
padding: .05rem .1rem;
height: .4rem;
align-items: center;
}
.header p{
width: 100%;
text-align: center;
}
.header .icon {
width: .3rem;
height: .3rem;
}

4
历届学生/罗朝/2019-05-07/天气预报/css/public.css Normal file
View File

@@ -0,0 +1,4 @@
body {
background: linear-gradient(180deg, #148beccc, #b4b4f1);
color: #fff;
}

BIN
历届学生/罗朝/2019-05-07/天气预报/font/qianqian.ttf Normal file
View File

Binary file not shown.

53
历届学生/罗朝/2019-05-07/天气预报/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天气预报</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<script src="http://at.alicdn.com/t/font_1152627_d7uz2eiah9c.js"></script>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/index.css">
<style>
</style>
</head>
<body>
<div class="main">
<div class="header">
<p class="title_city">合肥</p>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>
</svg>
</div>
<div class="content">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/wather.js"></script>
<script>
new Weather();
</script>
</body>
</html>

59
历届学生/罗朝/2019-05-07/天气预报/js/rem.js Normal file
View File

@@ -0,0 +1,59 @@
(function (designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem, rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
}
;
if (width > maxWidth) {
width = maxWidth;
}
//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
var rem = width * 100 / designWidth;
//兼容UC开始
rootStyle = "html{font-size:" + rem + 'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if (!document.getElementById('rootsize')) {
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id = 'rootsize';
}
if (rootItem.styleSheet) {
rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
} else {
try {
rootItem.innerHTML = rootStyle
} catch (f) {
rootItem.innerText = rootStyle
}
}
//兼容UC结束
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(375, 750);

41
历届学生/罗朝/2019-05-07/天气预报/js/wather.js Normal file
View File

@@ -0,0 +1,41 @@
(function(window,document) {
function weather () {
this.init()
}
weather.prototype = {
init () {
console.log("init");
this.get("http://127.0.0.1:3000/getWeather",{
cityname: '合肥',
},function(result) {
console.log(result);
})
},
get (url,params,callback) {
$.ajax({
type: 'GET',
url: url,
data: params,
success: function (res) {
callback(res)
},
error: function (err) {
throw new Error(JSON.stringify(err))
}
})
}
}
window.Weather = weather
})(window,document)

25
历届学生/罗朝/2019-05-07/天气预报/service/app.js Normal file
View File

@@ -0,0 +1,25 @@
const express = require('express');
const request = require('request')
const app = express()
var BaseUrl = {
url: 'http://v.juhe.cn/weather/index',
appkey: '62a1ba7a26c06fa3720a8e91c103d5b5'
}
app.all("*",function(req,res,next){
res.header('Access-Control-Allow-Origin', '*');
next();
})
app.get('/getWeather', function(req, res) {
var cityName = req.query.cityname;
var url = `${BaseUrl.url}?key=${BaseUrl.appkey}&cityname=${encodeURI(cityName)}`;
request(url,function(error, response, body) {
res.json(JSON.parse(body))
})
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})

16
历届学生/罗朝/2019-05-07/天气预报/service/package.json Normal file
View File

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