bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
历届学生/韩一伟/项目开发/上课项目/ajax案例/ajax.js Normal file
View File

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

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

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

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

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

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

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

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

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

75
历届学生/韩一伟/项目开发/上课项目/baidu.html Normal file
View File

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

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

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

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

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

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

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

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

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

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

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

53
历届学生/韩一伟/项目开发/上课项目/js案例/图片预览/preview.html Normal file
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">
<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>

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

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

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

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

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

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

0
历届学生/韩一伟/项目开发/上课项目/js案例/轮播图/index.css Normal file
View File

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

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

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

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

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

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

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

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

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

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

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

@@ -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) 传入参数，切换轮播图

BIN
历届学生/韩一伟/项目开发/上课项目/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/phone_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

9
历届学生/韩一伟/项目开发/上课项目/psd/css/clear.css Normal file
View File

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

240
历届学生/韩一伟/项目开发/上课项目/psd/css/index.css Normal file
View File

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

3
历届学生/韩一伟/项目开发/上课项目/psd/css/public.css Normal file
View File

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

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/car.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/like.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/music.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/remme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/scode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/share.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/psd/img/shop_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

97
历届学生/韩一伟/项目开发/上课项目/psd/index.html Normal file
View File

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

12
历届学生/韩一伟/项目开发/上课项目/psd/js/rem.js Normal file
View File

@@ -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";
}

78
历届学生/韩一伟/项目开发/上课项目/tabs切换/index.html Normal file
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>
<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>

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

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

53
历届学生/韩一伟/项目开发/上课项目/tabs切换/message.html Normal file
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>
<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>

12
历届学生/韩一伟/项目开发/上课项目/vuecli2/.babelrc Normal file
View File

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

9
历届学生/韩一伟/项目开发/上课项目/vuecli2/.editorconfig Normal file
View File

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

4
历届学生/韩一伟/项目开发/上课项目/vuecli2/.eslintignore Normal file
View File

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

29
历届学生/韩一伟/项目开发/上课项目/vuecli2/.eslintrc.js Normal file
View File

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

10
历届学生/韩一伟/项目开发/上课项目/vuecli2/.postcssrc.js Normal file
View File

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

21
历届学生/韩一伟/项目开发/上课项目/vuecli2/README.md Normal file
View File

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

41
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/build.js Normal file
View File

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

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

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

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

101
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/utils.js Normal file
View File

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

22
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/vue-loader.conf.js Normal file
View File

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

99
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/webpack.base.conf.js Normal file
View File

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

95
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/webpack.dev.conf.js Normal file
View File

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

145
历届学生/韩一伟/项目开发/上课项目/vuecli2/build/webpack.prod.conf.js Normal file
View File

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

7
历届学生/韩一伟/项目开发/上课项目/vuecli2/config/dev.env.js Normal file
View File

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

76
历届学生/韩一伟/项目开发/上课项目/vuecli2/config/index.js Normal file
View File

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

4
历届学生/韩一伟/项目开发/上课项目/vuecli2/config/prod.env.js Normal file
View File

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

18
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/index.html vendored Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>vuecli2</title>
<link href=./static/css/app.0733df0b13752a7ae424a7e82a1a3818.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.ebe970dc1cc5fdcd3e42.js></script>
<script type=text/javascript src=./static/js/vendor.c58c9ceb39c2f3604d30.js></script>
<script type=text/javascript src=./static/js/app.71a7ebd70b438e06ad55.js></script>
</body>
</html>

1
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/static/css/app.0733df0b13752a7ae424a7e82a1a3818.css vendored Normal file
View File

