first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,150 @@
<!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>
<a href="https://element.eleme.io/#/zh-CN/component/image" target="_blank">超链接</a>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法显示">
<p>段落</p>
<span> span标签 一般用于行内布局,用来放文字</span>
<div>div 用来实现布局(画网页结构的)</div>
<ul>
<li>无序列表1 用在重复性布局上</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay loop
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></video>
<audio src=""></audio>
<input type="text" name="userName" placeholder="请输入账户" disabled>
<input type="number" name="userPhone" placeholder="请输入手机号" readonly>
<input type="password" name="userPwd" placeholder="亲输入密码">
<input type="submit" value="登录">
<input type="button" value="登录">
<button>登录</button>
<input type="file">
<input type="color">
<input type="date">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test1">
<input type="radio" name="test1">
<input type="radio" name="test1">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="range">
<form action="127.0.0.1/login.php" method="get">
</form>
<i>你还一 存放图标的</i>
<select name="">
<option value="">--请选择城市--</option>
<option value="nj">南京</option>
<option value="hf">合肥</option>
<option value="wh">武汉</option>
</select>
<textarea name="" cols="30" rows="10" placeholder="请输入留言"></textarea>
<table border="1">
<tr>
<th>年份</th>
<th>岁数</th>
</tr>
<tr>
<td>1999</td>
<td>11</td>
</tr>
<tr>
<td>2000</td>
<td>22</td>
</tr>
</table>
<div>
<small>本教</small> 程中,<big>你将</big> 学习如<em>何使</em>用 HTML 来 <strong>创建站</strong> 点。 HTML 很 <sub>容易</sub> 学习!你
<sup>会喜欢</sup> 它的! 现在开始学习 HTML!HTML 实例 学习 <del>100</del> 个实例!使用我们的编辑器,你可以编辑 HTML,然后点击测
</div>
<div>
return function() {
    let context = this;
    let args = arguments;
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(function() {
      result = func.apply(context, args);
    }, wait);
    return result;
   }
</div>
<pre>
return function() {
    let context = this;
    let args = arguments;
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(function() {
      result = func.apply(context, args);
    }, wait);
    return result;
   }
</pre>
</body>
</html>

View File

@@ -0,0 +1,113 @@
<!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_top">
<div class="location">
<img src="" alt="">
<span></span>
</div>
<ul class="menu">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<div class="header_botttom">
<img src="" alt="" class="left">
<div class="center">
<div class="search">
<div class="search_left">
<div class="search_input">
<input type="text">
<img src="" alt="">
</div>
<ul>
<li></li>
</ul>
</div>
<div class="search_right">
<img src="" alt="">
<span>我的购物车</span>
</div>
</div>
<ul></ul>
</div>
<img src="" alt="" class="right">
</div>
</div>
<div class="content">
<div class="type">
<ul>
<li>
<a href=""></a>
</li>
</ul>
<div class="banner">
<div class="big_banner"></div>
<ul class="small_banner">
<li><img src="" alt=""></li>
</ul>
</div>
<div>
<div class="user_login">
<div class="user_img">
<img src="" alt="">
<div class="user_img_right">
<p>Hi~欢迎逛京东!</p>
<div>
<span>登录</span> | <span>注册</span>
</div>
</div>
</div>
<div class="user_button">
<div></div>
<div></div>
</div>
</div>
<div class="new">
<div class="new_title">
<p></p>
<div class="more">
<span>更多</span>
<img src="" alt="">
</div>
</div>
<ul class="news_list">
<li>
<span></span>
<p></p>
</li>
<li>
<span></span>
<p></p>
</li>
</ul>
</div>
<ul>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,71 @@
git
linus
版本控制软件
公共(远程)仓库
githubgitee(码云)condinggitlab
本地仓库
分支:
开发 dev
测试 test
上线 build
git 命令
git init 初始化本地仓库
git add -A
git commit "" 设置提交备注
git push 上传本地文件到服务器
测试!!!
11111
dsvbjvbs jhfbjwebfhe
dsvbjvbs 111 222
dsvbjvbs 111 你好哈哈哈哈
标签分为两:
块标签:
在网页中,会独占一行的标签
特征:可以设置宽高
哪些h1~h6 p div ul ol
行标签:
在网页中,不会独占一行的标签(可以多个放在一行)
特征:不可以设置宽高
哪些span a img
请求方式
1get 读操作
2post 新增操作
3delete 删除操作
4put 更新操作
请求的组成方式:
到后面ajax再讲

View File

