Nginx 反向代理 ssh最近整理家里的 NAS 环境，建了一台虚拟机作为所有服务对外的出口，使用了 Nginx 反向代理 来转发分散在各机器上的服务。
所有 web 服务都配置正常，尝试转发 ssh (22) 端口的时候出现了问题，所有查看了一下文档，发现不能配置在 http 下，需要在 stream 下配置：
123456789101112131415161718192021222324stream { upstream centos7 { server 192.168.1.6:22; } upstream mongodb { server 192.168.1.4:27017; } server { listen 3062; proxy_pass centos7; proxy_connect_timeout 1d; proxy_timeout 1d; } server { listen 27017; proxy_pass mongodb; proxy_conne ...
一起来学代码片段代码片段简介 🦉snippet[ˈsnɪpɪt]，或者说「code snippet」，也即代码片段，指的是能够帮助输入重复代码模式，比如循环或条件语句的模板。通过 snippet ，我们仅仅输入一小段字符串，就可以在代码片段引擎的帮助下，生成预定义的模板代码，接着我们还可以通过在预定义的光标位置之间跳转，来快速补全模板。
代码片段配置流程 🐸首先，进入代码片段设置文件，这里提供了三种方法：
通过快捷键「Ctrl + Shift + P」打开命令窗口（All Command Window），输入「snippet」，点选「首选项：配置用户代码片段片段」；
点击界面最左侧竖栏（也即活动栏）最下方的齿轮按钮，在弹出来的菜单中点选「用户代码片段」；
按下「Alt」键切换菜单栏，通过文件 > 首选项 > 用户代码片段；
接着，在设置文件里补全代码片段。以 Javascript 语言为例，选中后你将打开一个设置文件，javascript.json，在文件头部你会看见一个注释，这其实是一个示例和对它的介绍。你可以试着将第 7~14 行反注释掉（选中后 Ctrl + “/”）。
12 ...
Centos7下将Protobuf转swiftproto2swift 需要使用第三方插件 GitHub - apple/swift-protobuf: Plugin and runtime library for using protobuf with Swift
需要在不同系统环境下生成 protoc-gen-swift 编译插件，在 linux 中编译需要安装 swift。
安装 Swift下面是 centos 下安装 swift 的步骤首先到 swift 官网下载 release 版本编译好的二进制包
解压后将路径配置到环境变量
12PATH=$PATH:/usr/local/swift/swift-5.3.3-RELEASE-centos7/usr/binexport PATH
查看 swift 是否成功配置
1234swift -version# 输出内容以下类似内容则为成功# Swift version 5.3.3 (swift-5.3.3-RELEASE)# Target: x86_64-unknown-linux-gnu
构建 protoc-gen-swift 插件拉取 swift-protobuf 项目，执行构 ...
Nginx 学习
本文内系统环境为 Centos 7本文内配置实例访问域名为：http://nginx.bb.local
特点占用内存少，性能高，支持并发高
能够实现反向代理负载均衡动静分离高可用
安装添加 yum 源1rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
安装 nginx1yum -y install nginx
设置 nginx 服务开机启动1systemctl enable nginx
常用命令1234567891011121314# 检测配置文件是否有格式错误nginx -t# 查看 nginx 服务当前状态systemctl status nginx# 停止 nginx 服务systemctl stop nginx# 启动 nginx 服务systemctl start nginx# 重启 nginx 服务systemctl restart nginx
配置语法
每条指令都是以;结尾，指令与参数之间以空格符号分割
指令块以{}大括 ...
业余选手OSS使用指南#软件使用
在此强烈推荐阿里云 OSS 对象存储服务，可用作图床、个人网盘、网站托管，简直是杀人越货，居家旅行必备良药。那么在哪里能买得到呢？
简介
对象存储服务（Object Storage Service，OSS）是一种海量、安全、低成本、高可靠的云存储服务，适合存放任意类型的文件。容量和处理能力弹性扩展，多种存储类型供选择，全面优化存储成本。
资费介绍OSS 的费用由两部分构成：
存储费用
40G 一年才 9 块，不限存储桶数量，要啥自行车
流量费用
使用场景图床搭配图片上传工具，我在用的是PicGo，支持 windows、macOS、linux。配置好 OSS 参数以后，一键上传，自动复制上传后的 url
另外还支持腾讯云 cos，七牛云，微博，又拍云，github 等存储空间作为图床
静态资源其实说穿了，OSS 就是一个远程的硬盘，可以提供网络访问。所以我们可以用来存放一些前端项目要用到的 js、css、json 文件，用来加速访问，降低自己服务器的压力。简直是 1M 带宽服务器的福音。
网站托管上面讲到可以存放静态资源文件，那么我们是不是可以用 OSS 来 ...
AJAX工作原理AJAX 工作原理
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
一、ajax 所包含的技术大家都知道 ajax 并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
使用 CSS 和 XHTML 来表示。
使用 DOM 模型来交互和动态显示。
使用 XMLHttpRequest 来和服务器进行异步通信。
使用 javascript 来绑定和调用。
在上面几中技术中，除了 XmlHttpRequest 对象以外，其它所有的技术都是基于 web 标准并且已经得到了广泛使用的，XMLHttpRequest 虽然目前还没有被 W3C 所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
二、怎样创建 ajaxAjax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生 ...
mpvue框架使用记录最近公司接了一个订制小程序，是从 APP 改成微信小程序，考虑用mpvue框架来开发，发现还是有些坑的，下面说一下这两天使用下来的感受。
template中不支持methods中的函数，也没有 filter 过滤器，数据要预先处理比较麻烦
突然想到可以用组件来预处理数据，比如项目中图片 url 的拼接和替换域名
创建新页面比较繁琐
每次创建新页面按常规流程是:
新建页面文件夹 → 新建index.vue，main.js，main.json并填入页面基本内容 → 在项目app.json中添加页面信息。
最开始我的解决方法是创建了一个模板页面，每次新建页面的时候复制一份，重命名。
但是还是很麻烦，需要手动向app.json中添加页面路径，干脆用 node 写了一个快速添加页面的小工具
将工具文件addpage.js放在 mpvue 项目根目录，运行node addpage
目前有一个参数可以配置新增页面的属性，是设置 vue 文件中用到的预处理器类型
用法：node addpage wxss，node addpage sass
填入需要创建的页面路径和标题就会在src/pages/ ...
uni-app h5端标题解决方法
最近公司的新项目要求同时能发布APP端和h5端，最好还能把小程序一起搞定，然后就想到uni-app这个神奇的框架，可以同时开发APP，微信小程序，支付宝小程序，H5等等平台。简直太帅了，但是使用下来发现还是有些问题的。
H5端双标题栏由于APP端和小程序端都有原生的标题栏可以使用，H5端页面没提供一个可以隐藏标题的方法，在移动端访问的时候会出现双标题，一个是微信浏览器的标题，加上运行到H5项目模拟的标题栏，如图：
翻阅文档很久也没有发现有相关的配置，可以直接在发布到H5端时不渲染这个标题栏。然后观察到最后这个标题栏在发布时会渲染成一个<uni-page-head>元素，在全局的css中如下设置
123uni-page-head { display: none;}
标题栏去掉之后的效果：
但是去掉标题栏后会导致页面主体部分，H5中渲染为<uni-page-wrapper>的标签高度计算错误,可以加上下面的代码重新计算高度(好像高度不对并不会影响显示效果，哈哈哈)
1234uni-page-wrapper { height: ...
Vuex 学习记录一句话描述vuex
Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
state每个应用只包含一个store实例，包含所有层级的state状态。可以吧store比作一个object全局变量。在vue组件中引用state最简单的方法是在计算属性中返回需要的某个state：
12345678const demo = { template: `<div>{{ text }}</div>`, computed: { tree () { return store.state.text } }}
每当 store.state.tree 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
这种方法引用状态必须在每个组件中引入store，我们在构建vue应用时注册store，所有子组件都将被注入store，可以通过this.$store访问到store。
123456 ...
scss常用mixin&函数常用mixin文字单行溢出省略号12345678910@mixin textOneLine{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}//调用方法.title{ @include textOneLine;}
文字多行溢出省略号123456789101112@mixin textMultipleLine($number:2){ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $number; -webkit-box-orient: vertical;}//调用方法.introduce{ @include textMultipleLine(3);}
为元素添加点击效果亮度调整为传入的值（0-1） ,适用于有颜色的元素，背景色或者图案，在底色为白色的情况下效果效果不明显。
123456 ...
