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

107
历届学生/逯帅帅/每日课程/2021-02-25/css.html Normal file
View File

@@ -0,0 +1,107 @@
<!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>
<!-- <link rel="stylesheet" href="test.css"> -->
<style>
/* p {
color: yellow;
} */
.red {
color: red;
}
.blue, .yellow {
color: blue;
}
* {
margin: 0;
}
.box span {
color: rosybrown;
}
.box span+p {
color: sandybrown;
}
input[type="text"] {
width: 100px;
}
input[type="number"] {
width: 200px;
}
input[type="number"]:focus {
width: 400px;
background: red;
}
.zhangsan:hover {
background: green;
}
/* .aaa li:nth-child(2n+1) {
color: red;
} */
.aaa li:last-child {
color: red;
}
.aadsdd::before{
content: "测试";
}
.aadsdd::after{
content: "测试1";
}
</style>
</head>
<body>
<p class="red">212222</p>
<p class="blue">wededew</p>
<p class="yellow">黄色</p>
<div class="box">
<span>ddddd</span>
<p>ddddd</p>
<p>ddddd2</p>
</div>
<div class="login">
<input type="text">
<input type="number">
</div>
<p class="zhangsan">dwqdewdweq</p>
<ul class="aaa">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<p class="aadsdd">
测试文字
</p>
</body>
</html>

102
历届学生/逯帅帅/每日课程/2021-02-25/index.html Normal file
View File

@@ -0,0 +1,102 @@
<html>
<head>
<title>1111</title>
<meta charset="utf-8">
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>段落</p>
<p>wqdwq</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表1</li>
<li>有序列表1</li>
</ol>
<a href="https://www.baidu.com/" target="_blank">超链接</a>
<a href="tel:15155145354">拨打电话</a>
<img src="https://img2.zol.com.cn/product/12_501x2000/103/cerrC02hYbLxM.jpgsss" alt="图片无法显示"/>
<video
controls
autoplay
muted
loop
src="https://www.runoob.com/try/demo_source/movie.mp4">
</video>
<input type="text" placeholder="请输入用户名" value="张三">
<input type="number" placeholder="请输入手机号">
<input type="password" placeholder="请输入密码">
<input type="button" value="点我">
<input type="submit" value="点我">
<button>点我</button>
<input type="radio" name="qqqq">
<input type="radio" name="qqqq">
<input type="radio" name="qqqq">
<input type="color">
<input type="date">
<form action="http://127.0.0.1/login.php" method="post">
<input required type="text" name="u" placeholder="用户名">
<input required type="password" name="p" placeholder="密码">
<input disabled type="submit" value="登 录">
<input type="reset" value="清空">
</form>
<select name="" id="">
<option value="null">请选择</option>
<option value="1">合肥</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
<textarea name="" id="" placeholder="输入评价内容"></textarea>
<pre>
你好
我是是是是
的的哇
</pre>
<p>
3C°
</p>
<p>
<strong> &lt;section&gt; </strong> 标签 <b>定义</b> 文档中<big>的节</big> （ <small>section、区段</small> ）。比如章节、页眉、页脚或 <del>文档中</del> 的其他部分。
</p>
<div>qdqwdfqw</div>
<div>qdqwdfqw</div>
<a href="">qqq</a>
<a href="">333</a>
</body>
</html>

3
历届学生/逯帅帅/每日课程/2021-02-25/test.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: blue !important;
}

68
历届学生/逯帅帅/每日课程/2021-02-25/定位.html Normal file
View File

