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

119
历届学生/韩一伟/每天课程/2021-06-16/index.html Normal file
View File

@@ -0,0 +1,119 @@
<!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>
<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>
<a href="https://www.baidu.com/" target="_blank">超链接</a>
<a href="tel:15155145354">联系我们</a>
<img width="100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法显示">
<img width="100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法显示">
<p>段落</p>
<span>span标签</span>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<video controls loop autoplay muted poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
src="https://www.runoob.com/try/demo_source/movie.mp4"></video>
<audio src=""></audio>
<input disabled type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="number" name="" id="" placeholder="请输入手机号">
<input type="file" name="" id="">
<input type="button" value="登录">
<button>登录</button>
<!--form 表单-->
<input type="submit" value="登录">
<input type="date" value="登录">
<input type="time" value="登录">
<h2>（单选）选择你的答案：</h2>
<input type="radio" name="rrrr" id="">
<input type="radio" name="rrrr" id="">
<input type="radio" name="ddd" id="">
<input type="radio" name="ddd" id="">
<input type="color">
<hr>
<h2>登录</h2>
<form action="http://127.0.0.1/login.php" method="POST">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="userpwd" placeholder="密码">
<input type="submit" value="登录">
</form>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<select name="" id="">
<option value="">--请选择--</option>
<option value="">合肥</option>
<option value="">南京</option>
<option value="">上海</option>
</select>
<p>
<del>CSDN</del> 是 <big>全球知</big> 名中文 <small>IT技术交</small> 流平台,创建于1999年, <sub>包含原</sub> 创博客、精 <sup>品</sup> 问答、职
<strong>业培</strong> 训、技术 <b>论</b> 坛、资 <em>源下</em> 载等 <i>产品</i> 服务,提供原创、优质、完整 <center>内容</center> 的专业IT技术开发社区.
</p>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>刘兵</td>
<td>18</td>
</tr>
<tr>
<td>刘兵</td>
<td>18</td>
</tr>
<tr>
<td>刘兵</td>
<td>18</td>
</tr>
</table>
</body>
</html>

74
历届学生/韩一伟/每天课程/2021-06-16/笔记.txt Normal file
View File

@@ -0,0 +1,74 @@
git 版本控制
解释：就是控制各种文件的版本和修改记录的合并
可以文件回滚（后悔药）
公司会有一个服务器（远程仓库）
本地仓库
web版本的界面：
github 全球最大的同性交友网站
全球最大的代码仓库
gitee 码云
gitlab 免费的
.gitignore 忽略文件，控制哪些文件不上传
git 分支模型（代码的三个阶段）
开发
测试
生产
git init：表示初始化一个本地的git仓库
git add -A 决定哪些文件需要被上传， -A 全部上传
git commit -m "上传的备注" 设置此次上传的备注信息
git pull 拉取（下载）
git push 推送（上传）
git clone 项目地址
md（markdown）
前端三个东西
html 做结构
css 做样式
js 做功能 & 特效交互
webstorm
标签分为两种：
块级标签：可以通过css设置宽高，并且独占一行的标签
div，p，h1 ~ h6, ul, ol, li
行内标签：不可以通过css设置宽高，不独占一行的标签（多个标签可以横着放在一行）
a，img，span, video, input
为什么标签要分类：
为了实现布局！！！
网页中重复性布局使用 ul来实现

52
历届学生/韩一伟/每天课程/2021-06-16/结构布局.html Normal file
View File

@@ -0,0 +1,52 @@
<!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>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="header-logo">
<img src="" alt="">
<input type="text" name="" id="">
</div>
<div class="header-menu">
<ul>
<li></li>
</ul>
</div>
</div>
<!-- 中间内容 -->
<div class="content">
<div class="content-left"></div>
<div class="content-center"></div>
<div class="content-right"></div>
</div>
<!-- 底部版权 -->
<div class="footer">
<div class="footer-top">
<ul>
<li></li>
</ul>
<div>
<h2></h2>
<img src="" alt="">
</div>
</div>
<div class="footer-bottom">
<p></p>
</div>
</div>
</body>
</html>

29
历届学生/韩一伟/每天课程/2021-06-18/box.html Normal file
View File

