first commit

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

View File

@@ -0,0 +1,5 @@
node_modules/
dist/
logs/
.idea/
miniprogram_npm/

View File

@@ -0,0 +1,11 @@
# 你好
## 你好
### 你好
> 哈哈 **哈哈** 哈
- 列表1
- 列表2
- 列表3
hahahah

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">
<title>我的html学习</title>
</head>
<body>
<a title="悬浮提示" href="https://www.runoob.com/tags/html-reference.html" target="_blank">百度</a>
<a href="tel:15056042604">联系我</a>
<p>段落</p>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls muted autoplay ></video>
<audio src="https://www.runoob.com/try/demo_source/movie.mp4" controls muted autoplay ></audio>
<form action="https://www.runoob.com/tags/html-reference.html" method="get">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="userpwd" placeholder="密码">
<input type="color" name="" id="">
<input type="file" name="" id="">
<input type="radio" name="ee">
<input type="radio" name="ee">
<input type="number" name="" id="">
<input type="checkbox">
<input type="checkbox">
<select name="" id="">
<option value="">-请选择-</option>
<option value="">合肥</option>
<option value="">南京</option>
</select>
<input type="submit" value="登录">
<!-- <button>登 录</button> -->
</form>
<del>删除线</del>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
<li>无序列表5</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
<li>有序列表5</li>
</ol>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<i>实际项目是用来显示小图标的 iconfont</i>
<textarea name="" id="" cols="30" rows="10" placeholder="输入建议"></textarea>
</body>
</html>

View File

@@ -0,0 +1,78 @@
git 版本控制
合并代码(代码管理)
代码回滚
远程仓库
github web网站 全世界最大的代码仓库(世界最大的同性交友网站)
linux (linus) windows macos(unix)
gitlab
gitee 码云
coding
本地仓库
git init 初始化一个本地仓库
git add 文件名1 文件名2
git add -A(all)
git commit 设置上传备注
git push 上传(推送)代码到远程仓库
git pull 下载(拉取)远程最新代码到本地
如何提交本地修改过的代码到远程仓库???
git add -A
git commit -m "备注内容"
git pull
git push
代码冲突
网址
账户名
密码
md markdown
一种快速写作的方式
富文本编辑器
分efwef
测试修改
大青蛙多群无
html 人的骨骼 (网站基本结构)
css 人的外观 (网站的样式)
javascript 人的思想 (网站的特效&功能)
meta 元数据标签
ul 用于重复性的布局
弹性盒子
13个
rem
font-size: 1.6rem;
移动端一像素

View File

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

View File

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

View File

