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

4
历届学生/逯帅帅/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
.idea
.vscode
.node_modules
node_modules

3
历届学生/逯帅帅/README.md Normal file
View File

@@ -0,0 +1,3 @@
dddd
sdss111
aaaa

38
历届学生/逯帅帅/vue-cli-message.txt Normal file
View File

@@ -0,0 +1,38 @@
Vue-cli
2.x
复杂配置文件更多，配置更灵活
build 项目打包用的
config 项目的开发和正式阶段的一些配置
node_modules 存放第三方插件
static 存放静态资源 css，img，font
src 存放源码
assets 存放静态资源 css，img，font
components 放公共组件的地方
router 路由的配置文件
App.vue
.babelrc babel 帮高版本的js语法转换为低版本的代码
.editorconfig 给编辑器看的配置文件
eslint的文件
.eslintignore 忽略哪些文件不检测代码语法
.eslintrc.js eslint 的配置文件
.gitignore git 的忽略文件
.postcssrc.js 专门给你处理css3代码兼容的
webpack 项目打包工具
index.html
3.x
简单和傻瓜式

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 ()

3
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/.browserslistrc Normal file
View File

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

14
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/.eslintrc.js Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};

23
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/.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?

24
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/README.md Normal file
View File

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

3
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/babel.config.js Normal file
View File

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

13134
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

37
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/package.json Normal file
View File

@@ -0,0 +1,37 @@
{
"name": "vuecli3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vant": "^2.12.10",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^5.0.1",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"pug": "^3.0.2",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.1.0",
"style-resources-loader": "^1.4.1",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue-template-compiler": "^2.6.11"
}
}

BIN
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

24
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/public/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" type="text/css"></link>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>

19
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/App.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>

2
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/_.styl Normal file
View File

@@ -0,0 +1,2 @@
@import "public/_.styl";

2
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/page/Home.styl Normal file
View File

@@ -0,0 +1,2 @@
h2
color red500

4
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/public/_.styl Normal file
View File

@@ -0,0 +1,4 @@
@import "clear.styl";
@import "color.styl";
@import "mixins.styl";
@import "vars.styl";

424
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/public/clear.styl Normal file
View File

@@ -0,0 +1,424 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

304
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/public/color.styl Normal file
View File

