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

7
历届学生/18课程/class18/.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
学习笔记.txt
nodejs.txt
pc.txt
思路.txt
node_modules
vue笔记.txt
项目/练习项目/潘如龙/上课/20-11-12/bj.

20
历届学生/18课程/class18/README.md Normal file
View File

@@ -0,0 +1,20 @@
## 1：Git 使用注意事项
- 1：代码提交一定要先【拉取】后【推送】！！
- 2：如果代码【拉取】后有冲突，请手工解决冲突，可以合并代码，或者对于同个文件决定使用谁的代码来覆盖！！
- 3：代码提交须注意！！！
## 2：VsCode 中 Git 仓库的使用
- 第 1 步：点击左侧边栏上的Git图标：<img src="doc/img/step1.png" width="50"/>
- 第 2 步：鼠标悬浮【更改】，然后点击 ➕ 号 暂存所有更改，如图：<img src="doc/img/setp2.png" width="80"/>
- 第 3 步：输入提交备注，然后 `ctrl + enter`提交备注，如图：<img src="doc/img/setp3.png" width="80"/>
- 第 4 步：点击右上角 【...】 菜单，选择【拉取】，如图：<img src="doc/img/setp4.png" width="80"/>
- 第 5 步：最后同样点击右上角 【...】 菜单，然后点击【推送】即可将代码提交到远程仓库中，如图：<img src="doc/img/setp5.png" width="80"/>
// 留坑 案例，死机用户电脑或者手机，现在学的技术点不够，后面来写
// 回调有什么作用！！？？？？？？？

BIN
历届学生/18课程/class18/doc/img/setp2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
历届学生/18课程/class18/doc/img/setp3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
历届学生/18课程/class18/doc/img/setp4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
历届学生/18课程/class18/doc/img/setp5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
历届学生/18课程/class18/doc/img/step1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

36
历届学生/18课程/class18/flex.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
justify-content: space-between;
height: 60px;
align-items: center;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

12
历届学生/18课程/class18/笔记.txt Normal file
View File