@@ -0,0 +1,27 @@
pc 移动端
display: inline-block
float: left: right;
flex布局 + rem尺寸
flex 13 个css属性
display: flex 开启弹性盒子
用户父元素上6个
flex-direction 设置对齐方向 注意 align-items 和 justify-content 作用交换
flex-wrap 自动换行
flex-flow
justify-content 水平对齐
align-items 垂直对齐(单行的时候)
align-content 多行的时候设置垂直对齐
用户子元素上6个
order 数值越小越靠前
flex-grow 元素的放大比例默认0
flex-shrink 0 让元素不缩放默认1 缩放)
flex-basis
flex flex: 1; 是 flex-grow 平替
align-self 让元素不遵守 父元素上的 align-items

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>
<script type="text/javascript">
((w, d) => {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>

View File

@@ -0,0 +1,10 @@
rem
你写的rem尺寸 * html上的fontsize16px = 真实尺寸px
第一种方案:
媒体查询
js

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
</head>
<body>
<button>点我</button>
</body>
<script>
// object
// 虚拟dom 真实dom 影子dom
// 事件
// 三要素:事件源 事件类型 事件处理函数
// let button = document.querySelector("button")
// button.onclick = function (e) {
// console.log(e);
// }
// button.addEventListener('click', function() {
// alert(1)
// })
// button.addEventListener('click', function() {
// alert(2)
// })
// button.addEventListener('click', function() {
// alert(3)
// })
</script>
</html>

View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 函数(Function) 事件 写特效(从易到难) 项目前ajaxhttp 写项目...
// 函数 方法
// 作用:封装代码的
// function test() {
// console.log("test");
// }
// 回调 callback
// 异步 编程 获取返回值
// 网络请求
// Promise
// 同步 编程
// let SmsCode = function (callback) {
// let a = 1
// setTimeout(function() {
// a = 100;
// callback(a)
// },3000)
// // arguments 用于参数比较多的情况
// // console.log("test: ", arguments);
// // return true
// }
// SmsCode(function(res) {
// console.log(res);
// });
// 全局作用域
// 局部作用域
// 变量提升
// let test = function () {
// c = 1
// }
// test()
// let test2 = function () {
// console.log("test: ", c);
// }
// test2()
// 闭包
// 函数内部函数访问外部变量的过程
// 作用:缓存数据
// 容易内存泄漏
// let test2 = function () {
// let result = 3;
// let test3 = function (num) {
// result *= num
// return result;
// }
// return test3;
// }
// let res = test2()
// console.log( res(10) );
// console.log( res(30) );
</script>
</html>

View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// js es5,es6,7,8,9.....
// 注释
// 单行注释
// 多行 /** 这是注释 **/
// console.log("111")
// console.warn("111")
// console.error("111")
// 变量
// 程序内部存储的可变的数据
// 如何定义变量
// var 变量名 = 变量默认数值(可选, 定义变量未赋值就是 undefined);
// let 变量名 = 变量默认数值(可选, 定义变量未赋值就是 undefined);
// 先定义 后 使用
let a = 1, b;
console.log(a);
b = 3
console.log(b);
// 变量名 定义的规则?
// 严格区分大小写
// 不能以数字或者特殊符号_ $)开头
// 需要遵守驼峰命名法
// 禁止使用中文
// 常量
// 程序内部存储的不可变的数据
// const 常量名 = 常量默认数值(必选);
const test = 123;
console.log(test);
// 数据类型
// 基本数据类型
// 字符串String、数字(Number)、布尔(Boolean)、空Null、未定义Undefined
// 引用数据类型
// 对象(Object)、数组(Array)、函数(Function)
// 字符串String 双(单)引号包裹的
let abc = "ni";
console.log(abc);
// 布尔(Boolean)
// true1 false0
// = 赋值
// == 判断是否相等
// === 强等于 判断是否相等(但会判断数据类型)
// 运算符 + - * / % (求余)
// ++ --
// + 只能用于number
// 字符串拼接
// console.log(a+abc);
console.log(a * abc); // NaN 非数字
console.log(++a); // 1
// 赋值运算符 = += -= *= /= %=
console.log(a += b); // a = a+b
//比较运算符 != !== <> <= >=
//逻辑运算符
// && || !
// 对象(Object)
// 类模拟后端的class
// 类是现实生活中事物(属性,功能)在编程中的映射(存储)
// 构造函数constructor 类被初始化的时候默认执行的函数
// 作用:接受参数
// 析构函数
// 类的三大特征??
// 封装 继承 多态
// this 指向
var car1 = {
color: 'red',
speed: '4.3s',
forward: function () {
console.log("前进: ");
},
retreat: function () {
console.log("后退");
},
stop: function () {
console.log("停止");
}
}
car1.forward()
// 语法糖
class baseCar {
color;
speed;
forward() {
console.log("前进");
}
retreat() {
console.log("后退");
}
stop() {
console.log("停止");
}
}
class smallCar extends baseCar {
constructor() {
super()
this.color = "red"
console.log("this.color: ", this.color);
}
}
class Car119 extends baseCar {
constructor() {
super()
this.color = "green"
console.log("this.color: ", this.color);
}
}
var sc = new smallCar();
var c1 = new Car119();
// 基本数据类型
// 对象名(key): 对象值(value)
// 定义?
// var obj = new Object();
// obj.name = "刘兵";
// obj.age = 18
// var obj = new Object({ name: '刘兵', age: 18 });
// var r = "age"
// var obj = { name: [1,2,3,4], age: 18 };
// console.log(obj.r);
// console.log(obj[r]);
// delete obj.age
// console.log(obj);
// obj.like = "你好"
// console.log(obj);
// if () {
// }
// if () {
// } else {
// }
// if () {
// } else if ( a > 1 && a < 3) {
// } else {
// }
// 三元运算符
// 1 == 1 ? console.log("true") : console.log("false");
// switch
// switch (key) {
// case value:
// break;
// case value:
// break;
// case value:
// break;
// default:
// break;
// }
// for (let i = 0; i<10; i++) {
// console.log(i);
// }
// forEach map for of for in filter while (do while)....
// 数组
// 下标 0开始
// let arr = new Array();
// arr[0] = 1;
// arr[1] = 2;
// let arr = new Array(1,2);
// let arr = [1,2,3,4,5,6,7,8,9];
// for(let i =0;i< arr.length;i++) {
// console.log(arr[i]);
// }
// arr.forEach(function (val, index) {
// console.log(val);
// })
// prototype 原型
// prototype.lb Array.= function (callback) {
// for(let i =0;i< this.length;i++) {
// callback(this[i], i, this)
// }
// }
// arr.lb(function (val, index) {
// console.log(val);
// })
// arr[0] = 1000
// arr.push(10)
// arr.splice(1,2)
// console.log(arr);
// 函数(Function) 事件 写特效(从易到难) 项目前ajaxhttp 写项目...
// 函数 方法
// 作用:封装代码的
</script>
</html>

View File

@@ -0,0 +1 @@
console.log("测试");

View File

@@ -0,0 +1,17 @@
html
css 不算编程
javascript (js)
可以做什么??
pc网页
H5网页
android ios app
桌面端c#
后端phpjavapythongoc# asp.net, nodejs 三p php, jsp, asp
操作系统 windows macos linux unix
js 基础

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="./http.js"></script>
<script>
// callback 获取异步返回值
// 回调地狱
// promise
let getIndex = async () => {
// TODO 后期项目中封装
// let res = await http.post({ id: 1, page: 1 });
let res = await http.post({
url: 'http://127.0.0.1:3000/api/json/index',
headers: {
'token': 'hahhaha'
},
data: {
id: 1,
page: 1
}
});
console.log(res);
}
getIndex()
// http.post({
// url: 'http://127.0.0.1:3000/api/json/index',
// headers: {
// 'token': 'hahhaha'
// },
// data: {
// id: 1,
// page: 1
// }
// })
// .then(res => {
// console.log(res);
// })
// .catch(err => {
// console.log(err);
// })
</script>
</html>

View File

@@ -0,0 +1,66 @@
class Http {
defaultOption = {
timeout: 6000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}
constructor() {
this.xhr = new XMLHttpRequest()
}
get(par) {
return new Promise((success, error) => {
this.setOption(par)
let urlParams = ""
for (const key in par.data) {
urlParams += `&${key}=${par.data[key]}`
}
urlParams = urlParams.replace("&", "")
this.xhr.open("GET", `${par.url}?${urlParams}`)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send()
this.statechange(success, error);
})
}
post(par) {
return new Promise((success, error) => {
this.setOption(par)
this.xhr.open("POST", par.url)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send(JSON.stringify(par.data))
this.statechange(success, error);
})
}
setOption(par) {
this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
// ....
}
setHeader(headerObject = {}) {
Object.assign(headerObject, this.defaultOption.headers)
for (const key in headerObject) {
this.xhr.setRequestHeader(key, headerObject[key]);
}
}
statechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
let data = JSON.parse(this.xhr.response)
success(data)
} else {
error(this.xhr)
}
}
}
}
}
var http = new Http();

View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/index.php?call=getData"></script> -->
<script>
// 拿出电话 初始化ajax 对象并存储
let xhr = new XMLHttpRequest()
// 输入号码 设置请求方式和地址
xhr.open("GET", "http://127.0.0.1/index.php")
// 拨号 发送ajax请求(http请求)
xhr.send()
// let res = await fetch("http://127.0.0.1:3000/api/json/index", {
// data: {}
// })
// fetch("http://127.0.0.1:3000/api/json/index")
// .then(res => res.json())
// .then(res => {
// console.log(res);
// })
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let data = JSON.parse(xhr.response)
console.log(data);
// data.result.list.forEach(v => {
// $("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
console.error(xhr);
throw new Error("请求失败")
}
}
}
// fetch("http://127.0.0.1:3000/api/json/index")
// .then(res => res.json())
// .then(res => {
// console.log(res);
// })
function $(className) {
return document.querySelector(className);
}
// GET 和 POST 请求有什么差别
// https://www.php.cn/faq/500696.html
// HTTP 协议
// https://www.cnblogs.com/coderwhytop/p/14769174.html
// GET 找服务器要资源
// POST 给服务器要资源
// PUT 给服务器要资源(更新的过程)
// DELETE 给服务器要资源(删除的过程)
</script>
</html>

View File