@@ -0,0 +1,304 @@
red50 = #ffebee;
red100 = #ffcdd2;
red200 = #ef9a9a;
red300 = #e57373;
red400 = #ef5350;
red500 = #f44336;
red600 = #e53935;
red700 = #d32f2f;
red800 = #c62828;
red900 = #b71c1c;
redA100 = #ff8a80;
redA200 = #ff5252;
redA400 = #ff1744;
redA700 = #d50000;
red = red500;
pink50 = #fce4ec;
pink100 = #f8bbd0;
pink200 = #f48fb1;
pink300 = #f06292;
pink400 = #ec407a;
pink500 = #e91e63;
pink600 = #d81b60;
pink700 = #c2185b;
pink800 = #ad1457;
pink900 = #880e4f;
pinkA100 = #ff80ab;
pinkA200 = #ff4081;
pinkA400 = #f50057;
pinkA700 = #c51162;
pink = pink500;
purple50 = #f3e5f5;
purple100 = #e1bee7;
purple200 = #ce93d8;
purple300 = #ba68c8;
purple400 = #ab47bc;
purple500 = #9c27b0;
purple600 = #8e24aa;
purple700 = #7b1fa2;
purple800 = #6a1b9a;
purple900 = #4a148c;
purpleA100 = #ea80fc;
purpleA200 = #e040fb;
purpleA400 = #d500f9;
purpleA700 = #aa00ff;
purple = purple500;
deepPurple50 = #ede7f6;
deepPurple100 = #d1c4e9;
deepPurple200 = #b39ddb;
deepPurple300 = #9575cd;
deepPurple400 = #7e57c2;
deepPurple500 = #673ab7;
deepPurple600 = #5e35b1;
deepPurple700 = #512da8;
deepPurple800 = #4527a0;
deepPurple900 = #311b92;
deepPurpleA100 = #b388ff;
deepPurpleA200 = #7c4dff;
deepPurpleA400 = #651fff;
deepPurpleA700 = #6200ea;
deepPurple = deepPurple500;
indigo50 = #e8eaf6;
indigo100 = #c5cae9;
indigo200 = #9fa8da;
indigo300 = #7986cb;
indigo400 = #5c6bc0;
indigo500 = #3f51b5;
indigo600 = #3949ab;
indigo700 = #303f9f;
indigo800 = #283593;
indigo900 = #1a237e;
indigoA100 = #8c9eff;
indigoA200 = #536dfe;
indigoA400 = #3d5afe;
indigoA700 = #304ffe;
indigo = indigo500;
blue50 = #e3f2fd;
blue100 = #bbdefb;
blue200 = #90caf9;
blue300 = #64b5f6;
blue400 = #42a5f5;
blue500 = #2196f3;
blue600 = #1e88e5;
blue700 = #1976d2;
blue800 = #1565c0;
blue900 = #0d47a1;
blueA100 = #82b1ff;
blueA200 = #448aff;
blueA400 = #2979ff;
blueA700 = #2962ff;
blue = blue500;
lightBlue50 = #e1f5fe;
lightBlue100 = #b3e5fc;
lightBlue200 = #81d4fa;
lightBlue300 = #4fc3f7;
lightBlue400 = #29b6f6;
lightBlue500 = #03a9f4;
lightBlue600 = #039be5;
lightBlue700 = #0288d1;
lightBlue800 = #0277bd;
lightBlue900 = #01579b;
lightBlueA100 = #80d8ff;
lightBlueA200 = #40c4ff;
lightBlueA400 = #00b0ff;
lightBlueA700 = #0091ea;
lightBlue = lightBlue500;
cyan50 = #e0f7fa;
cyan100 = #b2ebf2;
cyan200 = #80deea;
cyan300 = #4dd0e1;
cyan400 = #26c6da;
cyan500 = #00bcd4;
cyan600 = #00acc1;
cyan700 = #0097a7;
cyan800 = #00838f;
cyan900 = #006064;
cyanA100 = #84ffff;
cyanA200 = #18ffff;
cyanA400 = #00e5ff;
cyanA700 = #00b8d4;
cyan = cyan500;
teal50 = #e0f2f1;
teal100 = #b2dfdb;
teal200 = #80cbc4;
teal300 = #4db6ac;
teal400 = #26a69a;
teal500 = #009688;
teal600 = #00897b;
teal700 = #00796b;
teal800 = #00695c;
teal900 = #004d40;
tealA100 = #a7ffeb;
tealA200 = #64ffda;
tealA400 = #1de9b6;
tealA700 = #00bfa5;
teal = teal500;
green50 = #e8f5e9;
green100 = #c8e6c9;
green200 = #a5d6a7;
green300 = #81c784;
green400 = #66bb6a;
green500 = #4caf50;
green600 = #43a047;
green700 = #388e3c;
green800 = #2e7d32;
green900 = #1b5e20;
greenA100 = #b9f6ca;
greenA200 = #69f0ae;
greenA400 = #00e676;
greenA700 = #00c853;
green = green500;
lightGreen50 = #f1f8e9;
lightGreen100 = #dcedc8;
lightGreen200 = #c5e1a5;
lightGreen300 = #aed581;
lightGreen400 = #9ccc65;
lightGreen500 = #8bc34a;
lightGreen600 = #7cb342;
lightGreen700 = #689f38;
lightGreen800 = #558b2f;
lightGreen900 = #33691e;
lightGreenA100 = #ccff90;
lightGreenA200 = #b2ff59;
lightGreenA400 = #76ff03;
lightGreenA700 = #64dd17;
lightGreen = lightGreen500;
lime50 = #f9fbe7;
lime100 = #f0f4c3;
lime200 = #e6ee9c;
lime300 = #dce775;
lime400 = #d4e157;
lime500 = #cddc39;
lime600 = #c0ca33;
lime700 = #afb42b;
lime800 = #9e9d24;
lime900 = #827717;
limeA100 = #f4ff81;
limeA200 = #eeff41;
limeA400 = #c6ff00;
limeA700 = #aeea00;
lime = lime500;
yellow50 = #fffde7;
yellow100 = #fff9c4;
yellow200 = #fff59d;
yellow300 = #fff176;
yellow400 = #ffee58;
yellow500 = #ffeb3b;
yellow600 = #fdd835;
yellow700 = #fbc02d;
yellow800 = #f9a825;
yellow900 = #f57f17;
yellowA100 = #ffff8d;
yellowA200 = #ffff00;
yellowA400 = #ffea00;
yellowA700 = #ffd600;
yellow = yellow500;
amber50 = #fff8e1;
amber100 = #ffecb3;
amber200 = #ffe082;
amber300 = #ffd54f;
amber400 = #ffca28;
amber500 = #ffc107;
amber600 = #ffb300;
amber700 = #ffa000;
amber800 = #ff8f00;
amber900 = #ff6f00;
amberA100 = #ffe57f;
amberA200 = #ffd740;
amberA400 = #ffc400;
amberA700 = #ffab00;
amber = amber500;
orange50 = #fff3e0;
orange100 = #ffe0b2;
orange200 = #ffcc80;
orange300 = #ffb74d;
orange400 = #ffa726;
orange500 = #ff9800;
orange600 = #fb8c00;
orange700 = #f57c00;
orange800 = #ef6c00;
orange900 = #e65100;
orangeA100 = #ffd180;
orangeA200 = #ffab40;
orangeA400 = #ff9100;
orangeA700 = #ff6d00;
orange = orange500;
deepOrange50 = #fbe9e7;
deepOrange100 = #ffccbc;
deepOrange200 = #ffab91;
deepOrange300 = #ff8a65;
deepOrange400 = #ff7043;
deepOrange500 = #ff5722;
deepOrange600 = #f4511e;
deepOrange700 = #e64a19;
deepOrange800 = #d84315;
deepOrange900 = #bf360c;
deepOrangeA100 = #ff9e80;
deepOrangeA200 = #ff6e40;
deepOrangeA400 = #ff3d00;
deepOrangeA700 = #dd2c00;
deepOrange = deepOrange500;
brown50 = #efebe9;
brown100 = #d7ccc8;
brown200 = #bcaaa4;
brown300 = #a1887f;
brown400 = #8d6e63;
brown500 = #795548;
brown600 = #6d4c41;
brown700 = #5d4037;
brown800 = #4e342e;
brown900 = #3e2723;
brown = brown500;
blueGrey50 = #eceff1;
blueGrey100 = #cfd8dc;
blueGrey200 = #b0bec5;
blueGrey300 = #90a4ae;
blueGrey400 = #78909c;
blueGrey500 = #607d8b;
blueGrey600 = #546e7a;
blueGrey700 = #455a64;
blueGrey800 = #37474f;
blueGrey900 = #263238;
blueGrey = blueGrey500;
grey50 = #fafafa;
grey100 = #f5f5f5;
grey200 = #eeeeee;
grey300 = #e0e0e0;
grey400 = #bdbdbd;
grey500 = #9e9e9e;
grey600 = #757575;
grey700 = #616161;
grey800 = #424242;
grey900 = #212121;
grey = grey500;
black = #000000;
white = #ffffff;
transparent = rgba(0, 0, 0, 0);
fullBlack = rgba(0, 0, 0, 1);
darkBlack = rgba(0, 0, 0, 0.87);
lightBlack = rgba(0, 0, 0, 0.54);
minBlack = rgba(0, 0, 0, 0.26);
faintBlack = rgba(0, 0, 0, 0.12);
fullWhite = rgba(255, 255, 255, 1);
darkWhite = rgba(255, 255, 255, 0.87);
lightWhite = rgba(255, 255, 255, 0.54);