@@ -0,0 +1,29 @@
<!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>
body {
margin: 0;
}
.box {
width: 100px;
height: 100px;
background: red;
/* margin: 10px; 表示同时设置上右下左四个方向 */
/* margin: 10px 20px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; 上 右 下 左 */
padding: 20px;
/* border: 10px solid #000; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

58
历届学生/韩一伟/每天课程/2021-06-18/float.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>float</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
}
.box_3 {
width: 200px;
height: 200px;
border: 1px solid #000;
background: blue;
}
.text {
width: 50px;
height: 50px;
border: 1px solid #000;
overflow: scroll;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
<div class="box_3"></div>
<div class="text">
CSS选择器用于选择你想要的元素的样式的模式。"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。
</div>
</body>
</html>

3
历届学生/韩一伟/每天课程/2021-06-18/index.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: red;
}

63
历届学生/韩一伟/每天课程/2021-06-18/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>css</title>
<link rel="stylesheet" href="./index.css">
<style>
*
p {
color: blue;
}
h2 {
color: green;
}
#test {
color: hotpink;
}
/* .aaa li:nth-child(odd){
color: hotpink;
} */
/* .aaa li:last-child{
color: hotpink;
} */
/* .aaa li:first-child{
color: hotpink;
} */
.test:hover {
color: indigo;
}
.name:focus {
width: 300px;
}
.ceshi::before{
content: "这是before";
}
.ceshi::after{
content: "这是after";
}
</style>
</head>
<body>
<p style="color: yellow;">测试</p>
<h2 class="test">顶顶顶</h2>
<h2>顶顶顶</h2>
<ul class="aaa">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<input class="name" type="text" placeholder="输入账户">
<div class="ceshi">测试</div>
</body>
</html>

63
历届学生/韩一伟/每天课程/2021-06-18/position.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
body {
margin: 0;
}
.box {
width: 100px;
height: 100px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
position: relative;
left: 17px;
top: 30px;
}
.box_3 {
background: blue;
position: relative;
}
.box_3_1 {
background: palevioletred;
width: 60px;
height: 60px;
position: absolute;
left: 27px;
top: 80px;
}
.box_4 {
background: yellow;
position: fixed;
right: 19px;
bottom: 0;
}
</style>
</head>
<body>
<div class="box box_1">1</div>
<div class="box box_2">2</div>
<div class="box box_3">
<div class="box_3_1"></div>
</div>
<div class="box box_4">4</div>
</body>
</html>

101
历届学生/韩一伟/每天课程/2021-06-18/笔记.txt Normal file
View File

@@ -0,0 +1,101 @@
css 做样式（层叠样式表）
三种写法
1：内联写法 优先级最高
2: 内部写法 优先级其次
3：外链写法 优先级最低
!important 改变优先级
选择器
class选择器 class="名称" .名称
id选择器 id="名称" #名称 （淘汰了）
区别：class可以重复使用，id选择器不建议重复使用
* 通配符选择器 全部选中所有标签的意思
一般用于清除默认样式的（但是不用了）
伪类选择器
标签选择器 标签名
选择器 {
css的属性名称: css的属性值;
}
路径写法：
./ 相对路径 当前路径
../ 相对路径 上一层路径
/ 根路径
绝对路径 C:\Users\bmy\Desktop\韩一伟\每天课程\2021-06-18
css 盒子模型
外边距 margin
内边距 padding
边框 border
写法
内容 content
css 盒子模型 宽高计算规则：
真实的宽高 == 你写的宽度 + （左右内边距 + 左右边框） x 你写的高度 + （左右内边距 + 左右边框）
box-sizing: border-box; 打破盒子模型的默认计算规则
css 浮动
让元素排在一行：
display: inline-block;
inline 转化为行内
block 转化为块级
inline-block 行内块级
float 浮动
子元素浮动后，父容器将没有高度，邻近的元素将会挤过去
解决：
1：手动加高度
2：overflow: hidden;
3：放在父元素后面的一个元素上 clear: both 清除浮动
flex 弹性盒子 留坑 （移动端的时候说）
css 定位 position
1: 相对定位 relative
元素设置相对定位后，脱离文档流，但是原本位置还在
定位参考对象 就是初始位置的左上角
2：绝对定位 absolute
元素设置绝对定位后，脱离文档流，但是原本位置被删除了
定位参考对象：
1：父元素如果设置了定位(只要有)，那么相对父元素来
2：父元素如果没设置了定位(只要有)，那么参考浏览器来
3：固定定位 fixed
元素设置固定定位后，脱离文档流，但是原本位置被删除了
定位参考对象：
就是浏览器
三个都类似浮动，会飘起来

51
历届学生/韩一伟/每天课程/2021-06-29/index.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>
<style>
.box {
width: 300px;
height: 300px;
background: red;
position: relative;
overflow: hidden;
}
.box_2 {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box_2:hover{
transform: scale(2.5);
}
.aaaaa {
font-size: 8px;
/* transform: scale(0.8);
display: inline-block;
transform-origin: 0 50%; */
zoom: 0.8;
}
</style>
</head>
<body>
<div class="box">
<div class="box_2">222</div>
<span>测试</span>
<span class="aaaaa">哈哈哈</span>
</div>
</body>
</html>

50
历届学生/韩一伟/每天课程/2021-06-29/media.html Normal file
View File

@@ -0,0 +1,50 @@
<!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>media</title>
<style>
body {
margin: 0;
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
@media screen and (min-width: 413px) {
.box_1,
.box_2 {
width: 207px;
height: 207px;
}
}
@media screen and (max-width: 320px) {
.box_1,
.box_2 {
width: 160px;
height: 160px;
}
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

16
历届学生/韩一伟/每天课程/2021-06-29/笔记.txt Normal file
View File

@@ -0,0 +1,16 @@
平滑过渡：元素从一种状态到另外一种状态
transition
css3：
transform
translate：让元素平移（X,Y）
translateX
translateY
rotate: 让元素旋转
rotate: 280deg
scale: 让元素宽高进行缩放
scaleX
scaleY

38
历届学生/韩一伟/每天课程/2021-06-30/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>flex</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 45px;
display: flex;
justify-content: space-around;
align-items: center;
}
li {
}
</style>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
<li>测试7</li>
<li>测试8</li>
</ul>
</body>
</html>

44
历届学生/韩一伟/每天课程/2021-06-30/rem.html Normal file
View File

@@ -0,0 +1,44 @@
<!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>rem</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
.box {
width: 7.5rem;
height: 7.5rem;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

38
历届学生/韩一伟/每天课程/2021-06-30/笔记.txt Normal file
View File

@@ -0,0 +1,38 @@
flex 弹性盒子
为了实现网页快速（很多事情交给浏览器去做）布局
布局兼容
13个css属性
第一个，开启弹性盒子(父元素身上)：
display: flex;
6个应用在父元素上的
flex-direction 设置元素排列方向 默认 row，可以设置 column 实现垂直放
flex-wrap 设置元素换行的，前提：手动设置一行放不下的条件才会换行
justify-content 设置元素在X轴的对齐方向
align-items 单行的时候设置元素在Y轴的对齐方向
align-content 多行的时候设置元素在Y轴的对齐方向
flex-flow flex-direction 和 flex-wrap 的简写
6个应用在子元素上的
order 改变元素的排列顺序，数值越小，越靠前
flex-grow 设置元素的放大比例
flex-shrink 设置元素的缩小比例 （0 是不缩小）
flex-basis 和width类似，主要用来设置元素宽度
flex 一个数值的时候是 flex-grow 的意思
align-self 允许某个元素在垂直方向设置不一样的对齐方式
rem 一种可以动态改变大小的字体尺寸单位
你写的尺寸 10rem * html上默认的font-size 16 == 160px
如何动态改变rem的 font-size 基准值
1：媒体查询
2：js实现

139
历届学生/韩一伟/每天课程/2021-07-05/index.html Normal file
View File

@@ -0,0 +1,139 @@
<!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>
</head>
<body>
</body>
<script>
// 变量 就是一个有名字的存储空间，用来存数据的
// 这里面存的数据是可变的
// var 变量名 = 变量数值（初始值）
// 变量定义的时候其实可以不加var，但是如果....留坑
var a = "1000元", b = "1111", c = "1111";
// 变量命名规则
// 1: 变量名需要字母开头 ( $ _ )
// 2: 可以使用数字，但是数字不能放开头
// 3：不能使用特殊符号 ( $ _ )
// 4: 变量名要遵守驼峰命名法
// 5: 变量名严格区分大小写
// 变量存储的数据类型
// 基本类型：
// 字符串（String） 就是双引号或者单引号包裹的
// 数字(Number) 就是阿拉伯数字
// 布尔(Boolean) 就是 真(true 1) 假(false 0)
// 对空（Null） 就是不存在
// 未定义（Undefined） 就是变量定义了，但是没有赋予初始值，所以默认就是Undefined
// 运算符
// + - * / % ++ --
var a = 0, b = 5, c = true;
// console.log(b % a);
// a++ 先使用a，使用完后再让a+1
// ++a 先让a+1，然后再使用a
// ( (a++ - (a--)) * (b-- + (a++)) ) - ( ++c - (a+c) ) + 1 ;
// console.log( ( (a++ - (a--)) * (b-- + (a++)) ) - ( ++c - (a+c) ) + 1 );
// (c-- + (a * (--c))) + (++a-b++) - (--b - a)
// console.log( (c-- + (a * (--c) ) ) + (++a-b++) - (--b - a) );
// 赋值运算
// += -= *= /= %=
// a+=b // a = a+b
// console.log(a);
// 逻辑运算符
// && 条件表达式两边都为true，才为true
// || 条件表达式只要有一个为true，就为true
// !
// + 加法运算
// 字符串拼接（合并）
// console.log( 1 - "1" );
// = 赋值
// == 判断是否数值相等
// === 判断是否数值相等，但同时判断类型也是否相等 (强等于，绝对等于)
// console.log( 1 === "1");
// 引用数据类型：对象(Object)、数组(Array)、函数(Function)
// 对象 & 数组 就是把数据按照固定格式组合起来
// 1：存储数据的
// 2: 编程的思想 对象 现实生活中具体事物的描述
// 格式：{ 对象名key: 对象值value }
// var c = {
// username: '刘兵',
// age: 18,
// like: {
// car: '野马',
// js: '电脑'
// },
// eat: function () {
// console.log("我会吃饭");
// }
// }
// var c = new Object();
// c.username = '刘兵';
// c.age = 18;
// var c = new Object({ username: '刘兵',age: 18 })
// console.log(c.like);
// var key = "like"
// console.log(c.key);
// console.log(c[key]); // c.like
// 面向对象的编程
// 封装，继承，多态
// class 类：
// 构造函数
// class car {
// color = 'red';
// speed = '10s';
// start() {
// console.log("车辆启动");
// }
// stop() {
// console.log("车辆停止");
// }
// }
// class myCar1 extends car {
// constructor(color) {
// super()
// this.ddd = color;
// }
// nitrogen() {
// console.log(this.ddd);
// }
// }
// class myCar2 extends car {
// fly() {}
// }
// var ddd = new myCar1('#fff')
// ddd.nitrogen()
// var qian;
// console.log(qian);
// 常量 就是一个有名字的存储空间，用来存数据的
// 这里面存的数据是不可变的
</script>
</html>

51
历届学生/韩一伟/每天课程/2021-07-05/函数.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>函数</title>
</head>
<body>
</body>
<script>
// 函数 function 方法
// 作用：把使用效率高的很多代码放到一起，降低冗余
// function 方法名 (方法参数) { 你的代码 }
// function xiyifu(m1,m2,m3,m4) {
// console.log(m1,m2,m3,m4);
// // console.log(arguments);
// console.log("洗衣服中...");
// return "干净的衣服给你"
// }
// var a = xiyifu(3,2,1);
// console.log(a);
// 匿名函数
// var xiyifu = function () {
// console.log("洗衣服");
// }
// var c = xiyifu;
// console.log(c);
// 局部作用域
// 全局作用域
// 定义变量加var，那么这个变量会受到所在位置的作用域影响
// 没有var 变量提升
// var ddd = 1
// var c = function () {
// ddd = 1
// console.log(ddd); // 1
// }
// c();
// console.log(ddd); // 1
</script>
</html>

30
历届学生/韩一伟/每天课程/2021-07-05/循环语句.html Normal file
View File

@@ -0,0 +1,30 @@
<!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>
</body>
<script>
// 循环的起始位置（对象），循环的结束条件，循环步进数值
// for (var i = 1; i<= 2; i++ ) {
// console.log(i);
// }
// var i = 1
// while (i <= 10) {
// console.log(i);
// i++;
// }
// var i = 11
// do {
// console.log(i);
// i++;
// } while (i<10);
</script>
</html>

45
历届学生/韩一伟/每天课程/2021-07-05/数组.html Normal file
View File

@@ -0,0 +1,45 @@
<!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>
</body>
<script>
// 使用下标来存储数据
var a = ["111", 100, true, [1,2,3], { age: 18 } ];
// var c = {
// name: '111',
// age: 18,
// color: 'red'
// };
// for (const key in c) {
// console.log(c[key]);
// }
// for(var i = 0;i<a.length;i++) {
// console.log(a[i]);
// }
// var a = new Array();
// a[0] = "111"
// a[1] = 100
// a[10] = 10022
// console.log(a);
// var a = new Array("111",100);
// console.log(a);
</script>
</html>

74
历届学生/韩一伟/每天课程/2021-07-05/条件语句.html Normal file
View File

@@ -0,0 +1,74 @@
<!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>
</head>
<body>
</body>
<script>
// if
// if else
// if else if else
// if (name == 1) {
// console.log("vip1");
// } else if (name == 2){
// console.log("vip2");
// } else if (name == 3){
// console.log("vip3");
// } else if (name == 4){
// console.log("vip4");
// } else {
// console.log("普通用户");
// }
// if (true) {
// if (false) {
// if (true) {
// console.log("dddd");
// }
// }
// }
// 三元运算
// if (name == 0) {
// console.log("0");
// } else {
// console.log("111");
// }
// if (name == 0) console.log("0");
// else console.log("111");
// name == 0 ? console.log("0") : console.log("111")
// switch
var dddd = 1;
switch (dddd) {
case 1:
console.log("vip1");
break;
case 2:
console.log("vip2");
break;
case 3:
console.log("vip3");
break;
case 4:
console.log("vip4");
break;
default:
console.log("普通用户");
break;
}
</script>
</html>

6
历届学生/韩一伟/每天课程/2021-07-05/笔记.txt Normal file
View File

@@ -0,0 +1,6 @@
javascript
基于浏览器的脚本语言
作用：表单验证，js特效，实现功能，实现后端，实现App
window

57
历届学生/韩一伟/每天课程/2021-07-08/event.html Normal file
View File

@@ -0,0 +1,57 @@
<!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>event 事件</title>
</head>
<body>
<button>点我</button>
<div onclick="test()">哈哈哈</div>
<div class="three">第三种</div>
</body>
<script>
// 事件：你在网页上完成的操作都叫事件
// 事件三要素：
// 事件源
// 事件类型
// 事件处理函数
// 点击事件写法有三种？
//
// js dom document 虚拟dom 真实dom 影子dom
console.log();
var a = document.querySelector("button")
// 1
a.onclick = function () {
alert("1111")
}
// 2
function test () {
alert("test")
}
// 3
document.querySelector(".three").addEventListener('click', function() {
alert("三1")
})
document.querySelector(".three").addEventListener('click', function() {
alert("三2")
})
document.querySelector(".three").addEventListener('click', function() {
alert("三3")
})
</script>
</html>

76
历届学生/韩一伟/每天课程/2021-07-08/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!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>
</head>
<body>
</body>
<script>
// 回调函数
// 异步 & 同步
// 闭包
// this 指向（留坑）
// 同步 异步 返回值
// 回调 callback 函数
// promise es6 函数
// es5 es6, 7, 8, 9, 10...
// function a (callback) {
// var time;
// // 异步操作
// setTimeout(function(){
// time = "哈哈哈"
// callback(time)
// }, 1000);
// }
// a(function (res) {
// console.log(res);
// })
// function a (callback) {
// callback("111")
// }
// a( function (rrr) {
// console.log(rrr);
// } )
// 闭包
// 函数内部的函数访问外部函数变量的过程
// 作用：会将变量进行缓存，减小程序的计算量
// 缺点：闭包会导致程序的内存占用过高，导致页面卡顿，应该减少使用
function a() {
var time = 1;
var time = 1;
var time = 1;
var c = function () {
time+=1
return time
}
return c
}
var f = a()
console.log( f() ); // 2
console.log( f() ); // 2
// function a () {
// var i = 0;
// return i+=1;
// }
// console.log(a()); // 1
// console.log(a()); // 2
</script>
</html>

42
历届学生/韩一伟/每天课程/2021-07-15/index.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>Document</title>
</head>
<body>
<ul></ul>
</body>
<!-- <script>
function callback(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/index.php?test=callback"></script> -->
<script>
// 1：拿出手机
var ajax = new XMLHttpRequest()
// 2: 输入号码
ajax.open("POST", "http://127.0.0.1/index.php")
// 3：拨号
ajax.send()
// 4：状态监听
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
console.log(ajax);
console.log(ajax.responseText);
} else {
console.log("抱歉，无法请求");
}
}
}
</script>
</html>

92
历届学生/韩一伟/每天课程/2021-07-15/笔记.txt Normal file
View File

@@ -0,0 +1,92 @@
ajax
作用：是一种无刷新的网页数据交互技术
为什么需要它？
web网站如何开发
传统后端（服务端）渲染
不好：导致代码变得臃肿难以维护
后端：80% 工作量 实现功能，设计数据库，做完全维护，部署网站 1万
前端：20% 写页面 3千
适合seo优化
前后端分离
后端：50% 设计数据库，做完全维护，部署网站 1.2万
前端：50% 写页面，功能 1万
不利于做seo优化
ajax：后端响应前端数据
数据是什么格式：
1: xml
<data>
<title>哈哈哈</title>
</data>
2: json
js 里面数组和对象的各种嵌套组合
var data = [
{ title: 1 },
{ title: 1 }
]
ajax (http)请求的方式：
4种：
GET 表示 获取 一个东西
query 地址栏传参数
http://127.0.0.1/index.php?id=1&name=liubing
POST 表示 提交 一个东西
表单传参数 对象传参 { name: 1 }
PUT 表示 更新 一个东西
DELETE 表示 删除 一个东西
ajax（http）状态码：
200 成功
404 地址不存在
...
http://tools.jb51.net/table/http_status_code
浏览器 安全策略 同源协议 （跨域）
1：请求协议 http 80 https 443
2：请求端口
3：请求的域名
前端：http://127.0.0.1:3000/test.php file:///C:/Users/bmy/Desktop/2021-07-15/index.html
后端：http://127.0.0.1:8080/index.php
解决跨域：
1：cors 后端设置一下 请求头：Access-Control-Allow-Origin 即可
【淘汰】2：jsonp 不是ajax请求, 主要把接口地址伪装成 js 文件请求，绕过浏览器的安全策略，然后通过
callback回调拿到数据。
3：服务端代理
A（自己公司前端） ---> B（别人后端）
A（自己公司前端） ---> C（自己公司的后端）
C（自己公司的后端） ---> B（别人后端）

9
历届学生/韩一伟/每天课程/2021-08-10/http.js Normal file
View File

@@ -0,0 +1,9 @@
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
var html = fs.readFileSync("./index.html");
res.end(html.toString());
}).listen(3000)

