first commit

历届学生/韩一伟/.gitignore

@@ -0,0 +1 @@
+node_modules/

历届学生/韩一伟/README.md

@@ -0,0 +1,9 @@
+ddww
+
+同事A的代码
+同事B上传的代码
+
+dscjkwdnsdck
+
+训练
+刘兵的测试

历届学生/韩一伟/每天课程/2021-06-16/index.html

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

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

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

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+
+    <!-- 头部 -->
+    <div class="header">
+        <div class="header-logo">
+            <img src="" alt="">
+            <input type="text" name="" id="">
+        </div>
+        <div class="header-menu">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- 中间内容 -->
+    <div class="content">
+        <div class="content-left"></div>
+        <div class="content-center"></div>
+        <div class="content-right"></div>
+    </div>
+
+    <!-- 底部版权 -->
+    <div class="footer">
+        <div class="footer-top">
+            <ul>
+                <li></li>
+            </ul>
+            <div>
+                <h2></h2>
+                <img src="" alt="">
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p></p>
+        </div>
+    </div>
+
+</body>
+
+</html>

历届学生/韩一伟/每天课程/2021-06-18/box.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>盒子模型</title>
+    <style>
+        body {
+            margin: 0;
+        }
+        .box {
+            width: 100px;
+            height: 100px;
+            background: red;
+            /* margin: 10px; 表示同时设置上右下左四个方向 */
+            /* margin: 10px 20px; 上下 左右 */
+            /* margin: 10px 20px 30px; 上  左右 下 */
+            /* margin: 10px 20px 30px 40px; 上 右 下 左 */
+            padding: 20px;
+            /* border: 10px solid #000; */
+        }
+    </style>
+</head>
+<body>
+    
+    <div class="box"></div>
+</body>
+</html>

历届学生/韩一伟/每天课程/2021-06-18/float.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>float</title>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        .box {
+            width: 200px;
+            height: 200px;
+            border: 1px solid #000;
+            float: left;
+        }
+
+        .box_1 {
+            background: red;
+        }
+
+        .box_2 {
+            background: green;
+        }
+
+        .box_3 {
+            width: 200px;
+            height: 200px;
+            border: 1px solid #000;
+            background: blue;
+        }
+
+        .text {
+            width: 50px;
+            height: 50px;
+            border: 1px solid #000;
+            overflow: scroll;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="main">
+        <div class="box box_1"></div>
+        <div class="box box_2"></div>
+    </div>
+    <div class="box_3"></div>
+    <div class="text">
+        CSS选择器用于选择你想要的元素的样式的模式。"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。
+    </div>
+
+</body>
+
+</html>

历届学生/韩一伟/每天课程/2021-06-18/index.css

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

历届学生/韩一伟/每天课程/2021-06-18/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>css</title>
+    <link rel="stylesheet" href="./index.css">
+    <style>
+        *
+        p {
+            color: blue;
+        }
+        h2 {
+            color: green;
+        }
+        #test {
+            color: hotpink;
+        }
+
+        /* .aaa li:nth-child(odd){
+            color: hotpink;
+        } */
+
+        /* .aaa li:last-child{
+            color: hotpink;
+        } */
+
+        /* .aaa li:first-child{
+            color: hotpink;
+        } */
+        .test:hover {
+            color: indigo;
+        }
+        .name:focus {
+            width: 300px;
+        }
+        .ceshi::before{
+            content: "这是before";
+        }
+        .ceshi::after{
+            content: "这是after";
+        }
+    </style>
+</head>
+<body>
+    <p style="color: yellow;">测试</p>
+    <h2 class="test">顶顶顶</h2>
+    <h2>顶顶顶</h2>
+    <ul class="aaa">
+        <li>1111</li>
+        <li>2222</li>
+        <li>3333</li>
+        <li>4444</li>
+        <li>5555</li>
+        <li>6666</li>
+    </ul>
+
+    <input class="name" type="text" placeholder="输入账户">
+
+    <div class="ceshi">测试</div>
+</body>
+</html>