0
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/public/mixins.styl Normal file
View File

43
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/assets/styl/public/vars.styl Normal file
View File

@@ -0,0 +1,43 @@
@import "./color.styl";
fontFamily = Roboto, Lato, sans-serif;
// primary and accent
primaryColor = blue; // 主色
secondaryColor = pinkA200;
successColor = green;
warningColor = yellow600;
errorColor = red;
infoColor = blue;
trackColor = grey400;
// textColor or borderColor
textColor = darkBlack;
secondaryTextColor = fade(fullBlack, 54%);
alternateTextColor = white;
borderColor = fade(fullBlack, 12%);
disabledColor = fade(fullBlack, 38%);
// background
backgroundColor = grey50;
dialogBackgroundColor = white; // dialogs or cards
chipBackgroundColor = grey300;
// icon color
activeIconColor = fade(fullBlack, 54%);
inActiveIconColor = fade(fullBlack, 38%);
// spaceing
iconSize = 24px;
desktopGutter = 24px;
desktopGutterMore = 32px;
desktopGutterLess = 16px;
desktopGutterMini = 8px;
desktopKeylineIncrement = 64px;
desktopDropDownMenuItemHeight = 32px;
desktopDropDownMenuFontSize = 15px;
desktopDrawerMenuItemHeight = 48px;
desktopSubheaderHeight = 48px;
desktopToolbarHeight = 56px;
// animate
easeOutFunction = cubic-bezier(0.23, 1, 0.32, 1);
easeInOutFunction = cubic-bezier(0.445, 0.05, 0.55, 0.95);

39
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
margin 40px 0 0
ul
list-style-type none
padding 0
li
display inline-block
margin 0 10px
a
color #42b983
</style>

32
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/config/index.js Normal file
View File

@@ -0,0 +1,32 @@
import Vant from 'vant'
//TODO 这事没写完的代码，
export default {
devBaseUrl: '/apis',
testBaseUrl: 'http://47.114.153.249:3000/api/json',
prodBaseUrl: 'http://47.114.153.249:3000/api/json',
ApiList: {
radio: '/radio', // radio页面
channelList: '/channelList', // tv列表
channelComment: '/channelComment', // tv评论
liveList:'/liveList', //融媒直播
liveDetail:'/liveDetail', //直播详情
newsDetail: 'newsDetail', // 新闻页面接口
videoDetail: '/videoDetail', // 视频页面接口
interactDetail: '/interactDetail' // 用户注册接口
},
VuePlugIn: [ Vant ],
getUrl () {
switch (process.env.NODE_ENV) {
case 'development':
return this.devBaseUrl
// eslint-disable-next-line no-unreachable
break
case 'test':
return this.testBaseUrl
break
case 'production':
return this.prodBaseUrl
break
}
}
}

64
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/http/index.js Normal file
View File

@@ -0,0 +1,64 @@
import axios from 'axios';
import config from '../config';
import { Toast } from 'vant';
class Http {
constructor() {
axios.defaults.baseURL = config.getUrl();
this.interceptors();
}
async get(option) {
return await axios.get(option.url, {
params: option.data,
headers: Object.assign({
token: localStorage.getItem("token")
}, option.headers)
});
}
async post(option) {
return await axios.post(option.url, option.data, {
headers: Object.assign({
token: localStorage.getItem("token")
}, option.headers)
});
}
interceptors() {
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
Toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
});
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
Toast.clear();
var data = response.data;
switch(data.resultCode) {
case "000":
return data.data;
case "500":
Toast.fail(data.message);
throw new Error(data.message);
break;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
}
}
export default new Http()

16
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/main.js Normal file
View File

@@ -0,0 +1,16 @@
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import config from './config';
import http from './service/_';
Vue.config.productionTip = false;
Vue.prototype.$http = http;
config.VuePlugIn.forEach(v => Vue.use(v))
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");

8
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/mixins/more.js Normal file
View File

@@ -0,0 +1,8 @@
export default {
data() {
return {
page: 1,
totalPage: 0
}
},
}

23
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/router/index.js Normal file
View File

@@ -0,0 +1,23 @@
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"),
},
{
path: "/about",
name: "About",
component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
routes,
});
export default router;

76
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/service/IndexService.js Normal file
View File