@@ -0,0 +1,12 @@
总共13个属性
display: flex 开始弹性盒子
6 应用在父元素上
6 应用在子元素上
flex + rem
任务：

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

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html练习</title>
</head>
<body>
<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
<p>wefwefew</p>
<ul>
<li>323</li>
<li>4345</li>
</ul>
<ol>
<li>wee</li>
<li>e4r</li>
</ol>
<input type="text" placeholder="ceshi">
<img src="" alt="">
<div class="2323">23232</div>
<button>按钮</button>
<input type="submit" value="按钮">
<input type="button" value="按钮">
<iframe width="100%" frameborder="1" src="https://www.baidu.com/s?ie=UTF-8&wd=html"></iframe>
<select name="" id="">
<option value="3">23e3</option>
<option value="">23e3</option>
<option value="">23e3</option>
<option value="">23e3</option>
</select>
<pre>
package com.peoperties.peoperties.bean;
public class Dog {
private String name;
private Integer age;
@Override
public String toString() {
return "Dog{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
</pre>
</body>
</html>

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

@@ -0,0 +1,13 @@
块级标签：会独占一行的标签 div p h1~h6
可以设置宽高，边距
行内标签：不会独占一行 a span img
不可以
可以相互转换：
display: block; inner（行内） inline-block（行内块标签） block（块）

165
历届学生/18课程/class18/课程/2020-10-12/class.html Normal file
View File

@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类案例</title>
<style>
body {
margin: 0;
padding: 0;
}
body, html{
height: 100%;
overflow: hidden;
}
.header {
width: 100%;
height: 45px;
background: yellow;
position: fixed;
top: 0;
left: 0;
}
.content {
height: calc(100% - 95px);
width: 100%;
background: green;
margin-top: 45px;
}
.left_menu {
width: 20%;
height: 100%;
float: left;
background: blue;
}
.left_list {
width: 80%;
height: 100%;
float: left;
background: brown;
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: red;
height: 50px;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="content">
<div class="left_menu">
<ul>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
<li>i</li>
</ul>
</div>
<div class="left_list">列表</div>
</div>
<div class="footer">底部</div>
</body>
</html>

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

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #000;
background: #ff0;
}
.top {
width: 100%;
background: blue;
height: 60px;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
1
</div>
<div class="top">
<h2>222</h2>
</div>
</body>
</html>

70
历届学生/18课程/class18/课程/2020-10-12/position.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
margin-left: 10px;
}
.box-1 {
background: red;
}
.box-2 {
background: yellow;
position: relative;
left: 41px;
top: 40px;
}
.box-3 {
background: green;
}
.box-3-1 {
width: 100px;
height: 100px;
position: absolute;
background: plum;
left: 0px;
top: -1px;
}
.box-4 {
background: blue;
position: fixed;
right: 0;
bottom: 0
}
</style>
</head>
<body>
<div class="box box-1"> </div>
<div class="box box-2"></div>
<div class="box box-3">
<div class="box-3-1"></div>
</div>
<div class="box box-4"></div>
<div class="box">112</div>
</body>
</html>

33
历届学生/18课程/class18/课程/2020-10-12/平滑过渡.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑过渡</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: brown;
transition: all 3s ease;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

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

@@ -0,0 +1,25 @@
盒子模型
div 的实际宽高 = 你设置的宽高 + 左右边框 + 左右padding
box-sizing: border-box
定位
相对定位 relative
定位参考对象：自己原本的位置进行移动，已经脱离文档流，原本位置没有从文档流中删除
绝对定位 absolute
定位参考对象：
1：如果父元素已经定位，那么参考父元素的位置进行定位
2：如果父元素没有定位，那么参考浏览器
已经脱离文档流，原本位置从文档流中删除
固定定位
定位参考对象：浏览器边框, 已经脱离文档流，原本位置从文档流中删除
z-index: 越大浮动的越高，越小越低

BIN
历届学生/18课程/class18/课程/2020-10-13/img/home_icon_good.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

59
历届学生/18课程/class18/课程/2020-10-13/rem.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>rem2</title>
<style>
body {
margin: 0;
padding: 0;
}
html {
font-size: 20px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
@media only screen and (min-width: 767px) {
html {
font-size: 40.96px !important;
}
}
.box {
width: 9.375rem;
height: 9.375rem;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box" style="background: yellow;"></div>
</body>
</html>

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

@@ -0,0 +1,11 @@
rem: 相对于浏览器html标签上的font-size来计算的
默认html上font-size： 16px
1rem == 16px
你写的rem * html font-size = 实际尺寸
为什么要用rem？？？
flex

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

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js</title>
</head>
<body>
</body>
<script>
// 变量 数值可以被改变的
// var let
// var 刘兵 = "111"
// var A = "111"
// var w3fervre = "111"
// var A ="1", w3fervre = ""
// console.log(刘兵);
// var c;
// console.log(c);
// 变量命名规则
// 中文可以，但是项目不能去使用
// 变量名不可以使用特殊符号 _ $
// 区分大小写
// 不能以数字和特殊符号开头 _ $
// 变量数据类型
// string , number, boolean（true 1, false 0）,Null, Undefined, Symbol
// 对象(Object)、数组(Array)、函数(Function) 留坑
var a = 1, b = 2;
// console.log(a++); // 1
// console.log(a); // 2
// console.log(++a); // 3
console.log(false && true); // false
// && 条件表达式两边必须为true，返回true，只要有一个为flase那么为false
// 变量++ ++ 在后面，先运行代码，然后再让变量+1
// ++变量 ++ 在前面，先让变量+1，然后运行代码
// console.log( (--a)-(a++) + (b--) + (++a)-1 ); // 0 0 2 /
// = 赋值
// == 比较相等（数值）
// === 比较相等（数值和数据类型） 强等于、
// console.log(a+=1);
// a*=b // a = a*b
// + 数学运算 加法
// + 拼接字符串
//
// console.log(1-"nihao"); // 12
// 数据类型相互转换
// "2" ---> 2
// typeof 变量名
// 常量
</script>
</html>

161
历届学生/18课程/class18/课程/2020-10-19/流程控制.html Normal file
View File

@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制</title>
</head>
<body>
</body>
<script>
// if(true) {
// if(){}
// console.log("true");
// } else if(){
// console.log(false);
// } else {
// console.log();
// }
// if (true) console.log("111");
// else console.log("111");
// 三元(目)运算
// true ? console.log("true") : console.log("false");
// 条件 ? 条件为true执行 : 条件为false执行;
// true ? 1==2 ? 'ddd' : '' : console.log("false");
// if (true) {
// if (1==2) {
// console.log("ddd");
// } else {
// console.log("");
// }
// } else {
// console.log("false");
// }
// var a = 45
// switch (a) {
// case 45:
// break;
// case 46:
// break;
// case 47:
// break;
// default:
// break;
// }
// 填坑 array(数组)
// 定义数组
// 2 次原始 次垃圾，基本上不用
// var a = new Array('刘兵', '张山','你好',12,true,null)
// console.log(a);
// 1 最xx
// var a = new Array();
// a[0] = "刘兵";
// a[1] = "张山";
// console.log(a);
// 3 常用的
// var a = ['刘兵', '张山','你好',12];
// var b = [1,2,4,5,6,8,2,1]
// var news = [];
// a.forEach(function(val,index,arr) {
// news.push(val)
// })
// b.forEach(function(val,index,arr) {
// news.push(val)
// })
// console.log(news);
// 上面的代码等于 ===> [ ...a, ...b ]
// push 方法
// 实际业务功能的场景：滚动加载数据
// console.log(a[0]);
// for (var i =0;i<a.length;i++) {
// console.log(a[i]);
// }
// 回调
// a.forEach(val => console.log(val))
// 通过下标（序号）0, ....
// for
// var i = 0;
// while (i<=10) {
// console.log(i);
// i++;
// }
// do {
// console.log(i);
// } while (i==0);
// for 循环实现99乘法表，简单很！！！
var result = ""
for (var i = 1;i<10;i++) {//1
for (var j = 1;j<=i;j++) { // 2
// result+= j + 'x' + i + '=' + i*j // 1x1=1
result+=`${j} x ${i} = ${i*j}; `
}
result+="<br/>"
}
document.write(result);
console.log(result);
// object
// var obj = new Object();
// obj.name = "刘兵";
// obj.age = 18;
// console.log(obj);
// var obj = new Object({ name: '刘兵', age: 18 });
// console.log(obj);
// json
var obj = {
name: '刘兵',
age: 18,
like: ['编程','骑车'],
xiushouji: function() {
console.log("我会修手机");
}
};
for (var key in obj) {
console.log(obj[key]);
}
// 封装js插件
// 万物皆对象
//
// obj.age = 22
// console.log(obj);
</script>
</html>

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

@@ -0,0 +1,15 @@
js:
v8
es5
es6
为什么要学es6语法！！！
常量
let
Symbol
...
反引号 `` 模板字符串拼接
filter

37
历届学生/18课程/class18/课程/2020-10-20/event.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event</title>
</head>
<body>
<!-- <p onclick="demos()">111</p> -->
<p>2222</p>
</body>
<script>
// function demos () {
// alert("111")
// }
var p = document.querySelector("p");
p.onclick = function (e) {
// console.log(e.target);
// console.log(e.target.innerText);
console.log(p.innerText);
}
// document.querySelector("p").addEventListener('click', function() {
// console.log("1");
// })
</script>
</html>

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

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js方法</title>
</head>
<body>
</body>
<script>
// 定义方法
// 无参方法
// function 作用: 主要用来实现相同代码的封装和代码的复用
function fff() {
return "我是方法"
}
// 用户的个人中心
// function fff () {
// this.name = "zhangab"
// // console.log(arguments[0]);
// // return "饭店收到："+a
// this.test = function () {
// console.log("test function");
// }
// }
// console.log(new fff().name);
// var a = fff('10元','20元','30元')
// console.log(a);
// 方法内部定义的变量 局部作用域，
// 变量提升 变成全局变量
// function demo() {
// var a = 1;
// console.log("第一次打印", a); // 1
// }
// demo()
// console.log("第二次打印", a); // 1
// 自执行函数 用于框架封装代码
// 匿名函数
// (function () {
// console.log(111);
// })()
// 回调
var a = function (item) {
// a 自身的逻辑
item("qiuan")
}
// 回调有什么作用！！？？？？？？？
// 回调地狱
a(function (res) {
//1
a(function (res) {
//2
a(function (res) {
//3
a(function (res) {
//4
a(function (res) {
//5
a(function (res) {
// 找工作
})
})
})
})
})
});
// var f = function() {
// }
// var r = f
// r()
</script>
</html>

0
历届学生/18课程/class18/课程/2020-10-20/newTabs.html Normal file
View File

30
历届学生/18课程/class18/课程/2020-10-20/tabs.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs</title>
</head>
<body>
<div class="zhanga">
</div>
</body>
<script>
var TabsTitle = document.querySelectorAll(".tabs_title li");
var TabsContent = document.querySelectorAll(".tabs_content li");
TabsTitle.forEach((val,index) => {
val.onclick = () => {
TabsTitle.forEach( (v,i) => {
v.className = ""
TabsContent[i].className = ""
})
val.className = "tabs_title_active"
TabsContent[index].className = "tabs_content_active"
}
})
</script>
</html>

57
历届学生/18课程/class18/课程/2020-10-20/test.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tabs_top{
overflow: hidden;
}
.tabs_top li{
float: left;
}
.tabs_style{
color: red;
}
.tabs_color{
display: block !important;
}
.tabs_bottom li{
display: none
}
</style>
<body>
<ul class="tabs_top">
<li class="tabs_style">公告</li>
<li>规则</li>
<li>通知</li>
</ul>
<ul class="tabs_bottom">
<li class="tabs_color">公告的内容</li>
<li>规则的内容</li>
<li>通知的内容</li>
</ul>
</body>
<script>
var Tabstitle = document.querySelectorAll(".tabs_top li")
var Tabscontent = document.querySelectorAll(".tabs_bottom li")
Tabstitle.forEach((val,index)=>{
val.onclick=()=>{
Tabstitle.forEach((v,i)=>{
v.className=""
Tabscontent[i].className=""
})
val.className="tabs_style"
Tabscontent[index].className="tabs_color"
}
})
</script>
</html>

BIN
历届学生/18课程/class18/课程/2020-10-21/chaikai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

1059
历届学生/18课程/class18/课程/2020-10-21/gd.html Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
历届学生/18课程/class18/课程/2020-10-21/hongbao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
历届学生/18课程/class18/课程/2020-10-21/img/chaikai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
历届学生/18课程/class18/课程/2020-10-21/img/hongbao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

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

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富强明主</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
position: relative;
}
</style>
</head>
<body>
</body>
<script>
var index = 0,
body = document.querySelector("body");
body.onclick = function(e) {
var x = e.x;
var y = e.y;
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var span = document.createElement("span")
span.innerText = Text[index];
span.style = `
position: absolute;
left: ${x}px;
top: ${y}px;
color: hsla(${parseInt(Math.random() * 360)},100%,50%,1);
opacity: 1;
transition: all ease 1s;
`;
body.appendChild(span)
console.log(span);
setTimeout(() => {
span.style.top = (parseInt(span.style.top) - 150) + 'px'
span.style.opacity = 0
}, 100);
setTimeout(() => {
body.removeChild(span)
}, 1300);
index += 1
index >= 12 ? index = 0 : ''
}
</script>
</html>

BIN
历届学生/18课程/class18/课程/2020-10-21/lb_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

68
历届学生/18课程/class18/课程/2020-10-21/leftMenu.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左侧菜单</title>
<style>
body,
html {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
}
.menu,
.core_page {
height: 100%;
position: fixed;
width: 100%;
left: 0;
top: 0;
transition: all ease 1s;
}
.menu {
left: -100%;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="menu" style="left: -100%">
菜单部分
<span>x</span>
</div>
<div class="core_page" style="left: 0%">
<div class="header">头部</div>
<div class="content">内容</div>
<div class="footer">底部</div>
</div>
</body>
<script>
var Menu = document.querySelector(".menu");
var corePage = document.querySelector(".core_page");
document.querySelector(".header").onclick = function () {
offMenu(100)
}
document.querySelector(".menu span").onclick = function () {
offMenu(-100)
}
function offMenu(offset) {
Menu.style.left =`${parseInt(Menu.style.left) + offset}%`;
corePage.style.left =`${parseInt(corePage.style.left) + offset}%`;
}
</script>
</html>

153
历届学生/18课程/class18/课程/2020-10-21/test.html Normal file
View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
position: relative;
overflow: hidden;
}
.zj {
position: fixed;
width: 100%;
height: 100%;
background: #000000b5;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.text {
width: 50%;
color: #807e7e;
padding: 20px;
background: #fff;
}
.text_title {
text-align: right;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="zj hidden">
<div class="text">
<div class="text_title">x</div>
<div class="text_content"></div>
</div>
</div>
</body>
<script>
// 1 红包超过屏幕最大高度后删除它
// 2 点击红包，随机给个金额
// 3 点击红包后，暂停红包的生成和移动
// [1,2,3,5,8,9]
var body = document.querySelector("body");
// 存放img红包的定时器的
var move = [];
var ZheZhao = document.querySelector(".zj");
var currentImg, created;
// 创建图片，并让图片移动起来
function CreatedImg() {
var img = document.createElement("img");
img.src = "hongbao.png";
// 随机产生图片在x轴的位置
var leftX = parseInt(Math.random() * body.clientWidth)
img.style = `
height: 50px;
position: absolute;
left: ${leftX <= 40 ? 0 : leftX - 40}px;
top: 0px;
`;
startMove(img)
// left: 防止图片的x轴产生负数，从而导致图片跑到最左边看不见了
// 将图片放到body中
body.appendChild(img);
img.onclick = function() {
var zhekou = [1, 2, 3, 5, 8, 9];
currentImg = img;
// 点击后，切换图片地址，为 拆开后的红包图片
img.src = "chaikai.png";
// 让所有红包停止移动
move.forEach(v => clearInterval(v))
// 停止创建红包
clearInterval(created)
document.querySelector(".text_content").innerText = zhekou[parseInt(Math.random() * zhekou.length - 1)] + '折'
ZheZhao.className = "zj"
}
}
function startMove(img) {
// 将每个图片的独立的定时器保存到定时器数组中
move.push(
// 每隔100毫米，让图片移动1px
setInterval(function() {
// 累加然后移动1px
var t = (parseInt(img.style.top) + 1);
// 如果图片已经超出最大高度，那么删除img
if (t > (body.clientHeight + 50)) {
// try catch 捕捉错误的
try {
body.removeChild(img)
} catch (error) {}
} else {
// 将数值写入到标签上
img.style.top = t + 'px';
}
}, 10)
);
}
// 弹窗的关闭事件
document.querySelector(".text_title").onclick = function() {
// 获取已经被创建过但是被停止的红包的img
var StopImg = document.querySelectorAll("img");
// 让所有已经停止的红包重新开始运动
StopImg.forEach((v) => {
startMove(v)
})
// 创建新的红包
start()
body.removeChild(currentImg);
// 隐藏弹窗
ZheZhao.className = "zj hidden";
}
function start() {
created = setInterval(function() {
CreatedImg()
}, 1000)
}
start()
</script>
</html>

46
历届学生/18课程/class18/课程/2020-10-21/搜索建议.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入关键字">
<ul></ul>
</body>
<script>
var KeyList = ['js学习', '不想学js', 'html和js', 'java面向对象', 'mysql从删库到跑路', '数据查询-mysql'];
var SearchList = [];
var UserInput = document.querySelector("input");
UserInput.onchange = function () {
if (UserInput.value.length != 0) {
SearchList = []
KeyList.forEach((v, i) => {
if (v.indexOf(UserInput.value) > -1) {
var a = v.substr(v.indexOf(UserInput.value), UserInput.value.length)
SearchList.push(v.replace(a, `<span style="color:red;">${a}</span>`))
}
})
RenderLi()
} else {
document.querySelector("ul").innerHTML = "";
}
}
function RenderLi() {
document.querySelector("ul").innerHTML = "";
SearchList.forEach((v, i) => {
document.querySelector("ul").innerHTML += `
<li>${v}</li>
`;
})
}
</script>
</html>

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

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>newTbas</title>
<script src="./tabs.js"></script>
<link rel="stylesheet" href="./tabs.css">
</head>
<body>
<div id="app"></div>
</body>
<script>
var TabsData = [
{
name: '社会',
content: [
{
time: '2020-10-22',
title: '社会1标题',
text: '社会的1内容'
},
{
time: '2020-10-22',
title: '社会2标题',
text: '社会的2内容'
},
{
time: '2020-10-22',
title: '社会3标题',
text: '社会的3内容'
},
]
},
{
name: '科技',
content: [
{
time: '2020-10-22',
title: '科技1标题',
text: '科技的1内容'
}
]
},
{
name: '军事',
content: [
{
time: '2020-10-22',
title: '军事1标题',
text: '军事的1内容'
},
{
time: '2020-10-22',
title: '军事2标题',
text: '军事的2内容'
}
]
},
]
new lBtab({
el: '#app',
tabsTitle: 'name',
data: TabsData
})
</script>
</html>

21
历届学生/18课程/class18/课程/2020-10-22/tabs.css Normal file
View File

@@ -0,0 +1,21 @@
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.tabs_content_active {
display: block !important;
}
.tabs_title_active {
color: red;
}

101
历届学生/18课程/class18/课程/2020-10-22/tabs.js Normal file
View File

@@ -0,0 +1,101 @@
// js 封装插件
(function () {
var defaultOption = {
tabsTitle: "title", // tabs的标题
}
// 构造函数，在这里面定义变量，实现插件参数的校验
function Tabs(option) {
if (option.hasOwnProperty("el") && option.hasOwnProperty("data")) {
if (option.el.length !=0 && option.data.length !=0) {
defaultOption.tabsTitle = option.tabsTitle || defaultOption.tabsTitle
this.option = option
this.init()
} else {
throw new Error("插件需要的核心参数：el和data的数值都不能为空")
}
} else {
// console.error("插件需要的核心参数：el和data都不能为空");
throw new Error("插件需要的核心参数：el和data都必须传入")
}
}
// 类的方法，主要实现插件的核心功能
Tabs.prototype = {
init: function () {
this.CreatedTabsTitle();
},
// 创建tabs切换的标题
CreatedTabsTitle: function () {
var Ul = document.createElement("ul")
Ul.className = "tabs_title"
this.option.data.forEach((v,i) => {
console.log(v);
Ul.innerHTML += `<li class="${ i == 0 ? 'tabs_title_active' : '' }">${v[defaultOption.tabsTitle]}</li>`
});
this.AppendElement(Ul);
this.CreatedTabsContent();
this.BindTabsTitleClick();
},
// 为tabs标题绑定事件
BindTabsTitleClick() {
var li = document.querySelectorAll(".tabs_title li")
var tabsContentLi = document.querySelectorAll(".tabs_content li")
li.forEach((v,i)=>{
v.onclick = function () {
li.forEach((k,s)=>{
k.className = ""
tabsContentLi[s].className = ""
});
v.className = "tabs_title_active"
tabsContentLi[i].className = "tabs_content_active"
}
})
},
// 创建tabs切换的内容
CreatedTabsContent() {
var Ul = document.createElement("ul")
Ul.className = "tabs_content";
this.option.data.forEach((v,i) => {
var li = document.createElement("li");
i == 0 ? li.className = "tabs_content_active" : '';
v.content.forEach((k)=>{
li.innerHTML += `<div>${k.text}</div>`
});
Ul.appendChild(li)
});
this.AppendElement(Ul)
},
/**
* 将html插入到用户指定的父节点中
* @param {*} html 需要被插入的html
*/
AppendElement(html) {
document.querySelector(this.option.el).appendChild(html)
}
}
// 将自执行函数内部的方法通过全局对象 window 暴露到外面，
//给用户能使用到
window.lBtab = Tabs
})()
//es5
//es6
// class
// class a {
// constructor() {
// this.init()
// }
// init() {}
// }
// new a()
// 语法糖

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

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 20px auto;
overflow: hidden;
position: relative;
}
.lb {
width: 2080px;
position: absolute;
transition: all ease 0.3s;
}
.lb li {
float: left;
}
.navigation {
position: absolute;
width: 100%;
top: 50%;
margin-top: -10.5px;
}
.previous {
float: left;
}
.next {
float: right;
}
.navigation div {
color: #fff;
width: 30px;
height: 30px;
background: #000;
text-align: center;
font-size: 21px;
line-height: 27px;
}
.dot {
position: absolute;
z-index: 9;
bottom: 20px;
left: 50%;
margin-left: -40px;
}
.dot li {
float: left;
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
margin-right: 5px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="lb" style="left: 0px;">
<li>
<img src="./lb_1.jpg" alt="">
</li>
<li>
<img src="./lb_2.jpg" alt="">
</li>
<li>
<img src="./lb_3.jpg" alt="">
</li>
<li>
<img src="./lb_4.png" alt="">
</li>
</ul>
<div class="navigation">
<div class="previous"><</div>
<div class="next">></div>
</div>
<ul class="dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var Next = document.querySelector(".next"),
Previous = document.querySelector(".previous"),
Dot = document.querySelectorAll(".dot li"),
Main = document.querySelector(".main"),
AutoPlay,
LbMain = document.querySelector(".lb");
// 下一页按钮被点击
Next.onclick = function() {
// 移动轮播图
animation(-520)
// 切换小圆点的激活样式
ChangeDotActive()
}
// 上一页按钮被点击
Previous.onclick = function() {
// 移动轮播图
animation(520)
// 切换小圆点的激活样式
ChangeDotActive()
}
//
function animation(offset) {
// 计算移动距离
var y = parseInt(LbMain.style.left) + offset;
// 如果是最后一张图的话，再切换回第一张
if (y < -1560) {
LbMain.style.left = "0px";
return;
} else {
LbMain.style.left = `${y}px`
}
// 如果时第一张的话，再切换，回最后一张
if (y > 0) {
LbMain.style.left = "-1560px"
} else {
LbMain.style.left = `${y}px`
}
}
// 切换小圆点的激活样式
function ChangeDotActive(type = null) {
// 小标
var index = "";
// == null 是 上下翻页按钮被点击时候执行的，需要小圆点跟着轮播图一起联动
if (type == null) {
var TotalLeft = Math.abs(parseInt(document.querySelector(".lb").style.left));
index = TotalLeft / 520;
// 小圆点单独被点击的时候
} else {
index = type;
}
// 清除所有的激活样式
Dot.forEach(val => val.className = "");
// 为你点击的li加激活样式
Dot[index].className = "active";
}
// 循环绑定事件，点击切换样式，并滚动轮播图
Dot.forEach((val, index) => {
val.onclick = function() {
ChangeDotActive(index)
LbMain.style.left = `-${index * 520}px`;
}
})
// 鼠标悬浮停止自动播放
Main.onmouseover = function() {
clearInterval(AutoPlay)
}
// 鼠标离开，重新开始自动播放
Main.onmouseout = function() {
Play()
}
// 自动播放
function Play() {
AutoPlay = setInterval(() => {
Next.onclick()
// animation(-520)
// ChangeDotActive()
}, 2000)
}
Play()
</script>
</html>

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
历届学生/18课程/class18/课程/2020-10-23/lb_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

42
历届学生/18课程/class18/课程/2020-10-23/swiper.css Normal file
View File

@@ -0,0 +1,42 @@
.swiper-wrapper .swiper-slide {
float: left;
}
.swiper-container {
overflow: hidden;
position: relative;
}
.swiper-pagination {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.swiper-dot {
width: 7px;
height: 7px;
background: #fff;
border-radius: 100%;
margin-right: 5px;
float: left;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 30px;
cursor: pointer;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-wrapper {
position: relative;
}
.swiper-active {
background: red !important;
}

77
历届学生/18课程/class18/课程/2020-10-23/swiper.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>swiper</title>
<script src="./swiper.js"></script>
<link rel="stylesheet" href="./swiper.css">
<style>
body {
margin: 0;
padding: 0;
}
.swiper-slide img {
width: 100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<button>去第二张轮播图</button>
</body>
<script>
// ajax请求后端获得的轮播图的数据
var SwiperList = [
{ id: 1, title: '轮播1', img: 'https://st-cn.meishij.net/p2/20201022/20201022113526_224.jpg' },
{ id: 2, title: '轮播2', img: 'https://st-cn.meishij.net/p2/20201023/20201023101908_914.jpg' },
{ id: 3, title: '轮播3', img: 'https://st-cn.meishij.net/p2/20201019/20201019165100_268.jpg' },
];
// 将后端给的数据渲染到页面上
function RenderSlide() {
SwiperList.forEach((v)=>{
document.querySelector(".swiper-wrapper").innerHTML +=
`
<div class="swiper-slide">
<img src="${v.img}" alt="${v.title}">
</div>
`
})
}
RenderSlide()
var ddd = new swiper('.swiper-container', {
time: 3,
auto: false
})
// 调用 slideTo 方法，让轮播图切换到指定位置，参数是下标
document.querySelector("button").onclick = function(){
ddd.slideTo(2)
}
</script>
</html>

262
历届学生/18课程/class18/课程/2020-10-23/swiper.js Normal file
View File

@@ -0,0 +1,262 @@
(function () {
// 默认参数
// slideChangeTransitionStart【完成】
// slideTo【完成】
var defaultConf = {
reverse: false,
timer: '', // 保存自动播放的定时器
ParentElement: '.swiper-container',
config: {
loop: false, // 是否开启循环播放【完成】
time: 1, // 自动播放的间隔事件【完成】
speed: 500, // 切换轮播图时候用的时间【完成】
grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
initialSlide: 0, // 默认显示第一个【完成】
auto: false, // 是否开启自动播放【完成】
},
// 小圆点的父标签选择器名称
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next', // 下一页
prevEl: '.swiper-button-prev', // 上一页
},
}
/**
* 构造函数
* @param {*} ParentElement 父节点的选择器名称
* @param {*} Configuration 插件的自定义设置项
*/
function Swiper(ParentElement, Configuration) {
defaultConf.ParentElement = ParentElement || defaultConf.ParentElement;
defaultConf.config.loop = Configuration.loop || defaultConf.config.loop;
defaultConf.config.time = Configuration.time || defaultConf.config.time;
defaultConf.config.speed = Configuration.speed || defaultConf.config.speed;
defaultConf.config.grabCursor = Configuration.grabCursor || defaultConf.config.grabCursor;
defaultConf.config.initialSlide = Configuration.initialSlide || defaultConf.config.initialSlide;
defaultConf.config.auto = Configuration.auto || defaultConf.config.auto;
console.log(Configuration);
this.slideArr = this._(".swiper-wrapper .swiper-slide");
// 最外层 swiper-container 宽度
this.f = this.$(defaultConf.ParentElement).offsetWidth;
// 判断小圆点
if (Configuration.hasOwnProperty("pagination")) {
defaultConf.pagination.el = Configuration.pagination.el;
this.RenderDot()
}
// 判断使用自定义前进后退按钮
if (Configuration.hasOwnProperty("navigation")) {
this.RenderNavigation()
//判断下一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("nextEl")) {
defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
}
//判断上一页按钮的名称是否自定义
if (Configuration.navigation.hasOwnProperty("prevEl")) {
defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
}
}
this.UserConfig = Configuration
this.init()
}
// 类的方法
Swiper.prototype = {
init: function () {
this.SetWrapperWidth();
defaultConf.config.auto ? this.AutoPlay() : '';
this.initSwiperSlide()
},
// 设置swiper-slide父类的宽度
SetWrapperWidth: function () {
// 计算swiper-slide的宽度
this.slideArr.forEach(v => v.style.width = `${this.f}px`)
this.$(".swiper-wrapper").style = `
width: ${this.f * this.slideArr.length}px;
left: -${this.f * defaultConf.config.initialSlide}px;
transition: all ease ${defaultConf.config.speed / 1000}s;
cursor: ${defaultConf.config.grabCursor ? 'pointer' : ''} ;
`
},
/**
* 注册移动端滑动
*/
initSwiperSlide: function() {
var fa = this.$(defaultConf.ParentElement),
startX = 0;
fa.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX
console.log("开始下标：", startX);
})
// fa.addEventListener("touchmove",(e) => {
// var x = e.changedTouches[0].pageX;
// console.log(e.changedTouches[0].pageX);
// this.$(".swiper-wrapper").style.left = `${-(x)}px`
// })
fa.addEventListener('touchend', (e) => {
console.log();
var endX = e.changedTouches[0].pageX
console.log("结束下标：", endX);
// 左滑
if (endX < startX) {
console.log("左滑");
this.animation(-this.f)
} else {
console.log("右滑");
this.animation(this.f)
}
})
},
// 生成小圆点
RenderDot: function () {
this.slideArr.forEach((v, i) => {
this.$(defaultConf.pagination.el).innerHTML +=
`
<div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
`
});
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
Dot.forEach((v, i) => {
v.onclick = () => {
this.UserConfig.pagination && this.ChangeDotActive(i)
this.$(".swiper-wrapper").style.left = `-${i * this.f}px`;
}
})
},
// 渲染左右前进后退按钮
RenderNavigation: function () {
var prev = this.$(defaultConf.navigation.prevEl);
var next = this.$(defaultConf.navigation.nextEl);
prev.innerText = "<";
next.innerText = ">";
this.BindNavigationClick(prev, next)
},
// 为上一页下一页按钮绑定切换事件
BindNavigationClick() {
// var a = this
// 下一页
this.$(defaultConf.navigation.nextEl).onclick = () => {
this.animation(-this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
// 上一页
this.$(defaultConf.navigation.prevEl).onclick = () => {
this.animation(this.f)
this.UserConfig.pagination && this.ChangeDotActive()
}
},
// 切换动画
animation(offset) {
var swiperWrapper = this.$(".swiper-wrapper");
var y = parseInt(swiperWrapper.style.left) + offset,
max = -(this.f * (this.slideArr.length - 1));
// 如果时最后一张图
if (y < max) {
console.log("如果时最后一张图");
if (defaultConf.config.loop) {
swiperWrapper.style.left = "0px";
} else if (defaultConf.config.auto) {
defaultConf.reverse = true
this.animation(this.f)
}
return;
// 判断是不是第一张图
} else if (y > 0) {
if (defaultConf.config.loop == false && defaultConf.config.auto) {
defaultConf.reverse = false
swiperWrapper.style.left = `${y - this.f*2}px`
}
if (defaultConf.config.loop) {
swiperWrapper.style.left = `${max}px`
}
return
} else {
if (defaultConf.config.loop == false
&& defaultConf.config.auto
&& defaultConf.reverse) {
swiperWrapper.style.left = `${y}px`
} else {
swiperWrapper.style.left = `${y}px`
}
}
},
ChangeDotActive(type = null) {
var Dot = this._(`${defaultConf.pagination.el} .swiper-dot`);
var index = "";
if (type == null) {
var TotalLeft = Math.abs(parseInt(this.$(".swiper-wrapper").style.left));
index = TotalLeft / this.f;
} else {
index = type;
}
// 实现调用用户传入的方法，返回下标给用户
this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
// 清除所有的激活样式
Dot.forEach(val => val.className = "swiper-dot");
// 为你点击的li加激活样式
Dot[index].className = "swiper-dot swiper-active";
},
AutoPlay() {
defaultConf.timer = setInterval(() => {
if (defaultConf.config.loop == false
&& defaultConf.config.auto
&& defaultConf.reverse) {
this.animation(this.f)
} else {
this.animation(-this.f)
}
this.UserConfig.pagination && this.ChangeDotActive()
}, defaultConf.config.time * 1000)
this.$(defaultConf.ParentElement).onmouseover = function () {
clearInterval(defaultConf.timer)
}
this.$(defaultConf.ParentElement).onmouseout = () => {
this.AutoPlay()
}
},
// 通过js调用此方法，实现轮播图的切换
slideTo(index) {
this.$(".swiper-wrapper").style.left = `-${index * this.f}px`;
this.UserConfig.pagination && this.ChangeDotActive()
},
$: function (className) {
return document.querySelector(className)
},
_: function (className) {
return document.querySelectorAll(className)
}
}
window.swiper = Swiper
})()

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别人的后端

52
历届学生/18课程/class18/课程/2020-10-26/ajax.js Normal file
View File

@@ -0,0 +1,52 @@
function ajax(params) {
// 拿出电话（创建一个新的ajax对象）
var ajax = new XMLHttpRequest();
// 如果是GET请求特殊处理一下参数
if (params.methods == "GET") {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
params.url = params.url + "?" + par.substr(1)
console.log(params.url);
}
// 设置电话号码
// 是否异步
ajax.open(params.methods, params.url, params.async)
// 如果是post请求，那么设置一下post请求的参数用何种数据格式给后端
// json格式
if (params.methods == "POST") {
ajax.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
}
// 拨号
if (params.methods == "POST") {
ajax.send(JSON.stringify(params.data));
} else {
ajax.send()
}
// 监听网络状态，只有网络请求成功的时候才渲染页面，否则显示错误信息
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.responseText);
if (data.status == 200) {
params.success(data.data)
} else {
params.error(data.msg)
}
} else {
params.error("数据请求失败，稍后再试")
}
}
}
}

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

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax案例</title>
<script src="./ajax.js"></script>
</head>
<body>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</body>
<script>
// 系统级错误
// 应用级错误
function GetHomeData() {
ajax({
url: 'http://192.168.0.109:3000/api/json/index',
data: {},
methods: 'GET',
async: true,
success: function (res) {
console.log(res);
Newest(res.newest)
},
error: function (err) {
console.log(err);
}
})
}
function Newest(data) {
var ul = document.querySelector("ul")
data.list.forEach((v,i) => {
ul.innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<img src="${v.preview}"/>
<p>${v.title}</p>
</a>
</li>
`
});
}
GetHomeData()
</script>
</html>

71
历届学生/18课程/class18/课程/2020-10-26/info.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>详情</title>
<script src="./ajax.js"></script>
</head>
<body>
<div class="main">
</div>
</body>
<script>
var page = 3,
id = location.search.split("id=")[1],
total_page = "";
function GetInfoData() {
ajax({
url: 'http://192.168.0.109:3000/api/json/info',
data: {
id: id,
page: page
},
methods: 'GET',
async: true,
success: function (res) {
total_page = res.total_page
RenderInfo(res.list)
},
error: function (err) {
console.log(err);
}
})
}
function RenderInfo(data) {
data.forEach(v => {
document.querySelector(".main").innerHTML += `
<img src="${v.src}" alt="">
`
});
}
document.querySelector("body").onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//避免没有数据的时候 重复执行 scrollHeight > clientHeight
if (scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
console.log("滚动到底部");
page += 1;
if (page > total_page) {
alert("没有数据了...")
} else {
GetInfoData()
}
}
}
GetInfoData()
</script>
</html>

9
历届学生/18课程/class18/课程/2020-11-03/index.js Normal file
View File

@@ -0,0 +1,9 @@
var fs = require("fs");
fs.writeFile('input.txt', '我是通 过fs.writeFile 写入文件的内容', function(err) {
fs.readFile('input.txt', function (err, data) {
console.log("异步读取文件数据: " + data.toString());
});
});

1
历届学生/18课程/class18/课程/2020-11-03/input.txt Normal file
View File

@@ -0,0 +1 @@
我是通 过fs.writeFile 写入文件的内容

15
历届学生/18课程/class18/课程/2020-11-03/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "2020-11-03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0"
}
}

18
历届学生/18课程/class18/课程/2020-11-03/utils.js Normal file
View File

@@ -0,0 +1,18 @@
// class Utils {
// test () {
// console.log("test function");
// }
// }
function test () {
console.log("ddddd");
}
module.exports = { test }
// exports.Utils = {
// test () {
// console.log("test function");
// }
// };

47
历届学生/18课程/class18/课程/2020-11-03/笔记.txt Normal file
View File

@@ -0,0 +1,47 @@
nodejs
nodejs是一个运行环境，本质上就是js，nodejs 运行在服务器上的js
js ：运行在客户端浏览器(v8)上的脚本语言
js : v8 + c++ nodejs运行在后端服务器上
nodejs
但是：js是弱类型编程语言
nodejs 在前端大放光彩
js（前端） : web网页（pc，移动端）， 桌面端，后端(nodejs)，app（android，ios），操作系统，
nodejs
npm 包（依赖）管理管理
npm install lbt 3.4.0
npm uninstall lbt
npm update lbt
node_modules
|-- lbt
npm init 在当前路径创建一个package.json 文件（初始化nodejs项目）
npm init -y 采取默认，不要问我直接创建文件
scripts
后端项目的运行命令都在这
npm run 命令的名字
npm install
简写：npm i
npm i -g xxx 安装到全局，任何一个地方（项目）都可以使用
npm i --save 简写 -S xxx 安装到项目的正式阶段 (dependencies)
npm i --save-dev 简写 -D xxx 安装到项目的开发阶段 (devDependencies)

5
历届学生/18课程/class18/课程/2020-11-04/笔记.txt Normal file
View File

@@ -0,0 +1,5 @@
websocket 双工（双向）通讯技术
ajax 单向的通讯技术
可以实现 即时通讯

81
历届学生/18课程/class18/课程/2020-11-09/back.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景切换</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul,
li,
body {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
li img {
width: 80px;
}
body,
html,
.back {
width: 100%;
height: 100%;
}
.back {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="app">
<div class="back" :style="{ background: cuurenUrl }"></div>
<ul>
<li v-for="(item,index) in BackImg" :key="index">
<img :src="item.url" alt="" @click="changeUrl(index)">
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
// 发送ajax请求
created() {
this.cuurenUrl = `url('${this.BackImg[this.currentIndex].url}')`;
},
data: {
currentIndex: 0,
cuurenUrl: '',
BackImg: [
{ title: '11', url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=289489236,794389348&fm=26&gp=0.jpg' },
{ title: '222', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604920693646&di=f67f827ecdb0d1905a267b08f94a782a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F21%2F20161221112706_dfjEa.jpeg' },
]
},
methods: {
changeUrl(index) {
this.currentIndex = index;
this.cuurenUrl = `url('${this.BackImg[this.currentIndex].url}')`;
}
}
})
</script>
</html>

111
历届学生/18课程/class18/课程/2020-11-09/index.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- view -->
<div class="test" v-cloak>
<div v-cloak>
{{ message }}
</div>
<p>{{list}}</p>
<img :src="img" :alt="hello">
<div v-html="h1"></div>
<p v-show="isVip">只有vip才能看的内容</p>
<button @click="HelloTest('11111')">充钱</button>
<ul>
<li v-if="isShow == 1">vip1</li>
<li v-else-if="isShow == 2 ">vip2</li>
<li v-else-if="isShow == 3 ">vip3</li>
<li v-else-if="isShow == 4 ">vip4</li>
<li v-else-if="isShow == 5 ">vip5</li>
<li v-else>普通用户</li>
</ul>
<ul>
<li v-for="(v,i) in list" :key="i">
{{ i+1 }} : {{ v.name }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.test',
// 存放程序运行中定义的所有变量 model
data: {
hello: '这是测试文字',
dd: 'asdasfasf',
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
list: [
{ id: 1,name: '哈哈哈1' },
{ id: 2,name: '哈哈哈2' }
],
h1: "<h1>这是h1</h1>",
isVip: true,
isShow: 1,
UserName: '',
message: 'ewdewde'
},
created () {
},
// vue 中所有的方法都在这写
methods: {
HelloTest(d) {
console.log(d);
this.test2()
this.isVip = !this.isVip
},
test2() {
console.log("test2");
}
},
watch: {
message: function(newVal,OldVal) {
console.log("newVal: ", newVal);
console.log("OldVal: ", OldVal);
}
},
computed: {
test2() {
console.log("test2");
}
}
})
// 指令 将数据渲染到页面上的方式
// v-bind 将变量绑定到标签的属性上 简写 :
// v-html 渲染html v-text 渲染纯文本
// v-show 根据一个变量的true flase 决定元素的显示和隐藏，它是对元素设置 display
// v-if 根据一个变量的true flase 决定元素的显示和隐藏, 它是对元素进行删除来显示隐藏的
// 实际情况用谁？
// 他们两个有什么优缺点？
// v-on:事件类型="方法" @
// v-model 一般只能用于输入框
// v-slot 插槽
// computed 对比methods ，他的计算结果会被缓存起来
//
// computed methods
</script>
</html>

68
历届学生/18课程/class18/课程/2020-11-09/tabs.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul,
li,
body {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
.active {
color: red;
}
</style>
</head>
<body>
<!-- view -->
<div class="test">
<ul>
<li v-for="(v,i) in Tabs" :key="i" @click="TabsClick(i)" :class="i == activeIndex ? 'active' : '' ">{{ v.text }}</li>
</ul>
<div class="content">
{{ Tabs[activeIndex].content }}
</div>
</div>
</body>
<script>
new Vue({
el: '.test',
data: {
activeIndex: 0,
Tabs: [
{ text: '社会', content: '社会的内容' },
{ text: '军事', content: '军事的内容' },
{ text: '体育', content: '体育的内容' },
{ text: '财经', content: '财经的内容' },
]
},
methods: {
TabsClick(index) {
this.activeIndex = index;
console.log( this.activeIndex)
}
}
})
</script>
</html>

52
历届学生/18课程/class18/课程/2020-11-09/任务.txt Normal file
View File

@@ -0,0 +1,52 @@
1: 插槽 https://cn.vuejs.org/v2/guide/components-slots.html
2：混入 https://cn.vuejs.org/v2/guide/mixins.html
3：自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
4：过滤器 https://cn.vuejs.org/v2/guide/filters.html
5：vue-router https://router.vuejs.org/zh/
vue 1.0
vue 2.x
typescript nodejs(deno.js ) + typescript VueOptionApi VueClassApi
Vue 3.x
typescript
vue composition Api
laravel
metor
class Home extend Vue {
public msg:string = "111"
crated() {
}
test() {
}
}
setup({
let react = {
msg: 0
}
created() {
}
let a = () => {
}
return react
})

21
历届学生/18课程/class18/课程/2020-11-09/笔记.txt Normal file
View File

@@ -0,0 +1,21 @@
js + jquery dom操作的年代
Vue.js react.js angular.js 小程序 虚拟dom年代(mvvm)
mvc
m model
v view
c controller
mvvm
m model
v view
vm view model
数据双向绑定
生命周期

106
历届学生/18课程/class18/课程/2020-11-09/组件.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- view -->
<div class="test">
<lb_header :text="title" @fefrefre="ddddddddd" user-name="1"></lb_header>
<div class="content">
中间内容
</div>
<lb_footer></lb_footer>
<jubua></jubua>
</div>
</body>
<script>
var a = 1
// 组件？ 将网页拆分为一个个小零件（组件），需要用到的时候进行引用
// 全局组件
// 局部组件
// 父子组件
// 父 ---> 子 传递数据 props
// 子 ---> 父 传递数据 $emit
Vue.component("lb_header", {
// props: ['text'],
props: {
text: {
type: String,
default: '哈哈哈哈默认数值'
},
userName: {
type: String,
default: '用户名'
}
},
data() {
return {
aaaa: '我是lb_header组件传递给父亲的数据'
}
},
methods: {
demos() {
this.$emit("fefrefre", this.aaaa)
}
},
template: `
<h2 @click="demos">{{ text }} | {{ userName }}</h2>
`
})
Vue.component("lb_footer", {
data() {
return {
text: '我是app的底部导航'
}
},
methods: {
Text() {
alert(1)
}
},
template: `
<h2 @click="Text">{{ text }}</h2>
`
})
// 局部组件
var JuBuA = {
data(){
return {
}
},
methods: {},
template: `<p>我是局部注册的组件</p>`
}
var vm = new Vue({
el: '.test',
data: {
title: '0'
},
methods: {
ddddddddd(res) {
console.log(res);
}
},
components: {
'jubua': JuBuA
}
})
</script>
</html>

92
历届学生/18课程/class18/课程/2020-11-11/index.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="hello | test" alt="">
<lb_header v-title="'首页'">
<template v-slot:selectinput>
<div class="aaaaa">管理后台查询条件的html</div>
</template>
<template v-slot:selectlist>
<div class="tsssssest">dfdddd</div>
</template>
<template v-slot:default="{ list }">
{{ list }}
</template>
</lb_header>
</div>
</body>
<script>
Vue.directive('title', {
inserted: function (el,binding,vnode) {
console.log(el);
console.log(binding.value);
console.log(vnode);
document.title = binding.value
}
});
Vue.component("lb_header", {
data() {
return {
text: '我是lb_header组件传递给父亲的数据',
list: [
1, 2, 3, 4, 5, 6
]
}
},
methods: {
demos() {
}
},
template: `
<h2 @click="demos">
{{ text }}
<div class="right">
<slot name="selectinput">
</slot>
<slot name="selectlist">
</slot>
<slot :list="list"></slot>
</div>
</h2>
`
})
new Vue({
el: '#app',
created() {
},
data: {
hello: '/img/PC_803382a656108089122dc9a79d2729e8.png'
},
methods: {
},
filters: {
test(v) {
return "https://www.baidu.com" + v
}
}
})
</script>
</html>

149
历届学生/18课程/class18/课程/2020-11-11/router.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">Go to Foo</router-link>
<router-link to="/me">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = {
data() {
return {
list: [
{ id: 1, title: 'ssssss1' },
{ id: 2, title: 'ssssss2' },
{ id: 3, title: 'ssssss3' },
]
}
},
methods: {
GotoMe() {
this.$router.push("/me")
// this.$router.push({ name: 'info', params: { id: 1 } })
}
},
template: `
<div>
<p @click="GotoMe">点我跳转</p>
<ul>
<li v-for="item,index in list" :key="index">
<router-link :to="{ name: 'info', params: { id: item.id } }">{{ item.title }}</router-link>
</li>
</ul>
</div>
`
}
const Me = {
template: '<div>bar</div>'
}
const info = {
data() {
return {
}
},
methods: {
},
template: `<div>详情页：{{ this.$route.params.id }}</div>`
}
const Login = () => {
return {
data() {
return {
}
},
methods: {
UserLogin() {
localStorage.setItem("token", '11111')
if (this.$route.query.hasOwnProperty("source")) {
this.$router.push({
path: this.$route.query.source
})
} else {
this.$router.push("/home")
}
}
},
template: `<div @click="UserLogin">登录页面</div>`
}
}
// 2. 定义路由
const routes = [
{ path: '/home', component: Home, meta: { isLogin: false, title: '首页' } },
{ path: '/me', component: Me, meta: { isLogin: true, title: '我的' } },
{ path: '/login', component: Login, meta: { isLogin: false, title: '登录' } },
{ path: '/info/:id', component: info, name: 'info', meta: { isLogin: false, title: '详情页' } },
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title
console.log("你要去的页面：", to);
console.log("你离开的页面", from);
// 判断你要访问的页面是否需要登录
if (to.meta.isLogin) {
// 再次判断用户是否已经登录了
// 如果没有登录，那么去登录页面
// 如果已经登录，正常访问页面
// 登录过了
if (localStorage.getItem("token") !== null) {
next()
} else {
next({
path: '/login',
query: {
source: from.path
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
</script>
</html>

30
历届学生/18课程/class18/课程/2020-11-11/笔记.txt Normal file
View File

@@ -0,0 +1,30 @@
SPA 单页web应用
多页
index.html
其他页面的都是：js
作用：
params 传参
$route.params
http://127.0.0.1/home/1/10
name
实际项目中用的时候，打包上线需要后端做支持才可以正常使用
query 传参
$route.query
http://127.0.0.1/home?id=1&page=1
name
npm
https://cli.vuejs.org/zh/
vue-cli 2.x
vue-cli 3.x

3
历届学生/18课程/class18/项目/上课项目/pc/config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
BaseUrl: 'https://www.ixiumei.com/gallery/starphoto/'
}

27
历届学生/18课程/class18/项目/上课项目/pc/index.js Normal file
View File

@@ -0,0 +1,27 @@
// const dddd = require("axios");
const dddd = require("request");
const fs = require("fs");
const cheerio = require('cheerio')
const config = require("./config")
dddd(config.BaseUrl, function(error, response, body) {
// 使用 cheerio 插件将获取到的html转为为虚拟dom
var $ = cheerio.load(body)
$(".mod-img-list li").each(function(i, e) {
if (i <= 7) {
var a = "http:" + $(e).find("img").attr("src")
wirteFile(a, $(this).find("p a").text())
} else {
var b = "http:" + $(e).find("img").attr("data-original")
wirteFile(b, $(this).find("p a").text())
}
})
});
/**
*
*/
function wirteFile(url, name) {
dddd(url).pipe(fs.createWriteStream(`img/${name}.jpg`))
}

5
历届学生/18课程/class18/项目/上课项目/pc/package-lock.json generated Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "pc",
"version": "1.0.0",
"lockfileVersion": 1
}

17
历届学生/18课程/class18/项目/上课项目/pc/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "pc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"pc": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"cheerio": "^1.0.0-rc.3",
"request": "^2.88.2"
}
}

5
历届学生/18课程/class18/项目/上课项目/pc/笔记.txt Normal file
View File

@@ -0,0 +1,5 @@
1：使用程序(xxxx)访问目标网页 xxxx
html 字符串转化 虚拟dom
2: 使用正则表达式 或 dom操作 从网页的html中提取你要的数据

3
历届学生/18课程/class18/项目/上课项目/shoping/.browserslistrc Normal file
View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

23
历届学生/18课程/class18/项目/上课项目/shoping/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

19
历届学生/18课程/class18/项目/上课项目/shoping/README.md Normal file
View File

@@ -0,0 +1,19 @@
# vuecli3s
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
历届学生/18课程/class18/项目/上课项目/shoping/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

11940
历届学生/18课程/class18/项目/上课项目/shoping/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
历届学生/18课程/class18/项目/上课项目/shoping/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "vuecli3s",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"node-rsa": "^1.1.1",
"vant": "^2.10.13",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/cli-shared-utils": "^4.5.8",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"postcss-pxtorem": "^5.1.1",
"pug": "^3.0.0",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.0.0",
"vue-template-compiler": "^2.6.11"
}
}

12
历届学生/18课程/class18/项目/上课项目/shoping/postcss.config.js Normal file
View File

@@ -0,0 +1,12 @@
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
propList: ['*']
}
}
}

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/icon_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 703 B

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/left_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/left_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/left_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/login_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/logo_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_address.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_like.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
历届学生/18课程/class18/项目/上课项目/shoping/public/img/me_settin_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

Some files were not shown because too many files have changed in this diff Show More