@@ -0,0 +1,68 @@
<!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: 100px;
height: 100px;
background: blue;
border: 5px solid red;
padding: 5px;
box-sizing: border-box;
position: relative;
left: 24px;
}
.box_1 {
width: 100px;
height: 100px;
background: brown;
}
.box_2 {
width: 100px;
height: 100px;
background: chartreuse;
}
.float {
float: left;
}
.box_3 {
width: 70px;
height: 70px;
background: palevioletred;
}
.box_4 {
width: 40px;
height: 40px;
background: sandybrown;
}
.box_2 {
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="float box"></div>
<div class="float box_1">
<div class="box_3">
<div class="box_4"></div>
</div>
</div>
<div class="float box_2"></div>
</body>
</html>

47
历届学生/逯帅帅/每日课程/2021-02-25/盒子模型.html Normal file
View File

@@ -0,0 +1,47 @@
<!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: 100px;
height: 100px;
background: blue;
border: 5px solid red;
padding: 5px;
box-sizing: border-box;
}
.box_1 {
width: 100px;
height: 100px;
background: brown;
}
.box_2 {
width: 100px;
height: 100px;
background: chartreuse;
}
.float {
float: right;
}
</style>
</head>
<body>
<div class="float box"></div>
<div class="float box_1"></div>
<div class="box_2"></div>
</body>
</html>

165
历届学生/逯帅帅/每日课程/2021-02-25/笔记.txt Normal file
View File

@@ -0,0 +1,165 @@
前端（）
页面仔，切图仔 美工 的年代（jquery）
web开发方式：
后端渲染 80% 1万
前端 20% 3千
过渡的年代（mvc）
mvvm （react，vue，angular）
前端
html （骨骼 写网页的结构）
css （皮肤外貌 主要对 html进行美化的）
JavaScript js （人的思想 可以实现对html和css的控制）
屌丝年代：一般表单验证，弹窗，特效
高富帅年代：做后端开发，操作系统，桌面开发，移动端（app），pc，h5
前端 + 后端（数据库，服务器）
html
<> </>
谷歌浏览器
百度
请求方式
get
www.baidu.com?name=zhangsan&pwd=11111&d=111
表示从服务器获取一个资源
post
表示向服务器提交一条数据
put
表示向服务器更新一条数据
delet
表示向服务器删除一条数据
div 作用？
主要是用来实现网页布局划分的
标签分类：
作用：
1：块标签 div p ul h1
独占一行的标签
可以设置宽高
2：行标签 a img input
不独占一行的标签
可以设置宽高
css （层叠样式表）
写样式做美化
3中写法：
1：内联写法
<p style="color: blue;">212222</p>
2：内部写法
3：外链写法
!important; 改变css的权重
选择器
选择器类型 {
属性名: 属性值;
}
1：标签选择器
2：属性选择器
3：id选择器 表示这个类名是唯一的 （基本没啥用）
要求：在用id的时候最好不要出现重复
场景：
用来和js进行交互
#名称 {
}
4：class选择器
.名称 {
}
5：全局选择器 * （基本没啥用）
清除浏览器默认样式的
6：伪类选择器
盒子模型
就是现实生活中的 盒子
外边距 margin
内边距 padding
边框 border
内容 content
计算规则：
最终的宽高 = 你写的宽 + 左右边框 + 左右内边距
你写的高 + 上下边框 + 上下内边距
box-sizing: border-box;
定位
让元素固定在某个位置
相对定位
1: 如果元素被甚至了相对定位，元素会脱离文档流，原本所在位置不会删除
定位参考对象：
参考以前位置
绝对定位（墙头草）.
如果元素被设置了绝对定位，元素会脱离文档流，原本所在位置会删除
是否有父容器，是否定位
定位了：
参考父容器
没有定位：
参考body来定位
固定定位
如果元素被设置了固定定位，元素会脱离文档流，原本所在位置会删除
参考浏览器来定位

16
历届学生/逯帅帅/每日课程/2021-03-01/2d属性笔记.txt Normal file
View File

@@ -0,0 +1,16 @@
skew 和写属性
translate: 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate(10px,20px)
rotate: 旋转一定的角度
rotate(90deg)
scale(x,y): 缩放元素
zoom
skew 倾斜
transform-origin 改变旋转中心点的位置

0
历届学生/逯帅帅/每日课程/2021-03-01/CSS3 多媒体查询 Normal file
View File

52
历届学生/逯帅帅/每日课程/2021-03-01/flex.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>flex</title>
<style>
ul,
body {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 40px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-around;
}
ul li {
}
</style>
</head>
<body>
<ul>
<li>安全</li>
<li>新闻</li>
<li>测试</li>
<li>文章</li>
<li>娱乐</li>
<li>安全</li>
<li>新闻</li>
<li>测试</li>
<li>文章</li>
<li>娱乐</li>
<li>安全</li>
<li>新闻</li>
<li>测试</li>
<li>文章</li>
<li>娱乐</li>
</ul>
</body>
</html>