12
历届学生/韩一伟/每天课程/2021-08-10/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!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>
</head>
<body>
<h2>哈哈哈</h2>
</body>
</html>

3
历届学生/韩一伟/每天课程/2021-08-10/index.js Normal file
View File

@@ -0,0 +1,3 @@
var utils = require("./utils");
utils.test()

16
历届学生/韩一伟/每天课程/2021-08-10/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "2021-08-10",
"version": "1.0.0",
"description": "nodejs学习",
"main": "index.js",
"scripts": {
"start": "node index.js",
"http": "node-dev http.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"cheerio": "^1.0.0-rc.10"
}
}

98
历届学生/韩一伟/每天课程/2021-08-10/pc.js Normal file
View File

@@ -0,0 +1,98 @@
const axios = require('axios');
const cheerio = require('cheerio');
const url = require("url");
const fs = require("fs");
// 存放每个页面的
var urlArr = [];
// 存放详情地址的
var infoArr = [];
// 详情页需要被下载的图片数据
var infoImgArr = []
var infoImgIndex = 0;
var infoIndex = 0;
var pageIndex = 0;
for (var i = 1; i <= 12; i++) {
urlArr.push(`https://www.mmav.me/forum-12-${i}.htm`);
}
getHTML()
/**
* 用来爬每一页的 假设 1 ~ 100
*/
async function getHTML() {
console.log(`1: getHTML 的 pageIndex 为：${pageIndex}`);
var result = await axios.get(urlArr[pageIndex]);
const $ = cheerio.load(result.data);
$(".cont .list_info a").each(function () {
infoArr.push("https://www.mmav.me/" + $(this).attr("href"))
});
getInfo()
}
async function getInfo() {
console.log(`2: getInfo 的 infoIndex 为：${infoIndex}`);
var result = await axios.get(infoArr[infoIndex]);
const $ = cheerio.load(result.data);
$(".imglist li a img").each(function () {
var bigImg = $(this).attr("data-original")
bigImg = bigImg.replace(/_t\./g, ".")
infoImgArr.push("https://www.mmav.me" + bigImg)
});
downImg()
}
async function downImg() {
console.log(`3: downImg 的 infoImgIndex 为：${infoImgIndex}，被下载的图片地址为：${infoImgArr[infoImgIndex]}`);
axios({
method: 'get',
url: infoImgArr[infoImgIndex],
responseType: 'stream'
}).then(function (response) {
response.data.pipe(fs.createWriteStream(`img/${imgName(infoImgArr[infoImgIndex])}`));
infoImgIndex += 1
if (infoImgIndex < infoImgArr.length) {
downImg()
}
else {
infoImgIndex = 0;
infoImgArr = [];
infoIndex += 1
if (infoIndex < infoArr.length) {
getInfo()
}
else {
infoIndex = 0
infoArr = []
pageIndex += 1
if (pageIndex < urlArr.length) {
getHTML()
} else {
console.log("所有页数下载完成");
}
}
}
});
}
function imgName(urlPath) {
return url.parse(urlPath).path.split("/pic/")[1].split("/")[1]
}
// https://www.mmav.me/uploadfile/pic/20210430/467_12_t8JXXgLYcEgtD5IM3kOw.jpg
// https://www.mmav.me/uploadfile/pic/20210430/467_12_t8JXXgLYcEgtD5IM3kOw.jpg
// https://www.mmav.me/uploadfile/pic/20210430/467_12.JXXgLYcEgtD5IM3kOw.jpg