@@ -0,0 +1 @@
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}h1[data-v-48874e46],h2[data-v-48874e46]{font-weight:400}ul[data-v-48874e46]{list-style-type:none;padding:0}li[data-v-48874e46]{display:inline-block;margin:0 10px}a[data-v-48874e46]{color:#42b983}

1
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/static/js/0.d34926a9039940f3dcbd.js vendored Normal file
View File

@@ -0,0 +1 @@
webpackJsonp([0], { gORT: function (t, e, r) { "use strict"; Object.defineProperty(e, "__esModule", { value: !0 }); var a = { render: function () { var t = this, e = t.$createElement, r = t._self._c || e; return r("div", { staticClass: "hello" }, [r("h1", [t._v(t._s(t.msg))]), t._v(" "), r("h2", [t._v("Essential Links")]), t._v(" "), t._m(0), t._v(" "), r("h2", [t._v("Ecosystem")]), t._v(" "), t._m(1)]) }, staticRenderFns: [function () { var t = this, e = t.$createElement, r = t._self._c || e; return r("ul", [r("li", [r("a", { attrs: { href: "https://vuejs.org", target: "_blank" } }, [t._v(" Core Docs ")])]), t._v(" "), r("li", [r("a", { attrs: { href: "https://forum.vuejs.org", target: "_blank" } }, [t._v(" Forum ")])]), t._v(" "), r("li", [r("a", { attrs: { href: "https://chat.vuejs.org", target: "_blank" } }, [t._v(" Community Chat ")])]), t._v(" "), r("li", [r("a", { attrs: { href: "https://twitter.com/vuejs", target: "_blank" } }, [t._v(" Twitter ")])]), t._v(" "), r("br"), t._v(" "), r("li", [r("a", { attrs: { href: "http://vuejs-templates.github.io/webpack/", target: "_blank" } }, [t._v("\n Docs for This Template\n ")])])]) }, function () { var t = this.$createElement, e = this._self._c || t; return e("ul", [e("li", [e("a", { attrs: { href: "http://router.vuejs.org/", target: "_blank" } }, [this._v(" vue-router ")])]), this._v(" "), e("li", [e("a", { attrs: { href: "http://vuex.vuejs.org/", target: "_blank" } }, [this._v(" vuex ")])]), this._v(" "), e("li", [e("a", { attrs: { href: "http://vue-loader.vuejs.org/", target: "_blank" } }, [this._v(" vue-loader ")])]), this._v(" "), e("li", [e("a", { attrs: { href: "https://github.com/vuejs/awesome-vue", target: "_blank" } }, [this._v("\n awesome-vue\n ")])])]) }] }; var s = r("C7Lr")({ name: "HelloWorld", data: function () { return { msg: "Welcome to Your Vue.js App" } } }, a, !1, function (t) { r("yMka") }, "data-v-48874e46", null); e.default = s.exports }, yMka: function (t, e) { } });

1
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/static/js/app.71a7ebd70b438e06ad55.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/static/js/manifest.ebe970dc1cc5fdcd3e42.js vendored Normal file
View File

@@ -0,0 +1 @@
!function (e) { var n = window.webpackJsonp; window.webpackJsonp = function (r, c, a) { for (var i, u, f, s = 0, l = []; s < r.length; s++)u = r[s], t[u] && l.push(t[u][0]), t[u] = 0; for (i in c) Object.prototype.hasOwnProperty.call(c, i) && (e[i] = c[i]); for (n && n(r, c, a); l.length;)l.shift()(); if (a) for (s = 0; s < a.length; s++)f = o(o.s = a[s]); return f }; var r = {}, t = { 3: 0 }; function o(n) { if (r[n]) return r[n].exports; var t = r[n] = { i: n, l: !1, exports: {} }; return e[n].call(t.exports, t, t.exports, o), t.l = !0, t.exports } o.e = function (e) { var n = t[e]; if (0 === n) return new Promise(function (e) { e() }); if (n) return n[2]; var r = new Promise(function (r, o) { n = t[e] = [r, o] }); n[2] = r; var c = document.getElementsByTagName("head")[0], a = document.createElement("script"); a.type = "text/javascript", a.charset = "utf-8", a.async = !0, a.timeout = 12e4, o.nc && a.setAttribute("nonce", o.nc), a.src = o.p + "static/js/" + e + "." + { 0: "d34926a9039940f3dcbd" }[e] + ".js"; var i = setTimeout(u, 12e4); function u() { a.onerror = a.onload = null, clearTimeout(i); var n = t[e]; 0 !== n && (n && n[1](new Error("Loading chunk " + e + " failed.")), t[e] = void 0) } return a.onerror = a.onload = u, c.appendChild(a), r }, o.m = e, o.c = r, o.d = function (e, n, r) { o.o(e, n) || Object.defineProperty(e, n, { configurable: !1, enumerable: !0, get: r }) }, o.n = function (e) { var n = e && e.__esModule ? function () { return e.default } : function () { return e }; return o.d(n, "a", n), n }, o.o = function (e, n) { return Object.prototype.hasOwnProperty.call(e, n) }, o.p = "./", o.oe = function (e) { throw console.error(e), e } }([]);

12
历届学生/韩一伟/项目开发/上课项目/vuecli2/dist/static/js/vendor.c58c9ceb39c2f3604d30.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
历届学生/韩一伟/项目开发/上课项目/vuecli2/index.html Normal file
View File

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

77
历届学生/韩一伟/项目开发/上课项目/vuecli2/package.json Normal file
View File

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

16
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/App.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default{
name: 'App'
}
</script>
<style lang="less">
@import "~@less/_.less";
</style>

2
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/less/_.less Normal file
View File

@@ -0,0 +1,2 @@
@import "./color.less";
@import "./mixins.less";

1
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/less/color.less Normal file
View File

@@ -0,0 +1 @@
@red: red;

202
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/less/mixins.less Normal file
View File

@@ -0,0 +1,202 @@
.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));
}
}
}
// 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;
// }
}
// 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;
}

419
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/less/normalize.less vendored Normal file
View File

@@ -0,0 +1,419 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* 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 */
}

7
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/less/page/home.less Normal file
View File