@@ -0,0 +1,37 @@
<!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="header">
<div class="logo"></div>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<div class="content">
<div class="content_text">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<!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: 200px;
height: 200px;
/* border: 10px solid red; */
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
/* margin: 50px; */
/* margin: 50px 40px; */
/* margin: 50px 30px 40px; */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 50px; */
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
float: left;
}
.box_2 {
background: blue;
}
.box_3 {
width: 150px;
height: 150px;
background: cadetblue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box_1">
</div>
<div class="box box_2">
</div>
</div>
<div class="box_3">
<span>ccwqwcq</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,137 @@
<!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>
.test, .test2 {
color: red;
}
.main h1 span{
color: yellow;
}
.demo p + span {
color: violet;
}
.demo > p {
color: tomato;
}
.htest:hover {
font-size: 40px;
}
.news li:nth-child(5n) {
color: palevioletred;
}
.news li:last-child {
color: rgb(4, 247, 17);
}
.news li:first-child {
color: rgb(247, 32, 4);
}
.username:focus {
width: 300px;
background: yellow;
}
.ba::before {
content: "before的使用";
}
.ba::after {
content: "after的使用";
}
::selection {
background: red;
color: blue;
}
.login input[placeholder="输入手机号"] {
height: 60px;
}
.login input[type="password"] {
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<h1>
<a href="">
<p>
<span>你好</span>
</p>
</a>
</h1>
<span>dwededes</span>
</div>
<div class="demo">
<p>哈哈哈1</p>
<p>哈哈哈4</p>
<span>哈哈哈2</span>
<span>
<p>ccccc</p>
</span>
</div>
<p class="test2">qdqwdwq</p>
<h2 class="test">wqdwqdqw</h2>
<div class="htest">你好</div>
<ul class="news">
<li>你好测试1</li>
<li>你好测试2</li>
<li>你好测试3</li>
<li>你好测试4</li>
<li>你好测试5</li>
<li>你好测试6</li>
<li>你好测试7</li>
<li>你好测试8</li>
<li>你好测试9</li>
<li>你好测试8</li>
<li>你好测试9</li>
<li>你好测试8</li>
<li>你好测试9</li>
<li>你好测试8</li>
<li>你好测试9</li>
<li>你好测试8</li>
<li>你好测试9</li>
<li>你好测试10</li>
</ul>
<div class="login">
<input class="username" type="text" placeholder="输入用户名">
<input type="number" placeholder="输入手机号">
<input type="password" placeholder="输入密码">
</div>
<div class="ba">
这是测试文字
</div>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 50px;
top: 30px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_3 {
width: 150px;
height: 150px;
background: black;
position: absolute;
left: 10px;
top: 30px;
}
.box_3 {
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
.box_4 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_3"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,133 @@
html , css, javascript (全栈 语言)
css 三种写法:
内联写法 优先级最高
内部写法
外链写法
!important 改变css默认的优先级
选择器 {
css属性名: css属性值
}
// 同时选中
选择器, 选择器 {
css属性名: css属性值
}
// 嵌套的意思,后面的选择器是前面选择器的子元素
选择器 选择器 选择器{
css属性名: css属性值
}
// 选择同级别标签
选择器 + 选择器{
css属性名: css属性值
}
// 选择父元素内部第一层子元素
选择器 > 选择器{
css属性名: css属性值
}
选择器:
class .
id #
标签选择器
通配符符选择器 * 一般用来清除标签的默认样式
伪类选择器
盒子模型
外边距 margin
内边距 padding
边框 border
border: 边框的粗细 边框的类型 边框的颜色
内容 content
盒子模型真实宽高的计算规则??
真实宽高 = 你写的宽高content + 边框 + 内边距
box-sizing: border-box; 改变盒子模型的计算规则
浮动:
让元素漂浮起来,可以左右的漂浮移动
子元素 漂浮后父容器将没有高度那么父容器后面div将挤上去
解决方案:
1给父容器设置高度等于子元素高度
2给父容器设置 overflow: hidden; (让浏览器自动设置父容器的高度)
3: 给子元素加 clear: both;
定位:
为了让元素产生堆叠(重叠),或者放在任意一个位置!
相对定位 relative
当元素设置 相对定位 后,元素原本位置还在(没有被删除)
定位参考对象:
他原本的位置·
绝对定位 absolute
当元素设置 绝对定位 后,元素原本位置不在,被删除了
定位参考对象:
父元素设置 定位,那么参考父元素的位置(当前位置)
父元素没有设置 定位,那么参考浏览器边框
固定定位 fixed
当元素设置 固定定位 后,元素原本位置不在,被删除了
定位参考对象:
浏览器边框
calc() 支持写数学表达式
元素垂直水平居中的N中场景和N方法
定位
水平 子元素 left 50% , margin-left: -子元素宽度一半
垂直 子元素 top 50% , margin-top: -子元素高度一半
块标签内部的文字需要:
垂直(单行文字) line-height: 数值等于父元素的高度
多行文字padding-top: 8.86px; 父元素高度一半 - 内部子元素高度一半
水平居中 text-align: center;
块标签内部的块标签需要:
垂直: 给父元素设置 padding-top: (父元素高度 - 子元素高度) / 2 ,还需要加上: box-sizing: border-box;
水平margin: 0 auto;
两个行内标签设置垂直方向对象:
高度高的元素vertical-align: middle;

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width: 768px) {
.box {
width: 384px !important;
height: 384px !important;
}
}
@media screen and (min-width: 1024px) {
.box {
width: 512px !important;
height: 512px !important;
}
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box_1 {
background-color: red;
}
.box_2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,5 @@
媒体查询:
动态监测屏幕的宽度变化然后修改css样式达到自适应屏幕

View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
align-items: center;
height: 40px;
justify-content: space-around;
}
ul 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>
<li>首页9</li>
<li>首页10</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,44 @@
弹性盒子
主要用来实现布局的兼容
13个css属性
display: flex 开启弹性盒子 加载父元素上
父元素上6个
justify-content设置元素在X轴上的对齐方式
space-between space-around center
align-items: 设置单根轴线(x轴) 元素在Y轴上的对齐方式
center
多根 align-content
flex-wrap: wrap; 一行放不下的时候,进行换行
flex-direction 设置元素排列方向,
如果设置columnjustify-content 和 align-items 作用交换
flex-flow: 是 <flex-direction> || <flex-wrap> 简写
子元素上6个
flex-grow 设置元素所占的空间比例(放大)
flex-shrink 设置为0表示不挤压元素的空间一般做横向滑动配合overflow-x
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。
一般都写一个属性,即表示 flex-grow
align-self 允许某个元素 不遵守父元素上的 align-items 规则
order 设置元素的位置,数值越小越靠前
尺寸兼容
rem
html上的font-size 16px
你写的单位rem * 基准数值 = 真实的尺寸
1: 媒体查询
2: js 实现

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
/*720代表设计师给的设计稿的宽度你的设计稿是多少就写多少;100代表换算比例这里写100是
为了以后好算,比如你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
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>
* {
margin: 0;
padding: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: green;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 变量</title>
</head>
<body>
</body>
<script>
// js 版本
// es5 es6 es7 es8 .......
// 变量
// 计算机内部用来存储数据的(被存储的数值是可以修改的)
// 如何定义?(先定义后使用)
// 不给默认数值,那么就是 undefined
// 常量
// 计算机内部用来存储数据的(被存储的数值是不可以修改的)
// const c = 10;
// var a = 1;
// 变量名有个命名规范
// 变量名一般用字母开头,特殊情况 ( _ $ )
// 变量名不可以使用特殊符号,( _ $ )
// 变量名可以使用中文名 ,一般绝对不用
// 变量名区分大小写
// 变量名都需要具有含义,多个单词,用驼峰(全驼峰)命名法
// 数据类型
// typeof 求数据类型
// 基础数据类型
// 字符串String、数字(Number)、布尔(Boolean)、空Null、未定义Undefined、Symbol
// 布尔(Boolean) true真 1 false 假 0
// 场景:用于条件语句的判断条件
// 空Null 就是不存在
// Symbol 表示唯一的
var a = 2, b = 2, c = 3;
// = 赋值
// == 判断是否相等,只会判断数值是否相等
// === 强等于 判断是否相等,判断数值和类型是否相等
// 算术运算符 +=-/ % ++ --
// 赋值运算符 += -= *= /= %=
// 比较运算符
// 逻辑运算符 && ||
// ++
// a++ 先用a用完后再+1
// ++a 先+1然后再用a
// --
// console.log(++a); // 2
// console.log(a); // 2
// console.log( ++a - ( (a++) - a - (a - c++) ) + (c+(b--) - b) );
// console.log( ( (++a) - a++ ) + ( --a + (--c) ) );
// console.log( ( 1 - (++c) ) + ( 1 + (--c) + 1) );
// + 加法两边如果都是number才会进行数学运算
// + 只要有一个不是number那么进行 拼接字符串
// console.log(a + b);
// console.log( !(a !== b) );
// 引用数据类型
// 对象(Object)、数组(Array)、函数(Function)
// 对象(Object)
// 1 数据类型之一,用来存储数据的
// 2 现实生活中具有属性和功能的事物在编程中的抽象概念,一般用于实现代码封装
// 如何定义?
// key: value,
// ket: value
// var obj = new Object();
// obj.name = "刘兵"
// obj.age = 18
// console.log(obj);
// var obj = new Object({ name: '刘兵', age: 18 });
// var obj = {
// name: '刘兵',
// age: 18,
// test: '111'
// }
// console.log(obj.name);
// console.log(obj["name"]);
// var car = {
// color: 'blue',
// weight: '1吨',
// speed: 6,
// start: function() {
// console.log("车辆启动");
// },
// stop: function() {
// console.log("车辆停止");
// }
// }
// if
// 三目(元)运算符
// if ( 60 < a && a < 70) {
// console.log("hahha");
// } else {
// console.log("dddd");
// }
// 1 > 2 ? console.log("hahha") : console.log("dddd")
// if 用的多switch 少
// for while
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i
// }
// console.log(sum);
// var i = 0;
// while (i <= 100) {
// sum += i
// i++
// }
// console.log(sum);
// var i = 1
// do {
// console.log(i);
// i++
// } while (i<10);
// 数组(Array)
// 通过下标来存储数据的
// var arr = new Array();
// arr[0] = "哈哈哈1"
// arr[1] = "哈哈哈2"
// arr[2] = "哈哈哈3"
// arr[3] = "哈哈哈4"
// var arr = new Array(["哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4"]);
// var arr = ["哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4"];
// console.log(arr);
// for(var i = 0; i < arr.length; i++ ) {
// console.log(arr[i]);
// }
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 410px;
height: 231px;
overflow: hidden;
position: relative;
}
.main img {
width: 100%;
height: 100%;
}
.menu {
width: 100%;
height: 45px;
position: absolute;
background: #000;
color: #fff;
text-align: center;
line-height: 45px;
position: absolute;
left: 0;
right: 0;
bottom: -45px;
transition: all 0.3s;
}
.main:hover .menu {
bottom: 0 !important;
}
</style>
</head>
<body>
<div class="main">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639829018&t=80bf1b5305782cf9e22394e469bccec1"
alt="">
<div class="menu">
<p>哈哈哈哈</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,7 @@
html
css
js : 写功能,实现特效

View File

@@ -0,0 +1,40 @@
<!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>
<!-- <button onclick="test()">点我1</button> -->
<button class="two">点我2</button>
<!-- <button class="three">点我3</button> -->
</body>
<script>
// 1
// function test() {
// alert("hahha")
// }
// 2
// document.querySelector(".two") 返回的是一个js对象
// 虚拟 dom
document.querySelector(".two").onclick = function (event) {
console.log(event);
alert("哈哈哈1")
}
// // 3
// document.querySelector(".three").addEventListener('click', function () {
// alert("1")
// })
</script>
</html>

View File

@@ -0,0 +1,128 @@
<!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>
// return 返回方法的运行结果的
// 参数
// 无参方法
// 有参方法
// 匿名方法
// 作用域
// 全局作用域
// 局部作用域
// var a = 1;
// function test (num1,num2) {
// c = "2"; // 没有var涉及到 变量提升
// return num1 + num2;
// }
// var d = test;
// console.log( d(100,300) );
// console.log(c); // ??
// function c () {
// console.log(arguments);
// }
// c(10,11,1,2,13,15,16,25,678,5,333,673,355)
// 异步
// 1: 回调 callback 回调地狱 回调多层嵌套
// 2: promise
// 同步
// function a(callback) {
// var c = null;
// setTimeout(function() {
// c = "哈哈哈哈"
// callback(c)
// }, 3000)
// }
// a( function(d) {
// console.log(d);
// } )
// function demo(callback) {
// callback("demo")
// }
// demo(function (ddd) {
// console.log(ddd);
// })
// es5 来实现js没有的类的概念
// function ddd() {
// }
// 原型 prototype
// ddd.prototype.name = "张三"
// ddd.prototype.test = function () {
// return this.name;
// }
// console.log(ddd.prototype);
// console.log( new ddd().test() );
// es6 class 语法糖
// var name = "里斯"
// 继承 extends
// 封装
// 多态
// class test {
// hello = "还是说"
// }
// 子类 派生类
// 父类 基类
// class ddd extends test {
// name = "张三";
// // 构造函数,类被初始化的时候第一个走的方法
// // 参数的默认设置,用来接收参数
// constructor () {
// super()
// console.log("类被初始化了");
// }
// test () {
// return this.hello;
// }
// }
// var a = new ddd(); // 初始化一个类,得到 类的实列
// console.log( a.test() );
// this
// 指向问题
</script>
</html>

View File

@@ -0,0 +1,71 @@
<!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>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">搞笑</li>
<li>综艺</li>
<li>娱乐</li>
<li>动漫</li>
</ul>
<ul class="tabs_content">
<li class="active_content">搞笑的内容</li>
<li>综艺的内容</li>
<li>娱乐的内容</li>
<li>动漫的内容</li>
</ul>
</body>
<script>
var titleArr = $(".tabs_title li");
var contentArr = $(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
function $(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,134 @@
<!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>tabs</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 10px;
}
.active_title {
color: red;
}
.tabs_content li {
display: none;
}
.active_content {
display: inline-block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
// json 文本数据交换格式
var tabsData = [
{
title: '搞笑2',
content: [
{ text: '搞笑的内容1' },
{ text: '搞笑的内容2' },
{ text: '搞笑的内容3' },
{ text: '搞笑的内容4' },
{ text: '搞笑的内容5' },
]
},
{
title: '综艺',
content: [
{ text: '综艺的内容1' },
{ text: '综艺的内容2' },
{ text: '综艺的内容3' },
]
},
{
title: '娱乐',
content: [
{ text: '娱乐的内容1' },
{ text: '娱乐的内容2' },
{ text: '娱乐的内容3' },
]
},
{
title: '动漫',
content: [
{ text: '动漫的内容1' },
{ text: '动漫的内容2' },
{ text: '动漫的内容3' },
]
}
]
function rendderTitle() {
tabsData.forEach(function (v, i) {
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `
<li class="${i == 0 ? 'active_content' : ''}">
${
v.content.map(function (item, index) {
return `<p>${item.text}</p>`
}).toString().replaceAll(",", "")
}
</li>
`;
console.log(v)
});
BindEvent();
}
function BindEvent() {
var titleArr = document.querySelectorAll(".tabs_title li");
var contentArr = document.querySelectorAll(".tabs_content li");
titleArr.forEach(function (v,i) {
v.onclick = function () {
// 批量的类名清除操作
titleArr.forEach(function (item,index) {
// 清除标题
item.className = ""
// 清除内容的类名
contentArr[index].className = ""
});
this.className = "active_title"
contentArr[i].className = "active_content"
}
});
}
rendderTitle()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,16 @@
函数方法function
作用:实现代码封装的(具有相同功能代码的集合)
事件:
在网页中的所有操作都是事件
三要素
1事件源
2事件类型
3事件处理函数

View File

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

View File

@@ -0,0 +1,70 @@
<!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>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/?v=getData"></script> -->
<script>
// 创建一个新的ajax对象拿出电话
var xhr = new XMLHttpRequest();
// methos 四种 请求方式
// POST 给的动作,新增
// GET 要的动作
// PUT 给的动作,更新
// DELETE 给的动作,删除
// 设置请请求方式和地址
xhr.open("POST", "http://127.0.0.1/my.php")
// 发送请求,开始拨号
// xhr.setRequestHeader("Content-Type","application/json; charset = UTF-8");
// var res = new FormData();
// res.append("id", 1)
// res.append("name", 2)
// var dara = JSON.stringify({ id: 1, name: 2 });
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
// data.result.model.res.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.preview}" alt="">
// </li>
// `
// });
} else {
console.log("暂无数据");
}
}
}
</script>
</html>

View File

@@ -0,0 +1,43 @@
<!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>
<ul>
</ul>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
async function GetIndex() {
var res = await server.classList({
page: 0,
id: 124
});
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">
<h2>${v.title}</h2>
<img src="${v.preview}" alt="">
</a>
</li>
`
});
}
GetIndex();
</script>
</html>

View File

@@ -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>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
var page = 1, total_page = null;
async function GetInfo() {
var res = await server.info({
id: location.search.split("=")[1],
page: page
})
total_page = res.result.total_page
renderPage(res.result.data)
}
function renderPage(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<img src="${v.src}" alt="">
</li>
`
});
}
document.querySelector("button").onclick = function () {
page+=1;
if (page <= total_page) {
GetInfo();
}
}
GetInfo()
</script>
</html>

View File

@@ -0,0 +1,31 @@
// 专门用来存放所有的接口地址
var config = {
// 基地址 dev开发阶段 test测试阶段 prod正式
devUrl: 'http://127.0.0.1:3000/api/json',
testUrl: 'http://127.0.0.1:9090/api/json',
prodUrl: 'http://127.0.0.1/api/json',
stage: 'dev',
urlList: {
index: '/index',
info: '/info',
classList: '/classList'
},
checkUrl: function () {
switch (this.stage) {
case "dev":
return this.devUrl
break;
case "test":
return this.testUrl
break;
case "prod":
return this.prodUrl
break;
default:
break;
}
},
}

View File

@@ -0,0 +1,39 @@
class HTTP {
constructor() {
this.xhr = new XMLHttpRequest();
}
get(option) {
return new Promise((success, error) => {
var GetParams = ""
for (const key in option.data) {
GetParams += `&${key}=${option.data[key]}`
}
GetParams = GetParams.replace("&", "?")
option.url += GetParams;
this.xhr.open("GET", config.checkUrl() + option.url)
this.xhr.send()
this.onreadystatechange(success, error)
})
}
post() { }
onreadystatechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
success(JSON.parse(this.xhr.responseText));
} else {
console.log("暂无数据");
error(this.xhr)
}
}
}
}
}

View File

@@ -0,0 +1,25 @@
class Server {
async index(data) {
return (new HTTP()).get({
url: config.urlList.index,
data: data
})
}
async classList(data) {
return (new HTTP()).get({
url: config.urlList.classList,
data: data
})
}
async info(data) {
return (new HTTP()).get({
url: config.urlList.info,
data: data
})
}
}
var server = new Server()

View File

@@ -0,0 +1,108 @@
<!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>ajax</title>
</head>
<body>
<div class="two"></div>
</body>
<script src="./js/config.js"></script>
<script src="./js/http.js"></script>
<script src="./js/server.js"></script>
<script>
// callback
// function ajax(option) {
// var xhr = new XMLHttpRequest();
// var GetParams = ""
// if (option.type == "GET") {
// for (const key in option.data) {
// GetParams += `&${key}=${option.data[key]}`
// }
// GetParams = GetParams.replace("&", "?")
// option.url += GetParams
// }
// xhr.open(option.type, option.url)
// xhr.setRequestHeader("Content-Type", "application/json; charset = UTF-8");
// xhr.send(option.type == "GET" ? null : JSON.stringify(option.data))
// xhr.onreadystatechange = function () {
// if (xhr.readyState == 4) {
// if (xhr.status == 200) {
// option.success(JSON.parse(xhr.responseText))
// } else {
// console.log("暂无数据");
// option.error(xhr)
// }
// }
// }
// }
// callback
// ajax({
// type: "POST",
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '张三'
// },
// success: function (res) {
// console.log("====== success: ", res);
// },
// error: function (err) {
// console.log("====== error: ", err);
// },
// })
// promise
// var http = new HTTP();
// http.get({
// url: 'http://127.0.0.1/index.php',
// data: {
// id: 1,
// name: '222'
// }
// })
// .then(function(res){
// console.log(res);
// })
// .catch(function(err){
// console.log(err);
// })
// console.log("=======");
var a = async () => {
let res = await server.index({ id: 1, name: '222' });
// var res = await http.get({
// url: 'http://127.0.0.1/index2.php',
// data: {
// id: 1,
// name: '222'
// }
// });
console.log("=== ",res);
}
a()
</script>
</html>

View File

@@ -0,0 +1,30 @@
ajax 主要是前后端数据交互的一种方式(通讯技术)
单向通讯技术
前端 ----> 后端
ajax 同源策略 跨域(Access-Control-Allow-Origin)
协议
域名
端口
前端http://127.0.0.1:8000/api/demo/js
后端http://127.0.0.1:3000/api/json/index
解决 跨域
1cors 后端设置请求头Access-Control-Allow-Origin允许跨域
2jsonp通过js资源文件请求绕过同源策略再加上callback拿回数据 是js文件请求不是ajax
3后端代理
get
http://127.0.0.1/my.php?id=1&page=2&num=10
post
请求体

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>我是首页</h2>
</body>
</html>

View File

@@ -0,0 +1,19 @@
// var a = require("./util");
// var { test } = require("./util");
//
// test();
const http = require('src/http');
const fs = require('fs');
// 创建本地服务器来从其接收数据
const server = http.createServer((req, res) => {
var data = fs.readFileSync("index.html");
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data.toString());
});
server.listen(80);
// http 80
// http 443

View File

@@ -0,0 +1,18 @@
{
"name": "2021-12-08",
"version": "1.0.1",
"description": "nodejs 学习",
"main": "index.js",
"scripts": {
"start": "node-dev index.js",
"pc": "node src/index.js"
},
"author": "bmy",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"axios": "^0.24.0",
"cheerio": "^1.0.0-rc.10",
"iconv-lite": "^0.6.3"
}
}

View File

@@ -0,0 +1,4 @@
module.exports = {
url: 'https://pic.netbian.com/4kmeinv/',
picUrl: 'https://pic.netbian.com'
}

View File

@@ -0,0 +1,26 @@
const axios = require('axios');
const iconv = require('iconv-lite');
const cheerio = require('cheerio');
class Http {
constructor() {
this.instance = axios.create({
timeout: 10000,
headers: {}
});
}
async get (params) {
let res = await this.instance.get(params.url, {
responseType: params.type == 1 ? "arraybuffer" : "stream"
});
if (params.type == 1) {
return cheerio.load(iconv.decode(res.data, 'gbk'));
}
return res.data;
}
}
module.exports = new Http();

View File

@@ -0,0 +1,73 @@
const http = require('./http');
const config = require('./config');
const fs = require('fs');
let urlArr = [] // 存放被请求的页面地址
let urlArrIndex = 0; // 默认从第几页开始爬
let pageArr = [] // 存放每一页的20条li数据
let pageArrIndex = 0 // 默认爬第几页的第几个图片
for (let i = 1; i <= 10; i++) {
if (i == 1) {
urlArr.push(`${config.url}index.html`)
} else {
urlArr.push(`${config.url}index_${i}.html`)
}
}
async function getUrlArr() {
let $ = await http.get({
url: urlArr[urlArrIndex],
type: 1
});
$(".slist li").each(function () {
pageArr.push({
title: $(this).find("b").text(),
img: config.picUrl+$(this).find("img").attr("src"),
url: config.picUrl+$(this).find("a").attr("href")
})
});
getPageArr()
}
async function getPageArr() {
console.log(`已获取第 ${urlArrIndex + 1}页, 的第几张 ${pageArrIndex + 1}`)
let $ = await http.get({
url: pageArr[pageArrIndex].url,
type: 1
});
downImg(config.picUrl + $(".photo-pic img").attr("src"))
}
async function downImg(url) {
let res = await http.get({
url: url,
type: 2
});
res.pipe(fs.createWriteStream(`img/${fileName()}.jpg`));
pageArrIndex += 1;
if (pageArrIndex <= 19) {
getPageArr()
} else {
urlArrIndex += 1;
if (urlArrIndex < 10) {
pageArrIndex = 0;
pageArr = [];
getUrlArr()
}
}
}
function fileName() {
return `${Math.random() * 1000000}${Date.parse(new Date())}`
}
getUrlArr()

View File

@@ -0,0 +1,12 @@
class util {
test () {
console.log("test函数");
}
}
module.exports = new util();
// 导出
// 想用的地方导入

View File

@@ -0,0 +1,66 @@
lsnodejs 不是编程语言也不是js插件它是一个让js可以成为后端编程语言的 运行环境
npm: 包(依赖“插件”)管理工具
https://www.npmjs.com/
jquery
运行环境
v8运行js + c++
nodejs (js) 想要读取c盘文件列表
|
| v8 运行js
|
c++
|
操作系统
nodejs 让js编程一个强大的后端编程语言
js: 必须依赖浏览器 js引擎 v8
前端html + css + js
后端phpjavagoc#python
1: html + css + js
2jquery mvc阶段
nodejs
3vue.js react.js mvvm
npm init 初始化一个全新的nodejs项目
创建文件package.json 最核心的文件!!!!!!不能丢!!!!
package.json记录了项目的作者代码运行方式依赖的信息等等等
npm installi 参数 插件名(系统提供内置插件 & 你自己下载) 下载安装插件
cnpm
参数
--save -S 把插件安装到正式阶段
--save-dev-D 把插件安装到开发阶段
-g 把插件安装到系统全局
install 安装的插件会自动放在 node_modules 文件夹中
dependencies依赖信息 正式阶段
devDependencies: 开发阶段
npm run 命令 运行你的命令
后端渲染
前后端分离
爬虫:

View File

@@ -0,0 +1,111 @@
<!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>component 组件</title>
</head>
<body>
<div class="app">
<h2>app 父组件</h2>
<lb-test></lb-test>
<item :list-data="newsList" @tap="goToInfo"></item>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件 封装html代码的一种方案
// 全局组件 导入 注册 使用
// 局部组件 导入 注册 使用
// 组件通讯(数据传递)
// 父组件 ---> 子组件
// props
// 子组件 ---> 父组件
// $emit
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
// 组件名 html标签名称
// 全局组件
Vue.component('item', {
// props: [ 'list' ],
props: {
listData: {
type: Array,
default: () => []
}
},
data() {
return {
title: '全局组件 - 底部导航组件'
}
},
template: `
<div class="footer">
<ul>
<li v-for="(item,index) in listData" :key="index" @click="change(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
change(i) {
this.$emit("tap", i)
}
}
})
var a = {
data() {
return {
title: '局部组件 - 测试',
list: [
{ id: 1, title: '社会1' },
{ id: 2, title: '社会2' },
{ id: 3, title: '社会3' },
{ id: 4, title: '社会4' },
]
}
},
template: `
<div class="test">
<p>{{ title }}</p>
<item :list-data="list" @tap="priimg"></item>
</div>
`,
methods: {
priimg(index) {
console.log("显示图片预览:", index);
}
}
}
var vm = new Vue({
el: '.app',
data: {
newsList: [
{ id: 1, title: '首页1' },
{ id: 2, title: '首页2' },
{ id: 3, title: '首页3' },
{ id: 4, title: '首页4' },
]
},
methods: {
goToInfo(index) {
console.log("goToInfo 进详情: ", index);
}
},
components: {
'lb-test': a
}
})
</script>
</html>

View File

@@ -0,0 +1,177 @@
<!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>vue.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 ref="demos">{{ hello | shengflh }}</h2>
<a :href="href">vue官网</a>
<ul>
<li v-for="(item,index) in list" :key="index">
<a :href=" './info.html?id='+item.id ">{{ item.text }}</a>
</li>
</ul>
<ul>
<li v-for="(value,key) in test">
{{ value }} | {{ key }}
</li>
</ul>
<input type="text" placeholder="输入用户名" v-model.trim="userName">
<p v-once>你输入的用户名:{{ userName }}</p>
<p>你输入的用户名2{{ userName }}</p>
<hr>
<div v-html="h2Demo"></div>
<div v-text="h2Demo"></div>
<hr>
<div class="test">
<div v-if="type == '1' ">群主</div>
<div v-else-if="type == '2' ">管理员</div>
<div v-else>群成员</div>
</div>
<div v-show="isShow">v-show的使用</div>
<button @click="hahah('1111')">点我</button>
<hr>
<div class="1">{{ total }}</div>
<div class="2">{{ total }}</div>
<div v-lb="ffff"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var loadMore = {
data() {
return {
page: 1,
totalPage: 0,
ffff: '哈哈哈哈哈哈哈'
}
},
methods: {
load() {
console.log("滚动加载...");
}
}
}
var vm = new Vue({
el: '.app',
mixins: [loadMore],
// 定义变量的地方
// 指令 (标签的属性)
// v-bind 将变量绑定到 标签的属性上
// 简写: :
// v-for 用来遍历数组 或 对象的
// v-model 专门给输入框用 <input> <select> <textarea>
// v-html 把变量中保存的html渲染到网页上
// v-text 把变量中保存的html显示到网页上
// v-if 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html元素会被删除
// 1: 条件较多的时候
// v-else
// v-if v-else-if ..... v-else
// v-show 根据条件的true false 对元素进行显示隐藏
// 不符合条件的html会被display: none;
// 2: 数据量较大的时候,需要提高性能的时候
// v-on 绑定事件()
// 简写: @
// 混入 用于代码封装 解决this指向问题
// 生命周期 created mounted
// ref
data: {
hello: '你好啊Vue.js',
href: 'https://cn.vuejs.org/',
userName: "刘兵",
list: [
{ id: 1, text: '新闻1' },
{ id: 2, text: '新闻2' },
{ id: 3, text: '新闻3' },
],
test: {
id: 1,
text: '新闻1'
},
h2Demo: '<h2>哈哈哈哈哈</h2>',
type: '1', // 1 2 3
isShow: false
},
// 发送ajax请求
filters: {
shengflh(val) {
return val.substring(0, 3) + "..."
}
},
directives: {
lb: {
// 指令的定义
inserted: function (el, binding) {
// console.log("=========:",el, binding.value);
document.title = binding.value
}
}
},
created() {
console.log(this.page);
console.log(this.load());
console.log(this.$refs.demos);
},
mounted() {
console.log(this.$refs.demos);
},
updated() {
console.log("监听到页面改变");
},
// 定义方法
methods: {
hahah(num) {
console.log('你点了我,哈哈 ', num);
this.testss()
},
testss() {
console.log(this.userName);
}
},
computed: {
total() {
console.log("total....");
return 1 + 1
}
},
watch: {
userName(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
</script>
</html>

View File

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

View File

@@ -0,0 +1,37 @@
vue.js 是一个 mvvm 框架
mvc model数据 数据库) view页面 controller控制器
mvvm model数据 ajax view页面 原生jsvue view and model
view and model
数据双向绑定
组件系统
dom 原生jsjq
去dom操作
前端三大框架:
angular.js 最早出来
react.js 偏向前端新语法
php laravel
vue.js 尤雨溪
vue 1.x
typescript 强类型的javascript语法
vue 2.x
option api 语法 60%
this 指向
class api 语法
vue 3.x ++ 基于 typescript 开发
Composition API 40%

View File

@@ -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>
</head>
<body>
<div class="app">
<div>首页的轮播图</div>
<swiper :list="homeSwiper">
<template v-slot:default="{ item }">
<a :href=" 'info.html?id='+ item.id">
<img :src="item.img" alt="">
</a>
</template>
</swiper>
<hr>
<div>详情页的轮播图</div>
<swiper :list="infoSwiper">
<template v-slot:default="{ item }">
<img :src="item" alt="">
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('swiper', {
data() {
return {
}
},
props: {
list: {
type: Array,
default: () => []
}
},
template: `
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item,index in list" :key="index">
<slot :item="item"></slot>
</div>
</div>
</div>
`,
methods: {
clickData() {
}
}
});
new Vue({
el: '.app',
data:{
homeSwiper: [
{ id: 1, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4fd0e71e2ba1dac1a3b685417393e52c.jpg?thumb=1&w=720&h=360' },
{ id: 2, img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b2fe8572343d83cd84aa6d0c04b8390.jpg?thumb=1&w=720&h=360' },
],
infoSwiper: [
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6ff526b9d75342f0995778b56060b85.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beac5a54f4f4d93cb3f680a097b4f644.jpg?f=webp&w=1080&h=660&bg=F5F5F5'
]
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

View File

@@ -0,0 +1,89 @@
<!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">
<item1 @change="getChange">
<template v-slot:back>
<i class="iconfont test"></i>
<span>返回</span>
</template>
<template v-slot:icon>
<i class="iconfont test"></i>
<i class="iconfont test"></i>
</template>
</item1>
<item2 :demo="text"></item2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 作用域插槽
Vue.component('item1', {
data() {
return {
title: 'item1',
test: 'item1 test data'
}
},
template: `
<div class="item1" @click="clickData">
<div class="back">
<slot name="back"></slot>
</div>
<div class="icon">
<slot name="icon"></slot>
</div>
</div>
`,
methods: {
clickData() {
this.$emit("change", this.test)
}
}
});
Vue.component('item2', {
props: {
demo: {
type: String,
default: ''
}
},
data() {
return {
title: 'item2'
}
},
created() {
console.log(this.$parent.$children[0].$data.test);
},
watch: {
demo(n,o) {
console.log(n,o);
}
},
template: `
<div class="item2">item2</div>
`
});
new Vue({
el: '.app',
data:{
text: ''
},
methods:{
getChange(data) {
this.text = data
}
}
})
</script>
</html>

View File

@@ -0,0 +1,257 @@
<!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> vue-router</title>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<p>
<router-link to="/home">首页</router-link>
<router-link to="/type">分类</router-link>
<router-link to="/car">购物车</router-link>
<router-link to="/me">我的</router-link>
</p>
<div class="content">
<transition name="bounce">
<router-view></router-view>
</transition>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// vue-router 路由管理工具 管理页面地址,你输入什么地址看到什么页面
// 路由?
// 你输入一个地址,看到对应页面
// router-link 标签(组件) 页面跳转a
// 两种路由模式
// hash 路由
// http://www.bmy.com/#/about
// http://www.bmy.com/#/index
// http://www.bmy.com/#/info?id=3
// window.location.hash 和 hashchange 事件 来实现
// history 路由
// http://www.bmy.com/about
// http://www.bmy.com/index
// history.pushState 和 history.replaceState 和 onpopstate 事件 来实现
// query
// http://www.bmy.com/#/about?id=1&page=1
// params
// http://www.bmy.com/#/about/1/1
// $router 获取路由跳转的各个方法
// $route 获取路由访问的地址信息
// 导航守卫
// 全局守卫
// 路由独享的守卫
// 组件独享的守卫
const Home = {
data() {
return {
list: [
{ id: 1, title: '商品1' },
{ id: 2, title: '商品2' },
{ id: 3, title: '商品3' },
{ id: 4, title: '商品4' },
]
}
},
template: `
<div class="home">
<ul>
<li v-for="(item,index) in list" :key="index" @click="goInfo(index)">
{{ item.title }}
</li>
</ul>
</div>
`,
methods: {
goInfo(index) {
this.$router.push({
name: 'info',
query: {
id: this.list[index].id,
title: this.list[index].title,
}
})
}
}
}
const Type = {
template: '<div>分类</div>'
}
const Car = {
template: '<div>购物车</div>'
}
const Me = {
template: `
<div >
我的
</div>`
}
const Info = {
template: `
<div class="info">详情</div>
`,
created() {
console.log(this.$route.query.id);
console.log(this.$route.query.title);
}
}
const Login = {
template: `
<div class="login">
登录页面
<button @click="UserLogin">点击登录</button>
</div>
`,
methods: {
UserLogin() {
// 调用ajax 拿到token保存到本地
localStorage.setItem("token", "wqewqrr")
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace("/")
}
}
}
}
const routes = [
{
path: '/',
redirect: '/home',
meta: {
isLogin: false
}
},
{
path: '/home',
component: Home,
meta: {
isLogin: false
}
},
{
path: '/type',
component: Type,
meta: {
isLogin: false
}
},
{
path: '/car',
component: Car,
meta: {
isLogin: true
}
},
{
path: '/me',
component: Me,
meta: {
isLogin: true
}
},
{
path: '/info',
name: 'info',
component: Info,
meta: {
isLogin: false
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
isLogin: false
}
},
]
const router = new VueRouter({
mode: 'hash',
routes
});
// 登录拦截
router.beforeEach((to, from, next) => {
// 表示未登录
if (localStorage.getItem("token") == null) {
// 需要登录才可以查看的页面
if (to.meta.isLogin) {
next({
path: "/login",
query: {
from: to.fullPath
}
})
// 不需要登录就可以查看的页面
} else {
next()
}
// 表示登录过了
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</html>

View File

@@ -0,0 +1,13 @@
// 兄弟组件 ---> 兄弟组件
// 插槽
// vue-router
vue cli
vue 2.x
vue cli 2.x
vue 3.x
vue cli 3.x

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,33 @@
{
"name": "vuecli3-tpl",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"start": "npm run serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.24.0",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"postcss-pxtorem": "^5.1.1",
"pug": "^3.0.2",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.1.0",
"style-resources-loader": "^1.5.0",
"vue-template-compiler": "^2.6.11"
}
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -0,0 +1,9 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="less">
@import "~@less/_.less";
</style>

View File

@@ -0,0 +1,4 @@
@import "./mixins/index";
@import "./mixins/normalize";
@import "./mixins/reset";
@import "./config/color";

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,24 @@
.el-header {
padding: 0 !important;
position: fixed;
width: 100%;
z-index: 9;
top: 0;
left: 0;
right: 0;
}
.el-aside {
position: fixed;
top: 60px;
left: 0;
bottom: 0;
ul {
height: 100%;
}
}
.el-main {
margin-left: 200px;
margin-top: 60px;
}

View File

@@ -0,0 +1,7 @@
.home {
h2 {
color: @purple300;
.ellipsis();
font-size: 37.5px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,59 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -0,0 +1,21 @@
export default {
devUrl: 'http://127.0.0.1:3000/api/json',
testUrl: '',
prodUrl: '',
apiList: {
index: '/index'
},
checkUrl: function () {
switch (process.env.NODE_ENV) {
case 'development':
return this.devUrl;
break;
case 'test':
return this.testUrl;
break;
case 'production':
return this.prodUrl;
break;
}
}
}

View File

@@ -0,0 +1,17 @@
import $http from '@/service/_'
import $util from '@/util'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import HelloWorld from '@/components/HelloWorld'
export default {
VueComponents: [ HelloWorld ],
VuePlugIn: [ ElementUI ],
NotVuePlugIn: {
$http, $util
}
}

View File

@@ -0,0 +1,16 @@
export default {
path: '/',
name: 'layout',
component: () => import(/* webpackChunkName: "layout" */ '@/views/layout/_'),
children: [
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "index" */ '@/views/Home/index'),
meta: {
isLogin: true,
title: '首页'
}
}
]
}