9
历届学生/韩一伟/每天课程/2021-08-10/test.js Normal file
View File

@@ -0,0 +1,9 @@
const url = require("url")
function imgName(urlPath) {
return url.parse(urlPath).path.split("/pic/")[1].split("/")[1]
}
var a = imgName("https://www.mmav.me/uploadfile/pic/20210430/467_25_ZaWXZk0VFxCGE6GHU6lr.jpg");
console.log(a)

8
历届学生/韩一伟/每天课程/2021-08-10/utils.js Normal file
View File

@@ -0,0 +1,8 @@
class Utils {
test () {
console.log("测试工具函数");
}
}
module.exports = new Utils();

53
历届学生/韩一伟/每天课程/2021-08-10/笔记.txt Normal file
View File

@@ -0,0 +1,53 @@
Node.js
作用：写特效
写功能
运行在前端（后端）浏览器上（服务器上）的脚本语言
Node.js 不是框架，也不是新的语言
只是一个运行环境而已
c++ 帮你js和系统进行交互
v8 引擎 运行js的
js
|
nodejs
|
c++
|
系统
npm: Node.js 自带的包（插件）管理工具
npm install（i） 插件名
npm i 初始化项目
npm init
install 插件分为三种环境
安装到项目中
开发阶段 devDependencies
npm i --save-dev（-D） 插件名
正式阶段 dependencies
npm i --save（-S） 插件名
安装到系统全局
npm i -g 插件名
npm run 命令名字
npm start
Go
deno
Rust
TypeScript
爬虫