30
历届学生/逯帅帅/每日课程/2021-03-01/index.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>
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

49
历届学生/逯帅帅/每日课程/2021-03-01/keyframes.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>keyframes</title>
<style>
.box {
width: 100px;
height: 100px;
background: yellow;
animation: huhg 1s ease 2s infinite alternate;
}
@keyframes huhg {
/* from {
width: 200px;
height: 200px;
}
to {
width: 400px;
height: 400px;
} */
0% {
width: 200px;
height: 200px;
}
50% {
width: 50px;
height: 50px;
}
100% {
width: 400px;
height: 400px;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

46
历届学生/逯帅帅/每日课程/2021-03-01/media.html Normal file
View File

@@ -0,0 +1,46 @@
<!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>
body {
margin: 0;
}
.box {
width: 125px;
height: 125px;
border: 1px solid #000;
float: left;
box-sizing: border-box;
}
@media screen and (min-width: 320px) and (max-width: 359px) {
.box {
width: 106.6px;
height: 106.6px;
}
}
@media screen and (min-width: 401px) and (max-width: 414px) {
.box {
width: 138px;
height: 138px;
}
}
</style>
</head>
<body>
<div class="box "></div>
<div class="box "></div>
<div class="box "></div>
</body>
</html>

36
历届学生/逯帅帅/每日课程/2021-03-01/笔记.txt Normal file
View File

@@ -0,0 +1,36 @@
CSS3 多媒体查询
flex 实现布局自适应的
尺寸兼容 rem
13 个属性
display: flex; 开启
12 个
应用在父元素上 6
【1重】align-items 有单行文字的时候，设置元素在Y轴上对齐方式
【1重】justify-content 设置元素在X轴上对齐方式
【2重】flex-direction 设置元素的排列方向
【2重】flex-wrap 设置元素一行排列不下的时候如何换行
flex-flow 是 flex-direction 和 flex-wrap 的简写
align-content 有多行文字的时候，设置元素在Y轴上对齐方式
应用在子元素上 6
order 设置元素的排序，数值越小，越靠前
【2重】flex-grow 设置元素的放大比例
【2重】flex-shrink 设置元素的缩小比例
0 : 表示不运行缩小，保持原本的比例
flex：flex-grow flex-shrink flex-basis 和简写
align-self 允许单个元素采用不同的对齐方式
flex-basis 设置元素宽度

54
历届学生/逯帅帅/每日课程/2021-03-02/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
getRem(375, 100)
};
window.onresize = function () {
getRem(375, 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 {
margin: 0;
padding: 0;
display: flex;
}
.box {
width: 1.25rem;
height: 1.25rem;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</body>
</html>

13
历届学生/逯帅帅/每日课程/2021-03-02/笔记.txt Normal file
View File

@@ -0,0 +1,13 @@
px
rem
1rem = 16px
10rem * 16px = 160px
媒体查询
纯js

325
历届学生/逯帅帅/每日课程/2021-03-04/index.html Normal file
View File

@@ -0,0 +1,325 @@
<!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>js第一课</title>
</head>
<body>
</body>
<script>
// 变量？
// 在计算机内部用来存储东西
// 可以变的（变量内部存储的数值可以被修改）
// var 变量名称 = 变量数值
// var a = "张三"
// a = "李四"
// console.log(a);
// var a = 1,b = 1, c = 1,d = 1;
// 变量命名的规则
// 1: 变量命名首字母不能是特殊符号(_ $)
// 2: 不是纯数字
// 3: 取名字要具有含义
// 4: 变量命名首选采用驼峰命名法
// 5：区分大小写
// 常量
// 在计算机内部用来存储东西
// 不可变的（变量内部存储的数值不可以被修改）
// const b = "1111"
// console.log(b);
// b = "222";
// 变量类型 （垃圾分类）
// var a = '122'; // string（字符串）
// var c = 111; // number（数字类型）
// var d = true; // boolean （布尔类型 true(1) false(0)）
// var e; // Undefined null
// console.log(e);
// 坑 引用数据类型：对象(Object)、数组(Array)、函数(Function)。
// 运算符 + - * / % ++(让变量自增+1) --(让变量自增-1)
// + 符号两边如果都是number的话，会进行数学加法运算
// + 符号两边只要有一个不是number，那么会进行字符串拼接
// a++ 先把变量a带入逻辑，之后再让a+1
// ++a 先把变量a+1，然后带入逻辑
// var a = 1;
// console.log(--a)
// console.log(++a)
// console.log(a++)
// console.log(a--)
// console.log( (a++) + (a+1) )
// console.log(a+1)
// console.log( ((a++) + (a+1)) - ((--a) + (++a)) );
// += -= *= /= %=
// var a = 1, b = 2;
// a+=b;
// a = a+b
// = 赋值
// == 值是否相等
// === 值是否相等 并且 判断数据类型是否相等
// && 两边必须都为true 才为true，否则都为false
// || 只要有一个为true，则为true
// var a = 1, b = 2;
// console.log(a === b);
// console.log(a * b);
// console.log(a == 1 && b<1);
// 控制语句 if switch
// if 三目运算符
// if () {}
// if (1<2) {
// console.log("if");
// } else {
// console.log("else");
// }
// 1<2 ? console.log("if") : console.log("else")
// if () {
// } else if () {
// } else if (){
// } else {
// }
// var type = "社会"
// switch (type) {
// case "社会":
// break;
// case "教育":
// break;
// default:
// break;
// }
// 数组 Array
// var arr = new Array();
// arr[0] = 1;
// arr[1] = 2;
// arr[2] = 3;
// console.log(arr[0]);
// var arr = new Array(1,2,3);
// var arr = [1,2,3,4,5,6,7,8,9,11,11,334,556];
// console.log(arr);
// 循环语句 for while forEach map，
// filter，for of，for in，reduce
// for (var i = 0; i< arr.length;i++) {
// console.log(arr[i]);
// }
// arr.forEach( function(val, index){
// console.log(index);
// console.log(val);
// })
// while
// var i = 0
// while (i>-1) {
// console.log(i);
// i++;
// }
// var i = 0
// do {
// console.log(i);
// i++;
// } while (i<10);
// break 语句用于跳出循环。
// continue 用于跳过循环中的一个迭代。
// // 坑 无限ajax，本地缓存
// for (;;) {
// console.log(111);
// }
// 对象(Object) class(类)
// 现实生活中的具体事物的封装
//
// var obj = new Object();
// obj.aaa = "哈哈哈";
// obj.ddd = "dqdwqdqw";
// obj.rrrr = "dqwdq";
// console.log(obj.aaa);
// console.log(obj['ddd']);
// var obj = new Object({
// aaa: '哈哈哈',
// ddd: 1111
// });
// console.log(obj);
// var obj = {
// aaa: '哈哈哈',
// ddd: 1111,
// 0: 111
// }
// console.log(obj);
// console.log(obj['0']);
// var arr = [
// {
// id: 1,
// list: [
// {
// title: '1111'
// }
// ]
// },
// ];
// console.log(arr[0].list[0].title);
// var car = {
// color: 'red',
// speed: '6.7s',
// start: function () {
// console.log("车启动了");
// },
// stop: function () {
// console.log("车停止了");
// }
// }
// console.log(car.color);
// car.start()
// 函数(Function)
// 作用：把具有相同功能的代码封装起来，方便下次使用
// 函数 参数
// function getName() {
// var result = 0;
// Array.from(arguments).forEach(function(val) {
// result+= val
// });
// return result;
// }
// var a = getName
// a();
// console.log(getName(10,30,40,50,60,70));
// var getName = function () {
// }
// 变量 局部作用域
// 全局作用域
// 变量提升
// function a() {
// var b = 1;
// console.log(b); // 1
// }
// a();
// console.log(b); // 1
// 闭包
// 函数内部的函数，内部函数访问外包函数的变量
// function a() {
// var x = 0;
// var add = function () {
// x += 1;
// }
// var b = function () {
// return x;
// }
// return {getValue: b,add: add};
// }
// var c = a();
// c.add()
// console.log(c.getValue()); // 1
// var e = a();
// console.log(e.getValue());
// 异步
// 同步
// 回调函数
// promise
// function a() {
// var name = null;
// return new Promise(function (success, error) {
// setTimeout(function () {
// name = "张三";
// success(name)
// }, 3000);
// })
// }
// var c = async function () {
// console.log(await a());
// console.log("11111");
// console.log("456487")
// }
// c()
// a()
// .then(function(res) {
// console.log(res);
// })
// var v = a();
// console.log(v);
// a(function(res) {
// console.log(res);
// })
</script>
</html>

28
历届学生/逯帅帅/每日课程/2021-03-04/笔记.txt Normal file
View File

@@ -0,0 +1,28 @@
javascript
弱类型
java , c# 强类型
处理动画效果，表单验证
js 后端，服务器，桌面端，手机端
|
|
nodejs
|
js es5
es6,7,8,9,10
typescript 就是js的补丁（让js变成真正后端语言）
js (window)
dom document 控制页面（html + css）
bom（浏览器的） alert

45
历届学生/逯帅帅/每日课程/2021-03-05/index.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>
<style>
.none {
width: 200px;
}
</style>
</head>
<body>
<!-- <button onclick="test()">点我</button> -->
<button>点我</button>
</body>
<script>
// 事件 在浏览器中的某些（一堆类型）动作就是事件
// 1 事件源 2：事件类型 3：事件处理逻辑
var button = document.querySelector("button")
console.log(button);
// function tests () {
// alert(1)
// }
button.onclick = function () {
button.classList.toggle("none")
}
// button.addEventListener('click', function() {
// alert("111")
// })
// button.addEventListener('click', function() {
// alert("222")
// })
</script>
</html>

35
历届学生/逯帅帅/每日课程/2021-03-09/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!--<script>-->
<!-- function getData(res) {-->
<!-- console.log(res)-->
<!-- }-->
<!--</script>-->
<!--<script src="http://127.0.0.1:3000?a=getData"></script>-->
<script>
// 1：拿出手机 （初始化一个新的ajax对象）
var ajax = new XMLHttpRequest();
// 2：设置号码
ajax.open("GET","http://127.0.0.1:3001");
// 3：拨号
ajax.send();
// 4：拨号监听
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 ) {
if (ajax.status == 200) {
console.log(JSON.parse(ajax.response))
} else {
console.log("网络请求出错")
}
}
}
</script>
</html>

61
历届学生/逯帅帅/每日课程/2021-03-09/笔记.txt Normal file
View File

@@ -0,0 +1,61 @@
ajax：
web开发两种模式
后端渲染
后端 80%功能
前端 20%页面
前后端分离
后端 数据，和服务器安全 接口 50%
|
|
ajax
|
|
前端 数据渲染，页面功能，路由控制，权限控制 50%
open(method)
method:
get 从服务器获取资源 （查）
post 前端向服务器提交数据 （增）
put 前端向服务器提交了更新请求 （改）
delete 前端向服务器提交了删除请求 （删）
get 和 post 的区别
1：请求参数传递的方式不一样，
get：http://1.com?id=1&name=2 地址栏传参
post: 放在请求体body中的 请求体传参
2：get 会产生浏览器历史记录 ，前进后退
post 不会
ajax 同源策略(CORS)
浏览器会检查前后端的网址是否一致
端口
协议
域名
前端：http://localhost:63342/
后端：http://127.0.0.1:3000/
ajax解决浏览器的跨域？
1：cors解决
后端添加请求头来允许前端访问 Access-Control-Allow-Origin
2：jsonp
不是ajax，他是js文件资源请求
把ajax伪装成js文件资源请求，绕过浏览器的 同源策略
回调来拿回数据
3：后端代理
A前端（自己） ---- C后端（别人）
A前端（自己） ---- B后端（自己）---- C后端（别人）

0
历届学生/逯帅帅/每日课程/2021-03-16/index.js Normal file
View File

3
历届学生/逯帅帅/每日课程/2021-03-16/笔记.txt Normal file
View File

@@ -0,0 +1,3 @@
jquery 就是对原生js进行一个封装
它是一个庞大的原生js工具库

12
历届学生/逯帅帅/每日课程/2021-03-19/config/index.js Normal file
View File

@@ -0,0 +1,12 @@
function a() {
console.log("assss")
}
function b() {}
function c() {}
function d() {}
module.exports = { a,b,c,d }
// module.exports = {
// test: '111'
// }

6
历届学生/逯帅帅/每日课程/2021-03-19/http.js Normal file
View File

@@ -0,0 +1,6 @@
const http = require('http');
http.createServer({}, (req, res) => {
res.writeHead(200);
res.end('hello');
}).listen(8000);

12
历届学生/逯帅帅/每日课程/2021-03-19/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>测试</h2>
</body>
</html>

3
历届学生/逯帅帅/每日课程/2021-03-19/index.js Normal file
View File

@@ -0,0 +1,3 @@
var a = require("./config")
console.log(a)

27
历届学生/逯帅帅/每日课程/2021-03-19/main.js Normal file
View File

@@ -0,0 +1,27 @@
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

28
历届学生/逯帅帅/每日课程/2021-03-19/package-lock.json generated Normal file
View File

@@ -0,0 +1,28 @@
{
"name": "2021-03-19",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/node": {
"version": "14.14.35",
"resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.35.tgz?cache=0&sync_timestamp=1615835662835&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.35.tgz",
"integrity": "sha1-QslTpOKxirkx9yR35wEhcvT/oxM="
},
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608609170235&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
"integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
"dev": true,
"requires": {
"follow-redirects": "^1.10.0"
}
},
"follow-redirects": {
"version": "1.13.3",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz?cache=0&sync_timestamp=1614436920073&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.3.tgz",
"integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
"dev": true
}
}
}