@@ -0,0 +1,7 @@
@import "../_.less";
.home {
h2 {
color: @red;
}
}

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

19
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/config/index.js Normal file
View File

@@ -0,0 +1,19 @@
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发阶段的请求地址
prodBaseUrl: 'http://127.0.0.1:3000/api/prod', // 正式阶段的请求地址
apiList: {
index: '/index'
},
checkBaseUrl: function () {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl
break;
case "production":
return this.prodBaseUrl
break;
default:
break;
}
}
}

71
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/http/index.js Normal file
View File

@@ -0,0 +1,71 @@
import axios from "axios";
import config from "@/config";
import { Toast } from 'vant';
export default class Axios {
constructor() {
this.instance = axios.create({
baseURL: config.checkBaseUrl(),
timeout: 3000,
headers: {}
});
this.interceptors();
}
// {
// url: '/index',
// data: {}
// headers: {}
// }
async get(option) {
Toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
})
return await this.instance.get(option.url, {
params: option.data,
headers: option.headers
});
}
async post(option) {
return await this.instance.post(option.url, option.data, {
headers: option.headers
});
}
interceptors() {
// 添加请求拦截器
this.instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
Toast.clear()
switch (response.data.status) {
case 200:
return response.data.result
break;
case 500:
Toast.fail(response.data.msg);
throw new Error(response.data.msg);
break;
default:
break;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
}
}

24
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/main.js Normal file
View File

@@ -0,0 +1,24 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import serve from "./serve/_";
import utils from "./utils";
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.config.productionTip = false
Vue.prototype.$http = serve
Vue.prototype.$util = utils
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

31
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/page/Home.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="home">
<h2>首页</h2>
<van-button type="primary">主要按钮</van-button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
this.$util.test()
this.getIndex();
},
methods: {
async getIndex() {
var res = await this.$http.index.getIndex();
console.log(res);
}
}
}
</script>
<style lang="less" scoped>
@import "~@page/home.less";
</style>

14
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/router/index.js Normal file
View File

@@ -0,0 +1,14 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '../page/Home.vue')
}
]
})

5
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/serve/_.js Normal file
View File

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

12
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/serve/indexServe.js Normal file
View File

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

7
历届学生/韩一伟/项目开发/上课项目/vuecli2/src/utils/index.js Normal file
View File

@@ -0,0 +1,7 @@
class Utils {
test() {
console.log("测试测试");
}
}
export default new Utils();

0
历届学生/韩一伟/项目开发/上课项目/vuecli2/static/.gitkeep Normal file
View File

44
历届学生/韩一伟/项目开发/上课项目/vuecli2/笔记.txt Normal file
View File

@@ -0,0 +1,44 @@
webpack 项目打包工具
build: 项目的启动和打包的核心文件
config：项目的很多配置信息的存放
dist
app.js 是所有源码的集合
vendor.js 是所有插件的源码集合
src 项目存放源码的地方
| assets 存放静态资源 css,js,字体，视频
| components 公共组件的地方
| router 路由配置文件
| App.vue 根页面
| main.js 入口文件
static 存放静态资源 css,js,字体，视频
.babelrc babel 将高版本的js转化为低版本的代码
.editorconfig 编辑器格式配置文件
.eslintignore eslint 忽略文件
.eslintrc.js eslint配置文件
.gitignore git忽略文件
.postcssrc.js 帮你css3属性自动加前缀
index.html 网站唯一的一个静态html页面
ssr 服务端渲染
http 实现对ajax（axios）的封装，实现ge，post
serve 中间层，页面调用 serve，serve访问config和http
发送请求，拿到数据给页面
config 主要做接口的地址配置
vue jq
vue 插件
属于vue的插件
不是vue插件的插件
axios

3
历届学生/韩一伟/项目开发/上课项目/vuecli3/.browserslistrc Normal file
View File

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

23
历届学生/韩一伟/项目开发/上课项目/vuecli3/.gitignore vendored Normal file
View File

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

19
历届学生/韩一伟/项目开发/上课项目/vuecli3/README.md Normal file
View File

@@ -0,0 +1,19 @@
# vuecli3
## 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/).

5
历届学生/韩一伟/项目开发/上课项目/vuecli3/babel.config.js Normal file
View File

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

33
历届学生/韩一伟/项目开发/上课项目/vuecli3/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "vuecli3",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.21.3",
"core-js": "^3.6.5",
"node-rsa": "^1.1.1",
"vant": "^2.12.26",
"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.4.1",
"vue-template-compiler": "^2.6.11"
}
}

13
历届学生/韩一伟/项目开发/上课项目/vuecli3/postcss.config.js Normal file
View File

@@ -0,0 +1,13 @@
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
propList: ['*']
}
}
}

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli3/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli3/public/img/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli3/public/img/eye.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli3/public/img/icon_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 703 B

BIN
历届学生/韩一伟/项目开发/上课项目/vuecli3/public/img/left_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

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