157
历届学生/韩一伟/每天课程/2021-08-11/component.html Normal file
View File

@@ -0,0 +1,157 @@
<!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>
<div class="app">
<lb-header header-title="首页的标题" @send="home" :arr="list">
<template v-slot:back>
<i >返回图标</i>
</template>
<template v-slot:like>
<i >喜欢图标</i>
</template>
</lb-header>
<div class="content">中间内容</div>
<v-footer :arr="swiperImg">
<template v-slot:default="pop">
<img height="100px" :src="pop.item" alt="">
</template>
</v-footer>
<v-footer :arr="list">
<template v-slot:default="pop">
<h2>{{ pop.item.title }}</h2>
</template>
</v-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件 实现封装使用率较高的页面
// 全局组件
Vue.component('lb-header', {
data() {
return {
title: '公共头部的标题',
test: '子组件数据'
}
},
props: {
headerTitle: {
type: String,
default: "默认标题"
},
arr: {
type: Array,
default: () => []
}
},
created() {
},
methods: {
send() {
this.$emit("send", this.test)
}
},
template: `
<div class="header">
<div class="back">
<slot name="back"></slot>
</div>
{{ headerTitle }}
<ul>
<li v-for="(v,i) in arr">{{ v.title }}</li>
</ul>
<button @click="send">点我</button>
<div class="right">
<slot name="like"></slot>
</div>
</div>
`
});
// 局部组件
var footer = {
data() {
return {}
},
props: {
arr: {
type: Array,
default: () => []
}
},
created() {
this.$parent.$children[0].$data.test = "测试修改"
console.log();
},
methods: {
},
template: `
<div class="footer">
底部
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(v,i) in arr">
<slot :item="v"></slot>
</div>
</div>
</div>
</div>
`
}
// 组件间数据传递
// 父 ---> 子 props
// 子 ---> 父 $emit 触发提交个事件，把数据抛出去
// 兄弟组件
// 插槽
//
var vm = new Vue({
el: '.app',
data: {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
swiperImg: [
'https://st-cn.meishij.net/p2/20190613/20190613181442_145.jpg',
'https://st-cn.meishij.net/p2/20190613/20190613181953_808.jpg'
]
},
methods: {
home(val) {
console.log(val);
console.log("进入详情");
},
info() {
console.log("显示图片预览");
},
getData(val) {
console.log(val);
}
},
components: {
"v-footer": footer
}
})
</script>
</html>

