Nginx学习笔记
引用站外地址
nginx 官网
Nginx是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。
Nginx是什么 Nginx 是一个开源的 Web 服务器和反向代理服务器，它使用 Nginx 作为 Web 服务器和反向代理服务器的原因是它拥有高性能、可扩展性和可靠性。它可以处理大量的并发连接，并且可以缓存 HTTP 请求以提高性能。
配置文件Nginx的配置文件是 nginx.conf，⼀般位于 /etc/nginx/nginx.conf。可以使⽤ nginx -t 来查看配置文件的位置和检查配置文件是否正确。
配置文件的结构1234567891011121314# 全局块worker_processes 1;events { # events块}http { # http块 server { # server块 location / { # location块 } }}
全局块全局 ...
正则表达式
正则表达式Regular Expression，正则表达式，一种使用表达式的⽅式对字符串进行匹配的语法规则。
我们抓取到的⽹⻚源代码本质上就是一个超长的字符串，想从⾥⾯提取内容，⽤正则再合适不过了。
正则的优点：速度快，效率高，准确性高。
正则的缺点：新手上手难度有点儿高。不过只要掌握了正则编写的逻辑关系，写出⼀个提取页面内容的正则其实并不复杂。
正则的语法：使⽤元字符进⾏排列组合⽤来匹配字符串
引用站外地址
OSCHINA
在线测试正则表达式。
元字符具有固定含义的特殊符号 常用元字符:
. 匹配除换⾏符以外的任意字符
\w 匹配字⺟或数字或下划线
\s 匹配任意的空⽩符
\d 匹配数字
\n 匹配⼀个换⾏符
\t 匹配⼀个制表符
^ 匹配字符串的开始
$ 匹配字符串的结尾
\W 匹配⾮字⺟或数字或下划线
\D 匹配⾮数字
\S 匹配⾮空⽩符
a|b 匹配字符 a 或字符 b
() 匹配括号内的表达式，也表示⼀个组
[...] 匹配字符组中的字符
[^...] 匹配除了字符组中字符的所有字符
量词控制前⾯ ...
微信小程序中实现语音转文字
引用站外地址
微信公众平台
给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。
添加插件
登录微信公众平台：https://mp.weixin.qq.com
设置 -> 第三方设置 -> 添加插件
输入微信同声传译，点击搜索，之后选择并点击添加
成功添加后，点击详情，复制它的 AppID 和最新版本号
配置去 app.json 进行配置其中version的值对应上面的版本号，provider的值对应上面的 AppID
123456"plugins": { "WechatSI": { "version": "0.3.3", "provider": "wx069ba97219f66d99" }},
代码实现123456789101112131415161718192021222324252627282930 ...
CSS制作简易的动态立绘
效果展示
* {
margin: 0;
padding: 0;
}
.row{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 70%;
position: relative;
margin-top:-80px;
}
.box img {
width: 100%;
margin: 0;
padding: 0;
}
.box > div {
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.box .bg {
position: unset;
/* opacity: 0; */
}
.head {
z-index: 4;
animation ...
JS实现图片拖动对比功能
效果展示
* {
margin: 0;
padding: 0;
}
.row {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.box {
width: 600px;
height: 400px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.box .img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 600px 100%;
}
.down {
background-image: u ...
根据经纬度计算两点之间距离
12345678910111213141516171819202122// 计算两个经纬度之间的距离function Rad(d) { return (d * Math.PI) / 180.0 //经纬度转换成三角函数中度分表形式。}//lat 纬度 lng 经度function GetDistance(lat1, lng1, lat2, lng2) { var radLat1 = Rad(lat1) var radLat2 = Rad(lat2) var a = radLat1 - radLat2 var b = Rad(lng1) - Rad(lng2) var s = 2 * Math.asin( Math.sqrt( Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2) ) ) s = s * 6378.137 // 地球 ...
微信小程序在地图上自定义标记位置
效果展示
.row{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
代码实现12345678910<map longitude="{{currLoca.longitude}}" //地图界面中心的经度 latitude="{{currLoca.latitude}}" //地图界面中心的纬度 show-location="{{true}}" markers="{{markers}}" //标记点数据列表 @markertap="markertap" //标记点点击事件 scale="{{1 ...
CSS实现卡券/票据效果
效果展示
* {
margin: 0;
padding: 0;
}
.row{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
position: relative;
width:300px;
height: 150px;
margin:10px 40px;
filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
}
.box1::before {
content: '';
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background:#fdb716;
-webkit-mask:radial- ...
WebSocket学习笔记
为什么需要 WebSocket ？WebSocket 与 http 一样，也是一种网络传输协议。那么有 http 协议了为什么还需要 webSocket 呢？
HTTP 中，通信只能由客户端向服务端发起请求。WebSocket，通信既可以从服务端发起请求，也能从客户端发起请求。
HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。传统的方式是用 Ajax 轮询，就是在特定的时间间隔，浏览器向服务器发送请求，这样明显浪费资源。
WebSocket 简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据，浏览器和服务器只需要一次握手，两者之间就直接可以创建持久性的连接，进行双向数据传输
浏览器发起 WebSocket 连接请求，连接建立起来之后，服务端和客户端就可以通过 TCP 连接直接交换数据。连接之后 通过 send（）方法发送数据，通过 onmessage 事件来接受服务器返回的数据。
WebSocket 特点
通信可以由客户端 ...
好看的echarts图表样式
引用站外地址
ISQQW
Echarts Demo 合集。
.chart-content {
padding: 40px 20px;
background-color: #17233b;
border-radius: 10px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
margin-bottom:20px;
}
function init1(){
let myChart = echarts.init(document.getElementById("chart1"));
let option = {
backgroundColor: "rgba(0,0,0,0)",
t ...