18
历届学生/逯帅帅/每日课程/2021-03-19/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "2021-03-19",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "/Applications/Electron.app/Contents/MacOS/Electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1"
},
"devDependencies": {
"@types/node": "^14.14.35"
}
}

55
历届学生/逯帅帅/每日课程/2021-03-19/笔记.txt Normal file
View File

@@ -0,0 +1,55 @@
nodejs 是让js运行在后端的一个运行环境
js 运行在客户端浏览器
js 可以运行在后端
nodejs
c++
v8
nodejs 本意 是让 js 成为后端语言，node_modules
typescript + nodejs ==== java
主要应用场景
开发前端
gulp webpack vue
模块
nodejs 内置模块
第三方模块 npm 包管理工具 https://www.npmjs.com/
java maven gradle
php com
python pip
nodejs
|
|
deno typescript(js) Rust(c++)
nodejs
package.json 文件 用来描述这个项目的配置和依赖等信息
npm init 初始化一个新的 package.json
npm init -y
npm install(i) 下载一个模块
--save-dev -D 将模块安装到开发环境下 devDependencies
--save -S 将模块安装到正式环境下 dependencies
-g 全局安装
npm run 命令名称 运行一个命令
nodejs nw.js electron.js

163
历届学生/逯帅帅/每日课程/2021-03-23/component.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app">
<h3>{{ '哈哈哈哈哈' | spl }}</h3>
<button @click="a">哈哈哈</button>
<lb-hello>
<template v-slot:back>
<h1>返回按钮</h1>
</template>
<template v-slot:action>
<h1>喜欢 和 分享</h1>
</template>
</lb-hello>
<lb-swiper @sclick="getData"></lb-swiper>
<h2>qdqwdwq</h2>
<lb-footer ref="footer" :footer-arr="tabs"></lb-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 组件？
// 就是使用频率搞的html代码块 js function
// 全局组件
// 局部组件
// 父子组件之间的数据传递
// 父 ---> 子 props
// 子 ---> 父 $emit
// 父 访问 子 的方法 $refs
// 反过来？ 和 兄弟之间的相互访问 $parent $root
// 生命周期
Vue.component('lb-hello', {
template: `
<div>
<div class="back">
<slot name="back"></slot>
</div>
<h2>全局组件</h2>
<div class="action">
<slot name="action"></slot>
</div>
</div>
`,
data() {
return {}
},
methods: {}
})
var footer = {
template: `
<div>
<p>{{test}}</p>
<lb-hello></lb-hello>
<ul>
<li v-for="(item,index) in footerArr || footer">{{item.title}}</li>
</ul>
</div>
`,
props: {
footerArr: {
type: Array,
default: () => []
},
test: {
type: String,
default: '这默认数值'
}
},
data () {
return {
footer: [
{ title: '商城' },
{ title: '购物车' },
{ title: '订单' },
{ title: '返回首页' },
]
}
},
created() {
// console.log("======: ",this.$parent.$data.tabs)
console.log(this.$parent.$children[1])
},
methods: {
footertest() {
console.log("footer 子组件的方法")
}
}
};
var swiper = {
template: `
<button @click="setSata">点我</button>
`,
data() {
return {
arr: 'swiper的数据'
}
},
methods: {
setSata() {
this.$emit('sclick', this.arr)
}
}
}
// 代码片段
var mix = {
data () {
return {
page: 0,
totalPage: 100
}
},
methods: {
}
};
new Vue({
el: '.app',
mixins: [mix],
data: {
tabs: [
{ title: '首页' },
{ title: '门店' },
{ title: '商城' },
{ title: '我的' },
]
},
created() {
console.log(this.page)
},
methods: {
getData(res) {
console.log(res)
},
testf(res) {
console.log(res)
},
a () {
this.$refs.footer.footertest()
}
},
filters: {
spl(val) {
return val.substr(0,1)
}
},
components: {
'lb-footer':footer,
'lb-swiper':swiper,
}
})
</script>
</html>