@@ -0,0 +1,76 @@
import http from '../http'
import config from '../config'
export default class IndexService {
async radio (data = {}, header = {}) {
// eslint-disable-next-line no-return-await
return await http.get({
url: config.ApiList.radio,
data: data,
headers: header
})
}
async channelList (data = {}, header = {}) {
// eslint-disable-next-line no-return-await
return await http.get({
url: config.ApiList.channelList,
data: data,
headers: header
})
}
async channelComment (data = {}, header = {}) {
// eslint-disable-next-line no-return-await
return await http.get({
url: config.ApiList.channelComment,
data: data,
headers: header
})
}
async videoDetail (data = {}, header = {}) {
// eslint-disable-next-line no-return-await
return await http.get({
url: config.ApiList.videoDetail,
data: data,
headers: header
})
}
async interactDetail (data = {}, header = {}) {
// eslint-disable-next-line no-return-await
return await http.get({
url: config.ApiList.interactDetail,
data: data,
headers: header
})
}
async channelComment(data = {}, header = {}) {
return await http.get({
url: config.ApiList.channelComment,
data: data,
headers: header
});
}
//融媒直播
async liveList(data = {}, header = {}) {
return await http.get({
url: config.ApiList.liveList,
data: data,
headers: header
});
}
//直播详情
async liveDetail(data = {}, header = {}) {
return await http.get({
url: config.ApiList.liveDetail,
data: data,
headers: header
});
}
}

5
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/service/_.js Normal file
View File

@@ -0,0 +1,5 @@
import IndexService from './IndexService'
export default {
index: new IndexService()
}

5
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/views/About.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

21
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/src/views/Home.vue Normal file
View File

@@ -0,0 +1,21 @@
<template lang="pug">
.home
h2 首页
</template>
<script>
export default {
name: "Home",
data() {
return {};
},
async created() {
let res = await this.$http.index.radio();
console.log(res);
},
};
</script>
<style lang="stylus" scoped>
@import "~@page/Home.styl"
</style>

117
历届学生/逯帅帅/项目开发/上课项目/Vue3模板/vue.config.js Normal file
View File

@@ -0,0 +1,117 @@
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin')
var cdn = {
css: [
'https://cdn.bootcdn.net/ajax/libs/vant/2.12.9/index.min.css'
],
js: [
'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js',
'https://cdn.bootcss.com/axios/0.21.1/axios.min.js',
'https://cdn.bootcss.com/vant/2.12.10/vant.min.js',
]
}
module.exports = {
publicPath: './',
lintOnSave: false,
productionSourceMap: false,
parallel: require('os').cpus().length > 1,
devServer: {
hot: false,
port: 1314,
compress: true,
open: false,
openPage: '#/',
overlay: {
warnings: false,
errors: true
},
proxy: {
'/apis': {
target: 'http://115.159.153.142:9010/h5',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/apis': ''
}
}
}
},
configureWebpack:(config) => {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vant': 'vant'
}
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
};
},
chainWebpack: (config) => {
// 设置别名
config.resolve.alias
.set('@',resolve('./src'))
.set('@c',resolve('./src/components'))
.set('@router',resolve('./src/router'))
.set('@views',resolve('./src/views'))
.set('@page',resolve('./src/assets/styl/page'))
/**
* 导入全局css
* @type {*[]}
*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
// 第三方模块使用外链
config.plugin('html').tap(args => {
args[0].cdn = cdn;
return args;
});
/**
* 移除不必要的 prefetch 和 preload请求
*/
config.plugins.delete('prefetch');
config.plugins.delete('preload');
// 配置pug
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end();
}
}
function resolve(dir){
return path.join(__dirname,dir)
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/styl/_.styl'),
],
})
}

50
历届学生/逯帅帅/项目开发/上课项目/css练习/css属性笔记.txt Normal file
View File

@@ -0,0 +1,50 @@
1：字体类
最常用
font-size 设置字体大小
font-weight 设置字体加粗
text-decoration 设置文字的线
line-height 设置行高 一般用于 div 内部的文字的垂直居中
偶尔使用
letter-spacing 设置字符的左右边距的
text-shadow：颜色 x轴偏移距离 y轴偏移距离 阴影的模糊度 设置文字阴影
font-family: 设置字体风格的
自定义字体风格教程http://www.sharedblog.cn/post/126.html
不知道什么时候能使用
word-spacing 设置文字中空格大小的
2：文本类
text-indent 设置段落的首行缩进
text-overflow 文字超过父元素的宽度的时候，显示 ...
white-space 设置文字超过父元素的时候，是否可以换行显示
overflow 设置文字超过父元素的时候，如何展示
text-align 设置文字在父元素中的水平对齐方式，左left 中
center 右right
vertical-align 设置元素内部，多个行内元素的Y对齐方式
outline: none 去除按钮和输入框激活时候的外边框
border-radius 设置元素的圆角属性
box-shadow 设置div的阴影
list-style 设置ul或者 ol 中li的样式风格 none
filter 设置滤镜 常用 blur（模糊的）
display: 设置元素如何显示
1：可以让块标签和行标签相互转换
block 块标签
inline 行标签
inline-block 行内块标签
2：none 把元素隐藏起来
其他方式
2.1 visibility: hidden
2.2 width 0 height 0
2.3 opacity 0 ~ 1
2.4 标签上加 hidden