94
历届学生/韩一伟/每天课程/2021-08-11/index.html Normal file
View File

@@ -0,0 +1,94 @@
<!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>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2>{{ hello }}</h2>
<ul>
<li v-for="(item,index) in list" @click="EnterInfo(item)">
{{ index }} | {{ item.title }}
</li>
</ul>
<img :src="src" alt="">
<ul>
<li v-for="(value,key) in obj">{{ key }} | {{ value }}</li>
</ul>
<div v-text="content"></div>
<div v-html="content"></div>
<div v-show="isShow" v-once>v-show 购物车有数据</div>
<div v-if="vip == 0">普通用户</div>
<div v-else-if="vip == 1">VIP1</div>
<div v-else-if="vip == 2">VIP2</div>
<div v-else-if="vip == 3">VIP3</div>
<div v-else>错误</div>
<div v-if="isShow">购物车有数据</div>
<div v-else>购物车没有数据</div>
<input type="text" placeholder="请输入用户名" v-model="userName" />
<input type="password" placeholder="请输入密码" v-model="userPwd" />
<button @click="Login">登 录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// vue 指令（html属性）
// v-for 循环显示数据 key 必须要加
// v-bind 将变量绑定到标签的属性上 简写 :
// v-on 绑定点击事件 v-on:事件类型="事件处理函数" 简写：@
// v-html
// v-show 是使用display:none 来控制元素显示隐藏
// v-if v-else v-if-else 会把不符合条件的html直接删除
// v-model 只能用在输入框上，获取输入框的数值的
var vm = new Vue({
el: '.app',
data: {
userName: "",
userPwd: "",
vip: 1,
isShow: true,
hello: '你好这是测试',
src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
content: "<h2>测试v-html</h2>",
obj: {
age: 18,
name: '刘兵'
}
},
methods: {
Login() {
console.log(this.userName);
console.log(this.userPwd);
},
EnterInfo(item) {
console.log(item);
}
}
})
</script>
</html>