历届学生/韩一伟/每天课程/2021-06-18/position.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>定位</title>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        .box {
+            width: 100px;
+            height: 100px;
+            float: left;
+        }
+
+        .box_1 {
+            background: red;
+        }
+
+        .box_2 {
+            background: green;
+            position: relative;
+            left: 17px;
+            top: 30px;
+        }
+
+        .box_3 {
+            background: blue;
+            position: relative;
+        }
+
+        .box_3_1 {
+            background: palevioletred;
+            width: 60px;
+            height: 60px;
+            position: absolute;
+            left: 27px;
+            top: 80px;
+        }
+
+        .box_4 {
+            background: yellow;
+            position: fixed;
+            right: 19px;
+            bottom: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box box_1">1</div>
+    <div class="box box_2">2</div>
+    <div class="box box_3">
+        <div class="box_3_1"></div>
+    </div>
+    <div class="box box_4">4</div>
+</body>
+
+</html>

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

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

历届学生/韩一伟/每天课程/2021-06-29/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box {
+            width: 300px;
+            height: 300px;
+            background: red;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .box_2 {
+            width: 100px;
+            height: 100px;
+            background: yellow;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .box_2:hover{
+            transform: scale(2.5);
+        }
+        .aaaaa {
+            font-size: 8px;
+            /* transform: scale(0.8);
+            display: inline-block;
+            transform-origin: 0 50%; */
+            zoom: 0.8;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="box">
+        <div class="box_2">222</div>
+        <span>测试</span>
+        <span class="aaaaa">哈哈哈</span>
+    </div>
+</body>
+
+</html>

历届学生/韩一伟/每天课程/2021-06-29/media.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>media</title>
+    <style>
+        body {
+            margin: 0;
+        }
+      
+        .box {
+            width: 187.5px;
+            height: 187.5px;
+            float: left;
+        }
+        .box_1 {
+            background: red;
+        }
+        .box_2 {
+            background: yellow;
+        }
+
+        @media screen and (min-width: 413px) {
+            .box_1,
+            .box_2 {
+                width: 207px;
+                height: 207px;
+            }
+        }
+
+        @media screen and (max-width: 320px) {
+            .box_1,
+            .box_2 {
+                width: 160px;
+                height: 160px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="box box_1"></div>
+    <div class="box box_2"></div>
+</body>
+
+</html>

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

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

历届学生/韩一伟/每天课程/2021-06-30/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>flex</title>
+    <style>
+        body,ul,li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        ul {
+            height: 45px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        li {
+        }
+    </style>
+    
+</head>
+<body>
+    
+    <ul>
+        <li>测试1</li>
+        <li>测试2</li>
+        <li>测试3</li>
+        <li>测试4</li>
+        <li>测试5</li>
+        <li>测试6</li>
+        <li>测试7</li>
+        <li>测试8</li>
+    </ul>
+</body>
+</html>

历届学生/韩一伟/每天课程/2021-06-30/rem.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>rem</title>
+    <script>
+        window.onload = function () {
+            getRem(750, 100)
+        };
+        
+        window.onresize = function () {
+            getRem(750, 100)
+        };
+        function getRem(pwidth, prem) {
+            var html = document.getElementsByTagName("html")[0];
+            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+            html.style.fontSize = oWidth / pwidth * prem + "px";
+        }
+    </script>
+    
+    <style>
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+        }
+
+        .box {
+            width: 7.5rem;
+            height: 7.5rem;
+            background: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box"></div>
+</body>
+
+</html>

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

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

历届学生/韩一伟/每天课程/2021-07-05/index.html

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

历届学生/韩一伟/每天课程/2021-07-05/函数.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>函数</title>
+</head>
+<body>
+    
+</body>
+<script>
+    // 函数 function 方法
+    // 作用：把使用效率高的很多代码放到一起，降低冗余
+    // function 方法名 (方法参数) { 你的代码 }
+
+    // function xiyifu(m1,m2,m3,m4) {
+    //     console.log(m1,m2,m3,m4);
+    //     // console.log(arguments);
+    //     console.log("洗衣服中...");
+    //     return "干净的衣服给你"
+    // }
+
+    // var a = xiyifu(3,2,1);
+    // console.log(a);
+
+
+    // 匿名函数
+    // var xiyifu = function () {
+    //     console.log("洗衣服");
+    // }
+
+    // var c = xiyifu;
+    // console.log(c);
+
+    // 局部作用域
+    // 全局作用域
+    // 定义变量加var，那么这个变量会受到所在位置的作用域影响
+    // 没有var 变量提升
+
+    // var ddd = 1
+    // var c = function () {
+    //     ddd = 1
+    //     console.log(ddd); // 1
+    // }
+
+    // c();
+    // console.log(ddd); // 1
+
+</script>
+</html>

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

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>循环语句</title>
+</head>
+<body>
+    
+</body>
+<script>
+    // 循环的起始位置（对象），循环的结束条件，循环步进数值
+    // for (var i = 1; i<= 2; i++ ) {
+    //     console.log(i);
+    // }
+
+    // var i = 1
+    // while (i <= 10) {
+    //     console.log(i);
+    //     i++;
+    // }
+
+    // var i = 11
+    // do {
+    //     console.log(i);
+    //     i++;
+    // } while (i<10);
+</script>
+</html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>数组</title>
+</head>
+<body>
+    
+</body>
+
+
+
+<script>
+    // 使用下标来存储数据
+
+    var a = ["111", 100, true, [1,2,3], { age: 18 } ];
+
+    // var c = {
+    //     name: '111',
+    //     age: 18,
+    //     color: 'red'
+    // };
+
+    // for (const key in c) {
+    //    console.log(c[key]);
+    // }
+
+    // for(var i = 0;i<a.length;i++) {
+    //     console.log(a[i]);
+    // }
+
+    // var a = new Array();
+    // a[0] = "111"
+    // a[1] = 100
+    // a[10] = 10022
+    // console.log(a);
+
+    // var a = new Array("111",100);
+    // console.log(a);
+
+
+</script>
+</html>

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

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+<script>
+
+    // if
+    // if else
+    // if else if else
+
+   
+    
+    // if (name == 1) {
+    //     console.log("vip1");
+    // } else if (name == 2){
+    //     console.log("vip2");
+    // } else if (name == 3){
+    //     console.log("vip3");
+    // } else if (name == 4){
+    //     console.log("vip4");
+    // } else {
+    //     console.log("普通用户");
+    // }
+
+    // if (true) {
+    //     if (false) {
+    //         if (true) {
+    //             console.log("dddd");
+    //         }
+    //     } 
+    // }
+
+    // 三元运算
+
+    // if (name == 0) {
+    //     console.log("0");
+    // } else {
+    //     console.log("111");
+    // }
+
+    // if (name == 0) console.log("0");
+    // else console.log("111");
+
+    // name == 0 ? console.log("0") : console.log("111")
+
+
+    // switch
+    var dddd = 1; 
+    switch (dddd) {
+        case 1:
+            console.log("vip1");
+            break;
+        case 2:
+            console.log("vip2");
+            break;
+        case 3:
+            console.log("vip3");
+            break;
+        case 4:
+            console.log("vip4");
+             break;
+        default:
+        console.log("普通用户");
+        break;
+    }
+</script>
+</html>

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

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

历届学生/韩一伟/每天课程/2021-07-08/event.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>event 事件</title>
+</head>
+<body>
+
+    <button>点我</button>
+
+    <div onclick="test()">哈哈哈</div>
+    <div class="three">第三种</div>
+</body>
+
+<script>
+    // 事件：你在网页上完成的操作都叫事件
+    // 事件三要素：
+    //    事件源
+    //    事件类型
+    //    事件处理函数 
+    // 点击事件写法有三种？
+    // 
+
+    // js dom document 虚拟dom    真实dom    影子dom
+    
+    console.log();
+    var a  = document.querySelector("button")
+    // 1
+    a.onclick = function () {
+        alert("1111")
+    }
+
+    // 2
+    function test () {
+        alert("test")
+    }
+
+
+    // 3
+    document.querySelector(".three").addEventListener('click', function() {
+        alert("三1")
+    })
+
+    document.querySelector(".three").addEventListener('click', function() {
+        alert("三2")
+    })
+
+    document.querySelector(".three").addEventListener('click', function() {
+        alert("三3")
+    })
+
+
+
+</script>
+</html>

历届学生/韩一伟/每天课程/2021-07-08/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+<script>
+
+    // 回调函数
+    // 异步 & 同步
+    // 闭包
+
+    // this 指向（留坑）
+
+    // 同步 异步 返回值
+    // 回调 callback 函数
+    // promise es6 函数
+    // es5 es6, 7, 8, 9, 10...
+    // function a (callback) {
+    //     var time;
+
+    //     // 异步操作
+    //     setTimeout(function(){
+    //         time = "哈哈哈"
+    //         callback(time)
+    //     }, 1000);
+    // }
+
+    // a(function (res) {
+    //     console.log(res);
+    // })
+
+
+    // function a (callback) {
+    //     callback("111")
+    // }
+
+    // a( function (rrr) {
+    //    console.log(rrr);
+    // } )
+
+    // 闭包
+    // 函数内部的函数访问外部函数变量的过程
+    // 作用：会将变量进行缓存，减小程序的计算量
+    // 缺点：闭包会导致程序的内存占用过高，导致页面卡顿，应该减少使用
+    function a() {
+        var time = 1;
+        var time = 1;
+        var time = 1;
+
+        var c = function () {
+            time+=1
+            return time
+        }
+        return c
+    }
+
+    var f = a()
+    console.log( f() ); // 2
+    console.log( f() ); // 2
+
+    // function a () {
+    //     var i = 0;
+    //     return i+=1;
+    // }
+
+    // console.log(a()); // 1
+    // console.log(a()); // 2
+
+</script>
+</html>

历届学生/韩一伟/每天课程/2021-07-15/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <ul></ul>
+</body>
+<!-- <script>
+    function callback(res) {
+        console.log(res);
+    }
+</script>
+<script src="http://127.0.0.1/index.php?test=callback"></script> -->
+<script>
+
+    // 1：拿出手机
+    var ajax = new XMLHttpRequest()
+
+    // 2: 输入号码
+    ajax.open("POST", "http://127.0.0.1/index.php")
+    
+
+    // 3：拨号
+    ajax.send()
+
+    // 4：状态监听
+    ajax.onreadystatechange = function () {
+        if (ajax.readyState == 4) {
+            if (ajax.status == 200) {
+                console.log(ajax);
+                console.log(ajax.responseText);
+            } else {
+                console.log("抱歉，无法请求");
+            }
+        }
+    }
+</script>
+</html>

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

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

历届学生/韩一伟/每天课程/2021-08-10/http.js

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

历届学生/韩一伟/每天课程/2021-08-10/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h2>哈哈哈</h2>
+</body>
+</html>

历届学生/韩一伟/每天课程/2021-08-10/index.js

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

历届学生/韩一伟/每天课程/2021-08-10/package.json

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

历届学生/韩一伟/每天课程/2021-08-10/pc.js

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

历届学生/韩一伟/每天课程/2021-08-10/test.js

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

历届学生/韩一伟/每天课程/2021-08-10/utils.js

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

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

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

历届学生/韩一伟/每天课程/2021-08-11/component.html

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

历届学生/韩一伟/每天课程/2021-08-11/index.html

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

历届学生/韩一伟/每天课程/2021-08-11/index2.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="app">
+
+        <h2 ref="test">我是h2</h2>
+        <h1>{{ msg | shenglh }}</h1>
+        <h3>{{ test }}</h3>
+    </div>
+</body>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // 计算属性 computed
+    // 侦听器   watch 
+    // 混入 mixins 封装相同代码，减少冗余
+
+    var mix = {
+        data () {
+            return {
+                page: 0,
+                totalPage: 10
+            }
+        },
+        methods: {
+            bottom () {
+
+            }
+        }
+    };
+
+    var vm = new Vue({
+        el: '.app',
+        mixins: [ mix ],
+        data: {
+            msg: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
+        },
+        watch: {
+            msg (newVal, oldVal) {
+                console.log(newVal, oldVal);
+            }
+        },
+        created () {
+            console.log(this.page);
+            console.log("created");
+        },
+        mounted () {
+            console.log("mounted");
+            console.log(this.$refs.test);
+        },
+        filters: {
+            shenglh(val) {
+                return val.substring(0,3)+"..."
+            }
+        },
+        methods: {
+          test2() {
+            return "test2"
+          }
+        },
+        computed: {
+            test () {
+                return "test"
+            }
+        }
+    })
+</script>
+
+</html>

历届学生/韩一伟/每天课程/2021-08-11/tabs.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        ul,li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        .tabs_title {
+            display: flex;
+        }
+
+        .tabs_title li {
+            margin-right: 10px;
+        }
+        .tabs_title_active {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="app">
+        <ul class="tabs_title">
+            <li :class=" index == currentIndex ? 'tabs_title_active' : '' " 
+                @click="currentIndex = index"
+                v-for="(item,index) in tabsList">
+                {{ item.title }}
+            </li>
+        </ul>
+
+        <div class="tabs_conetnt">
+
+            <div class="" v-for="(item,index) in tabsList">
+                <div v-if="index == currentIndex">
+                    <p v-for="(v,i) in item.content">{{ v.text }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    new Vue({
+        el: '.app',
+        data: {
+            currentIndex: 0,
+            tabsList: [
+                { 
+                    id: 1, 
+                    title: '社会', 
+                    content: [
+                        { text: '社会的内容1' },
+                        { text: '社会的内容2' },
+                        { text: '社会的内容3' },
+                    ] 
+                },
+                { 
+                    id: 2, 
+                    title: '军事', 
+                    content: [
+                        { text: '军事的内容1' },
+                        { text: '军事的内容2' },
+                        { text: '军事的内容3' },
+                    ] 
+                },
+                { 
+                    id: 3, 
+                    title: '体育', 
+                    content: [
+                        { text: '体育的内容1' },
+                        { text: '体育的内容2' },
+                        { text: '体育的内容3' },
+                    ] 
+                },
+            ]
+        },
+        created() {
+            
+        },
+        methods: {
+            changeTitle(i) {
+                this.currentIndex = i
+            }
+        }
+    })
+</script>
+
+</html>

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

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

历届学生/韩一伟/每天课程/2021-08-13/index.html

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

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

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

历届学生/韩一伟/项目开发/上课项目/ajax案例/ajax.js

@@ -0,0 +1,55 @@
+class Ajax {
+
+    // 请求方式 不一样
+    // 请求地址 不一样
+    // 请求参数 不一样
+  
+    constructor() {
+        this.ajax = new XMLHttpRequest()
+    }
+
+    // { url: '请求地址', data: {} //请求参数 }
+    get (params) {
+        var str = ""
+        for (const key in params.data) {
+            str += `&${key}=${params.data[key]}`
+        }
+        str = str.replace("&", "?")
+
+        this.ajax.open("GET", params.url + str);
+        this.ajax.send();
+        this.statechange(params)
+    }
+
+
+    post () {
+        this.open("POST", "http://127.0.0.1/index.php")
+    }
+
+
+    statechange (params) {
+        this.ajax.onreadystatechange = () => {
+            if (this.ajax.readyState == 4) {
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    switch (data.status) {
+                        case 200:
+                            params.success(data.result)
+                            break;
+
+                        case 404:
+                            alert(data.msg)
+                            throw new Error(data.msg)
+                            break;
+                    }
+                    // 
+                } else {
+                    params.error(this.ajax)
+                }
+            }
+        }
+    }
+
+}
+
+var ajax = new Ajax()

历届学生/韩一伟/项目开发/上课项目/ajax案例/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <h2>最新推荐</h2>
+    <ul></ul>
+</body>
+
+<script src="./ajax.js"></script>
+<script>
+    function getIndex() {
+        ajax.get({
+            url: 'http://127.0.0.1:3000/api/json/index',
+            data: {},
+            success: (res) => {
+                console.log(res);
+                render(res)
+            },
+            error: (err) => {
+                console.log("请求出错：", err);
+            }
+        });
+    }
+
+    function render(result) {
+        result.recommended.data.forEach(v => {
+            document.querySelector("ul").innerHTML += `
+            <li>
+                <a href="./info.html?id=${v.id}">
+                    <img src="${v.preview}" alt="">
+                    <p>${v.title}</p>
+                </a>
+            </li>
+            `
+        });
+    }
+
+    getIndex()
+</script>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/ajax案例/info.html

@@ -0,0 +1,83 @@
+<!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="./preview.css">
+</head>
+
+<body>
+    <ul>
+    </ul>
+
+    <button class="dddd">下一页</button>
+</body>
+
+<script src="./ajax.js"></script>
+<script src="./preview.js"></script>
+<script>
+    var page = 1;
+    var newImg = []
+
+    function getInfo() {
+        ajax.get({
+            url: 'http://127.0.0.1:3000/api/json/info',
+            data: {
+                page: page,
+                id: GetQueryString("id")
+            },
+            success: (res) => {
+                render(res);
+            },
+            error: (err) => {
+                console.log("请求出错：", err);
+            }
+        });
+    }
+
+    function render(result) {
+       
+        result.data.forEach(v => {
+            newImg.push(v.src)
+            document.querySelector("ul").innerHTML += `
+                <li>
+                    <img src="${v.src}" width="300" alt="">
+                </li>
+            `
+        });
+        
+        var imgArr = document.querySelectorAll("ul li img");
+        imgArr.forEach((v,i) => {
+            v.onclick = () => {
+                new preview({
+                    index: i,
+                    data: newImg
+                })
+            }
+        })
+    }
+
+
+    document.querySelector(".dddd").onclick = function () {
+        page+=1;
+        getInfo()
+    }
+
+    getInfo()
+
+    function GetQueryString(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]); return null;
+
+    }
+
+
+
+
+</script>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/ajax案例/preview.css

@@ -0,0 +1,149 @@
+@font-face {
+    font-family: "iconfont"; /* Project id 2576965 */
+    src: url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.woff2?t=1626173792950') format('woff2'),
+         url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.woff?t=1626173792950') format('woff'),
+         url('http://at.alicdn.com/t/font_2576965_g3xukxxa1z.ttf?t=1626173792950') format('truetype');
+  }
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-closedx:before {
+    content: "\e684";
+  }
+  
+  .icon-suoxiao1:before {
+    content: "\e611";
+  }
+  
+  .icon-zuo:before {
+    content: "\e604";
+  }
+  
+  .icon-fangda:before {
+    content: "\e605";
+  }
+  
+  .icon-fullscreen:before {
+    content: "\e623";
+  }
+  
+  .icon-shuaxin:before {
+    content: "\e627";
+  }
+  
+  .icon-suoxiao:before {
+    content: "\e610";
+  }
+  
+  .icon-play:before {
+    content: "\e664";
+  }
+  
+  .icon-zhankai-copy:before {
+    content: "\e62a";
+  }
+  
+  .icon-zhankai:before {
+    content: "\e601";
+  }
+  
+  .icon-gouwuchekong:before {
+    content: "\e600";
+  }
+  
+  .icon-chakan:before {
+    content: "\e618";
+  }
+  
+  .icon-pinglun:before {
+    content: "\e629";
+  }
+  
+  .icon-shangchuan:before {
+    content: "\e612";
+  }
+  
+  .icon-sousuo:before {
+    content: "\e60d";
+  }
+  
+.preview {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+}
+.preview .preview_black{
+    width: 100%;
+    height: 100%;
+    background: #0000008c;
+    position: absolute;
+}
+.preview .preview_main{
+    position: relative;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.preview_main .show {
+    height: 100%;
+}
+.preview_main .closed {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 20px;
+    color: #fff;
+    z-index: 99;
+}
+.preview_main .preview_page i {
+    font-size: 30px;
+    font-weight: bolder;
+}
+.preview_main .preview_page {
+   
+    color: #fff;
+    z-index: 99;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+.preview_action {
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    border-color: #fff;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: #fff;
+}
+.preview_action i {
+    font-size: 18px;
+}
+.leftx {
+    transform: rotateY(180deg);
+}

历届学生/韩一伟/项目开发/上课项目/ajax案例/preview.js

@@ -0,0 +1,195 @@
+(function () {
+
+    body = $("body")
+
+    class Preview {
+
+        x1;
+        y1;
+        l;
+        t;
+        isRun = false;
+
+        constructor(option) {
+            if (! option.hasOwnProperty("index")) {
+                throw new Error("抱歉，index参数必传")
+            }
+
+            if ( option.hasOwnProperty("data") == false || Array.isArray(option.data) == false) {
+                throw new Error("抱歉，data参数必传，且必须为数组")
+            }
+
+
+            this.defaultOption = option
+
+            console.log(this.defaultOption);
+            this.createdHtml()
+            this.bindEvent()
+            this.MouseEvent()
+        }
+
+
+        createdHtml() {
+            body.insertAdjacentHTML("beforeend",`
+                <div class="preview">
+                    <div class="preview_black"></div>
+                    <div class="preview_main">
+                        <img style="transform: scale(1) rotate(0deg);margin-left:0" class="show" src="${this.defaultOption.data[this.defaultOption.index]}" alt="">
+                        <i class="iconfont icon-closedx closed"></i>
+
+                        <div class="preview_page">
+                            <i class="iconfont icon-zuo prev"></i>
+                            <i class="iconfont icon-zhankai-copy next"></i>
+                        </div>
+
+                        <div class="preview_action">
+                            <i class="iconfont icon-suoxiao"></i>
+                            <i class="iconfont icon-fangda"></i>
+                            
+                            <i class="iconfont icon-fullscreen isfullscreen"></i>
+
+                            <i class="iconfont icon-shuaxin leftx"></i>
+                            <i class="iconfont icon-shuaxin rightx"></i>
+                        </div>
+                    </div>
+                </div>
+            `)
+        }
+
+        bindEvent() {
+            // 关闭按钮被点击
+            $(".closed").onclick = () => {
+                body.removeChild($(".preview"))
+            }
+
+            // 解决 this 指向
+            // 外部提前保存this
+            // 箭头函数 => es6
+            // 下一页点击事件
+            $(".next").onclick = () => {
+                this.defaultOption.index += 1
+                if (this.defaultOption.index > this.defaultOption.data.length - 1) {
+                    this.defaultOption.index = 0
+                }
+                this.changeImgSrc()
+            }
+
+            // 上一页点击事件
+            $(".prev").onclick = () => {
+                this.defaultOption.index -= 1
+                if (this.defaultOption.index < 0) {
+                    this.defaultOption.index = this.defaultOption.data.length - 1
+                }
+                this.changeImgSrc()
+            }
+
+            // 放大
+            $(".icon-fangda").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale() + 0.2}) rotate(${this.rotate()}deg)`
+            }
+
+            // 缩小
+            $(".icon-suoxiao").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale() - 0.2 <= 0.2 ? 0.2 : this.scale() - 0.2}) rotate(${this.rotate()}deg)`
+            }
+
+            // 左旋转
+            $(".leftx").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()-90}deg)`
+            }
+
+            // 右旋转
+            $(".rightx").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()+90}deg)`
+            }
+
+            $(".isfullscreen").onclick = () => {
+                if ($(".isfullscreen").classList.contains("icon-fullscreen")) {
+                    $(".show").style.transform = `scale(2) rotate(${this.rotate()}deg)`
+                    $(".isfullscreen").classList.remove("icon-fullscreen")
+                    $(".isfullscreen").classList.add("icon-suoxiao1")
+                } else {
+                    $(".show").style.transform = `scale(1) rotate(${this.rotate()}deg)`
+                    $(".isfullscreen").classList.add("icon-fullscreen")
+                    $(".isfullscreen").classList.remove("icon-suoxiao1")
+                }
+            }
+        }
+
+        MouseEvent() {
+          $(".show").onmousedown = (e) => {
+              this.isRun = true;
+              console.log("你按下了 this.isRun ：", this.isRun)
+              e.preventDefault()
+              this.x1 = e.clientX;
+              this.y1 = e.clientY;
+
+              this.l = parseInt($(".show").style.marginLeft);
+              console.log(this.l)
+              this.t = $(".show").offsetTop;
+
+              this.ImgMove(".show")
+          }
+
+          // 离开图片的时候，把事件交给 preview
+          $(".show").onmouseout = (e) => {
+              console.log("离开图片的时候，把事件交给 preview: ", this.isRun)
+              if (this.isRun) {
+                  this.ImgMove(".preview")
+              }
+          }
+
+          // 鼠标在背景上松开的时候
+          $(".preview").onmouseup = (e) => {
+              this.isRun = false
+              $(".show").onmousemove = null
+              $(".preview").onmousemove = null
+          }
+
+          // 鼠标在图片上松开的时候
+          $(".show").onmouseup = (e) => {
+              e.stopPropagation()
+              this.isRun = false
+              $(".show").onmousemove = null
+          }
+        }
+
+        ImgMove(className) {
+            $(className).onmousemove = (e) => {
+                e.preventDefault()
+                var x2 = e.x,
+                    y2 = e.y;
+
+                var x3 = x2 - this.x1,
+                    y3 = y2 - this.y1;
+
+                //更改元素的left，top值
+                $(".show").style.marginLeft = `${x3 + this.l}px`;
+                $(".show").style.marginTop = `${y3 + this.t}px`;
+            }
+        }
+
+        changeImgSrc() {
+            console.log(this.defaultOption.index)
+            $(".show").src = this.defaultOption.data[this.defaultOption.index]
+        }
+
+
+        scale() {
+            return Number($(".show").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+        }
+
+        rotate() {
+            return Number($(".show").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+        }
+
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    window.preview = Preview
+
+})()

历届学生/韩一伟/项目开发/上课项目/baidu.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>百度</title>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        input {
+            outline: none;
+        }
+
+        .left {
+            float: left;
+        }
+
+        .search {
+            width: 654px;
+            height: 44px;
+            margin: 0 auto;
+        }
+
+        .search input {
+            width: 546px;
+            box-sizing: border-box;
+            height: 100%;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+            border: 2px solid #c4c7ce;
+            border-right: none;
+            padding: 0 12px;
+            padding-right: 50px;
+            background: url("phone.png");
+            background-repeat: no-repeat;
+            background-size: 30px;
+            background-position: 498px center;
+            
+        }
+
+        .search input:focus {
+            border: 2px solid #4e6ef2;
+            border-right: none;
+        }
+
+        .search .sub {
+            width: 108px;
+            height: 100%;
+            background: #4e6ef2;
+            color: #fff;
+            text-align: center;
+            line-height: 43px;
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+            font-size: 17px;
+            font-weight: 400;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="search">
+        <div>
+            <input type="text" class="left" />
+            <div></div>
+        </div>
+        <div class="sub left">百度一下</div>
+    </div>
+</body>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/ddd.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+</body>
+<script>
+  var a = [
+    { id: 1, name: '1111' },
+    { id: 2, name: '2222' },
+    { id: 3, name: '3333' },
+    { id: 4, name: '4444' },
+  ]
+
+
+
+  // a.forEach(function (v) {
+  //   if (v.id == 3) {
+  //     c.push(v)
+  //   }
+  // })
+
+  var c = a.filter(function (v) {
+    return v.id == 3
+  })
+
+  console.log(c)
+  console.log(a)
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/hongbao.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+    body {
+        margin: 0;
+        height: 100vh;
+        position: relative;
+        overflow: hidden;
+    }
+    .hb {
+        width: 50px;
+        height: 70px;
+        top: -70px;
+        position: absolute;
+        user-select: none;
+    }
+    .popup {
+        position: fixed;
+        z-index: 9999;
+        width: 100vw;
+        height: 100vh;
+        background: rgb(0 0 0 / 58%);
+        display: none;
+    }
+    .popup_center {
+        width: 400px;
+        height: 250px;
+        background: #fff;
+        border-radius: 10px;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+    }
+    .closed {
+        position: absolute;
+        right: 15px;
+        top: 10px;
+        color: #000;
+        font-size: 20px;
+        cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+
+
+<div class="popup">
+  <div class="popup_center">
+    <div class="closed">x</div>
+  </div>
+</div>
+</body>
+<script>
+
+
+  var height = document.body.clientHeight,
+      width = document.body.clientWidth,
+      intervalId = [], startHb = null, currentClickHb = null;
+
+  /**
+   * 创建红包的
+   * @constructor
+   */
+  function CreatedHongBao() {
+    var x = parseInt(Math.random() * (width - 50));
+    var hb = document.createElement("img")
+    hb.src = "./hb.png"
+    hb.className = "hb"
+    hb.style.left = `${x}px`
+    hb.style.top = `-50px`
+
+    hb.onclick = function () {
+      currentClickHb = hb
+      intervalId.forEach(function (v) {
+        clearInterval(v.id)
+      })
+      clearInterval(startHb)
+      $(".popup").style.display = "block"
+    }
+    $("body").appendChild(hb)
+    motion(hb,x)
+  }
+
+
+  function motion(el,x) {
+    intervalId.push({
+      id: setInterval(function () {
+        var top = parseInt(el.style.top) + 10;
+        if (top > height) {
+          remove(el,x)
+        } else {
+          el.style.top = `${top}px`
+        }
+      },100),
+      
+      cardId: x
+    })
+  }
+
+
+  function remove(el,x) {
+    try {
+      intervalId = intervalId.filter(function (v) {
+        if (v.cardId == x) {
+          $("body").removeChild(el)
+          clearInterval(v.id)
+        } else {
+          return v
+        }
+      });
+    } catch (e) {
+
+    }
+  }
+
+  function auto () {
+    startHb = setInterval(function () {
+      CreatedHongBao()
+    }, 1000)
+  }
+
+  auto()
+
+
+  $(".closed").onclick = function () {
+    var imgAll = document.querySelectorAll("img")
+    $(".popup").style.display = "none"
+    remove(currentClickHb, parseInt(currentClickHb.style.left))
+
+    imgAll.forEach(function (v) {
+      motion(v,parseInt(v.style.left))
+    })
+    auto()
+  }
+
+
+  function $(className) {
+    return document.querySelector(className)
+  }
+
+
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            position: relative;
+        }
+        span {
+            position: absolute;
+            transition: all 1.5s;
+        }
+    </style>
+</head>
+<body>
+
+</body>
+<script>
+
+    // 1: 在网页任意一个地方点击可以生成一个标签（颜色是随机的颜色）
+    //    
+    //    向标签内一次插入 12字 方针
+    //    放标签放到网页上（鼠标点击的地方）
+    
+    // 2: 让文字向上运动起来
+   
+    // 3: 让文字消失
+    var index = 0
+    $("body").onclick = function (e) {
+        var x = e.x,
+            y = e.y - 21;
+
+        var text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"]    
+
+        var span = document.createElement("span")
+        
+        span.innerText = text[index];
+        span.style = `
+            left: ${x}px;
+            top: ${y}px;
+            opacity: 1;
+            color: hsla(${parseInt(Math.random() * 360)},100%,50%,1)
+        `
+
+        $("body").appendChild(span)
+
+        motion(span, x,y)
+
+        index+=1
+        if (index > 11) {
+            index = 0
+        } 
+
+    }
+
+
+    function motion(el,x,y) {
+        setTimeout(function () {
+            el.style.top = `${y - 100}px`
+            el.style.opacity = 0
+        }, 100)
+        setTimeout(function () {
+            $("body").removeChild(el)
+        }, 1600)
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.css

@@ -0,0 +1,75 @@
+
+.preview {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+}
+.preview .preview_black{
+    width: 100%;
+    height: 100%;
+    background: #0000008c;
+    position: absolute;
+}
+.preview .preview_main{
+    position: relative;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.preview_main .show {
+    height: 100%;
+}
+.preview_main .closed {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 20px;
+    color: #fff;
+    z-index: 99;
+}
+.preview_main .preview_page i {
+    font-size: 30px;
+    font-weight: bolder;
+}
+.preview_main .preview_page {
+   
+    color: #fff;
+    z-index: 99;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+.preview_action {
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    border-color: #fff;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: #fff;
+}
+.preview_action i {
+    font-size: 18px;
+}
+.leftx {
+    transform: rotateY(180deg);
+}

历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.html

@@ -0,0 +1,53 @@
+<!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">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_g3xukxxa1z.css">
+    <link rel="stylesheet" href="./preview.css">
+    <title>Document</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="main"></div>
+
+
+
+
+</body>
+<script src="./preview.js"></script>
+<script>
+    // 两个参数
+    // 现实第几张图
+    // 图片数组
+
+    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
+
+    imgArr.forEach(function (v) {
+        document.querySelector(".main").innerHTML
+            += `<img width="100" src="${v}"/>`
+    })
+
+
+    document.querySelectorAll(".main img").forEach(function (v,i) {
+        v.onclick = function () {
+            console.log(v);
+            new preview({
+                index: i,
+                data: imgArr
+            })
+        }
+    })
+
+</script>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.js

@@ -0,0 +1,195 @@
+(function () {
+
+    body = $("body")
+
+    class Preview {
+
+        x1;
+        y1;
+        l;
+        t;
+        isRun = false;
+
+        constructor(option) {
+            if (! option.hasOwnProperty("index")) {
+                throw new Error("抱歉，index参数必传")
+            }
+
+            if ( option.hasOwnProperty("data") == false || Array.isArray(option.data) == false) {
+                throw new Error("抱歉，data参数必传，且必须为数组")
+            }
+
+
+            this.defaultOption = option
+
+            console.log(this.defaultOption);
+            this.createdHtml()
+            this.bindEvent()
+            this.MouseEvent()
+        }
+
+
+        createdHtml() {
+            body.insertAdjacentHTML("beforeend",`
+                <div class="preview">
+                    <div class="preview_black"></div>
+                    <div class="preview_main">
+                        <img style="transform: scale(1) rotate(0deg);margin-left:0" class="show" src="${this.defaultOption.data[this.defaultOption.index]}" alt="">
+                        <i class="iconfont icon-closedx closed"></i>
+
+                        <div class="preview_page">
+                            <i class="iconfont icon-zuo prev"></i>
+                            <i class="iconfont icon-zhankai-copy next"></i>
+                        </div>
+
+                        <div class="preview_action">
+                            <i class="iconfont icon-suoxiao"></i>
+                            <i class="iconfont icon-fangda"></i>
+                            
+                            <i class="iconfont icon-fullscreen isfullscreen"></i>
+
+                            <i class="iconfont icon-shuaxin leftx"></i>
+                            <i class="iconfont icon-shuaxin rightx"></i>
+                        </div>
+                    </div>
+                </div>
+            `)
+        }
+
+        bindEvent() {
+            // 关闭按钮被点击
+            $(".closed").onclick = () => {
+                body.removeChild($(".preview"))
+            }
+
+            // 解决 this 指向
+            // 外部提前保存this
+            // 箭头函数 => es6
+            // 下一页点击事件
+            $(".next").onclick = () => {
+                this.defaultOption.index += 1
+                if (this.defaultOption.index > this.defaultOption.data.length - 1) {
+                    this.defaultOption.index = 0
+                }
+                this.changeImgSrc()
+            }
+
+            // 上一页点击事件
+            $(".prev").onclick = () => {
+                this.defaultOption.index -= 1
+                if (this.defaultOption.index < 0) {
+                    this.defaultOption.index = this.defaultOption.data.length - 1
+                }
+                this.changeImgSrc()
+            }
+
+            // 放大
+            $(".icon-fangda").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale() + 0.2}) rotate(${this.rotate()}deg)`
+            }
+
+            // 缩小
+            $(".icon-suoxiao").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale() - 0.2 <= 0.2 ? 0.2 : this.scale() - 0.2}) rotate(${this.rotate()}deg)`
+            }
+
+            // 左旋转
+            $(".leftx").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()-90}deg)`
+            }
+
+            // 右旋转
+            $(".rightx").onclick = () => {
+                $(".show").style.transform = `scale(${this.scale()}) rotate(${this.rotate()+90}deg)`
+            }
+
+            $(".isfullscreen").onclick = () => {
+                if ($(".isfullscreen").classList.contains("icon-fullscreen")) {
+                    $(".show").style.transform = `scale(2) rotate(${this.rotate()}deg)`
+                    $(".isfullscreen").classList.remove("icon-fullscreen")
+                    $(".isfullscreen").classList.add("icon-suoxiao1")
+                } else {
+                    $(".show").style.transform = `scale(1) rotate(${this.rotate()}deg)`
+                    $(".isfullscreen").classList.add("icon-fullscreen")
+                    $(".isfullscreen").classList.remove("icon-suoxiao1")
+                }
+            }
+        }
+
+        MouseEvent() {
+          $(".show").onmousedown = (e) => {
+              this.isRun = true;
+              console.log("你按下了 this.isRun ：", this.isRun)
+              e.preventDefault()
+              this.x1 = e.clientX;
+              this.y1 = e.clientY;
+
+              this.l = parseInt($(".show").style.marginLeft);
+              console.log(this.l)
+              this.t = $(".show").offsetTop;
+
+              this.ImgMove(".show")
+          }
+
+          // 离开图片的时候，把事件交给 preview
+          $(".show").onmouseout = (e) => {
+              console.log("离开图片的时候，把事件交给 preview: ", this.isRun)
+              if (this.isRun) {
+                  this.ImgMove(".preview")
+              }
+          }
+
+          // 鼠标在背景上松开的时候
+          $(".preview").onmouseup = (e) => {
+              this.isRun = false
+              $(".show").onmousemove = null
+              $(".preview").onmousemove = null
+          }
+
+          // 鼠标在图片上松开的时候
+          $(".show").onmouseup = (e) => {
+              e.stopPropagation()
+              this.isRun = false
+              $(".show").onmousemove = null
+          }
+        }
+
+        ImgMove(className) {
+            $(className).onmousemove = (e) => {
+                e.preventDefault()
+                var x2 = e.x,
+                    y2 = e.y;
+
+                var x3 = x2 - this.x1,
+                    y3 = y2 - this.y1;
+
+                //更改元素的left，top值
+                $(".show").style.marginLeft = `${x3 + this.l}px`;
+                $(".show").style.marginTop = `${y3 + this.t}px`;
+            }
+        }
+
+        changeImgSrc() {
+            console.log(this.defaultOption.index)
+            $(".show").src = this.defaultOption.data[this.defaultOption.index]
+        }
+
+
+        scale() {
+            return Number($(".show").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+        }
+
+        rotate() {
+            return Number($(".show").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+        }
+
+    }
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+
+    window.preview = Preview
+
+})()

历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/事件冒泡.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+<div class="test" onclick="test()">
+  <button onclick="hahahah(event)">点我</button>
+</div>
+</body>
+
+<script>
+  function test() {
+    console.log("test")
+  }
+
+  function hahahah(e) {
+    e.stopPropagation()
+    console.log("hhahaha")
+  }
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/笔记.txt

@@ -0,0 +1,6 @@
+使用js封装插件
+
+// 自执行函数
+
+// this 指向
+// this 是个墙头草

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>轮播图</title>
+    <style>
+        body,ul,li,p{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .main {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .dot {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+        }
+
+        .dot li {
+            width: 15px;
+            height: 15px;
+            border-radius: 100%;
+            background: #fff;
+            margin-right: 10px;
+        }
+
+        .dot .active {
+            background: red;
+        }
+        .swiper {
+            position: relative;
+            display: flex;
+        }
+        .swiper_item {
+            flex-shrink: 0;
+            width: 100%;
+        }
+        .swiper img {
+            width: 100%;
+        }
+
+        .action {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .but {
+            color: #fff;
+            font-size: 40px;
+        }
+    </style>
+</head>
+<body>
+
+
+    
+    <div class="main">
+
+        <div class="swiper" style="left: 0px">
+            <div class="swiper_item">
+                <img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
+            </div>
+            <div class="swiper_item">
+                <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+            </div>
+            <div class="swiper_item">
+                <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+            </div>
+        </div>
+
+        <div class="action">
+            <div class="but prev"> &lt; </div>
+            <div class="but next"> &gt; </div>
+        </div>
+
+        <ul class="dot">
+            <li class="active"></li>
+            <li></li>
+            <li></li>
+        </ul>
+        
+    </div>
+
+    
+</body>
+<script src="index.js"></script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.js

@@ -0,0 +1,74 @@
+var time = null;
+
+$(".next").onclick = () => {
+    motion(-520)
+}
+
+
+$(".prev").onclick = () => {
+    motion(520)
+}
+
+
+// 小圆点点击事件
+_(".dot li").forEach((v,i) => {
+    v.onclick = function () {
+        changeDot(i)
+    }
+});
+
+
+function changeDot(index) {
+    var liArr = _(".dot li")
+    liArr.forEach((itme) => {
+        itme.classList.remove("active")
+    })
+    liArr[index].classList.add("active")
+    set_left(index * -520)
+}
+
+
+function motion(offset) {
+    var totalOffset = left() + offset;
+    if (totalOffset < -1040) {
+        totalOffset = 0
+    }
+    if (totalOffset > 0) {
+        totalOffset = -1040
+    }
+    set_left(totalOffset)
+    changeDot(totalOffset / -520)
+}
+
+function autoPlay() {
+    time = setInterval(() => {
+        $(".next").onclick()
+    }, 1000)
+}
+
+$(".main").onmouseover = () => {
+    clearInterval(time)
+}
+
+// $(".main").onmouseout = () => {
+//     autoPlay()
+// }
+//
+// autoPlay()
+
+function set_left(offset) {
+    $(".swiper").style.left = `${offset}px`;
+}
+
+function left() {
+    return parseInt($(".swiper").style.left)
+}
+
+
+function $(className) {
+    return document.querySelector(className)
+}
+
+function _(className) {
+    return document.querySelectorAll(className)
+}

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.css

@@ -0,0 +1,53 @@
+body,ul,li,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.swiper-container {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+.dot {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+}
+.dot li {
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    background: #fff;
+    margin-right: 10px;
+}
+.dot .active {
+    background: red;
+}
+.swiper-wrapper {
+    position: relative;
+    display: flex;
+}
+.swiper_item {
+    flex-shrink: 0;
+    width: 100%;
+}
+.swiper-wrapper img {
+    width: 100%;
+}
+
+.action {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.but {
+    color: #fff;
+    font-size: 40px;
+}

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.html

@@ -0,0 +1,64 @@
+<!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>
+  <link rel="stylesheet" href="./swiper.css">
+</head>
+<body>
+
+
+
+<div class="swiper-container">
+
+  <div class="swiper-wrapper">
+    <div class="swiper_item">
+      <img src="https://img.alicdn.com/imgextra/i1/6000000008079/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" alt="">
+    </div>
+    <div class="swiper_item">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+    </div>
+    <div class="swiper_item">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+    </div>
+  </div>
+
+  <div class="action">
+    <div class="but prev"> &lt; </div>
+    <div class="but next"> &gt; </div>
+  </div>
+
+  <ul class="dot"></ul>
+
+</div>
+
+<button onclick="test()">点我</button>
+
+
+</body>
+<script src="swiper.js"></script>
+<script>
+  var a = new swiper('.swiper-container', {
+    autoPlay: false,
+    autoTime: 3000,
+    navigation: {
+      nextEl: '.next',
+      prevEl: '.prev',
+    },
+    pagination: {
+      el: ".dot",
+    },
+  })
+
+  a.on('slideChange', function (index) {
+    console.log(index)
+  })
+
+  function test () {
+    a.slideTo(2)
+  }
+
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/插件版/swiper.js

@@ -0,0 +1,183 @@
+(() => {
+  class Swiper {
+    // 插件默认参数
+    defaultOption = {
+      onEvent: {},
+      timer: null,
+      el: '',
+      loop: false,
+      autoPlay: false,
+      autoTime: 1000,
+      initialSlide: 0,
+      speed: 300,
+      // 左右按钮
+      navigation: {
+        nextEl: null,
+        prevEl: null,
+      },
+      pagination: {
+        el: null,
+      },
+      length: () => {
+       return this._(".swiper_item").length
+      },
+      width: () => {
+       return document.querySelector(this.defaultOption.el).clientWidth
+      }
+    }
+
+    constructor(el, option) {
+      if (typeof el != "string") {
+        throw  new Error("el参数必须是字符串")
+      }
+
+      if (this.$(el) == null) {
+        throw  new Error("el的类名在网页上不存在，请检查")
+      }
+      this.defaultOption.el = el;
+      this.defaultOption.loop = option.loop || this.defaultOption.loop
+      this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay
+      this.defaultOption.autoTime = option.autoTime || this.defaultOption.autoTime
+      this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide
+      this.defaultOption.speed = option.speed || this.defaultOption.speed
+
+      this.defaultOption.navigation.prevEl = option?.navigation?.prevEl || this.defaultOption.navigation.prevEl
+      this.defaultOption.navigation.nextEl = option?.navigation?.nextEl || this.defaultOption.navigation.nextEl
+
+      this.defaultOption.pagination.el = option?.pagination?.el || this.defaultOption.pagination.el
+
+      this.init()
+    }
+
+
+    init () {
+      this.createdDot()
+      this.initLeft()
+      if (this.defaultOption.autoPlay) {
+        this.MouseEvent()
+        this.autoPlay()
+      }
+      this.BindNext()
+      this.BindPrev()
+    }
+
+    initLeft () {
+      this.set_left(this.defaultOption.initialSlide * -this.defaultOption.width())
+      this.changeDot(this.defaultOption.initialSlide)
+    }
+
+    // 事件控制中心 就是 {}
+    on (EventType, callback) {
+      this.defaultOption.onEvent[EventType] = callback
+    }
+
+    slideTo(index) {
+      this.set_left(index * -this.defaultOption.width())
+      this.changeDot(index)
+    }
+
+    MouseEvent() {
+
+      this.$(".swiper-wrapper").onmouseover = () => {
+        clearInterval(this.defaultOption.timer)
+      }
+
+      this.$(".swiper-wrapper").onmouseout = () => {
+        this.autoPlay()
+      }
+
+    }
+
+    autoPlay () {
+      this.defaultOption.timer = setInterval(() => {
+        this.motion(-this.defaultOption.width())
+      }, this.defaultOption.autoTime)
+    }
+
+    createdDot() {
+      if (this.defaultOption.pagination.el != null) {
+
+        for (var i = 0; i < this.defaultOption.length(); i++) {
+          this.$(this.defaultOption.pagination.el).innerHTML += `
+            <li class="${i == 0 ? 'active':''}"></li>
+          `
+        }
+
+        // 绑定事件
+        var li = this._(`${this.defaultOption.pagination.el} li`);
+        li.forEach((v,i) => {
+          v.onclick = () => {
+            this.changeDot(i)
+          }
+        });
+
+      }
+    }
+
+    changeDot(index) {
+
+      this.defaultOption.onEvent.hasOwnProperty("slideChange")
+      ? this.defaultOption.onEvent.slideChange(index)
+      : ''
+
+      var li = this._(`${this.defaultOption.pagination.el} li`);
+      li.forEach((itme) => {
+        itme.classList.remove("active")
+      })
+
+      li[index].classList.add("active")
+      this.set_left(index * -this.defaultOption.width())
+    }
+
+    BindPrev() {
+      this.defaultOption.navigation.prevEl == null
+      ? null
+      : this.$(this.defaultOption.navigation.prevEl).onclick = () => {
+          this.motion(this.defaultOption.width())
+        }
+    }
+
+    BindNext() {
+      this.defaultOption.navigation.nextEl == null
+      ? null
+      : this.$(this.defaultOption.navigation.nextEl).onclick = () => {
+          this.motion(-this.defaultOption.width())
+        }
+    }
+
+    motion(offset) {
+      var totalOffset = this.left() + offset;
+      var maxLenght = -this.defaultOption.width() * (this.defaultOption.length() - 1)
+      if (totalOffset < maxLenght) {
+        totalOffset = 0
+      }
+      if (totalOffset > 0) {
+        totalOffset = maxLenght
+      }
+
+      this.set_left(totalOffset)
+      this.changeDot(totalOffset / -this.defaultOption.width())
+    }
+
+
+    left() {
+      return parseInt(this.$(".swiper-wrapper").style.left)
+    }
+
+
+    set_left(offset) {
+      this.$(".swiper-wrapper").style.left = `${offset}px`;
+    }
+
+
+    $(className) {
+      return document.querySelector(`${this.defaultOption.el} ${className}`)
+    }
+
+    _(className) {
+      return document.querySelectorAll(`${this.defaultOption.el} ${className}`)
+    }
+  }
+
+  window.swiper = Swiper
+})()

历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/笔记.txt

@@ -0,0 +1,63 @@
+1：定位修改left数值
+
+2：css3 平移实现移动
+
+
+
+
+
+实现的功能：
+
+自定义参数：
+1：loop: false // 循环模式选项
+2：自动播放
+
+   autoPlay: true // false 【完成】
+   autoTime: 3(默认) 用户可以自定义 【完成】
+
+【完成】3：是否需要前进后退按钮
+	如果需要
+  1：写上html
+  2：
+	  // 如果需要前进后退按钮
+	  navigation: {
+	    nextEl: '.swiper-button-next',
+	    prevEl: '.swiper-button-prev',
+	  },
+
+【完成】4：是否需要小圆点
+  如果需要
+  1：写上html
+  2：
+    pagination: {
+      el: '.swiper-pagination',
+    },
+
+【完成】5：initialSlide: 0(默认) 设置显示第几张图
+
+
+功能（方法）：
+
+1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
+new Swiper('.swiper-container',{
+  on:{
+    slideChange: function(){
+      alert('改变了，activeIndex为'+this.activeIndex);
+    },
+  },
+})
+
+mySwiper.on('slideChange', function () {
+  //...
+});
+
+
+var slideChange = function () {
+}
+
+var a = {
+slideChange: function () {
+ },
+ ddd: fun
+}
+2：slideTo(index)  传入参数，切换轮播图

历届学生/韩一伟/项目开发/上课项目/psd/css/clear.css

@@ -0,0 +1,9 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩一伟/项目开发/上课项目/psd/css/index.css

@@ -0,0 +1,240 @@
+.header {
+    height: 0.9rem;
+    position: fixed;
+    width: 100%;
+    top:0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0.37rem;
+    align-items: center;
+    box-sizing: border-box;
+    z-index: 999;
+}
+.header .scode {
+    width: 0.42rem;
+	height: 0.42rem;
+}
+.header ul {
+    display: flex;
+}
+.header ul li {
+    font-size: 0.3rem;
+    color: #fff;
+    margin-right: 0.25rem;
+}
+.header ul li:last-child {
+    margin-right: 0 !important;
+}
+.header .search {
+    width: 0.43rem;
+	height: 0.43rem;
+}
+.header .active {
+    position: relative;
+}
+.header .active::after {
+    content: "";
+    position: absolute;
+    width: 0.35rem;
+	height: 0.02rem;
+	background-color: #ffffff;
+	box-shadow: 0rem 0.02rem 0.02rem 0rem 
+		rgba(12, 0, 255, 0.35);
+	border-radius: 0.01rem;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -0.1rem;
+}
+
+.content {
+    height: calc(100vh - 1rem);
+    background: url("../img/back.png");
+    background-size: cover;
+    position: relative;
+}
+
+.footer {
+    position: fixed;
+    width: 100%;
+    height: 1rem;
+	background-color: #000000;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 999;
+}
+.footer .active {
+    position: relative;
+}
+.footer .active a {
+    font-size: 0.3rem;
+}
+.footer .active::after {
+    content: "";
+    width: 0.51rem;
+	height: 0.03rem;
+	background-color: #ffffff;
+	border-radius: 0.015rem;
+    position: absolute;
+    bottom: -0.26rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.footer li a {
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+
+.user_action {
+    position: absolute;
+    right: 0.19rem;
+    bottom: 0.14rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.user_top {
+    width: 0.96rem;
+	height: 0.97rem;
+	border: solid 0.03rem #ffffff;
+    position: relative;
+    border-radius: 100%;
+    margin-bottom: 0.3rem;
+}
+.user_top .tx {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+}
+.user_top .add {
+    position: absolute;
+    bottom: -0.16rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0.34rem;
+	height: 0.33rem;
+}
+.user_action ul {
+
+}
+.user_action ul li {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 0.27rem;
+}
+.user_action ul li:nth-child(2) img{
+    width: 0.7rem;
+	height: 0.7rem;
+}
+
+.user_action ul li:last-child{
+    margin-bottom: 0 !important;
+}
+
+.user_action ul p{
+	font-size: 0.2rem;
+	color: #ffffff;
+}
+.user_action ul img {
+    width: 0.68rem;
+	height: 0.63rem;
+    margin-bottom: 0.09rem;
+}
+
+.shop {
+    position: absolute;
+    bottom: 0.1rem;
+    left: 0.3rem;
+}
+.shop_name {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.22rem;
+}
+.shop_name img {
+    width: 0.28rem;
+	height: 0.26rem;
+}
+.shop_name p {
+	font-size: 0.26rem;
+	color: #ffc600;
+    margin-left: 0.1rem;
+}
+.shop_music {
+    display: flex;
+    align-items: center;
+    margin-top: 0.27rem;
+}
+.shop_music img{
+    width: 0.27rem;
+	height: 0.28rem;
+    margin-right: 0.13rem;
+}
+.shop_music p{
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+.shop_item {
+    width: 5.85rem;
+	height: 1.68rem;
+	background-color: #ffffff;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.shop_item .shop_img {
+    width: 1.48rem;
+	height: 1.48rem;
+    margin-right: 0.15rem;
+    margin-left: 0.09rem;
+}
+.shop_item_right h3{
+    width: 3.61rem;
+	font-size: 0.28rem;
+	color: #333333;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0.2rem;
+}
+.shop_item_right .price {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.1rem;
+}
+
+.shop_item_right .price span{
+	font-size: 0.28rem;
+	color: #333333;
+}
+.shop_item_right .price .jx{
+    width: 0.6rem;
+    height: 0.24rem;
+    background-color: #ea4e3d;
+    border-radius: 0.12rem;
+    margin-left: 0.03rem;
+    font-size: 0.2rem;
+    zoom: 0.9;
+    color: #fffefe;
+    padding: 0.03rem 0.1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.shop_item_right .tip {
+	font-size: 0.2rem;
+	color: #626262;
+    zoom: 0.9;
+}
+.shop_item .car {
+    width: 0.46rem;
+	height: 0.46rem;
+    position: absolute;
+    right: 0.34rem;
+    bottom: 0.17rem;
+}

历届学生/韩一伟/项目开发/上课项目/psd/css/public.css

@@ -0,0 +1,3 @@
+.clear_size {
+    font-size: 0;
+}

历届学生/韩一伟/项目开发/上课项目/psd/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./js/rem.js"></script>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    
+    <div class="header clear_size">
+        <img class="scode" src="./img/scode.png" alt="">
+        <ul>
+            <li>推荐</li>
+            <li  class="active">关注</li>
+            <li>直播</li>
+        </ul>
+        <img class="search" src="./img/search.png" alt="">
+    </div>
+
+    <div class="content">
+
+        <div class="user_action clear_size">
+            <div class="user_top">
+                <img class="tx" src="https://upload.jianshu.io/users/upload_avatars/11740279/4ba082e0-7a30-4429-9d9b-8cea04af272f.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/180/h/180" alt="">
+                <img class="add" src="./img/add.png" alt="">
+            </div>
+            <ul>
+                <li>
+                    <img src="./img/like.png" alt="">
+                    <p>71.1W</p>
+                </li>
+                <li>
+                    <img src="./img/share.png" alt="">
+                    <p>分享</p>
+                </li>
+                <li>
+                    <img src="./img/remme.png" alt="">
+                    <p>评论</p>
+                </li>
+                <li>
+                    <img src="./img/shop.png" alt="">
+                    <p>购物袋</p>
+                </li>
+            </ul>
+        </div>
+
+
+        <div class="shop clear_size">
+            <div class="shop_name">
+                <img src="./img/shop_icon.png" alt="">
+                <p>美林美妆合肥店   >7KM</p>
+            </div>
+            <div class="shop_item">
+                <img class="shop_img" src="https://upload-images.jianshu.io/upload_images/3730494-32aac8f186217ab2.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240" alt="">
+                <div class="shop_item_right">
+                    <h3>夏季网纱半身裙中长款纱……</h3>
+                    <div class="price">
+                        <span>¥68.00</span>
+                        <div class="jx">精选</div>
+                    </div>
+                    <div class="tip">已卖1020</div>
+                </div>
+
+                <img class="car" src="./img/car.png" alt="">
+            </div>
+            <div class="shop_music">
+                <img src="./img/music.png" alt="">
+                <p>美林美妆合肥店   >7KM</p>
+            </div>
+        </div>
+
+    </div>
+
+    <ul class="footer clear_size">
+        <li >
+            <a href="">首页</a>
+        </li>
+        <li >
+            <a href="">好友</a>
+        </li>
+        <li>
+            <a href="">圈子</a>
+        </li>
+        <li class="active">
+            <a href="">购物车</a>
+        </li>
+        <li>
+            <a href="">我的</a>
+        </li>
+    </ul>
+</body>
+</html>

历届学生/韩一伟/项目开发/上课项目/psd/js/rem.js

@@ -0,0 +1,12 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/韩一伟/项目开发/上课项目/tabs切换/index.html

@@ -0,0 +1,78 @@
+<!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, ul, li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .tabs {
+            width: 300px;
+            margin: 0 auto;
+        }
+
+        .title {
+            display: flex;
+            height: 45px;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .conetnt li {
+            display: none;
+        }
+        .t_active {
+            color: red;
+        }
+        .c_active {
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+    
+
+    <div class="tabs">
+        <ul class="title">
+            <li class="a t_active">社会</li>
+            <li>财经</li>
+            <li>军事</li>
+            <li>体育</li>
+            <li>娱乐</li>
+        </ul>
+
+        <ul class="conetnt">
+            <li class="c_active">社会的内容</li>
+            <li>财经的内容</li>
+            <li>军事的内容</li>
+            <li>体育的内容</li>
+            <li>娱乐的内容</li>
+        </ul>
+    </div>
+
+</body>
+
+<script>
+    var title = document.querySelectorAll(".title li");
+    var content = document.querySelectorAll(".conetnt li");
+
+    // es6 forEach
+    title.forEach( function(v,i) {
+        v.onclick = function () {
+
+            title.forEach(function (item,index) {
+                item.className = ""
+                content[index].className = ""
+            })
+
+            v.classList.add("t_active")
+            content[i].classList.add("c_active")
+        }
+    } )
+</script>
+</html>

历届学生/韩一伟/项目开发/上课项目/tabs切换/jianyi.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>搜索建议</title>
+</head>
+
+<body>
+
+    <input type="text" placeholder="请输入关键字">
+    <ul>
+
+    </ul>
+</body>
+<script>
+    var search = document.querySelector("input");
+    // 搜索建议数组
+    var list = ['今天下雨了', '今天忘记吃药', '今天下雨很大', 'html很简单', 'js+html实现功能', '忘记带手机了'];
+    // 保存符合条件的建议
+    var newList = [];
+
+    // 为输入框绑定输入事件
+    search.oninput = function () {
+        // 清除上一次留下的记录
+        newList = []
+        // 用户输入的关键字不等0，表示有值才开始走里面的搜索建议代码
+        if (search.value.length != 0) {
+            // 遍历取出list中每条数据
+            list.forEach(function (v) {
+                // 判断用户输入的是否在建议数组中有
+                if (v.includes(search.value)) {
+                    // 替换关键字为带标签样式的数据
+                    // 再保存到新数组newList中
+                    newList.push(
+                        v.replace(search.value, `<span style="color:red">${search.value}</span>`)
+                    )
+                }
+            })
+
+            renderLi()
+
+        // 没有输入东西，给用户一个提示
+        } else {
+            document.querySelector("ul").innerHTML = "请输入关键字"
+        }
+    }
+
+    // 专门用来生成多个li标签，并放到网页ul中
+    function renderLi() {
+        // 如果没搜到，现实暂无
+        if (newList.length == 0) {
+            document.querySelector("ul").innerHTML = "<p>暂无建议</p>"
+
+        // 搜到了    
+        } else {
+            // 保存所有li标签代码的
+            var li = ""
+            // 遍历newList搜索建议数组
+            newList.forEach(function (v) {
+                // 进行拼接多个li标签
+                li += `<li>${v}</li>`
+            });
+            // 使用 innerHTML 将所有li标签的html代码塞入 ul 
+            document.querySelector("ul").innerHTML = li
+        }
+
+    }
+</script>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/tabs切换/message.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>留言</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        textarea {
+            resize: none;
+            width: 100%;
+            height: 100%;
+        }
+        .main {
+            position: relative;
+            margin: 10% auto;
+            width: 300px;
+            height: 200px;
+        }
+        .main span {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+    
+    <div class="main">
+        <textarea name="" id="" cols="30" rows="10"></textarea>
+        <span class="text">0/30</span>
+    </div>
+
+</body>
+
+<script>
+    var input = document.querySelector("textarea")
+    var text = document.querySelector(".text")
+
+    input.oninput = function () {
+        if (input.value.length > 30) {
+            input.value = input.value.substring(0,30)
+        } else {
+            text.innerText = `${input.value.length}/30`
+        }
+    }
+</script>
+
+</html>

历届学生/韩一伟/项目开发/上课项目/vuecli2/.babelrc

@@ -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"]
+}

历届学生/韩一伟/项目开发/上课项目/vuecli2/.editorconfig

@@ -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

历届学生/韩一伟/项目开发/上课项目/vuecli2/.eslintignore

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

历届学生/韩一伟/项目开发/上课项目/vuecli2/.eslintrc.js

@@ -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'
+  }
+}

历届学生/韩一伟/项目开发/上课项目/vuecli2/.postcssrc.js

@@ -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": {}
+  }
+}

历届学生/韩一伟/项目开发/上课项目/vuecli2/README.md

@@ -0,0 +1,21 @@
+# vuecli2
+
+> 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).

历届学生/韩一伟/项目开发/上课项目/vuecli2/build/build.js

@@ -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'
+    ))
+  })
+})

历届学生/韩一伟/项目开发/上课项目/vuecli2/build/check-versions.js

@@ -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)
+  }
+}