76
历届学生/逯帅帅/项目开发/上课项目/css练习/css属性练习.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>
<style>
a {
font-size: 112px;
color: red;
font-weight: 600;
text-shadow: #9e9e9e 19px 32px 2px;
margin: 0;
}
.test {
background: #9e9e9e;
}
.border {
border-left: 10px solid yellow;
border-right: 10px solid #ff000000;
border-top: 10px solid #0000ff00;
border-bottom: 10px solid #00800000;
width: 0px;
height: 0px;
width: 0;
height: 0;
}
ul li {
}
.cursor {
cursor: pointer;
}
</style>
</head>
<body>
<a href="">测试font-size</a>
<p>
吴孟达的一生经历了不少波折，年少成名的他，曾在走红后迷上赌博而债台高筑，同行不愿意找“烂泥扶不上墙”的他拍戏，生活艰难之下他想过自杀，后在好友周润发的暗中帮助下拍戏还清了巨债。
1991年，凭着在《天若有情》中出色的表现，达叔拿到了人生第一个“最佳男配角”奖。
纵然吴孟达经典作品不少，但最令人难忘的应该是与周星驰合作的喜剧。
1989年，洗心革面后的吴孟达与刚出道的周星驰合演《盖世豪侠》和《他来自江湖》，两人惊人的默契以及让人捧腹大笑的表演受到不少观众的好评。
</p>
<div class="test">
background 练习
</div>
<div class="border">
</div>
<ul>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
</ul>
<button class="cursor">cursor练习</button>
</body>
</html>

361
历届学生/逯帅帅/项目开发/上课项目/css练习/案例/demos.html Normal file
View File