77
历届学生/韩一伟/每天课程/2021-08-11/index2.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>
</head>
<body>
<div class="app">
<h2 ref="test">我是h2</h2>
<h1>{{ msg | shenglh }}</h1>
<h3>{{ test }}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 计算属性 computed
// 侦听器 watch
// 混入 mixins 封装相同代码，减少冗余
var mix = {
data () {
return {
page: 0,
totalPage: 10
}
},
methods: {
bottom () {
}
}
};
var vm = new Vue({
el: '.app',
mixins: [ mix ],
data: {
msg: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
},
watch: {
msg (newVal, oldVal) {
console.log(newVal, oldVal);
}
},
created () {
console.log(this.page);
console.log("created");
},
mounted () {
console.log("mounted");
console.log(this.$refs.test);
},
filters: {
shenglh(val) {
return val.substring(0,3)+"..."
}
},
methods: {
test2() {
return "test2"
}
},
computed: {
test () {
return "test"
}
}
})
</script>
</html>

97
历届学生/韩一伟/每天课程/2021-08-11/tabs.html Normal file
View File

@@ -0,0 +1,97 @@
<!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>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.tabs_title_active {
color: red;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<li :class=" index == currentIndex ? 'tabs_title_active' : '' "
@click="currentIndex = index"
v-for="(item,index) in tabsList">
{{ item.title }}
</li>
</ul>
<div class="tabs_conetnt">
<div class="" v-for="(item,index) in tabsList">
<div v-if="index == currentIndex">
<p v-for="(v,i) in item.content">{{ v.text }}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabsList: [
{
id: 1,
title: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' },
]
},
{
id: 2,
title: '军事',
content: [
{ text: '军事的内容1' },
{ text: '军事的内容2' },
{ text: '军事的内容3' },
]
},
{
id: 3,
title: '体育',
content: [
{ text: '体育的内容1' },
{ text: '体育的内容2' },
{ text: '体育的内容3' },
]
},
]
},
created() {
},
methods: {
changeTitle(i) {
this.currentIndex = i
}
}
})
</script>
</html>