@@ -0,0 +1,52 @@
服务端渲染 (模板引擎) mvc
缺点:前后端代码混在一起,导致代码冗余,后期升级改造难
前端 20% (写页面)
后端 80% (写功能,做数据,安全,服务器)
前后端分离
前端 50% 写页面,功能,特效,路由
|
ajax ( XML, json )
|
后端 50% 做数据,安全,服务器
ajax一种无刷新的前后端数据交互的方式
XMLHttpRequest
fetch
Access-Control-Allow-Origin cors
浏览器有一个安全策略(同源策略 cors
如何判断?
协议 http 80 https 443
域名
端口
跨域请求
前端http://127.0.0.1:8080/test
前端https://www.runoob.com/ajax/ajax.html
后端http://127.0.0.1:3000/api/json/index
如何解决ajax跨域
1: 后端设置请求头 Access-Control-Allow-Origincors
2: jsonp + callback
3: 服务端代理
A(自己的前端) --> C(别人的后端)
A(自己的前端) --> B(自己的后端)
B(自己的后端) --> C(别人的后端)

View File

@@ -0,0 +1,33 @@
// const http = require("http")
// const fs = require("fs")
// // 创建本地服务器来从其接收数据
// const server = http.createServer((req, res) => {
// console.log("url: ",req.url);
// res.writeHead(200, { 'Content-Type': 'text/htML' });
// if (req.url.includes("html")) {
// let data = fs.readFileSync(`.${req.url}`)
// res.end(data.toString())
// }
// });
// server.listen(8000);
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.render('index', function (err, html) {
res.send(html)
})
})
app.get('/test', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nodejs</title>
</head>
<body>
<h2>nodejs服务端渲染的网页</h2>
</body>
</html>

View File

@@ -0,0 +1,19 @@
const utils = require("./utils")
const fs = require("fs")
const axios = require("axios")
console.log(utils);
axios.get('http://www.baidu.com/')
.then(function (response) {
// handle success
console.log("response: ",response.data);
})
.catch(function (error) {
// handle error
console.log(error);
})
// fs.writeFileSync('1.txt', "你好")
// fs.rmSync("1.txt")

View File

@@ -0,0 +1,668 @@
{
"name": "2023-05-26",
"version": "1.1.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
"requires": {
"mime-types": "~2.1.34",
"negotiator": "0.6.3"
}
},
"array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"body-parser": {
"version": "1.20.1",
"resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.1.tgz",
"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
"requires": {
"bytes": "3.1.2",
"content-type": "~1.0.4",
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
"http-errors": "2.0.0",
"iconv-lite": "0.4.24",
"on-finished": "2.4.1",
"qs": "6.11.0",
"raw-body": "2.5.1",
"type-is": "~1.6.18",
"unpipe": "1.0.0"
}
},
"bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
},
"call-bind": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
"requires": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.2"
}
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"content-disposition": {
"version": "0.5.4",
"resolved": "https://registry.npmmirror.com/content-disposition/-/content-disposition-0.5.4.tgz",
"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
"requires": {
"safe-buffer": "5.2.1"
}
},
"content-type": {
"version": "1.0.5",
"resolved": "https://registry.npmmirror.com/content-type/-/content-type-1.0.5.tgz",
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
},
"cookie": {
"version": "0.5.0",
"resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
},
"cookie-signature": {
"version": "1.0.6",
"resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
},
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmmirror.com/dateformat/-/dateformat-3.0.3.tgz",
"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
"dev": true
},
"debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
"dev": true
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
},
"destroy": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/destroy/-/destroy-1.2.0.tgz",
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
},
"dynamic-dedupe": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz",
"integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==",
"dev": true,
"requires": {
"xtend": "^4.0.0"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
},
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz",
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
},
"express": {
"version": "4.18.2",
"resolved": "https://registry.npmmirror.com/express/-/express-4.18.2.tgz",
"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
"requires": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
"body-parser": "1.20.1",
"content-disposition": "0.5.4",
"content-type": "~1.0.4",
"cookie": "0.5.0",
"cookie-signature": "1.0.6",
"debug": "2.6.9",
"depd": "2.0.0",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"finalhandler": "1.2.0",
"fresh": "0.5.2",
"http-errors": "2.0.0",
"merge-descriptors": "1.0.1",
"methods": "~1.1.2",
"on-finished": "2.4.1",
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"proxy-addr": "~2.0.7",
"qs": "6.11.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.2.1",
"send": "0.18.0",
"serve-static": "1.15.0",
"setprototypeof": "1.2.0",
"statuses": "2.0.1",
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"vary": "~1.1.2"
}
},
"filewatcher": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/filewatcher/-/filewatcher-3.0.1.tgz",
"integrity": "sha512-Fro8py2B8EJupSP37Kyd4kjKZLr+5ksFq7Vbw8A392Z15Unq8016SPUDvO/AsDj5V6bbPk98PTAinpc5YhPbJw==",
"dev": true,
"requires": {
"debounce": "^1.0.0"
}
},
"finalhandler": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz",
"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
"requires": {
"debug": "2.6.9",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"on-finished": "2.4.1",
"parseurl": "~1.3.3",
"statuses": "2.0.1",
"unpipe": "~1.0.0"
}
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
},
"fresh": {
"version": "0.5.2",
"resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
},
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"get-intrinsic": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
"requires": {
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-proto": "^1.0.1",
"has-symbols": "^1.0.3"
}
},
"get-package-type": {
"version": "0.1.0",
"resolved": "https://registry.npmmirror.com/get-package-type/-/get-package-type-0.1.0.tgz",
"integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
"dev": true
},
"growly": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/growly/-/growly-1.3.0.tgz",
"integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==",
"dev": true
},
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"requires": {
"function-bind": "^1.1.1"
}
},
"has-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
},
"has-symbols": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
},
"http-errors": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz",
"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
"requires": {
"depd": "2.0.0",
"inherits": "2.0.4",
"setprototypeof": "1.2.0",
"statuses": "2.0.1",
"toidentifier": "1.0.1"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"requires": {
"safer-buffer": ">= 2.1.2 < 3"
}
},
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
},
"is-core-module": {
"version": "2.12.1",
"resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.12.1.tgz",
"integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
"dev": true,
"requires": {
"has": "^1.0.3"
}
},
"is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true
},
"is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"requires": {
"is-docker": "^2.0.0"
}
},
"isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"dev": true,
"requires": {
"yallist": "^4.0.0"
}
},
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
},
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
},
"methods": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
},
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"dev": true
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"negotiator": {
"version": "0.6.3",
"resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
},
"node-dev": {
"version": "8.0.0",
"resolved": "https://registry.npmmirror.com/node-dev/-/node-dev-8.0.0.tgz",
"integrity": "sha512-GXc0KxmBXfQxMPdymOui40yvC5W/RXFwmuUDT65wvTAO/o9wAsddYC8q4EHKxq3Qqt+uLS/g7XKdgVcsjyk9lw==",
"dev": true,
"requires": {
"dateformat": "^3.0.3",
"dynamic-dedupe": "^0.3.0",
"filewatcher": "~3.0.0",
"get-package-type": "^0.1.0",
"minimist": "^1.2.6",
"node-notifier": "^8.0.1",
"resolve": "^1.22.0",
"semver": "^7.3.7"
}
},
"node-notifier": {
"version": "8.0.2",
"resolved": "https://registry.npmmirror.com/node-notifier/-/node-notifier-8.0.2.tgz",
"integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
"dev": true,
"requires": {
"growly": "^1.3.0",
"is-wsl": "^2.2.0",
"semver": "^7.3.2",
"shellwords": "^0.1.1",
"uuid": "^8.3.0",
"which": "^2.0.2"
}
},
"object-inspect": {
"version": "1.12.3",
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
},
"on-finished": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
"requires": {
"ee-first": "1.1.1"
}
},
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
},
"path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
"requires": {
"forwarded": "0.2.0",
"ipaddr.js": "1.9.1"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"qs": {
"version": "6.11.0",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
"requires": {
"side-channel": "^1.0.4"
}
},
"range-parser": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/range-parser/-/range-parser-1.2.1.tgz",
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
},
"raw-body": {
"version": "2.5.1",
"resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-2.5.1.tgz",
"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
"requires": {
"bytes": "3.1.2",
"http-errors": "2.0.0",
"iconv-lite": "0.4.24",
"unpipe": "1.0.0"
}
},
"resolve": {
"version": "1.22.2",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.2.tgz",
"integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
"dev": true,
"requires": {
"is-core-module": "^2.11.0",
"path-parse": "^1.0.7",
"supports-preserve-symlinks-flag": "^1.0.0"
}
},
"safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"semver": {
"version": "7.5.1",
"resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.1.tgz",
"integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
"dev": true,
"requires": {
"lru-cache": "^6.0.0"
}
},
"send": {
"version": "0.18.0",
"resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz",
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
"requires": {
"debug": "2.6.9",
"depd": "2.0.0",
"destroy": "1.2.0",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "0.5.2",
"http-errors": "2.0.0",
"mime": "1.6.0",
"ms": "2.1.3",
"on-finished": "2.4.1",
"range-parser": "~1.2.1",
"statuses": "2.0.1"
},
"dependencies": {
"ms": {
"version": "2.1.3",
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
}
}
},
"serve-static": {
"version": "1.15.0",
"resolved": "https://registry.npmmirror.com/serve-static/-/serve-static-1.15.0.tgz",
"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
"requires": {
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"parseurl": "~1.3.3",
"send": "0.18.0"
}
},
"setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
},
"shellwords": {
"version": "0.1.1",
"resolved": "https://registry.npmmirror.com/shellwords/-/shellwords-0.1.1.tgz",
"integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
"dev": true
},
"side-channel": {
"version": "1.0.4",
"resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
"requires": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
"object-inspect": "^1.9.0"
}
},
"statuses": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
},
"supports-preserve-symlinks-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"toidentifier": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
},
"type-is": {
"version": "1.6.18",
"resolved": "https://registry.npmmirror.com/type-is/-/type-is-1.6.18.tgz",
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
"requires": {
"media-typer": "0.3.0",
"mime-types": "~2.1.24"
}
},
"unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz",
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
},
"utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
},
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"dev": true
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
},
"xtend": {
"version": "4.0.2",
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
"dev": true
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
}
}
}