@@ -0,0 +1,361 @@
<!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="http://at.alicdn.com/t/font_2389461_e4bex6gjme7.css">
<style>
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.box {
background: red;
height: 40px;
line-height: 40px;
}
.box p {
color: #fff;
}
.box_2 {
width: 50px;
}
.box_2 p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.align {
text-align: center;
}
.user img {
width: 50px;
height: 50px;
vertical-align: middle;
}
.search {
width: 160px;
height: 36px;
border: none;
outline: none;
border-radius: 18px;
padding-left: 16px;
padding-right: 39px;
box-sizing: border-box;
background: #f2f2f2 url("./search.png") no-repeat 127px center;
background-size: 12px;
}
.menu {
height: 34px;
background: #96b97d;
}
.center {
width: 1260px;
height: 100%;
margin: 0 auto;
}
.menu li {
float: left;
line-height: 34px;
margin-right: 20px;
}
.menu li a {
color: #fff;
}
.menu li a:hover {
color: #e3efd9
}
.menu_list {
width: 1024px;
padding: 12px 20px;
border: 1px solid #eaeaea;
background-color: #fff;
border-radius: 4px;
}
.menu_list li {
overflow: hidden;
}
.menu_title {
font-size: 18px;
font-weight: 700;
margin: 12px 0;
border-bottom: 1px solid #eaeaea;
padding-bottom: 5px;
}
.menu_title i {
font-size: 20px;
}
.item li {
padding: 6px 16px;
background-color: #f6f6f6;
border-radius: 5px;
color: #bbb;
margin: 0 8px 10px 0;
width: 28%;
float: left;
}
.item h4 {
color: #64854c;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.des {
overflow: hidden;
}
.des img {
width: 36px;
height: 36px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding-top: 6px;
}
.des span {
color: #666;
font-size: 12px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">
<p>line-height 垂直居中</p>
</div>
<div class="box_2">
<p>text-overflow 的案例</p>
</div>
<div class="align">
<p>text-align测试1</p>
<p>text-align测试2</p>
</div>
<div class="user">
<img src="https://upload.jianshu.io/users/upload_avatars/6860761/b343643c-5ced-4421-ab58-1274e7bfe704" alt="">
<span>张三</span>
</div>
<input class="search" type="text" placeholder="输入搜索内容">
<div class="menu">
<div class="center">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
<li>
<a href="">Node.js</a>
</li>
</ul>
</div>
</div>
<ul class="menu_list">
<li>
<div class="menu_title">
<i class="iconfont icon-caidan"></i>
<span>HTML / CSS</span>
</div>
<ul class="item">
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
</ul>
</li>
<li>
<div class="menu_title">
<i class="iconfont icon-caidan"></i>
<span>HTML / CSS</span>
</div>
<ul class="item">
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
</ul>
</li>
<li>
<div class="menu_title">
<i class="iconfont icon-caidan"></i>
<span>HTML / CSS</span>
</div>
<ul class="item">
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
<li>
<h4>【学习 HTML】</h4>
<div class="des">
<img src="./html.png" alt="">
<span>HTML，即超文本标记语言（Hyper Text Markup Language）</span>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>

BIN
历届学生/逯帅帅/项目开发/上课项目/css练习/案例/html.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
历届学生/逯帅帅/项目开发/上课项目/css练习/案例/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

44
历届学生/逯帅帅/项目开发/上课项目/html结构.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>Document 测试2222</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<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>
</div>
</div>
<div class="content">
<div class="left_menu"></div>
<div class="right_list"></div>
</div>
<div class="footer"></div>
</body>
</html>

12
历届学生/逯帅帅/项目开发/上课项目/my-project/.babelrc Normal file
View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

9
历届学生/逯帅帅/项目开发/上课项目/my-project/.editorconfig Normal file
View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

4
历届学生/逯帅帅/项目开发/上课项目/my-project/.eslintignore Normal file
View File

@@ -0,0 +1,4 @@
/build/
/config/
/dist/
/*.js

29
历届学生/逯帅帅/项目开发/上课项目/my-project/.eslintrc.js Normal file
View File

@@ -0,0 +1,29 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}

14
历届学生/逯帅帅/项目开发/上课项目/my-project/.gitignore vendored Normal file
View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

10
历届学生/逯帅帅/项目开发/上课项目/my-project/.postcssrc.js Normal file
View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

46
历届学生/逯帅帅/项目开发/上课项目/my-project/README.md Normal file
View File

@@ -0,0 +1,46 @@
# my-project
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
hls 视频切片技术
ffmpeg
m3u8
key: DAFEWRGETDHGRQEWRETWRGET
0.ts
1.ts
...
9.ts
100MB
10s 10MB
10断
video

41
历届学生/逯帅帅/项目开发/上课项目/my-project/build/build.js Normal file
View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

54
历届学生/逯帅帅/项目开发/上课项目/my-project/build/check-versions.js Normal file
View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

BIN
历届学生/逯帅帅/项目开发/上课项目/my-project/build/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

101
历届学生/逯帅帅/项目开发/上课项目/my-project/build/utils.js Normal file
View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

22
历届学生/逯帅帅/项目开发/上课项目/my-project/build/vue-loader.conf.js Normal file
View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

105
历届学生/逯帅帅/项目开发/上课项目/my-project/build/webpack.base.conf.js Normal file
View File

@@ -0,0 +1,105 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@c': resolve('src/components'),
'@view': resolve('src/view'),
'@page': resolve('src/assets/less/view'),
'@less': resolve('src/assets/less'),
'@img': resolve('./static/img')
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test:/\.pug$/,
loader: "pug-html-loader"
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

95
历届学生/逯帅帅/项目开发/上课项目/my-project/build/webpack.dev.conf.js Executable file
View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

145
历届学生/逯帅帅/项目开发/上课项目/my-project/build/webpack.prod.conf.js Normal file
View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

7
历届学生/逯帅帅/项目开发/上课项目/my-project/config/dev.env.js Normal file
View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

85
历届学生/逯帅帅/项目开发/上课项目/my-project/config/index.js Normal file
View File

@@ -0,0 +1,85 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/apis': {
// 测试环境
target: 'http://115.159.153.142:9020/h5', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

4
历届学生/逯帅帅/项目开发/上课项目/my-project/config/prod.env.js Normal file
View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

14
历届学生/逯帅帅/项目开发/上课项目/my-project/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

13783
历届学生/逯帅帅/项目开发/上课项目/my-project/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

83
历届学生/逯帅帅/项目开发/上课项目/my-project/package.json Normal file
View File

@@ -0,0 +1,83 @@
{
"name": "my-project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "bmy <2271608011@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.21.1",
"vant": "^2.12.10",
"videojs-contrib-hls": "^5.15.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue-video-player": "^5.0.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"less": "^4.1.1",
"less-loader": "^5.0.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-pxtorem": "^6.0.0",
"postcss-url": "^7.2.1",
"pug": "^3.0.2",
"pug-html-loader": "^1.1.5",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

11
历届学生/逯帅帅/项目开发/上课项目/my-project/postcss.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

14
历届学生/逯帅帅/项目开发/上课项目/my-project/src/App.vue Normal file
View File

@@ -0,0 +1,14 @@
<template lang="pug">
#app
router-view(:key="$route.fullPath")
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
@import "~@less/normalize";
</style>

3
历届学生/逯帅帅/项目开发/上课项目/my-project/src/assets/less/_.less Normal file
View File

@@ -0,0 +1,3 @@
@import './colors.less';
@import './vars.less';
@import './mixins.less';

304
历届学生/逯帅帅/项目开发/上课项目/my-project/src/assets/less/colors.less Normal file
View File

@@ -0,0 +1,304 @@
@red50: #ffebee;
@red100: #ffcdd2;
@red200: #ef9a9a;
@red300: #e57373;
@red400: #ef5350;
@red500: #f44336;
@red600: #e53935;
@red700: #d32f2f;
@red800: #c62828;
@red900: #b71c1c;
@redA100: #ff8a80;
@redA200: #ff5252;
@redA400: #ff1744;
@redA700: #d50000;
@red: @red500;
@pink50: #fce4ec;
@pink100: #f8bbd0;
@pink200: #f48fb1;
@pink300: #f06292;
@pink400: #ec407a;
@pink500: #e91e63;
@pink600: #d81b60;
@pink700: #c2185b;
@pink800: #ad1457;
@pink900: #880e4f;
@pinkA100: #ff80ab;
@pinkA200: #ff4081;
@pinkA400: #f50057;
@pinkA700: #c51162;
@pink: @pink500;
@purple50: #f3e5f5;
@purple100: #e1bee7;
@purple200: #ce93d8;
@purple300: #ba68c8;
@purple400: #ab47bc;
@purple500: #9c27b0;
@purple600: #8e24aa;
@purple700: #7b1fa2;
@purple800: #6a1b9a;
@purple900: #4a148c;
@purpleA100: #ea80fc;
@purpleA200: #e040fb;
@purpleA400: #d500f9;
@purpleA700: #aa00ff;
@purple: @purple500;
@deepPurple50: #ede7f6;
@deepPurple100: #d1c4e9;
@deepPurple200: #b39ddb;
@deepPurple300: #9575cd;
@deepPurple400: #7e57c2;
@deepPurple500: #673ab7;
@deepPurple600: #5e35b1;
@deepPurple700: #512da8;
@deepPurple800: #4527a0;
@deepPurple900: #311b92;
@deepPurpleA100: #b388ff;
@deepPurpleA200: #7c4dff;
@deepPurpleA400: #651fff;
@deepPurpleA700: #6200ea;
@deepPurple: @deepPurple500;
@indigo50: #e8eaf6;
@indigo100: #c5cae9;
@indigo200: #9fa8da;
@indigo300: #7986cb;
@indigo400: #5c6bc0;
@indigo500: #3f51b5;
@indigo600: #3949ab;
@indigo700: #303f9f;
@indigo800: #283593;
@indigo900: #1a237e;
@indigoA100: #8c9eff;
@indigoA200: #536dfe;
@indigoA400: #3d5afe;
@indigoA700: #304ffe;
@indigo: @indigo500;
@blue50: #e3f2fd;
@blue100: #bbdefb;
@blue200: #90caf9;
@blue300: #64b5f6;
@blue400: #42a5f5;
@blue500: #2196f3;
@blue600: #1e88e5;
@blue700: #1976d2;
@blue800: #1565c0;
@blue900: #0d47a1;
@blueA100: #82b1ff;
@blueA200: #448aff;
@blueA400: #2979ff;
@blueA700: #2962ff;
@blue: @blue500;
@lightBlue50: #e1f5fe;
@lightBlue100: #b3e5fc;
@lightBlue200: #81d4fa;
@lightBlue300: #4fc3f7;
@lightBlue400: #29b6f6;
@lightBlue500: #03a9f4;
@lightBlue600: #039be5;
@lightBlue700: #0288d1;
@lightBlue800: #0277bd;
@lightBlue900: #01579b;
@lightBlueA100: #80d8ff;
@lightBlueA200: #40c4ff;
@lightBlueA400: #00b0ff;
@lightBlueA700: #0091ea;
@lightBlue: @lightBlue500;
@cyan50: #e0f7fa;
@cyan100: #b2ebf2;
@cyan200: #80deea;
@cyan300: #4dd0e1;
@cyan400: #26c6da;
@cyan500: #00bcd4;
@cyan600: #00acc1;
@cyan700: #0097a7;
@cyan800: #00838f;
@cyan900: #006064;
@cyanA100: #84ffff;
@cyanA200: #18ffff;
@cyanA400: #00e5ff;
@cyanA700: #00b8d4;
@cyan: @cyan500;
@teal50: #e0f2f1;
@teal100: #b2dfdb;
@teal200: #80cbc4;
@teal300: #4db6ac;
@teal400: #26a69a;
@teal500: #009688;
@teal600: #00897b;
@teal700: #00796b;
@teal800: #00695c;
@teal900: #004d40;
@tealA100: #a7ffeb;
@tealA200: #64ffda;
@tealA400: #1de9b6;
@tealA700: #00bfa5;
@teal: @teal500;
@green50: #e8f5e9;
@green100: #c8e6c9;
@green200: #a5d6a7;
@green300: #81c784;
@green400: #66bb6a;
@green500: #4caf50;
@green600: #43a047;
@green700: #388e3c;
@green800: #2e7d32;
@green900: #1b5e20;
@greenA100: #b9f6ca;
@greenA200: #69f0ae;
@greenA400: #00e676;
@greenA700: #00c853;
@green: @green500;
@lightGreen50: #f1f8e9;
@lightGreen100: #dcedc8;
@lightGreen200: #c5e1a5;
@lightGreen300: #aed581;
@lightGreen400: #9ccc65;
@lightGreen500: #8bc34a;
@lightGreen600: #7cb342;
@lightGreen700: #689f38;
@lightGreen800: #558b2f;
@lightGreen900: #33691e;
@lightGreenA100: #ccff90;
@lightGreenA200: #b2ff59;
@lightGreenA400: #76ff03;
@lightGreenA700: #64dd17;
@lightGreen: @lightGreen500;
@lime50: #f9fbe7;
@lime100: #f0f4c3;
@lime200: #e6ee9c;
@lime300: #dce775;
@lime400: #d4e157;
@lime500: #cddc39;
@lime600: #c0ca33;
@lime700: #afb42b;
@lime800: #9e9d24;
@lime900: #827717;
@limeA100: #f4ff81;
@limeA200: #eeff41;
@limeA400: #c6ff00;
@limeA700: #aeea00;
@lime: @lime500;
@yellow50: #fffde7;
@yellow100: #fff9c4;
@yellow200: #fff59d;
@yellow300: #fff176;
@yellow400: #ffee58;
@yellow500: #ffeb3b;
@yellow600: #fdd835;
@yellow700: #fbc02d;
@yellow800: #f9a825;
@yellow900: #f57f17;
@yellowA100: #ffff8d;
@yellowA200: #ffff00;
@yellowA400: #ffea00;
@yellowA700: #ffd600;
@yellow: @yellow500;
@amber50: #fff8e1;
@amber100: #ffecb3;
@amber200: #ffe082;
@amber300: #ffd54f;
@amber400: #ffca28;
@amber500: #ffc107;
@amber600: #ffb300;
@amber700: #ffa000;
@amber800: #ff8f00;
@amber900: #ff6f00;
@amberA100: #ffe57f;
@amberA200: #ffd740;
@amberA400: #ffc400;
@amberA700: #ffab00;
@amber: @amber500;
@orange50: #fff3e0;
@orange100: #ffe0b2;
@orange200: #ffcc80;
@orange300: #ffb74d;
@orange400: #ffa726;
@orange500: #ff9800;
@orange600: #fb8c00;
@orange700: #f57c00;
@orange800: #ef6c00;
@orange900: #e65100;
@orangeA100: #ffd180;
@orangeA200: #ffab40;
@orangeA400: #ff9100;
@orangeA700: #ff6d00;
@orange: @orange500;
@deepOrange50: #fbe9e7;
@deepOrange100: #ffccbc;
@deepOrange200: #ffab91;
@deepOrange300: #ff8a65;
@deepOrange400: #ff7043;
@deepOrange500: #ff5722;
@deepOrange600: #f4511e;
@deepOrange700: #e64a19;
@deepOrange800: #d84315;
@deepOrange900: #bf360c;
@deepOrangeA100: #ff9e80;
@deepOrangeA200: #ff6e40;
@deepOrangeA400: #ff3d00;
@deepOrangeA700: #dd2c00;
@deepOrange: @deepOrange500;
@brown50: #efebe9;
@brown100: #d7ccc8;
@brown200: #bcaaa4;
@brown300: #a1887f;
@brown400: #8d6e63;
@brown500: #795548;
@brown600: #6d4c41;
@brown700: #5d4037;
@brown800: #4e342e;
@brown900: #3e2723;
@brown: @brown500;
@blueGrey50: #eceff1;
@blueGrey100: #cfd8dc;
@blueGrey200: #b0bec5;
@blueGrey300: #90a4ae;
@blueGrey400: #78909c;
@blueGrey500: #607d8b;
@blueGrey600: #546e7a;
@blueGrey700: #455a64;
@blueGrey800: #37474f;
@blueGrey900: #263238;
@blueGrey: @blueGrey500;
@grey50: #fafafa;
@grey100: #f5f5f5;
@grey200: #eeeeee;
@grey300: #e0e0e0;
@grey400: #bdbdbd;
@grey500: #9e9e9e;
@grey600: #757575;
@grey700: #616161;
@grey800: #424242;
@grey900: #212121;
@grey: @grey500;
@black: #000000;
@white: #ffffff;
@transparent: rgba(0, 0, 0, 0);
@fullBlack: rgba(0, 0, 0, 1);
@darkBlack: rgba(0, 0, 0, 0.87);
@lightBlack: rgba(0, 0, 0, 0.54);
@minBlack: rgba(0, 0, 0, 0.26);
@faintBlack: rgba(0, 0, 0, 0.12);
@fullWhite: rgba(255, 255, 255, 1);
@darkWhite: rgba(255, 255, 255, 0.87);
@lightWhite: rgba(255, 255, 255, 0.54);

310
历届学生/逯帅帅/项目开发/上课项目/my-project/src/assets/less/mixins.less Normal file
View File

@@ -0,0 +1,310 @@
.transition(@d) {
-webkit-transition-duration: @d;
transition-duration: @d;
}
.delay(@d) {
-webkit-transition-delay: @d;
transition-delay: @d;
}
.transform(@t) {
-webkit-transform: @t;
transform: @t;
}
.transform-origin(@to) {
-webkit-transform-origin: @to;
transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
-webkit-transform: translate3d(@x,@y,@z);
transform: translate3d(@x,@y,@z);
}
.animation (@a) {
-webkit-animation: @a;
animation: @a;
}
.scrollable() {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.flex-shrink(@fs) {
-webkit-box-flex: @fs;
-webkit-flex-shrink: @fs;
-ms-flex: 0 @fs auto;
flex-shrink: @fs;
}
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.hairline(@position, @color) when (@position = top) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(50% 0%);
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = left) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(0% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
.hairline(@position, @color) when (@position = bottom) {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = right) {
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(100% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
&:after {
display: none;
}
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
&:before {
display: none;
}
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
&:after {
background-color: @color;
}
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
&:before {
background-color: @color;
}
}
// Encoded SVG Background
.encoded-svg-background(@svg) {
@url: `encodeURIComponent(@{svg})`;
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
// Preserve3D
.preserve3d() {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
// Shadow
.depth(@level:1) {
& when (@level = 0) {
box-shadow: none;
}
& when (@level = 1) {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
& when (@level = 2) {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
& when (@level = 3) {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
}
& when (@level = 4) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
}
& when (@level = 5) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
}
& when (@level = 6) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
}
& when (@level = 7) {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
}
& when (@level = 8) {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
& when (@level = 9) {
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
}
& when (@level = 10) {
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
}
& when (@level = 11) {
box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
}
& when (@level = 12) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
}
& when (@level = 13) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
}
& when (@level = 14) {
box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
}
& when (@level = 15) {
box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
}
& when (@level = 16) {
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
}
& when (@level = 17) {
box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
}
& when (@level = 18) {
box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
}
& when (@level = 19) {
box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
}
& when (@level = 20) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
}
& when (@level = 21) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
}
& when (@level = 22) {
box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
}
& when (@level = 23) {
box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
}
& when (@level = 24) {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
}
// & when (@level = 1) {
// box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
// }
// & when (@level = 2) {
// box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
// }
// & when (@level = 3) {
// box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
// }
// & when (@level = 4) {
// box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
// }
// & when (@level = 5) {
// box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
// }
}
// Highlighted Links
.active-highlight(@color:rgba(255, 255, 255, 0.15)){
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: @color;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
.transition(600ms);
}
&.active-state:before,
html:not(.watch-active-state) &:active:before {
opacity: 1;
.transition(150ms);
}
}
.active-highlight-color(@color) {
&:before {
background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
}
}
// No Scrollbar
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}

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