87
历届学生/逯帅帅/每日课程/2021-03-23/index.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="main" v-cloak>
<h2>{{ hello }}</h2>
<ul v-once>
<li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
</ul>
<ul>
<li v-for="(value,key) in obj">{{ key }} {{ value }}</li>
</ul>
<img :src="img" alt=""/>
<p v-if="isLogin == '1' ">1</p>
<p v-else-if="isLogin == '2'">2</p>
<p v-else-if="isLogin == '3'">3</p>
<p v-else>都不满足</p>
<h2 v-show="isShow">v-show</h2>
<div v-html="content"></div>
<input type="text" v-model="userName" placeholder="请输入账户">
{{userName}}
<button @click="test">点我</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// vue 指令 就是一堆用在标签上的属性
// v-for 循环数据到页面上的
// v-bind 绑定标签的属性 简写 :
// v-if 根据条件的真假，决定div是显示
// v-show 根据条件的真假，决定div是显示
// 差别1：v-if会删除dom元素 v-show 是display 进行隐藏
// 差别2：v-if不适合用在数据量大的场景，
// v-html 把html渲染到页面上
// v-text 把内容渲染到页面上
// v-model 用在输入框上
// v-on 绑定事件 @
// watch 用来实现对 变量的监听
// computed 用来实现计算缓存的
var vm = new Vue({
el: '.main',
data: {
hello: '这是第一个vue项目',
img: 'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
isLogin: '5',
userName: '张三',
isShow: false,
content: '<h2>这是测试标题</h2>',
list: [
{id:1,name: '哈哈哈1'},
{id:2,name: '哈哈哈2'},
{id:3,name: '哈哈哈3'},
],
obj: {
id: 1,
name: 222
}
},
methods: {
test() {
this.test2();
},
test2() {
alert(this.userName)
}
}
});
</script>
</html>