View File

@@ -0,0 +1,20 @@
{
"name": "2023-05-26",
"version": "1.1.2",
"description": "nodejs学习",
"main": "index.js",
"scripts": {
"start": "node index.js",
"http": "node-dev http.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.4.0",
"express": "^4.18.2"
},
"devDependencies": {
"node-dev": "^8.0.0"
}
}

View File

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

View File

@@ -0,0 +1,22 @@
class utils {
test() {
console.log("test方法");
}
test2 () {
console.log(this);
console.log("test2");
}
}
module.exports = new utils()
// exports = {}
// exports = {
// a: utils {}
// }
// exports = utils {}

View File

@@ -0,0 +1,52 @@
原生js + jqjquery
dom操作
|
|
nodejs js在后端服务器上的运行环境
v8内核
c++
作用:前端,桌面端,后端,操作系统
|
|
前端三大框架
nodejs
npm 依赖(插件)管理工具
npm init -y 初始化nodejs项目的配置文件
npm run 自定的名称
npm start
npm install(i) 插件名 环境参数
--save -S
--save-dev -D
-g 安装到全局
node_modules 存放项目中你下载的插件的
dependencies 正式环境的依赖
devDependencies 开发环境的依赖
npm uninstall 插件名 删除已经安装上的插件
nodejs 模块
系统内置的模块
自己写的,网上下载的
html 模板引擎

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#/one">1</a>
<a href="#/two">2</a>
<div class="router-view">
</div>
</body>
<script>
var onePage = {
template: `<h1>one</h1>`
}
var twoPage = {
template: `<h1>two</h1>`
}
var link = [
{ path: '/one', page: onePage },
{ path: '/two', page: twoPage },
]
window.onhashchange = function () {
let path = window.location.hash.replace("#", "")
let cName = path.replace("/", "")
console.log(path);
let currentPath = link.filter(v => {
if (v.path == path) {
return v
}
})
$(".router-view").innerHTML += `
<div class="${cName}"></div>
`
$(`.router-view .${cName}`).innerHTML = currentPath[0].page.template
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 ref="testh2" @click="alertH2()" v-once>{{message}}</h2>
<h3 >{{text}}</h3>
<div v-html="html"></div>
<div v-if="isLike">喜欢</div>
<div v-else>不喜欢</div>
<p v-show="isShow">显示</p>
<ul>
<li v-for="item,index in tabs" :key="index">{{ item.title }}</li>
</ul>
<ul>
<li :key="key" v-for="value, key in item">{{ key }} | {{ value }}</li>
</ul>
<a :href=" href ">百度</a>
<input type="text" placeholder="输入用户名" v-model="user_name">
{{ user_name }}
<hr>
<h1>{{ testsss("张三") }}</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// data 定义变量的地方
// methods 定义方法的地方
// 指令vue提供的一些标签属性可是实现各种功能
// v-on 绑定点击事件
// 简写 @事件类型
// v-text
// v-html 将html字符串渲染成真的dom
// v-if 根据条件选择显示什么东西
// v-show 根据条件选择显示什么东西
// v-for 循环显示
// v-bind 将变量绑定到标签的属性上
// 简写 :
// v-model 获取输入框的值
// TODO activated
// computed 会进行结果的缓存
let vm = new Vue({
el: ".app",
data: {
user_name: '',
message: "我的vue学习",
text: "我是v-text",
html: ` <ul> <li>你好</li> </ul>`,
isLike: true,
isShow: true,
href: 'https://www.baidu.com/',
tabs: [
{ id: 1, title: '社会' },
{ id: 2, title: '军事' },
{ id: 3, title: '体育' },
],
item: { id: 1, title: '社会' }
},
beforeCreate() {
console.log(this.message);
},
created() {
// ajax请求
console.log(this.message);
console.log(this.$refs.testh2);
},
mounted() {
console.log("mounted: ",this.$refs.testh2);
},
updated() {
console.log("updated: ");
},
methods: {
alertH2() {
alert(this.message)
this.alertH2_2()
},
alertH2_2() {
alert("点我了2")
}
},
computed: {
testsss() {
return (name) => {
console.log(name);
return name + this.message
}
}
},
watch: {
user_name: {
handler: (value, oldvalue) => {
console.log("watch: ",value, oldvalue);
},
immediate: true
}
}
})
console.log(vm);
</script>
</html>

View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<script>
const Index = {
data() {
return {
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
]
}
},
template: `<div class="index">
<ul>
<router-link tag="li" :to="{ name: 'info', query: { id: item.id } }" v-for="item,index in list" :key="index">
{{ item.title }}
</router-link>
</ul>
</div>`,
methods: {
goInfo(id) {
this.$router.push({
name: 'info',
params: {
// id: id,
id
}
})
}
}
}
const Info = {
template: `<div class="info">详情</div>` ,
created() {
console.log(this.$route.query.id);
},
}
const Car = {
template: `<div class="info">购物车</div>` ,
created() {
},
}
const Login = {
template: `<div class="info">
登录页面
<button @click="login">登录</button>
</div>` ,
created() {
},
methods: {
login() {
localStorage.setItem("token", "effdasfgfdasgfnbfddg")
if (this.$route.query.from) {
this.$router.push(this.$route.query.from)
} else {
this.$router.push("/")
}
}
}
}
const Error = {
template: `<div class="error">404 页面不存在</div>` ,
created() {
},
}
const Layout = {
template: `<div class="Layout">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Foo</router-link>
<router-link to="/info">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>` ,
created() {
},
}
const routes = [
{ path: '*', component: Error},
{
path: '/',
name: 'layout',
component: Layout,
children: [
{ path: 'login', name: 'login', component: Login, meta: { requiresAuth: false, title: '登录' } },
{ path: 'car', name: 'car', component: Car, meta: { requiresAuth: true, title: '购物车' } },
{ path: '/', name: 'index', component: Index, meta: { requiresAuth: false, title: '首页' } },
{ path: 'info', name: 'info', component: Info, meta: { requiresAuth: false, title: '详情' } }
]
}
]
const router = new VueRouter({
linkExactActiveClass: "active",
routes
})
// 登录状态检查
router.beforeEach((to, from, next) => {
document.title = to.meta.title;
// 未登录
if (localStorage.getItem("token") == null) {
// 你访问的页面还需要登录
if (to.meta.requiresAuth) {
next({
name: 'login',
query: {
from: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
const app = new Vue({
el: "#app",
router
})
// 对比原生js为什么需要 vue-router 这样的插件来实现页面跳转
//
</script>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<h2>我是父组件</h2>
<hr>
<span>1 点击 进入详情 id</span>
<swiper :data="lunbo">
<template v-slot:default="{ item }">
<img @click="info(item)" :src="item.url" alt="">
</template>
</swiper>
<hr>
<span>2 点击 显示图片预览 url</span>
<swiper :data="lunbo">
<template v-slot:default="{ item }">
<span @click="showImg(item)">{{ item.id }}</span>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('swiper', {
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
template: `
<div class="header">
<ul>
<li v-for="item,index in data" :key="index">
<slot :item="item"></slot>
</li>
</ul>
</div>
`
});
let vm = new Vue({
el: ".app",
data: {
lunbo: [
{ id: 1, url: 'https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg' },
{ id: 2, url: 'https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png' },
{ id: 3, url: 'https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg' },
]
},
methods: {
info({ id, url }) {
console.log("进入详情: ", id);
},
showImg({ id, url }) {
console.log("显示大图: ", url);
}
}
})
</script>
</html>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="title">
<li :class=" index == currentIndex ? 'active' : '' "
@click=" currentIndex = index"
v-for="item,index in tabs" :key="index">
{{ item.title }}
</li>
</ul>
<ul class="content">
<li v-for="item,index in tabs" :key="index"
:class=" index == currentIndex ? 'active' : '' ">
<p v-for="v,i in item.content">{{ v.text }}</p>
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabs: [
{
id: 1,
title: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' }
]
},
{
id: 2,
title: '经济',
content: [
{ text: '经济 的内容1' },
{ text: '经济 的内容2' },
{ text: '经济 的内容3' },
{ text: '经济 的内容4' },
]
},
{
id: 3,
title: '体育',
content: [
{ text: '体育 的内容1' },
{ text: '体育 的内容2' }
]
},
{
id: 4,
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
]
},
methods: {
changeActive(index) {
this.currentIndex = index
}
}
})
</script>
</html>

View File

@@ -0,0 +1,117 @@
html css 写在html
也没有div + css
table + css(选择器)
js 发展
div + css
jquery 操作dom的
|
|
nodejs
|
|
过渡年代:前端 m数据v视图c控制器 年代
前端三大框架 m数据v视图 vm视图和模型 框架
spa (框架)单页web应用
操作虚拟dom diff 组件化开发
angular.js
react.js
vue.js
vue 1.x php laravel 作者
vue 2.x 进入国内(全球) vue-router 3.x
es5 语法的 js写的
|
|
typescript
|
|
vue 3.x(next) vue-router 4.x
vue.js 三套语法风格:
vue 1.x vue 2.x options api 选项式
{
data: {}
methods: {}
}
过渡vue2 支持 ts 语法的 插件包 (很多)
class api
vue3.x composition(function) api 组合式
基于 html 来用
基于 nodejs 来用
vue-router
hash
#地址名字
#/about
history
/about
$router 访问 vue-router 内置方法
$route 访问 vue-router 的地址信息
页面跳转
标签跳转 router-link
方法跳转 this.$router.xxx
参数传递:
query传参
http://www.baidu.com/index?id=1&page=2
params
http://www.baidu.com/index/1/2
注意:
params 传参一定不能用 path 进行跳转
导航守卫
全局守卫
全局前置守卫
全局后置钩子
路由独享的守卫
组件内的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
vue
vue-cli 脚手架 (帮我做好了所有基本的事情和准备)
2.x
3.x
vue-cli 2 + vue 2
vue cli 3 + vue 3

View File

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
{{ message }}
<lb_header>
<template v-slot:one>
<h2>测试 one</h2>
</template>
<template v-slot:two>
<h2>测试 two</h2>
</template>
</lb_header>
<lb_footer v-demo="1" @send="getData"></lb_footer>
<h2>{{ tips | copyright }}</h2>
<h2>{{ message }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 组件
// 全局组件 Vue.component
// 局部组件
// 父 --> 子 props
// 子 --> 父 $emit 事件来回传数据
// 插槽 默认插槽
// 别名插槽
// 作用域插槽
// 可以把数据从子组件抛出去给父组件
// 同一个组件在不同地方使用,响应事件的处理方式不一样
// 状态过渡
// 混入 代码封装
// 自定义指令
// 过滤器
// 路由 地址
// vuecli2.x 3.x (不写项目)
// 封装脚手架
// vue 3.x vite Pinia ts 博客 状态管理 vuex
// linux部署(选配)
// 电商(ts)
// react
//
// uniapp flutter ( ts+js+java = dart )
// 小程序
var loadMore = {
data() {
return {
page: 1,
totalPage: 0
}
},
created() {
},
methods: {
load: function () {
console.log('hello from mixin!: ')
}
}
}
Vue.directive('demo', {
bind: function (el, binding, vnode) {
console.log("el: ", el);
console.log("binding: ", binding);
console.log("vnode: ", vnode);
}
})
// 定义局部组件
var footers = {
data() {
return {
text: '公共底部',
children: "我是footer子组件的数据"
}
},
mounted() {
this.$emit("send", this.children)
},
methods: {
// ddd() {
// this.$emit("send", this.children)
// }
},
template: `
<div class="footer">
<h2 >底部 {{ text }}</h2>
</div>
`
}
Vue.component('lb_header', {
// props: ['msg'],
mixins: [loadMore],
props: {
msg: {
type: String,
default: "默认值"
}
},
data() {
return {
text: 1
}
},
created() {
this.load()
},
template: `
<div class="header">
<h2>头部 {{ msg }}</h2>
<hr/>
<slot name="one"></slot>
<hr/>
<slot name="two"></slot>
</div>
`
});
let vm = new Vue({
el: ".app",
mixins: [loadMore],
data: {
message: '父组件',
tips: "我是数据"
},
created() {
this.load()
},
// 注册局部组件
components: {
'lb_footer': footers
},
methods: {
getData(res) {
console.log(res);
}
},
filters: {
copyright(value){
return value + ' --- 版权来自bmy'
}
}
})
</script>
</html>

View File

@@ -0,0 +1,37 @@
uniapp
混合app开发
原生app开发
android java kotlin
ios object-c swift
优点:体验更好,动画更流畅
缺点:代码维护难,成本高,更新难
|
|
webview 部分页面让前端写,然后 使用 webview 在app中显示页面
|
|
webview
webview(src="")
浏览器APP
浏览器内核
jq phonegap Ionic mui APICloud
前端三大框架uniapp(vue.js)mui react native flutter weex(vue) vuenative
flutter ui
dart

View File

@@ -0,0 +1,66 @@
class Http {
defaultOption = {
timeout: 6000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}
constructor() {
this.xhr = new XMLHttpRequest()
}
get(par) {
return new Promise((success, error) => {
this.setOption(par)
let urlParams = ""
for (const key in par.data) {
urlParams += `&${key}=${par.data[key]}`
}
urlParams = urlParams.replace("&", "")
this.xhr.open("GET", `${par.url}?${urlParams}`)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send()
this.statechange(success, error);
})
}
post(par) {
return new Promise((success, error) => {
this.setOption(par)
this.xhr.open("POST", par.url)
this.xhr.timeout = this.defaultOption.timeout
this.setHeader(par.headers)
this.xhr.send(JSON.stringify(par.data))
this.statechange(success, error);
})
}
setOption(par) {
this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
// ....
}
setHeader(headerObject = {}) {
Object.assign(headerObject, this.defaultOption.headers)
for (const key in headerObject) {
this.xhr.setRequestHeader(key, headerObject[key]);
}
}
statechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
let data = JSON.parse(this.xhr.response)
success(data.result)
} else {
error(this.xhr)
}
}
}
}
}
var http = new Http();

View File

@@ -0,0 +1,84 @@
<!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,li{
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 20%;
margin-bottom: 30px;
}
li img {
width: 100%;
}
</style>
</head>
<body>
<ul>
</a>
</ul>
<button>点我</button>
<div class="result"></div>
</body>
<script src="./http.js"></script>
<script>
let page = 1, total_page = 0;
let getList = async () => {
let res = await http.get({
url: 'http://127.0.0.1:3000/api/json/classList',
data: {
id: 253,
page
}
});
total_page = res.total_page
renderPage(res)
}
let renderPage = (res) => {
res.data.forEach(v => {
$("ul").innerHTML += `
<li>
<a target="_blank" href="./info.html?id=${v.id}&total=${v.total}">
<img src="${v.preview}" alt="">
<p>${v.title}</p>
</a>
</li>`
});
}
$("button").onclick = () => {
page +=1;
if (page <= total_page) {
getList()
} else {
$(".result").innerText = "没有数据了"
}
}
getList()
function $(className) {
return document.querySelector(className);
}
</script>
</html>

View File

@@ -0,0 +1,67 @@
<!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,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="info">
</div>
</body>
<script src="./http.js"></script>
<script>
let getInfo = async () => {
let res = await http.get({
url: 'http://127.0.0.1:3000/api/json/info',
data: {
id: query("id"),
quantity: query("total")
}
});
renderPage(res)
}
let renderPage = (res) => {
console.log(res);
res.forEach(v => {
$(".info").innerHTML += `
<img src="${v}" alt="">
`
});
}
getInfo()
function query(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
function $(className) {
return document.querySelector(className);
}
</script>
</html>

View File

@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,39 @@
{
"name": "hello-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@@ -0,0 +1,24 @@
import {Link,Route} from 'react-router-dom';
import Index from './page/index/index';
import About from './page/about/about';
function App() {
return (
<div className="App">
react 学习
<div className="nav">
<Link to="/index">index</Link>
<Link to="/about">about</Link>
</div>
<div className="main">
<Route path="/index" component={Index}></Route>
<Route path="/about" component={About}></Route>
</div>
</div>
);
}
export default App;

View File

@@ -0,0 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

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>tabs切换</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">社会</li>
<li>经济</li>
<li>体育</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">社会 的内容</li>
<li>经济 的内容</li>
<li>体育 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
let titleLi = document.querySelectorAll(".title li");
let contentLi = document.querySelectorAll(".content li");
titleLi.forEach(function(v,i) {
v.onclick = function () {
titleLi.forEach(function(val,index) {
val.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
</script>
</html>

View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换 V2</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<ul class="title"></ul>
<ul class="content"></ul>
</body>
<script>
// 发送ajax请求获取这个数组
let data = [
{
id: 1,
title: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' }
]
},
{
id: 2,
title: '经济',
content: [
{ text: '经济 的内容1' },
{ text: '经济 的内容2' },
{ text: '经济 的内容3' },
{ text: '经济 的内容4' },
]
},
{
id: 3,
title: '体育',
content: [
{ text: '体育 的内容1' },
{ text: '体育 的内容2' }
]
},
{
id: 4,
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
];
let title = $(".title"), content = $(".content");
function renderPage() {
data.forEach(function (v, i) {
title.innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
content.innerHTML +=
`<li class="${i == 0 ? 'active' : ''}">
${
v.content.map(function (item) {
return `<p>${item.text}</p>`
})
}
</li>`;
})
bindClcik();
}
function bindClcik() {
let titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (val, index) {
val.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
}
Array.prototype.map = function (callback) {
let result = []
for (let index = 0; index < this.length; index++) {
result.push(callback(this[index], index, this))
}
return result.toString().replaceAll(",", "");
}
renderPage()
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

View File

@@ -0,0 +1,200 @@
<!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 {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid #ebe8e8;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
position: relative;
}
.action {
color: #fff;
font-size: 14px;
width: 165px;
display: flex;
height: 100%;
position: absolute;
right: -165px;
}
.action div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.action .top {
background: #009bfe;
}
.action .read {
background: #fe8d3f;
}
.action .delt {
background: #ff5967;
}
</style>
</head>
<body>
<ul>
<li>
测试1
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试2
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试3
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
</ul>
</body>
<script>
// 0 关闭状态 -165 打开状态
let startX = 0, leftXArr = [];
_("ul li").forEach(function (v, i) {
v.ontouchstart = function (e) {
startX = e.touches[0].clientX
_("ul li").forEach(function (item, j) {
if (i != j) {
item.style = `
transform: translateX(0px);
`
}
})
}
v.ontouchmove = function (e) {
let moveX = e.touches[0].clientX
// 左滑moveX 小于 startX 右滑 大于
// 左滑
if (determineDirection(moveX, startX)) {
// console.log("左滑: ", moveX);
let currentX = v.style.transform.replace(/[^0-9]/ig, '')
if (-currentX != -165) {
console.log(222);
v.style = `
transform: translateX(-${startX - moveX > 165 ? '165' : startX - moveX}px);
`
} else {
leftXArr.push(moveX)
console.log("leftXArr: ", leftXArr);
if (leftXArr[leftXArr.length - 1] > leftXArr[leftXArr.length - 2]) {
leftXArr = []
console.log("左边的右滑动");
let x = -165 + (leftXArr[leftXArr.length - 1] - leftXArr[0]);
v.style = `
transform: translateX(${x}px);
`
} else {
console.log("左边的左滑动");
}
}
v.open = true
} else {
console.log("右滑");
if (v.open) {
let x = -165 + (moveX - startX);
v.style = `
transform: translateX(${x > 0 ? 0 : x}px);
`
}
}
}
v.ontouchend = function (e) {
let endX = e.changedTouches[0].clientX
if (determineDirection(endX, startX)) {
if ((startX - endX) < 55) {
v.style = `
transform: translateX(0px);
`;
v.open = false
} else {
v.style = `
transform: translateX(-165px);
`
}
} else {
if ((endX - startX) < 55 && endX != startX) {
v.style = `
transform: translateX(-165px);
`
} else {
v.style = `
transform: translateX(0px);
`
v.open = false
}
}
}
})
// x1 moveX x2 startX true 左滑 false 右滑
function determineDirection(x1, x2) {
return x1 < x2 ? true : false
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

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>Document</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
position: fixed;
user-select: none;
transition: all 1s;
}
</style>
</head>
<body>
</body>
<script>
let text = ['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善'],
index = 0;
$("body").onclick = function(e) {
// let x = e.x, y = e.y;
let { x,y } = e;
let span = document.createElement("span");
span.innerText = text[index]
span.style = `
left: ${x}px;
top: ${y}px;
color: hsl(${Math.random() * 360}, 100%, 50%);
`;
// span.style.position = `fixed`;
// span.style.left = `${x}px`;
// span.style.top = `${y}px`;
$("body").appendChild(span);
motion(span ,y)
index+=1;
if (index > 11) {
index = 0
}
}
function motion(el, top) {
setTimeout(function() {
el.style.top = `${top - 200}px`;
}, 300)
setTimeout(function() {
$("body").removeChild(el);
}, 1300)
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索建议</title>
<style>
span {
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
</body>
<script>
var SearchList = [
'你好', '我不好', '今天天气不好', '明天吃什么', '你说什么', '你不想学习?'
];
var newList = []
$("input").oninput = function () {
newList = []
if ($("input").value.length != 0) {
SearchList.forEach(function (v) {
if (v.includes($("input").value)) {
let newText = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
newList.push(newText)
}
})
renderList()
} else {
$("ul").innerHTML = ""
}
}
function renderList() {
$("ul").innerHTML = ""
newList.forEach(function (item) {
$("ul").innerHTML += `<li>${item}</li>`
})
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

View File

@@ -0,0 +1,12 @@
body,ul,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
html {
/* font-size: 50px; */
}
body {
font-size: 0;
}

View File

@@ -0,0 +1,148 @@
body {
height: 100vh;
background: url("../img/back.png");
background-size: contain;
user-select: none;
}
.diban {
position: fixed;
width: 100%;
height: 112px;
left: 0;
bottom: 0;
background: red;
}
.diban img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
position: fixed;
left: 100px;
width: 34px;
height: 24px;
transition: all linear 0.15s;
z-index: 999;
}
.pipe {
position: fixed;
width: 55px;
z-index: 998;
transition: all linear 0.1s;
}
.pause {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
z-index: 999;
}
.score {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
/* .birdDefault {
animation: birdDefault 0.4s linear infinite reverse;
}
.birdBlue {
animation: birdBlue 0.4s linear infinite reverse;
}
.birdRed {
animation: birdRed 0.4s linear infinite reverse;
} */
@keyframes birdShake {
0% {
transform: translateY(0px);
}
33% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdDefault {
0% {
background: url("../img/hn1.png");
}
33% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlue {
0% {
background: url("../img/hn_blue_1.png");
}
33% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRed {
0% {
background: url("../img/hn_red_1.png");
}
33% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.bird_title {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
text-align: center;
z-index: 999;
}
.bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.bird_list img {
cursor: pointer;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水管鸟</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="bird" style="animation: birdDefault 0.4s linear infinite reverse, birdShake 0.4s linear infinite reverse;"></div>
<img style="display: none;" class="pause" src="./img/pause.png" alt="">
<div class="score" style="display: none;">
<img src="./img/0.png" alt="">
</div>
<div class="bird_title">
<img class="bird_logo" src="./img/title.png" alt="">
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<div></div>
<img class="start" src="./img/start.png" alt="">
<img style="display: none;" class="gameover" src="./img/gameover.png" alt="">
<img style="display: none;" class="restart" src="./img/start.png" alt="">
<img style="display: none;" class="reload" src="./img/start.png" alt="">
</div>
<div class="diban">
<img class="di_one" src="./img/diban.png" alt="">
<img class="di_two" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,265 @@
class WaterPipeBird {
innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
totalScore = 0;
// 地板的运动速度
dibanMotionSpeed = 10;
// 鸟的默认皮肤
birdTheme = "birdDefault"
// 游戏状态 true 开始, false 未开始
gameStatus = false;
// 每次点击鸟,鸟的上移动距离
birdClickTop = 40
// 下移距离
birdClickDown = 10
// 创建到第几个水管
PipeIndex = 0;
// 上下水管的通过间隙(距离)
PipeGap = 150;
// 水管左右的间距
XPipeWidth = 300
// 水管移动速度
PipeSpeed = 10
IntervalList = []
constructor() {
console.log("构造函数: ");
this.dibanMotion()
this.initBird()
this.startGame()
this.stopGame()
}
dibanMotion() {
$(".di_one").style.left = `0px`;
$(".di_two").style.left = `${this.innerWidth}px`;
// 定义变量提前保存this
// =>
// call bind apply
// 箭头函数因为没有关键词 function所以this会被解绑
setInterval(() => {
$(".di_one").style.left = `${parseInt(($(".di_one").style.left)) - this.dibanMotionSpeed}px`;
$(".di_two").style.left = `${parseInt(($(".di_two").style.left)) - this.dibanMotionSpeed}px`;
if (parseInt(($(".di_one").style.left)) <= -this.innerWidth) {
$(".di_one").style.left = `${this.innerWidth}px`;
}
if (parseInt(($(".di_two").style.left)) <= -this.innerWidth) {
$(".di_two").style.left = `${this.innerWidth}px`;
}
}, 100)
}
// birdShake 0.4s linear infinite reverse
initBird() {
$(".bird").style.top = `${(this.innerHeight - 112) / 2 - 14}px`;
// 点击切换小鸟的主题
_(".bird_list img").forEach((v, i) => {
v.onclick = () => {
switch (i) {
case 0:
this.birdTheme = "birdDefault"
$(".bird").style.animationName = "birdDefault,birdShake"
break;
case 1:
this.birdTheme = "birdBlue"
$(".bird").style.animationName = "birdBlue,birdShake"
break;
case 2:
this.birdTheme = "birdRed"
$(".bird").style.animationName = "birdRed,birdShake"
break;
default:
break;
}
}
})
}
startGame() {
e(".start", () => {
let clickTime = null;
this.gameStatus = true;
$(".pause").show();
$(".score").show();
$(".bird_title").none();
$(".bird").style.animationName = this.birdTheme
// 下落
this.IntervalList[0] = setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdClickDown}px`
this.collision($(".bird"), $(".diban"))
}
}, 1000 / 16)
// 点击开始游戏和控制鸟的上移
e("body", (e) => {
if (this.gameStatus) {
clickTime = new Date().getTime();
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdClickTop}px`
$(".bird").remove("down")
$(".bird").add("up")
}
})
// 下落的样式
this.IntervalList[1] = setInterval(() => {
let currentTime = new Date().getTime();
if (currentTime - clickTime > 300) {
$(".bird").remove("up")
$(".bird").add("down")
}
}, 300)
this.IntervalList[2] = setInterval(() => {
this.CreatedPipe()
}, 500)
})
}
stopGame() {
e(".pause", (e) => {
this.gameStatus = false;
e?.stopPropagation();
this.IntervalList.forEach(v => {
clearInterval(v)
})
_(".pipe").forEach(v => {
clearInterval(v.IntervalId)
})
$(".bird_list").none()
$(".start").none()
$(".bird_title").show()
$(".restart").show()
})
e(".restart", (e) => {
$(".start").onclick()
this.PipeMove(_(".pipe"))
})
}
CreatedPipe() {
let PipeTotalHeight = this.innerHeight - 112 - this.PipeGap;
let TopImgHeight = getRandom(60, PipeTotalHeight - 60)
let BottomImgHeight = PipeTotalHeight - TopImgHeight
let createdImg = (t) => {
let img = document.createElement("img")
img.type = t
img.src = `./img/sg_${t}.png`
img.className = "pipe"
img.style = `
${t == "b" ? 'bottom: 110px;' : 'top: 0px;'}
left: ${this.innerWidth + 55 + (this.PipeIndex * this.XPipeWidth)}px;
height: ${t == "t" ? TopImgHeight : BottomImgHeight}px;
`;
return img
}
let topImg = createdImg("t");
let bottomImg = createdImg("b");
$("body").appendChild(topImg)
$("body").appendChild(bottomImg)
this.PipeMove([topImg, bottomImg])
// this.PipeMove(bottomImg)
this.PipeIndex += 1
}
PipeMove(arr) {
arr.forEach(img => {
img.IntervalId = setInterval(() => {
if (this.gameStatus) {
img.style.left = `${parseInt(img.style.left) - this.PipeSpeed}px`
if (parseInt(img.style.left) <= -55) {
clearInterval(img.IntervalId)
$("body").removeChild(img)
} else {
this.collision($(".bird"), img)
}
}
}, 100)
})
}
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
$(".gameover").show()
$(".bird_logo").none();
$(".pause").onclick()
$(".restart").none();
$(".reload").show()
e(".reload", () => {
location.reload()
})
} else {
if (el2.type == "t") {
if (parseInt(el2.style.left) + el2.offsetWidth == 100) {
this.totalScore += 1
let sco = this.totalScore.toString().split("")
$(".score").innerHTML = ""
sco.forEach(v => {
$(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
}
}
}
}
// var a = function (test) {
// console.log("1: ", test);
// }
// var a = test => console.log("1: ", test);
new WaterPipeBird()

View File

@@ -0,0 +1,57 @@
class Utils {
$(className) {
return document.querySelector(className);
}
_(className) {
return document.querySelectorAll(className);
}
e(className, callback, type = "click",) {
$(`${className}`)[`on${type}`] = (event) => {
callback(event)
}
}
customMethods() {
Element.prototype.add = function(className) {
this.classList.add(className)
}
Element.prototype.remove = function(className) {
this.classList.remove(className)
}
Element.prototype.none = function() {
this.style.display = "none"
}
Element.prototype.show = function() {
this.style.display = "block"
}
Element.prototype.toggle = function() {
if (this.style.display == "none") {
this.style.display = "block"
} else {
this.style.display = "none"
}
}
}
getRandom(min, max) {
const floatRandom = Math.random()
const difference = max - min
const random = Math.round(difference * floatRandom)
const randomWithinRange = random + min
return randomWithinRange
}
}
let { $, _, e, customMethods, getRandom } = new Utils()
customMethods()
// let utils = new Utils()

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="test">
<button>点我</button>
</div>
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
e(".main", () => {
alert(2)
})
e(".test", (e) => {
e.stopPropagation();
alert(3)
})
e("button", (e) => {
alert(1)
})
</script>
</html>

View File

@@ -0,0 +1,175 @@
<!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;
padding: 0;
}
img {
height: 85px;
width: 70px;
position: fixed;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #000000ba;
z-index: 999;
}
.dialog .center {
width: 400px;
height: 300px;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.dialog .center .dialog_title {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
border-bottom: 1px solid #e0e0e0;
}
.dialog_title .close {
font-size: 30px;
cursor: pointer;
}
.dialog .center .dialog_content {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
</head>
<body>
<div style="display: none;" class="dialog">
<div class="center">
<div class="dialog_title">
<div class="text">恭喜中奖</div>
<div class="close">x</div>
</div>
<div class="dialog_content">
恭喜中的三等奖
</div>
</div>
</div>
</body>
<script>
let { innerWidth, innerHeight } = window, createdId = null, gImg = null;
// 生成随机x轴红包
function createdHb() {
let img = document.createElement("img");
let left = Math.random() * (innerWidth - 70);
img.src = "./hb.png";
img.style = `
left: ${left}px;
top: -85px;
`
img.onclick = function () {
gImg = img;
clearInterval(createdId)
_("img").forEach(function (img) {
clearInterval(img.IntervalId)
})
random()
$(".dialog").style.display = "block"
}
$("body").appendChild(img);
motion(img)
}
function motion(img) {
img.IntervalId = setInterval(function () {
let newTop = parseInt(img.style.top);
if (newTop >= innerHeight) {
$("body").removeChild(img);
clearInterval(img.IntervalId)
} else {
img.style.top = `${newTop + 10}px`;
}
}, 80)
}
$(".dialog_title .close").onclick = function () {
$(".dialog").style.display = "none"
$("body").removeChild(gImg);
clearInterval(gImg.IntervalId)
_("img").forEach(function (img) {
motion(img)
})
auto()
}
function random() {
let leavel = Math.random()
console.log(leavel);
if (leavel < 0.01) {
$(".dialog_content").innerText = "一等奖"
} else if (0.01< leavel && leavel <= 0.1) {
$(".dialog_content").innerText = "二等奖"
} else {
$(".dialog_content").innerText = "三等奖"
}
}
// createdHb()
function auto() {
createdId = setInterval(function () {
createdHb()
}, 300)
}
auto()
// 让红包运动
// 拆红包的所有功能
// 让被点击的红包停止运动,生成新红包的也停止运动,已有红包也要停止运动
// 一等奖(1) 二等奖(10) 三等奖(89)
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

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