View File

@@ -0,0 +1,71 @@
import axios from 'axios'
import config from '@/config'
import { Notification, Loading } from 'element-ui';
let loadingInstance = null;
export default class Http {
constructor () {
this.instance = axios.create({
baseURL: config.checkUrl(),
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
this.interceptors()
}
async get (params) {
return await this.instance.get(params.url, {
params: params.data,
headers: Object.assign({
token: localStorage.getItem("token")
}, params.headers )
})
}
async post (params) {
return await this.instance.post(params.url, params.data, {
headers: Object.assign({
token: localStorage.getItem("token")
}, params.headers )
})
}
interceptors () {
// 添加请求拦截器
this.instance.interceptors.request.use(function (config) {
loadingInstance = Loading.service({
text: '加载中...'
})
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
this.instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
loadingInstance.close();
switch (response.data.status) {
case 200:
return response.data.result
break;
case 404:
Notification.error({
title: '接口出现错误',
message: response.data.msg,
duration: 0
})
throw new Error(response.data.msg)
break;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
}
}

View File

@@ -0,0 +1,23 @@
// import 'amfe-flexible'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import init from './config/init'
Vue.config.productionTip = false
// 注册全局组件
init.VueComponents.forEach(v => Vue.component(v.name, v))
// 初始化vue插件
init.VuePlugIn.forEach(v => Vue.use(v))
// 挂载非vue插件到vue实例中这样可以全局调用方法
for (const key in init.NotVuePlugIn) Vue.prototype[key] = init.NotVuePlugIn[key]
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

View File

@@ -0,0 +1,73 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routesConfig from '../config/routes'
import util from '../util/index'
Vue.use(VueRouter)
const routes = [
routesConfig,
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/account/login'),
meta: {
isLogin: false
},
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") == null) {
next()
} else {
history.back()
}
}
},
{
path: '/reg',
name: 'reg',
component: () => import(/* webpackChunkName: "reg" */ '../views/account/reg'),
meta: {
isLogin: false
},
beforeEnter: (to, from, next) => {
}
}
]
const router = new VueRouter({
routes
})
// 登录拦截
router.beforeEach((to, from, next) => {
// 表示未登录
document.title = to.meta.title
if (localStorage.getItem("token") == null) {
// 需要登录才可以查看的页面
if (to.meta.isLogin) {
next({
path: "/login",
query: {
from: to.fullPath
}
})
// 不需要登录就可以查看的页面
} else {
next()
}
// 表示登录过了
} else {
next()
}
})
if (localStorage.getItem("jurisdiction") != null) {
util.createdRouterConfig(router)
}
export default router

View File

@@ -0,0 +1,7 @@
import indexService from './indexService'
import carService from './carService'
export default {
index: new indexService(),
car: new carService()
}

View File

@@ -0,0 +1,3 @@
export default class carService {
}

View File

@@ -0,0 +1,14 @@
import http from "@/http"
import config from "@/config"
export default class IndexService {
async home(data = {}, header = {}) {
return await (new http()).get({
url: config.apiList.index,
data: data,
headers: header
})
}
}

View File

@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

View File

@@ -0,0 +1,25 @@
import routesConfig from '@/config/routes'
class Index {
createdRouterConfig (self) {
let jurisdiction = JSON.parse(localStorage.getItem("jurisdiction"))
jurisdiction.forEach(v => {
v.children.forEach(k => {
routesConfig.children.push({
path: `/${v.path}/${k.path}`,
name: `${v.path}_${k.path}`,
component: () => import(`@/views/${v.path}/${k.path}.vue`),
meta: {
isLogin: true,
title: k.name
}
})
})
});
self.addRoute(routesConfig)
}
}
export default new Index()

View File

@@ -0,0 +1,22 @@
<template>
<div class="index">
<ul>
<li v-for="i in 100">哈哈哈哈</li>
</ul>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,79 @@
<template>
<div class="login">
<el-button type="primary" @click="UserLogin">登录</el-button>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {}
},
methods: {
async UserLogin() {
// 掉接口
// let res = this.$http.user.login({ name: '', pwd: '' })......
let res = {
token: 'UYFUBLJBILHIGUYFYTT/JUHBKVTCURDFTURDRTDJHGVJKHVB',
jurisdiction: [
{
name: '用户管理',
path: 'user',
icon: 'el-icon-user',
children: [
{
name: '添加用户',
path: 'add',
icon: 'el-icon-folder-add',
},
{
name: '编辑用户',
path: 'edit',
icon: 'el-icon-edit',
},
{
name: '用户列表',
path: 'list',
icon: 'el-icon-tickets',
}
]
},
{
name: '文章管理',
path: 'article',
icon: 'el-icon-document',
children: [
{
name: '添加文章',
path: 'add',
icon: 'el-icon-folder-add',
},
{
name: '编辑文章',
path: 'edit',
icon: 'el-icon-edit',
},
{
name: '文章列表',
path: 'list',
icon: 'el-icon-tickets',
}
]
}
]
};
localStorage.setItem("token", res.token);
localStorage.setItem("jurisdiction", JSON.stringify(res.jurisdiction));
this.$router.replace("/home");
}
}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.reg reg
</template>
<script>
export default {
name: "reg",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.add 添加文章
</template>
<script>
export default {
name: "add",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.editUser 编辑文章
</template>
<script>
export default {
name: "editUser",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.list 文章列表
</template>
<script>
export default {
name: "list",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,86 @@
<template>
<div class="layout">
<el-container>
<el-header>
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu class="el-menu-vertical-demo" router :unique-opened="true" :default-active="$route.path">
<el-submenu v-for="(item,index) in jurisdiction" :key="index" :index="index.toString()">
<template slot="title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
<el-menu-item-group>
<el-menu-item v-for="(v,i) in item.children" :key="i" :index="`/${item.path}/${v.path}`">
<template slot="title">
<i :class="v.icon"></i>
<span>{{ v.name }}</span>
</template>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "layout",
data() {
return {
jurisdiction: JSON.parse(localStorage.getItem("jurisdiction"))
}
},
created() {
//
console.log(this.$route)
this.$util.createdRouterConfig(this.$router)
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.add 添加用户
</template>
<script>
export default {
name: "add",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.editUser 编辑用户
</template>
<script>
export default {
name: "editUser",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,17 @@
<template lang="pug">
.list 用户列表
</template>
<script>
export default {
name: "list",
data() {
return {}
},
methods: {}
}
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,43 @@
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: './',
chainWebpack: config => {
// 配置pug
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
// 配置别名
config.resolve.alias
.set("@", resolve("src"))
.set("@less", resolve("src/assets/less"))
.set("@page", resolve("src/assets/less/page"))
.set("@components", resolve("src/components"))
.set("@views", resolve("src/views"))
// 配置 less 的自动导入
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
}
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/less/_.less'),
],
})
}

View File

@@ -0,0 +1,65 @@
权限控制:
路由权限(路由配置文件)
页面显示和隐藏
1用户登录成功后 接口 /login
{
token: '',
jurisdiction: [ // 权限数组
{
name: '用户管理',
path: 'user',
icon: '',
children: [
{
name: '添加用户',
path: 'add',
icon: '',
},
{
name: '编辑用户',
path: 'edit',
icon: '',
},
{
name: '用户列表',
path: 'list',
icon: '',
}
]
},
{
name: '文章管理',
path: 'article',
icon: '',
children: [
{
name: '添加文章',
path: 'add',
icon: '',
},
{
name: '编辑文章',
path: 'edit',
icon: '',
},
{
name: '文章列表',
path: 'list',
icon: '',
}
]
}
]
}
2: 根据 权限数组 遍历,生成路由的配置文件
根据 权限数组 遍历,生成 左侧的导航菜单

View File

@@ -0,0 +1,23 @@
body,p,ul,li,h1,h2,h3,h4,h5,h6,input{
margin: 0;
padding: 0;
border: none;
}
body {
font-size: 0;
}
li {
list-style: none;
}
input {
/* 去除选中input时候产生的外边框 */
outline: none;
}
a {
text-decoration: none;
color: #000;
}

View File

@@ -0,0 +1,242 @@
.header {
position: fixed;
width: 100%;
height: .9rem;
display: flex;
z-index: 999;
top: 0.29rem;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.37rem;
}
.header img {
width: 0.42rem;
height: 0.42rem;
}
.header ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.header ul li{
font-size: 0.3rem;
color: #fff;
}
.header ul li:nth-child(2) {
margin: 0 0.22rem;
}
.content {
height: calc(100vh - 1rem);
background: url("../img/back.png");
background-size: cover;
background-position-x: center;
position: relative;
}
.user_right {
position: absolute;
right: 0.19rem;
bottom: 0.14rem;
}
.user_right .user_top {
position: relative;
border: solid 0.03rem #ffffff;
width: 0.96rem;
height: 0.97rem;
border-radius: 100%;
margin-bottom: 0.3rem;
}
.user_right .user_top .user_img{
width: 100%;
height: 100%;
}
.user_right .user_top .user_flow{
position: absolute;
width: 0.34rem;
height: 0.33rem;
left: 50%;
transform: translateX(-50%);
bottom: -0.14rem;
}
.user_right ul{}
.user_right ul li {
text-align: center;
}
.user_right ul li:nth-child(1){
margin-bottom: 0.36rem;
}
.user_right ul li:nth-child(2){
margin-bottom: 0.27rem;
}
.user_right ul li:nth-child(3){
margin-bottom: 0.32rem;
}
.user_right ul li:nth-child(1) p {
margin-top: 0.09rem;
}
.user_right ul li:nth-child(2) p {
margin-top: 0.09rem;
}
.user_right ul li:nth-child(3) p{
margin-top: 0.17rem;
}
.user_right ul li:nth-child(4) p{
margin-top: 0.15rem;
}
.user_right ul li:nth-child(1) img {
width: 0.68rem;
height: 0.63rem;
}
.user_right ul li:nth-child(2) img {
width: 0.67rem;
height: 0.8rem;
}
.user_right ul li:nth-child(3) img {
width: 0.7rem;
height: 0.7rem;
}
.user_right ul li:nth-child(4) img {
width: 0.61rem;
height: 0.61rem;
}
.user_right ul li p {
font-size: 0.2rem;
color: #ffffff;
}
.music_bottom {
position: absolute;
left: 0.3rem;
bottom: 0.1rem;
}
.music_bottom .shop_name {
display: flex;
align-items: center;
margin-bottom: 0.22rem;
}
.music_bottom .shop_name img {
width: 0.28rem;
height: 0.26rem;
margin-right: 0.1rem;
margin-left: 0.07rem;
}
.music_bottom .shop_name .shop_title {
margin-right: 0.26rem;
}
.music_bottom .shop_name span {
font-size: 0.26rem;
color: #ffc600;
}
.music_bottom .shop_item {
width: 5.85rem;
height: 1.68rem;
background-color: #ffffff;
display: flex;
padding: 0.1rem 0.09rem;
box-sizing: border-box;
margin-bottom: 0.29rem;
position: relative;
}
.music_bottom .shop_item .car{
width: 0.46rem;
height: 0.46rem;
position: absolute;
bottom: 0.17rem;
right: 0.34rem;
}
.music_bottom .shop_item .shop_pic {
width: 1.48rem;
height: 1.48rem;
margin-right: 0.15rem;
}
.music_bottom .shop_item .shop_item_r{}
.music_bottom .shop_item_r .shop_item_title{
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.21rem;
}
.music_bottom .shop_item_r .shop_item_price{
display: flex;
align-items: center;
margin-bottom: 0.17rem;
}
.music_bottom .shop_item_r .nums{
font-size: 0.2rem;
color: #626262;
zoom: 0.8;
}
.music_bottom .shop_item_price .price{
font-size: 0.28rem;
color: #333333;
margin-right: 0.03rem;
}
.music_bottom .shop_item_price .jx{
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: center;
}
.jx span {
font-size: 0.2rem;
color: #fffefe;
zoom: 0.8;
}
.shop_music {
display: flex;
align-items: center;
}
.shop_music img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.shop_music span {
font-size: 0.24rem;
color: #ffffff;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 1rem;
background-color: #000000;
display: flex;
align-items: baseline;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
line-height: 1rem;
}
.footer li {
height: 100%;
}
.footer li a {
font-size: 0.24rem;
color: #ffffff;
}
.footer .active {
position: relative;
}
.footer .active a{
font-size: 0.3rem;
}
.footer .active::after {
content: "";
position: absolute;
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
left: 50%;
transform: translateX(-50%);
bottom: 0.05rem;
}

View File

@@ -0,0 +1,6 @@
@media screen and (min-width: 1024px) {
body {
width: 375px;
margin: 0 auto;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

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