70
历届学生/逯帅帅/每日课程/2021-03-23/tabs.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
color: red;
}
.content li {
display: none;
}
.content-active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in tabs"
:class="index == currentIndex ? 'title': ''"
@click="tabChange(index)">
{{item.title}}
</li>
</ul>
<ul class="content">
<li v-for="(item,index) in tabs"
:class="index == currentIndex ? 'content-active': ''">
{{item.content}}
</li>
</ul>
<h2>{{dddd}}</h2>
<h3>{{dddd}}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{ title: '社会', content: '社会的内容' },
{ title: '社会1', content: '社会的内容1' },
{ title: '社会2', content: '社会的内容2' },
]
},
watch: {
currentIndex (newval,oldval) {
console.log("newval: ", newval)
console.log("oldval: ", oldval)
}
},
methods: {
tabChange(i) {
this.currentIndex = i;
}
},
computed: {
dddd() {
console.log(11111)
return this.currentIndex
}
}
})
</script>
</html>

166
历届学生/逯帅帅/每日课程/2021-03-23/vue-router.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.router-link-exact-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/index">首页</router-link>
<router-link to="/about">我的</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div class="content">
<router-view></router-view>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Index = {
template: `
<div>
<ul>
<router-link tag="li" :to="{ path: '/info', query: { id: item.id } }" v-for="item in newsList" >
{{item.title}}
</router-link>
</ul>
</div>
`,
data() {
return {
newsList: [
{ id: 1, title: '哈哈'},
{ id: 2, title: '哈哈'},
{ id: 3, title: '哈哈'},
]
}
},
methods: {
goInfo(id) {
this.$router.push({
path: '/info',
query: {
id: id
}
})
}
}
}
const About = {template: '<div>我的</div>'};
const Login = {
template: '<div @click="LoginSub">登录</div>',
methods: {
LoginSub() {
localStorage.setItem("token","W3456754567UIUYTFRDGFHNGRE7")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
}
}
}
};
const Info = () => {
return {
template: `
<div>
详情 {{ $route.query.id }}
</div>
`,
created() {
console.log(this.$route.query.id)
}
}
};
const routes = [
{
path: '/index',
component: Index,
meta: {
title: '首页',
isLogin: false
}
},
{
path: '/about',
component: About,
meta: {
title: '我的',
isLogin: true
}
},
{
path: '/login',
component: Login,
meta: {
title: '登录',
isLogin: false
}
},
{
path: '/info',
component: Info(),
name: 'info',
meta: {
title: '详情页',
isLogin: false
}
},
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
if (to.meta.isLogin) {
// 是否登录
if (localStorage.getItem("token") != null) {
next()
} else {
next({
path: '/login',
query: {
from: to.path
}
})
}
} else {
next()
}
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router,
el: '#app',
});
</script>
</html>