42
历届学生/韩一伟/每天课程/2021-08-11/笔记.txt Normal file
View File

@@ -0,0 +1,42 @@
前端阶段：
1：html，css，js，jq
2：m（model）v（view）c（controller）
http://www.xxx.com/index
Nodejs
3：m（model）v（view） vm （view and model）
Angular.js React.js Vue.js ( 尤雨溪 )
https://cn.vuejs.org/
vue 2.x
基于原生js开发
option api 80%
new Vue({
data: {}
})
vue clas api 5%
class Home extends Vue {
}
Vue 3.x (vue next) typescript
Composition API 15%
setup() {
}
生命周期

144
历届学生/韩一伟/每天课程/2021-08-13/index.html Normal file
View File

@@ -0,0 +1,144 @@
<!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>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/login">登录</router-link>
</p>
<div class="content">
<transition name="slide-fade">
<router-view></router-view>
</transition>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
const Home = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
}
},
template: `
<div class="Home">
<ul>
<router-link
:to="{ name: 'info', params: { id: item.id, title: item.title } }"
tag="li"
v-for="item,index in list" :key="index">
{{ item.title }}
</router-link>
</ul>
</div>`,
}
const Car = { template: '<div class="Car">Car</div>' }
const Login = {
methods: {
Login() {
localStorage.setItem("token", "Q3456TRFGTHR6Y4R3.3454.4356")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace({
path: "/"
})
}
}
},
template: '<div class="Login" @click="Login">Login</div>'
}
const Info = {
created() {
console.log(this.$route.params.id);
},
// beforeRouteLeave(to, from, next) {
// var isLeave = confirm("确认离开吗？")
// if (isLeave) {
// next()
// }
// },
template: `
<div class="Info">
{{ $route.params.id }}
</div>`,
}
const routes = [
{ path: '/', name: 'home', component: Home, meta: { isLogin: false } },
{ path: '/car', name: 'car', component: Car, meta: { isLogin: true } },
{ path: '/login', name: 'login', component: Login, meta: { isLogin: false } },
{ path: '/info/:id/:title', name: 'info', component: Info, meta: { isLogin: false } },
]
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
// 页面需要登录
if (to.meta.isLogin) {
// 登录过了
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
from: to.path
}
})
}
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

3151
历届学生/韩一伟/每天课程/2021-08-13/vue-router.js Normal file
View File

File diff suppressed because it is too large Load Diff

12014
历届学生/韩一伟/每天课程/2021-08-13/vue.js Normal file
View File

File diff suppressed because it is too large Load Diff

76
历届学生/韩一伟/每天课程/2021-08-13/笔记.txt Normal file
View File

@@ -0,0 +1,76 @@
单页web应用(spa)
只有一个HTML页面，程序中所有页面都是js
路由 vue-router
路由有两种模式
https://www.jianshu.com/p/ae8f9c41a77c
hash
www.baidu.com/#/index
www.baidu.com/#/about
location.hash
history
www.baidu.com/index
www.baidu.com/about
pushState 添加一条浏览器的历史记录
replaceState 替换浏览器历史记录
页面跳转
1: router-link
2: this.$router.push
$router表示方法
$route是获取路由参数
参数传递：
1：query
www.baidu.com/#/info?id=1&page=122
2：params
www.baidu.com/#/info/1/122
导航守卫
1：全局前置守卫
2：路由独享的守卫
3：组件内的守卫
登录拦截
1：在登录页面，点击登录按钮，调用登录接口，将用户名密码给后端
{
code: 200,
msg: '',
result: {
token: 'sdfgfdwqerggfwbt'
}
}
token：是一串用户信息的加密字符串
WQDWEFEFWEFREFREFG.WFREGRTY5665YHRTGDR.WFREGRTY5665YHRTGDR
后端在接口中会返回token，前端需要缓存到本地中。
2: 前端在全局路由守卫中判断，需要将要访问的页面是否需要登录，如果需要登录，是否已经登录
接口是无状态的
json web token jwt
vue-cli
2.x
3.x 4.x