3146
历届学生/逯帅帅/每日课程/2021-03-23/vue-router.js Normal file
View File

File diff suppressed because it is too large Load Diff

75
历届学生/逯帅帅/每日课程/2021-03-23/笔记.txt Normal file
View File

@@ -0,0 +1,75 @@
前端发展三个阶段
1：第一阶段（后端渲染）
2：mvc 化前端开发
nodejs
3：mvvm 年代（去dom化的年代）
mvvm： vue.js jsx react.js angular.js
尤雨溪
php laravel thinkphp yii
m（model 数据）v（view 页面）c（controller 控制器）：
/home.php (controller)
m(model 数据) v(view 视图) vm（view model）：
model ajax请求到的数据
|
|
vm
|
|
view 你写的html页面
vue.js 发展史
vue 1.x
vue 2.x
1: option api 5
typescript
2: class api 对 typescript 的一次兼容
2
vue 3.x 基于 typescript 重写的一些vue版本
3: Composition API
3
vue-router 专门负责页面跳转和切换的
spa 单页web应用
hash
http://www.a.com/#/index
http://www.a.com/#/about
history
http://www.a.com/index
http://www.a.com/about
两种传参方式：
query
http://www.a.com/#/index?id=1&page=2
this.$route.query
params
http://www.a.com/#/index/1/2
this.$route.params
this.$route 路由参数信息
this.$router 路由实例

46
历届学生/逯帅帅/每日课程/2021-04-09/笔记.txt Normal file
View File

@@ -0,0 +1,46 @@
原生
android (java，Kotlin)
ios （object-c，Swift）
缺点：
更新不及时
增量更新
全量更新
开发时间长，成本高
混合app
第二阶段：
想用html，css，js来写app
ionic
cordova
mui
第三阶段：
react navite android ios
生态
uniapp 开发10端应用
|
mpvue（美团）（ast语法树）
js
|
webview (uniapp也做了优化)
|
java 中间层 （uniapp.jar）
|
android 手机
谷歌 flutter(ui) android, ios, macos, linux,window, web
weex （vue）
js（typescript） vue
dart ()