席宇博客

el-select和el-cascader多选数据格式修改为字符串

Sun, 12 Jan 2025 00:00:00 GMT

为什么要修改多选数据格式#

在使用element-ui的el-select和el-cascader组件时，多选数据格式是数组，而后端的实际需求是数组中的每个元素是逗号隔开的字符串，而不是对象。在使用中就需要转换数据类型，接收后端数据时时把字符串转为数组，在发送数据时，又把数组转为字符串。十分繁琐而且随意修改数据类型是很不提倡的行为。于是就想着修改组件的数据类型，使数据类型可以自定义。原本是要修改element-ui的源码并提交，但是发现element-ui已经很久不维护了，于是就只扩展element-ui的功能，而不修改原有代码。

el-select#

el-select组件的multiple属性是默认为false的，所以默认情况下是单选，如果需要多选，需要设置multiple属性为true。新建以下自定义组件str-select并全局注册，使用时直接使用str-select组件即可，组件的所有属性不变。

1
<template>
2
    <div>
3
      <el-select
4
        :value="internalValue"
5
        @change="handleChange"
6
        v-bind="filteredAttrs"
7
        v-on="filteredListeners"
8
        ref="select"
9
        :multiple="isMultiple"
10
      >
11
        <template v-for="(slotFn, name) in $scopedSlots" :slot="name" slot-scope="slotData">
12
          <slot :name="name" v-bind="slotData"></slot>
13
        </template>
14
      </el-select>
15
    </div>
16
  </template>
17

18
  <script>
19
  export default {
20
    name: "StrSelect",
21
    inheritAttrs: false,
22
    props: {
23
      value: {
24
        type: String,
25
        default: "",
26
      },
27
      multiple: {
28
        type: Boolean,
29
        default: false,
30
      },
31
    },
32
    data() {
33
      return {
34
        internalValue: this.multiple ? [] : "",
35
      };
36
    },
37
    computed: {
38
      filteredAttrs() {
39
        const { value, multiple, ...restAttrs } = this.$attrs;
40
        return restAttrs;
41
      },
42
      filteredListeners() {
43
        const { input, change, ...restListeners } = this.$listeners;
44
        return restListeners;
45
      },
46
      isMultiple() {
47
        return this.multiple;
48
      },
49
    },
50
    watch: {
51
      value: {
52
        immediate: true,
53
        handler(newValue) {
54
          if (this.isMultiple) {
55
            this.internalValue = newValue ? newValue.split(",").map((item) => item.trim()) : [];
56
          } else {
57
            this.internalValue = newValue || "";
58
          }
59
        },
60
      },
61
      internalValue: {
62
        handler(newValue) {
63
          if (this.isMultiple) {
64
            this.$emit("input", newValue.join(","));
65
          } else {
66
            this.$emit("input", newValue);
67
          }
68
        },
69
      },
70
    },
71
    methods: {
72
      handleChange(newValue) {
73
        this.internalValue = newValue;
74
        if (this.isMultiple) {
75
          this.$emit("change", newValue.join(","));
76
        } else {
77
          this.$emit("change", newValue);
78
        }
79
      },
80
      blur() {
81
        this.$refs.select.blur();
82
      },
83
      focus() {
84
        return this.$refs.select.focus;
85
      },
86
    },
87
  };
88
  </script>
89

90
  <style scoped>
91
  </style>

展开收起

el-cascader#

el-cascader组件默认就返回数组。新建以下自定义组件str-cascader并全局注册，使用时直接使用el-cascader组件即可，除了emitPath以外，组件的所有属性不变，目前的str-cascader只支持emitPath为 false。

1
<template>
2
    <div>
3
      <el-cascader
4
        :value="internalArray"
5
        @change="handleChange"
6
        v-bind="filteredAttrs"
7
        v-on="filteredListeners"
8
        ref="cascader"
9
      >
10
      <template v-for="(slotFn, name) in $scopedSlots" :slot="name" slot-scope="slotData">
11
        <slot :name="name" v-bind="slotData"></slot>
12
      </template>
13
      </el-cascader>
14
    </div>
15
  </template>
16

17
  <script>
18
  export default {
19
    name: 'StrCascader',
20
    inheritAttrs: false,
21
    props: {
22
      value: {
23
        type: String,
24
        default: ''
25
      }
26
    },
27
    data() {
28
      return {
29
        internalArray: []
30
      };
31
    },
32
    computed: {
33
      filteredAttrs() {
34
        const { value, ...restAttrs } = this.$attrs;
35
        return restAttrs;
36
      },
37
      filteredListeners() {
38
        const { input,change, ...restListeners } = this.$listeners;
39
        return restListeners;
40
      }
41
    },
42
    watch: {
43
      value: {
44
        immediate: true,
45
        handler(newValue) {
46
          if (newValue) {
47
            this.internalArray = newValue.split(',').map(item => item.trim());
48
          } else {
49
            this.internalArray = [];
50
          }
51
        }
52
      },
53
      internalArray: {
54
        handler(newValue) {
55
          console.log(newValue,"newValue22");
56

57
          this.$emit('input', newValue.join(','));
58
        }
59
      }
60
    },
61
    methods: {
62
      handleChange(newValue) {
63
        this.internalArray = newValue;
64
        console.log(newValue,"newValue11");
65
        this.$emit('change', newValue.join(','));
66
      },
67
      getCheckedNodes(){
68
        return this.$refs.cascader.getCheckedNodes()
69
      },
70
      clearCheckedNodes(){
71
        return this.$refs.cascader.$refs.panel.clearCheckedNodes()
72
      },
73
    }
74
  };
75
  </script>
76

77
  <style scoped>
78
  </style>

展开收起

可视化展示台伪军“雄风”系统机动部署

Sun, 03 Nov 2024 20:22:44 GMT

背景#

近期，蓝德智库通过多方面的情报和分析，在微信公众号公布了台伪军“雄风”系统机动部署的位置数据，作为gis爱好者，也想尝试下可视化展示一下，于是就有了下面的内容。

应用#

首先通过坐标转换，将蓝德智库提供的原始GPS坐标数据，使用地图服务软件转换为可用坐标，然后将这些坐标标记在地图上。这样一来，机动部署位置都可以一目了然地显示出来。最终效果如下,你也可以打开台伪军“雄风”系统机动部署查看

uniapp跳转第三方地图app

Sun, 07 Jul 2024 18:34:36 GMT

需要实现的功能#

需要实现检查手机已安装的地图软件（高德地图、百度地图、腾讯地图），唤起列表选择（手机只有一款地图app直接跳转不选择，任何一款都没有跳转到网页高德地图），最后在用户点击之后跳转第三方地图软件并执行导航功能，好在各大地图app都提供了类似的接口，所以能够实现目标。

代码示例#

1
const useGetMapsApp = (locationType= 'gcj02') => {
2
  // 获取平台
3
  const platform = uni.getSystemInfoSync().platform;
4
  // 三大地图APP对应的平台包名及action
5
  const mapsJson = {
6
    aMap: {
7
      pname: 'com.autonavi.minimap',
8
      action: platform === 'ios' ? 'iosamap://' : 'amapuri://',
9
      name: '高德地图'
10
    },
11
    baiduMap: {
12
      pname: 'com.baidu.BaiduMap',
13
      action: 'baidumap://',
14
      name: '百度地图'
15
    },
16
    tencentMap: {
17
      pname: 'com.tencent.map',
18
      action: 'qqmap://',
19
      name: '腾讯地图'
20
    }
21
  };
22
  // 配置列表信息
23
  let mapList = [];
24

25
    // 获取平台对应的包名/action
26
    const appKeys = Object.keys(mapsJson);
27
    appKeys.forEach((key) => {
28
      const app = mapsJson[key];
29
      let obj = {
30
        pname: app.pname,
31
        action: app.action
32
      };
33
      if (plus.runtime.isApplicationExist(obj)) {
34
        mapList.push({
35
          key,
36
          name: app.name,
37
          ...obj
38
        });
39
      }
40
    });
41
    // ios端添加系统默认地图，所以在ios端地图列表至少有一个
42
    if (platform === 'ios') {
43
      mapList.push({
44
        name: '系统地图',
45
        pname: 'system'
46
      });
47
    }
48
  // 打开map软件列表，或者直接去导航
49
  const openMap = (option) => {
50
    // 如果存在以上地图APP软件
51
    if (mapList.length) {
52
      // 只有一个地图软件，直接打开
53
      if (mapList.length === 1) {
54
        openApp(1, option);
55
        return;
56
      }
57
      // 多个软件调起系统弹框，用户选择
58
      plus.nativeUI.actionSheet(
59
        {
60
          cancel: '取消',
61
          buttons: mapList.map((item) => ({
62
            title: item.name
63
          }))
64
        },
65
        function (e) {
66
          if (e.index > -1) {
67
            openApp(e.index, option);
68
          }
69
        }
70
      );
71
    } else {
72
      openGDWeb(option);
73
    }
74
  };
75
  // 打开高德地图官网
76
  const openGDWeb = (option) => {
77
    // 没有第三方地图APP就跳转网页版高德地图导航
78
    // https://uri.amap.com/navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0
79
    plus.runtime.openURL(
80
      encodeURI(
81
        'https://uri.amap.com/navigation?from=' +
82
          option.startLocation[1] +
83
          ',' +
84
          option.startLocation[0] +
85
          ',' +
86
          option.startAddress +
87
          '&to=' +
88
          option.endLocation[1] +
89
          ',' +
90
          option.endLocation[0] +
91
          ',' +
92
          option.endAddress +
93
          '&mode=car&policy=1&src=mypage&coordinate=' +
94
          (locationType === 'gcj02' ? 'gaode' : locationType) +
95
          '&callnative=0'
96
      )
97
    );
98
  };
99
  // 打开指定的APP地图软件
100
  const openApp = (index, option) => {
101
    const appInfo = mapList[index - 1];
102
    // ios端有系统地图，添加系统地图打开方式
103
    if (appInfo.pname === 'system') {
104
      const point1 = new plus.maps.Point(
105
        option.startLocation[0],
106
        option.startLocation[1]
107
      );
108
      const point2 = new plus.maps.Point(
109
        option.endLocation[0],
110
        option.endLocation[1]
111
      );
112
      plus.maps.openSysMap(point1, '', point2);
113
      return;
114
    }
115
    // 其他地图
116
    let action = '';
117
    // 高德
118
    if (appInfo.key === 'aMap') {
119
      action = aMapPath(appInfo, option);
120
    }
121
    // 百度
122
    if (appInfo.key === 'baiduMap') {
123
      action = baiduMapPath(appInfo, option);
124
    }
125
    // 腾讯
126
    if (appInfo.key === 'tencentMap') {
127
      action = tencentMapPath(appInfo, option);
128
    }
129
    plus.runtime.openURL(
130
      encodeURI(action),
131
      () => {
132
        uni.showToast({
133
          icon: 'none',
134
          title: '打开地图APP失败，即将跳转网页地图',
135
          duration: 2000,
136
          success: () => {
137
            let t = setTimeout(() => {
138
              clearTimeout(t);
139
              t = null;
140
              openGDWeb(option);
141
            }, 2000);
142
          }
143
        });
144
      },
145
      appInfo.pname
146
    );
147
  };
148
  // 高德跳转传参
149
  const aMapPath = (appInfo, option) => {
150
    return (
151
      appInfo.action +
152
      'route/plan?sourceApplication=&slat=' +
153
      option.startLocation[1] +
154
      '&slon=' +
155
      option.startLocation[0] +
156
      '&sname=' +
157
      option.startAddress +
158
      '&dlat=' +
159
      option.endLocation[1] +
160
      '&dlon=' +
161
      option.endLocation[0] +
162
      '&dname=' +
163
      option.endAddress +
164
      '&dev=0&t=0'
165
    );
166
  };
167
  // 百度跳转传参
168
  const baiduMapPath = (appInfo, option) => {
169
    return (
170
      appInfo.action +
171
      'map/direction?origin=name:' +
172
      option.startAddress +
173
      '|latlng:' +
174
      option.startLocation[1] +
175
      ',' +
176
      option.startLocation[0] +
177
      '&destination=name:' +
178
      option.endAddress +
179
      '|latlng:' +
180
      option.endLocation[1] +
181
      ',' +
182
      option.endLocation[0] +
183
      '&coord_type=' +
184
      locationType +
185
      '&mode=driving&car_type=BLK&src=123456'
186
    );
187
  };
188
  // 腾讯跳转传参
189
  const tencentMapPath = (appInfo, option) => {
190
    return (
191
      appInfo.action +
192
      'map/routeplan?type=drive&from=' +
193
      option.startAddress +
194
      '&fromcoord=' +
195
      option.startLocation[1] +
196
      ',' +
197
      option.startLocation[0] +
198
      '&to=' +
199
      option.endAddress +
200
      '&tocoord=' +
201
      option.endLocation[1] +
202
      ',' +
203
      option.endLocation[0] +
204
      '&referer=123'
205
    );
206
  };
207

208
  return {
209
    openMap
210
  };
211
};
212
const useGetMapsApp2=() =>{
213
  // 打开map软件列表，或者直接去导航
214
  const openMap = (option) => {
215
    // 如果存在以上地图APP软件
216
    if (mapList.length) {
217
      // 只有一个地图软件，直接打开
218
      if (mapList.length === 1) {
219
        openApp(1, option);
220
        return;
221
      }
222
      // 多个软件调起系统弹框，用户选择
223
      plus.nativeUI.actionSheet(
224
        {
225
          cancel: '取消',
226
          buttons: mapList.map((item) => ({
227
            title: item.name
228
          }))
229
        },
230
        function (e) {
231
          if (e.index > -1) {
232
            openApp(e.index, option);
233
          }
234
        }
235
      );
236
    } else {
237
      openGDWeb(option);
238
    }
239
  };
240
  return {
241
    openMap
242
  }
243
}
244
export default useGetMapsApp;

展开收起

cesium学习1-航班跟踪器

Sat, 02 Mar 2024 16:34:36 GMT

什么是Cesium#

Cesium是一个基于WebGL的JavaScript库，它允许开发人员在Web浏览器中创建令人惊叹的3D地球可视化应用程序。它提供了丰富的功能，包括地形渲染、地理空间数据可视化、虚拟现实支持等。通过Cesium，开发人员可以轻松地在网页上创建交互式的地球模型，并在其中显示各种地理信息。

航班跟踪DEMO#

航班跟踪示例如下,你也可以打开航班跟踪DEMO查看

学习过程#

用手敲了一遍官网的例子，上面的demo基本上完全一致。除了新增了glTF 模型的minimumPixelSize属性，用于设置飞机的最小像素值。目前遇到的问题是官方的文档搜不到一些属性和方法，也可能是我自己搜索的方式不对，就比如这个minimumPixelSize还是我在搜索引擎找到的属性。

过年做美团骑手赚了57块钱

Fri, 23 Feb 2024 20:53:42 GMT

春节期间，我在家中闲来无事决定尝试一下美团众包骑手的工作，赚点跑腿钱。大年初三那天，我骑着电动车，踏上了外卖之旅。尽管只是短短的一天体验，却让我对这份工作有了很深的体会。

过年做美团骑手赚了57块钱

初三下午，我在手动接取一单以后，正在取外卖的路上系统又迅速推送了三单。由于担心时间压力过大，我依次选择了拒绝这三单。每当我按下“拒绝”按钮时，手机屏幕上赫然显示着警告信息——拒绝系统派单将会降低我的接单优先级评分，并且一旦当天累计拒绝五单，将失去继续接单的权利。这种机制无疑是对兼职骑手的时间和行动自由度的巨大束缚，仿佛在暗示：你若不是全身心投入、无法随时响应系统派单，就难以在这行立足。当然，我本来就是兼职的，所以果断拒绝，我事后发现只要接单后立刻修改状态为下线，系统就不会强制派单了。另外，每一单都附带送达时限的额外奖励，比如“30分钟内送达额外赚取5元”，这样的激励措施在某种程度上像是无形的算法鞭子，不断驱使我在确保安全的前提下加速骑行，过十字路口时时也产生了闯红灯的心理冲动，这对于交通安全是个挑战。

除了不好的地方，我也体会到了这份工作的积极一面。美团众包平台的确提供了一个门槛相对较低的就业机会，它面向广大人群开放，无论是临时找活儿干的人，还是寻求工作时间灵活的人，只要智力正常、身体健康，都能够成为这个庞大外卖生态系统中的一员。通过参与配送，每个人都能加入服务行业创造价值，获得实实在在的收入，这一点无疑是美团众包服务的一大优势所在。

这次体验的最大收获除了钱之外就是知道了附近的购物商场一个专供服务人员出入的侧门，顾客走的大门电梯排队的时候，工作人员电梯还是空旷状态，下次去玩可以抄近路了。

为服务器安装雷池WAF防火墙

Fri, 08 Dec 2023 20:53:42 GMT

为什么需要waf防火墙#

如何选择一款适合自己网站的waf防火墙？网站安全是每一个网站运营者都必须面对的问题，尤其是在网络攻击日益频繁和复杂的今天。如果网站被黑客入侵或者遭受DDoS攻击，不仅会造成数据泄露、网站瘫痪等严重后果，还会影响网站的信誉和用户体验。因此，选择一款合适的waf防火墙是保障网站安全的重要措施之一，比如我的网站就在前段时间被淄博的张兴强攻击。

waf防火墙是一种专门针对Web应用程序的安全防护设备，它可以检测和拦截Web层面的各种攻击，如SQL注入、XSS跨站脚本、CSRF跨站请求伪造等。waf防火墙可以有效地提升网站的安全性能和抵御能力，保护网站免受黑客的侵扰。

市面上有很多不同类型和品牌的waf防火墙供用户选择，但是如何找到一款适合自己网站的waf防火墙呢？在这里，我想向大家推荐一款我个人非常喜欢并且使用过的waf防火墙——雷池waf防火墙。

雷池WAF防火墙

雷池waf防火墙是一款国产的智能waf防火墙，它有以下几个优点：

免费而且容易安装。雷池waf防火墙提供了免费版和企业版两种版本，免费版就可以满足中小型网站的基本需求，而且安装非常简单，只需要执行官方文档里的一行命令即可。即使不懂运维知识也可以轻松使用。
对中文用户更友好。相比国外的waf防火墙，雷池waf防火墙更加适合中文用户使用，它支持中文界面可视化操作，并且有使用问题可以直接在官方微信群反馈，会有专业的技术人员跟进和解决。
功能更多价格更有竞争力。相比国内的其他waf防火墙，雷池waf防火墙免费用户的功能更多，包括CC攻击防护、恶意爬虫拦截、SSL证书管理等。如果需要更高的防护效果完全可以选购企业版，价格比同类产品更有竞争力，更加灵活和经济。
雷池WAF防火墙
除了以上的优点，雷池waf防火墙还有很多其他的特色和亮点，比如：
更新频率很高的智能防护。雷池waf防火墙同时利用人工智能和大数据分析技术，可以自动识别和拦截新型的攻击手法，提供更加智能和高效的防护服务。
支持多种Web应用程序。雷池waf防火墙支持多种Web应用程序，如WordPress、Drupal、Joomla、Magento等，无论你的网站是基于什么平台或者语言开发的，都可以使用雷池waf防火墙进行保护。
提供丰富的报表和统计。雷池waf防火墙提供了丰富的报表和统计功能，可以让用户实时了解网站的流量、攻击、拦截等情况，方便用户进行分析和优化。
雷池WAF防火墙

雷池WAF防火墙

雷池WAF防火墙
目前我的网站已经部署了雷池waf防火墙，我认为雷池waf防火墙是一款非常优秀的waf防火墙产品，特别是使用未升级的thinkphp等动态语言框架写的网站，可能有些源码已经失去了维护者，waf可以在代码已知有漏洞的情况下阻止黑客的恶意攻击。雷池waf防火墙可以为中小型网站提供免费而且高效的安全防护服务，让用户无需担心网站被黑客攻击或者遭受攻击。如果你也想给你的网站增加一层安全保障，不妨试试雷池waf防火墙吧！

安装方法#

Terminal window

1
bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release/latest/setup.sh)"

输入以上命令即可安装雷池WAF到你的服务器，安装和使用方法官方文档里都有详细描写。雷池WAF防火墙官方文档

宝塔面板安装雷池WAF防火墙后防护网站无效解决办法#

如果你和我一样也在使用宝塔面板，那么因为宝塔nginx会占用80端口导致雷池WAF的防护网站配置无效，需要修改以下目录的文件80端口为任意其他端口。nginx路径：/www/server/panel/vhost/nginx

Terminal window

1
0.default.conf
2
phpfpm_status.conf
3
站点配置文件

修改后，雷池WAF防火墙就可以正常使用了，今天发现最新版本的雷池waf更新日志里有：“修复创建或修改站点时，端口占用检查没有生效的问题”。也许以后宝塔面板配合雷池waf防火墙就不需要手动修改宝塔端口了。

如无必要勿增实体:简单有效的app升级方案

Sun, 03 Dec 2023 13:12:49 GMT

app开发的时候需要经常给app发布新版本，修复bug，增加功能，提升用户体验。我曾经使用一直使用uniCloud的app升级中心，这是一个很方便的工具，可以让我在云端管理我的app版本，设置升级策略，推送更新通知，跟踪升级情况。uniCloud的app升级中心有一个免费方案，可以免费使用一定量的cdn流量和云函数调用。但是，随着app数量和单个app用户越来越多，免费方案的资源已经不够用了，很可能在未来需要升级到付费方案，这样就会图增成本。

前段时间，更新一个很久之前同事开发的app时发现，它使用了一种非常简单有效的app升级方案。它没有依赖于任何第三方服务，也没有依赖任何后端接口服务，只需要在服务器上放一个xml文件，里面包含了app的版本号、下载地址、更新说明等信息。每次打开app的时候，它就会请求这个xml文件，根据版本号判断是否需要升级。如果需要升级，它就会弹出一个对话框，显示更新说明，并提供一个下载按钮。点击下载按钮后，它就会跳转到浏览器，从指定的地址下载新版本的app文件，并提示用户安装。

这种方案非常简单有效，它只依赖于服务器上的一个xml文件和手动更新的下载地址，不需要任何额外的资源和费用。它也可以灵活地控制升级策略，比如可以设置强制升级或者可选升级，可以针对不同的平台或者渠道发布不同的版本等。它还可以保证用户获取到最新的版本，避免因为缓存或者网络问题导致下载失败或者下载错误的版本。它非常符合“如无必要勿增实体”的原则，它没有引入不必要的复杂性和成本，只使用了最简单和最有效的方法实现了app升级功能。我准备以后有新的app要编写时，都采用这种类似的简单方案，并做一些改进。比如，把xml文件改为json文件，这样更加简洁和易读。还可以参考uniCloud的方式把点击更新后跳转到浏览器下载的方式改为点击更新后当前页面自动下载app文件并自动安装的方式，这样更加方便和快捷。

在这个过程中，我感受到了“如无必要勿增实体”的重要性。这是一条经典的设计原则，也叫做奥卡姆剃刀原则（Occam’s razor），它告诉我们在解决问题时应该尽量使用最少和最简单的假设和方法。这样可以避免引入不必要的复杂性和成本，提高效率和可靠性。当然，并不是说越简单越好，而是说在满足需求和质量的前提下越简单越好。有时候为了实现更好的功能和体验，我们也需要引入一些复杂性和成本，但是我们应该尽量保持平衡和适度。奥卡姆剃刀原则的逻辑思考可以应用在程序开发的各个角落，举个真实的例子（双引号内容为当时聊天原文），在一个前端框架交流群内，有人问了这么一个问题：

他：“有人做过打卡系统吗，现在遇到一个问题, 有个统计考勤, 但是数据库中只会存已经打卡的记录，没有缺卡的记录, 这就导致统计的时候不会给我反缺卡数据, 后端想让我自己补全这个缺卡, 但是我觉得不是很妥, 这个有没有后端的人提供下思路”

我：“打卡是一个人在一天内存了一个打卡的数据，没打卡，就是没存嘛，你觉得应该是谁在什么时间存入了缺卡的数据？”

（我觉得一件事情不应当这样处理时就会反问对方是怎么想的，因为我觉得缺少的数据这种东西本来就不应该存入数据库，所以想听听他的思路）

他：“我是这样认为的想着数据库要是有一份缺卡记录就好了”

我：“那样更麻烦，又回到这个问题了，你想怎么存缺卡数据，我理解的只能让后端每天的00：:00搞定时任务才能存缺卡数据，但是本来你已知打卡信息了，缺卡就是本月天数-打卡，让后端搞定时任务就是脱裤子放屁，增加了没有必要的程序复杂度，万一定时任务没执行呢万一用户修改了允许打卡时间，你这个定时任务执行的时间到底有没有bug，都不知道，如无必要,勿增实体”

我：“要么数据库保持不变，后端接口处把缺卡数据给你返回，要么前端前端增加一份缺卡数据，这是比较合理的”

简而言之，“如无必要勿增实体”是一条值得我们遵循和学习的设计原则，不止是在编写代码时，我们应该尽量使用最简单和最有效的方案，避免不必要的复杂性和成本，提高用户满意度，在生活中也同样如此，不把本来可以简单完成的事情复杂化。

给爷爷安排扫地机器人和助听器

Sun, 19 Nov 2023 22:34:16 GMT

前言#

爷爷以前当兵打仗的时候炮声把耳朵震得听力下降很严重，几年前我就想给他买个助听器，但是因为不太了解这个产品怕浪费钱打消了念头，前几天无意间刷到一个网友给家里老人买了科大讯飞助听器的评论消息，助听器我不了解，科大讯飞我还是比较清楚的，国内语音识别等声音领域的老大，所以没再犹豫无脑买了科大讯飞至尊版助听器，还送了一台赠品松下血压计刚好给奶奶用。

科大讯飞助听器

过程#

周末回老家的时候。给他安装了小米扫地机器人和助听器，扫地机器人是爸爸上周带回来的，就等我来安装，希望这两位巧匠能给他的生活带来一些便利。爷爷对这些新奇的东西比较感兴趣，我简单教会了他怎么给机器人上水、洗拖布、倒垃圾，怎么控制机器人的工作模式。搞完这些，我又把科大讯飞助听器连接好了爷爷的手机并对他进行了听力检测，让助听器专门为爷爷的听力而定制。爷爷戴上助听器后，说声音清晰多了，不用再费力地听别人说话了。我看着爷爷开心的样子，心里也很高兴。

听力检测图

小遗憾#

不过，我也发现了一些问题。爷爷对这些高科技产品还不太熟悉，理想模式是我给爷爷提前设置好了助听器音量和连接手机，他只负责充电使用就行了，其他选项都不允许他误触，但是实际情况是爷爷有时候会按错助听器上的按钮导致助听器重新进入配对模式，有时候在拿取助听器的时候会误触耳机上的音量加减按键。我想，这些产品虽然很先进，但是并没有完全考虑到老人的使用习惯和需求，没有做好适老化的设计。科技进步是好事，但是也应该要为老人着想一点，让他们能更方便地享受科技带来的好处。

记录一次网站被山东淄博张兴强攻击的回顾

Sun, 19 Nov 2023 20:59:25 GMT

被攻击回顾#

九月底网站被攻击，本来就是非盈利网站也没当回事。直到11月2号有人在我的博客评论区贴了一个链接，我才了解攻击者的信息。 hostloc.com/thread-1224989-1-1.html 链接的楼主技术比较厉害，他的网站被攻击损失了1500元，之后他溯源攻击ip，并且发现了攻击者的服务器对我的域名xiyu.pro的攻击行为。楼主是如何溯源攻击者的这里不在赘述，有兴趣可以去原帖看一下，十分的精彩。

补充证据#

除了我的网站日志存在大量楼主指出的攻击者服务器ip外，还发现了攻击前后，身在山东淄博的张兴强浏览我的网站的记录。都说罪犯会在事后围观现场，这句话真是一点错也没有。

山东淄博张兴强

攻击者身份信息#

根据链接中的信息可以知道攻击者的身份信息如下：姓名：张兴强 qq号码:1185209862 github

Invalid repository. ("repo" attributte must be in the format "owner/repo")

.com/zxq1998 使用域名：zxqme.com、zxq1998.top 地址：山东省淄博市张店自创五金建材综合商店

报警后续#

得知攻击人的身份后我第一时间去辖区派出所报警，也可能是民警太忙了，并没有重视我的这个案情，反正我已经将所有的网站日志证据和楼主的证据打包保存，以备后续调查使用，期待正义到来的那一天。

普法#

《中华人民共和国刑法》第二百八十六条违反国家规定，对计算机信息系统功能进行删除、修改、增加、干扰，造成计算机信息系统不能正常运行，后果严重的，处五年以下有期徒刑或者拘役;后果特别严重的，处五年以上有期徒刑。违反国家规定，对计算机信息系统中存储、处理或者传输的数据和应用程序进行删除、修改、增加的操作，后果严重的，依照前款的规定处罚。故意制作、传播计算机病毒等破坏性程序，影响计算机系统正常运行，后果严重的，依照第一款的规定处罚。单位犯前三款罪的，对单位判处罚金，并对其直接负责的主管人员和其他直接责任人员，依照第一款的规定处罚。

移动端上拉抽屉效果

Sat, 04 Nov 2023 20:10:18 GMT

移动端抽屉#

移动端上拉抽屉是一种常见的交互效果，可以在屏幕底部显示一个可拖动的视图，用于展示更多的内容或功能。实现这种效果的代码有多种方式，这里介绍一种基于CSS和JavaScript的demo，代码和演示效果如下。

demo仅在移动端有效，pc端无效

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>移动端拖住增加元素高度</title>
5
  <style>
6
    #drag-element {
7
      width: 100%;
8
      height: 200px;
9
      background-color: rgb(46, 228, 197);
10
      margin: 50px auto;
11
      position: absolute;
12
      bottom: 0;
13
      max-height: 90%;
14
    }
15
  </style>
16
</head>
17
<body>
18
  <div id="drag-element"></div>
19
  <script>
20
    const element = document.getElementById('drag-element');
21
    let initialTouchPosition;
22
    let initialElementHeight;
23
    element.addEventListener('touchstart', (event) => {
24
      initialTouchPosition = event.touches[0].clientY;
25
      initialElementHeight = element.offsetHeight;
26
    });
27
    element.addEventListener('touchmove', (event) => {
28
      const currentTouchPosition = event.touches[0].clientY;
29
      const touchDistance = initialTouchPosition - currentTouchPosition;
30
      const newElementHeight = initialElementHeight + touchDistance;
31
      element.style.height = `${newElementHeight}px`;
32
    });
33
    element.addEventListener('touchend', () => {
34
      initialTouchPosition = null;
35
      initialElementHeight = null;
36
    });
37
  </script>
38
</body>
39
</html>

展开收起

DEMO#

示例如下,打开移动端抽屉DEMO查看

leafletjs中如何自定义控件

Sun, 11 Jun 2023 16:34:36 GMT

什么是leafletjs#

Leafletjs是一个开源的JavaScript库，用于创建移动友好的交互式地图。它只有42KB的大小，但拥有大多数开发者所需的地图功能。Leafletjs的设计理念是简单、高效和易用。它可以在所有主流的桌面和移动平台上流畅地运行，可以通过众多的插件进行扩展，拥有一个美观、易用和完善的API文档，以及一个简洁、可读的源代码，方便开发者进行贡献。

自定义控件DEMO#

自定义控件示例如下,你也可以打开自定义控件DEMO查看

如何自定义控件#

Leafletjs提供了一个基类L.Control，用于创建自定义的地图控件。我们可以通过继承这个类，重写initialize、onAdd和onRemove方法，来实现自己的控件逻辑。例如，我们可以创建一个显示当前地图中心坐标的控件：

1
// 定义一个继承自L.Control的类
2
    var CenterControl = L.Control.extend({
3
        // 初始化方法，接收一个选项对象
4
        initialize: function (options) {
5
            // 将选项对象合并到this.options中
6
            L.Util.setOptions(this, options);
7
        },
8
        // 添加到地图时调用的方法，接收一个地图对象
9
        onAdd: function (map) {
10
            // 创建一个div元素作为控件容器
11
            var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
12
            // 设置容器的样式
13
            container.style.backgroundColor = 'white';
14
            container.style.width = 'auto';
15
            container.style.height = '30px';
16
            // 在容器内创建一个span元素用于显示坐标
17
            var span = L.DomUtil.create('span', '', container);
18
            span.id = 'center-coord';
19
            span.style.lineHeight = '30px';
20
            span.style.padding = '10px';
21
            // 获取当前地图中心坐标并显示
22
            var center = map.getCenter();
23
            span.innerHTML = 'Lat: ' + center.lat + ', Lng: ' + center.lng;
24
            // 监听地图移动事件，更新坐标显示
25
            map.on('move', function () {
26
                center = map.getCenter();
27
                console.log(center);
28
                span.innerHTML = 'Lat: ' + center.lat + ', Lng: ' + center.lng;
29
            });
30
            // 返回容器元素
31
            return container;
32
        },
33
        // 从地图移除时调用的方法，接收一个地图对象
34
        onRemove: function (map) {
35
            // 取消监听地图移动事件
36
            map.off('move');
37
        }
38
    });
39
    // 使用自定义控件类创建一个控件实例，并添加到地图右下角
40
    var centerControl = new CenterControl({ position: 'bottomright' });
41
    centerControl.addTo(map);

展开收起

老兵不死，只是逐渐凋零

Sun, 11 Jun 2023 13:07:21 GMT

老兵不死，只是逐渐凋零。是对那些曾经为国家和人民奋斗过的英雄们的感慨。我爷爷也曾是一位剿匪老兵，战争让他听力大大受损，是老兵们用自己的青春和鲜血，换来了我们今天的和平与繁荣。他们是我们的骄傲，我们的榜样，我们的亲人。但是，随着时间的流逝，他们也在一天天老去，一天天失去联系，一天天被遗忘…他们需要我们的关心，我们的尊重，我们的陪伴。

之前参加了腾讯公益的幸存老兵助养行动，通过网络平台可以贡献自己的力量，结果今天消息通知提醒我，“捐款有了新反馈”。

老兵不死，只是逐渐凋零

心里还是蛮开心的，希望通过这样的助养行动，能够让更多的人关注到这些幸存老兵的存在和需求。能够让更多的人尊重和感恩这些为国家和人民奉献过的英雄们。能够让更多的人加入到这样的公益事业中来，让这些老兵不再孤单，不再凋零。

如果你也想为助养老兵公益行动贡献力量，可以保存以下二维码在微信打开参加

老兵不死，只是逐渐凋零

uniapp的vue页面和非全屏webview交换数据的方式

Sat, 03 Jun 2023 23:30:57 GMT

在uniapp开发中，有时候我们需要在vue页面中嵌入一个webview组件，用来加载一些本地或远程的网页。但是，如何在vue页面和webview之间实现数据的传递和通信呢？常用的方法是使用uniapp官方提供的组件webview ,使用uni-app提供的UniAppJSBridgeReady事件和postMessage方法，来实现vue页面和webview之间的双向数据交换。但是这种方法有一定的局限性，webview组件设置的宽高等样式只有h5有效，在app中显示只能全屏加载，无法在app中实现vue页面和webview同屏交互，本文将介绍另一种自建webview的方法，可以在app中自定义webview的宽高及显隐。

首先，我们需要在vue页面中自建一个webview组件，代码如下，下面的代码自建了webview，并且完成了vue页面对html页面数据的接收和发送：

1
<template>
2
</template>
3
<script>
4
export default {
5
  data() {
6
    return {
7
        topHeight: 0,
8
      windowHeight: 0,
9
    url: "/hybrid/html/test.html",
10
    fun: null,
11
    }
12
  },
13
  methods: {
14
            //初始化
15
            init() {
16
        // 获取系统信息，用于设置webview位置
17
        var _this = this;
18
        uni.getSystemInfo({
19
          success: function(res) {
20
            _this.topHeight = res.statusBarHeight
21
            _this.windowHeight = res.windowHeight
22
          }
23
        })
24
        // #ifdef APP-PLUS
25
        //自建webview
26
                //如果当前的文件为直接在pages.json声明的vue文件使用this.$scope.$getAppWebview()，
27
                //如果当前的文件为pages.json声明的vue文件引用的子组件，使用this.$parent.$scope.$getAppWebview()
28
        var currentWebview = this.$parent.$scope.$getAppWebview();
29
        var height = this.windowHeight - this.topHeight;
30
        wv = plus.webview.create(this.url, "webview", {
31
          // plusrequire: "none", //注释后会无法使用数据交换，请勿放开注释
32
          // 'uni-app': 'none',//注释后会无法使用数据交换，请勿放开注释
33
          top: this.topHeight + 20,//根据你想要的样式设置top
34
          scalable: true,//缩放
35
          width: '100%',//根据你想要的样式设置宽度
36
          height: height - 202//根据你想要的样式设置高度
37

38
        })
39
        currentWebview.append(wv);
40
        //监听子html页面uni.postMessage返回的值，html页面触发plusMessage事件时会自动调用fun函数，实现对html页面返回值的接收和利用
41
          let that = this
42
          this.fun = function(msg) {
43
            if (msg.data.args.data.name == 'postMessage') {
44
              let msgData = msg.data.args.data.arg
45
              console.log('app接收到消息为:' + JSON.stringify(msgData));
46

47
            }
48
          }
49
          plus.globalEvent.addEventListener('plusMessage', this.fun);
50
        // #endif
51
      },
52
            //调用该函数关闭webview渲染
53
      close() {
54
        // #ifdef APP-PLUS
55
        if (wv) {
56
          plus.webview.close(wv);
57
          wv = null
58
        }
59
        // #endif
60
      },
61
      // 发送数据给html页面，本质上是执行了plus渲染的wv上携带的eval() 函数，下面的getData就是html页面要声明的getData函数，通过这种方法传递数据给html页面
62
      evalJs(msg = "来自vue页面的参数") {
63
        // #ifdef APP-PLUS
64
        let str = `getData(${JSON.stringify(msg)})`
65
        if (wv) {
66
          wv.evalJS(str);
67
        }
68
        // #endif
69
      }
70
  }
71
}
72
</script>
73
<style>
74
</style>

展开收起

接下来，我们需要在html页面中监听UniAppJSBridgeReady事件，这个事件会在webview加载完成后触发。在这个事件的回调函数中，我们可以获取到webview的对象，然后调用它的postMessage方法，向网页发送数据。这里我们假设要发送的数据是一个字符串”Hello, webview!”。代码如下：

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport"
6
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7
    <title>map</title>
8
    <style type="text/css">
9
      html,
10
      body {
11
        height: 100%;
12
        margin: 0;
13
        overflow: hidden;
14
      }
15
    </style>
16
    <!-- 重要,引入了才能交互数据,具体文件可以在uniapp官网下载 -->
17
    <script src="./js/uni.webview.1.5.4.js"></script>
18

19
  </head>
20
  <body>
21
    <button id="postData">给app的页面发送数据</button>
22
  </body>
23
  <script>
24
    //组件通信
25
    //发送数据到vue组件
26
      //UniAppJSBridgeReady事件会在uni.webview.js相关代码加载完成后触发,触发后就可以使用postMessage方法发送数据,一般可以在这个事件里调用一次postMessage来判断代码是否正常运行.
27
    document.addEventListener('UniAppJSBridgeReady', function() {
28
      let message = {
29
        action: 'hello world'
30
      }
31
      uni.postMessage({
32
        data: message
33
      });
34
    });
35
    //自定义按钮数据发送
36
    let btn = document.getElementById("postData")
37
    btn.addEventListener("click", (e) => {
38
      uni.postMessage({
39
        data: {
40
          action: "Hello, webview!", // 这是传的参数
41
        },
42
      });
43
    })
44
    //接收vue组件的数据
45
    window.getData = function(msgList) {
46
      console.log('接收vue组件传递来的数据：' + JSON.stringify(msgList));
47
    }
48
  </script>
49
</html>

展开收起

总结一下，使用webview组件时，我们可以利用evalJS方法和postMessage方法，来实现vue页面和webview之间的双向数据交换。这样，我们就可以在uniapp中灵活地使用webview组件，来加载一些本地或远程的网页，并与它们进行通信,如果需要的就是全屏加载webview，那就不必使用本文的方法了，webview组件使用更方便一些，但是如果你需要更复杂的交互，还是自建webview更合理一些。

星穹铁道PC端优化建议

Tue, 02 May 2023 11:52:46 GMT

星穹铁道是一款令人着迷的游戏，让玩家可以在虚拟世界里打造属于自己的太空歌剧。作为多端网游，星穹铁道有一些在pc端待改进的地方。为了让游戏在电脑端有更好的体验，我有以下三点优化建议：

pc端增加后台帧率设置，比如可以设置到1帧，节约用户电脑cpu和gpu资源占用。这样，当玩家需要切换到其他程序或者最小化游戏窗口时，游戏不会占用过多的系统资源，从而提高电脑的性能和不必要的资源浪费。
pc端增加后台声音音量调节选项，实现后台静音。有时候，玩家可能需要在游戏中暂停或者离开一会儿，此时，游戏的声音可能会干扰到其他程序，比如我刷b站的时候，游戏的背景音乐就很吵，如果能够在设置中调节后台声音的大小，或者直接静音，那么就可以避免这种情况。
pc端退出游戏直接关闭游戏，当前是先退出到登录页面，再退出整个程序。这样做的目的可能是为了方便玩家重新登录或者切换账号，但是也增加了玩家的操作步骤和等待时间。绝大部分玩家点退出都是为了完整退出游戏，而不是切换帐号，建议把退出游戏和切换帐号做成弹窗的两个按钮，让玩家自由选择。

nginx反向代理的妙用

Wed, 12 Apr 2023 11:29:15 GMT

不止可以反向代理,还能自定义修改内容#

Nginx是一个高性能的HTTP服务器，它可以实现反向代理的功能，即将客户端的请求转发到后端的服务器，并将后端服务器的响应返回给客户端。这样可以实现负载均衡、安全防护、缓存加速等目的。但是，有时候我们不仅仅想要转发请求和响应，还想要对目标网站的内容进行一些自定义的修改，比如替换某些字符串、添加或删除某些标签、修改某些链接等。这种情况下，我们就需要使用Nginx的内容替换模块，即ngx_http_sub_module模块。

ngx_http_sub_module模块是一个过滤器，它可以修改网站响应内容中的字符串。这个模块已经内置在Nginx中，但是默认未安装，需要安装需要加上配置参数：—with-http_sub_module。如果已经安装Nginx,只需要再添加这个模块就可以了。安装完成后，我们就可以在Nginx的配置文件中使用sub_filter指令来设置需要替换的字符串和新的字符串。例如：

1
server {
2
    listen 80;
3
    server_name www.example.com;
4
    location / {
5
        proxy_pass http://127.0.0.1:8080;
6
        proxy_redirect off;
7
        sub_filter '原内容' '替换成的内容';
8
        sub_filter_once on;
9
    }
10
}

这样，当我们访问 www.example.com 时，Nginx会将请求转发到127.0.0.1:8080，并将响应内容中的’原内容’替换成’替换成的内容’，然后返回给客户端。注意，sub_filter_once指令表示只替换第一次匹配到的字符串，如果想要替换所有匹配到的字符串，可以设置为off。

三个实例#

使用Nginx进行反向代理后自定义修改目标网站内容的用处有很多，例如：

可以实现网页内容定制化，根据不同的客户端或用户需求，显示不同的内容或样式。
可以实现网页内容优化，比如去除一些无用的标签或注释，减少网页大小和加载时间。
可以实现网页内容安全化，比如过滤掉一些恶意的脚本或链接，防止网页被篡改或劫持(ps:替换原网站内容在某种情况下已经可以算是篡改了吧)。
可以实现网页内容扩展化，比如添加一些额外的内容。

下面是三段示例代码,由简到难使用了Nginx反向代理后自定义内容的功能。 1.第一段代码是给原有的网页注入了一段本地js; 2.第二段反向代理某网站后,会在原网站的登录页注入一个js脚本,实现了对element输入框的自动登录效果; 3.第三段代码是局域网服务器无法访问高德api时,在有公网权限的服务器上使用Nginx反向代理高德api后,将原有js中的地址替换成本地代理的地址;点击跳转至原作者网站

1
server {
2
    listen 80;
3
    server_name www.example.com;
4
    location / {
5
        proxy_pass http://127.0.0.1:8080;
6
        proxy_redirect off;
7
        sub_filter '<script src="/js/app.skd78945.js"></script>' '<script src="/js/app.skd78945.js"></script><script>alert("本地js执行成功")</script>';
8
        sub_filter_once on;
9
    }
10
}

1
server {
2
    listen 80;
3
    server_name www.example.com;
4
    location / {
5
        proxy_pass http://127.0.0.1:8080;
6
        proxy_redirect off;
7
        sub_filter '</body>' '<script>let name=document.getElementsByTagName('input')[0];name.value="woshiyonghuming";const event1 = document.createEvent("HTMLEvents");event1.initEvent("input", false, true);name.dispatchEvent(event1);let pass=document.getElementsByTagName("input")[2];pass.value=woshimima';const event2 = document.createEvent("HTMLEvents");event2.initEvent("input", false, true);pass.dispatchEvent(event2);document.getElementsByTagName("button")[0].click()</script></body>';
8
        sub_filter_once on;
9
    }
10
}

1
    server {
2
        listen       80;
3
        server_name  localhost;
4
        #add_header Access-Control-Allow-Origin *;
5
        add_header Access-Control-Allow-Headers X-Requested-With;
6
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
7
        location / {
8
                root html;
9
                index  index.html index.htm;
10
        }
11
        location /restapi/ {
12
                proxy_pass https://restapi.amap.com/;
13
        }
14
        location /webapi/ {
15
                proxy_pass https://webapi.amap.com/;
16
        }
17
        location /vdata/ {
18
                proxy_pass https://vdata.amap.com/;
19
        }
20
        location /wprd01/ {
21
            proxy_pass   https://wprd01.is.autonavi.com/;
22
        }
23
        location /wprd02/ {
24
            proxy_pass   https://wprd02.is.autonavi.com/;
25
        }
26
        location /wprd03/ {
27
            proxy_pass   https://wprd03.is.autonavi.com/;
28
        }
29
        location /wprd04/ {
30
            proxy_pass   https://wprd04.is.autonavi.com/;
31
        }
32
        location /webrd01/ {
33
            proxy_pass   https://webrd01.is.autonavi.com/;
34
        }
35
        location /webrd02/ {
36
            proxy_pass   https://webrd02.is.autonavi.com/;
37
        }
38
        location /webrd03/ {
39
            proxy_pass   https://webrd03.is.autonavi.com/;
40
        }
41
        location /webrd04/ {
42
            proxy_pass   https://webrd04.is.autonavi.com/;
43
        }
44
        location /style_icon/ {
45
            proxy_pass   http://vdata.amap.com/style_icon/;
46
        }
47
        #代理获取js api文件并修改文件内容
48
        location /maps {
49
            proxy_set_header Accept-Encoding "";
50
            proxy_pass https://webapi.amap.com/maps;
51
            sub_filter_types *;#重要·对所有请求响应类型都进行替换
52
            sub_filter_once off;
53
            sub_filter 'http://webapi.amap.com' 'http://代理服务器ip/webapi';
54
            sub_filter 'https://webapi.amap.com' 'http://代理服务器ip/webapi';
55
            sub_filter 'http://restapi.amap.com' 'http://代理服务器ip/restapi';
56
            sub_filter 'http://vdata.amap.com' 'http://代理服务器ip/vdata';
57
            sub_filter 'vdata.amap.com' '代理服务器ip/vdata';
58
            sub_filter 'webapi.amap.com/count' '代理服务器ip/webapi/count';
59
            sub_filter 'wprd0{1,2,3,4}.is.autonavi.com' '代理服务器ip/wprd0{1,2,3,4}';
60
            sub_filter 'webapi.amap.com/theme' '代理服务器ip/webapi/theme';
61
            sub_filter 'restapi.amap.com/v4' '代理服务器ip/restapi/v4';
62
            sub_filter 'webapi.amap.com/style' '代理服务器ip/webapi/style';
63
        }
64
    }

展开收起

碳循环无痛瘦身大法

Sun, 12 Feb 2023 21:55:33 GMT

前言#

减肥最痛苦的就是运动，本文分享一种不用辛苦锻炼也能减肥的方法，由减肥教父“肚肚子”收集自互联网，肚肚子亲身体验，4个月瘦20斤。

碳⽔循环法#

具体步骤#

四天⼀周期，三天低碳，⼀天⾼碳。减肥原理为在经历了连续三天的低碳后，身体会进去优先利⽤顽固脂肪的“微酮症”阶段。低碳阶段，不能使身体的糖原完全耗尽，不然肌⾁就会被迫分解供能，造成肌⾁流失。前三天为低碳或者中碳阶段，第四天⾼碳，让身体保持⼀个⾼的健康的代谢率。成年男性可以这样做：

第⼀天：100g碳⽔，50g脂肪
第⼆天：200g碳⽔，25g脂肪
第三天：200g碳⽔，25g脂肪
第四天：400g碳⽔，0g脂肪成年女性可以这样做：⼀般男性摄⼊100g但⼥性只需要25g，中碳可以增加到75g，⾼碳可以增加到150-200g。
第1天：碳⽔25g，搭配脂肪50g
第2天，碳⽔25g，搭配脂肪25g
第3天，碳⽔25g，搭配脂肪25g
第4天，⾼碳100g碳⽔，0脂肪

食谱推荐#

高碳日推荐早饭:2个肉包,午饭:牛肉150g+蔬菜+杂粮饭100g,晚饭:鸡胸肉200g+蔬菜+杂粮饭100g 中碳日推荐早饭:2个鸡蛋+10个圣女果,午饭:白灼虾100g+蔬菜+杂粮饭100g,晚饭:鸡胸肉200g+蔬菜+荞麦面100g 低碳日推荐早饭:3个鸡蛋,午饭:鸡胸肉100g+牛肉100g+蔬菜+100g贝贝南瓜,晚饭:鸡胸肉丸汤推荐食物：蛋白质：鸡肉，牛肉，鱼肉，虾蟹，贝壳类，蛋类脂肪：橄榄油，坚果，椰子油，牛油果蔬菜：菠菜，生菜，茼蒿，青菜，西兰花，番茄，黄瓜… 水果：苹果，香蕉，草莓，橙子，柚子，圣女果，蓝莓，猕猴桃以上为肚肚子亲身鉴定有效的推荐食谱，我们的原则是保证碳水摄入具体吃什么可以找自己爱吃的搭配就行，可以下载薄荷健康等健康app查热量。

详细说明#

美国 william D.Brink博⼠发明的碳⽔循环法，可以让你在减少脂肪的同时最⼤限度地保持瘦体重。⾸先谈⻝物来源。你需要戒掉任何诸如⻨当劳肯德基之类的油炸⻝品，不沾任何糖果，巧克⼒，任何⽩⽶⽩⾯。所有的碳⽔化合物只能来⾃蔬菜，少量的低糖⽔果（如草莓，⻄柚，樱桃）和复合碳⽔化合物（糙⽶，燕⻨，全⻨制品）。具体做法是：4天作为⼀个循环，前三天每⽄体重只摄⼊0.8克碳⽔化合物，平均的分配到前五餐中（最后睡前加餐不吃碳⽔），另外需要⾼达 1.5克的蛋⽩质和0.5克脂肪。碳⽔必须是复合碳⽔。蛋⽩质要选择⾼BV(biology value,⽣物学价值)的制品，⽐如分离乳清蛋⽩，鸡胸⾁，鸡蛋⽩，瘦⽜⾁，深海⻥。植物蛋⽩⽐如⼤⾖蛋⽩对修复肌⾁组织的意义并不⼤。可以选择的⻝⽤油只能是橄榄油（主要成分欧⽶加-9）和亚麻籽油深海⻥油，并且要以后者为主, 因为亚麻籽油⻥油中含有最丰富的欧⽶加-3必须脂肪酸，⽽这种脂肪酸可以加速⼈体⾃身的脂肪分解代谢。花⽣也是不错的来源。所以假如你体重150⽄，⼀天就需要摄⼊120克复合碳⽔，225克⾼质量的蛋⽩质和75克健康脂肪。到第四天，加⼤碳⽔摄⼊量（每⽄体重3克），蛋⽩质每⽄体重减少到1克，脂肪不变。这样可以让你的身体解除碳⽔缺乏状态，加速已经放缓的新陈代谢，从⽽在减脂的同时减少瘦体重损失。如此循环，根据体重的变化不停地调整你的摄⼊量，直到达到⽬标。另外上⽂提到的0.8,1.5,0.5这些数字也只是作为参考，个⼈的情况不同，如果你发现这样的饮⻝结构减脂效果还不理想可以进⼀步降低碳⽔化合物的⽐例。总之减脂⽅案的核⼼就是⾼蛋⽩，低碳⽔，适度的有益脂肪。不能忽略了⾃⼰总代谢这个关键，吃多少怎么吃是和总代谢挂钩的，只要不超过⽇常代谢，如何安排是自己的问题。低碳⽔⾼蛋⽩是所有运动员都会使⽤降低脂肪保持肌⾁的⼀种基础饮⻝法，，减脂都是阶段性的事，没有谁会⼀直这么吃，⼀个⼈花了3年的时间把⾃⼰吃成个胖⼦，却想只⽤半年甚⾄更短的时间内瘦回来本身就是⽩⽇梦，身体⽆论如何都⽆法完成这么⼤的变化，强⾏的结局只能是以健康为代价。

瘦身戒律#

戒律一：所有能看得见肥肉的东西都不吃。戒律二：不喝任何酒或者饮料。戒律三：每天吃的植物油不超过可乐瓶盖3瓶盖。戒律四：清理掉家里的所有即食食品，不再买任何新的即食食品。戒律五：每周外出就餐的次数控制在1次以内，外出就餐时不吃主食。戒律六：不吃任何油炸、油煎食物。戒律七：2个月内任何营有小麦（面粉）成分的食物都不吃。戒律八：每天的食物当中要有600克绿绿叶菜。戒律九：只要有条件，晚餐在7点前吃完，且每天晚餐后不可以再进食。

解决nodejs更新到v18后旧项目报错

Sun, 12 Feb 2023 17:25:18 GMT

背景#

去年我发现使用的电脑性能太差了，同时开两个项目内存就会爆满，导致各种卡顿及闪退，用起来很不爽，我就自费买了个8g内存，组成16g后内存占用明显缓解了，启动两个项目基本上只占用一半内存。然后我又发现第二个问题：笔记本的温度不对，长期运行待机下，温度能达到90度撞到功耗墙，同时能闻到一股烧硬塑料的味道，摸了一下出风口几乎没有风力，我又自费给笔记本清了一下灰，真是自费上班第一人，维修工程师拆机涂硅脂清灰一气呵成，我看他清理出了大片结块的灰尘，就是这玩意堵住了出风口。清灰后果然好了很多，鲁大师烤机10分钟温度温度60+度。但是启动项目还是很慢，以及npm i安装新的依赖时偶尔会报错，重新安装能解决。删除依赖包的速度很慢，反正不是一个合格的固态硬盘的速度，硬盘我也不方便换，只能另想办法了。于是就想到之前看新闻说nodejs18更换了最新的v8引擎，性能提升很大，于是就…

1
nvm install 18.13.0
2
nvm use 18.13.0

报错及解决#

安装完最新版本神清气爽，立马npm run dev启动项目，发现报了个错

Terminal window

1
{
2
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
3
  library: 'digital envelope routines',
4
  reason: 'unsupported',
5
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
6
}

搜索引擎搜索后，是nodev17以后的版本都不支持openssl的一个加密算法了，解决方法也很简单在环境变量-系统变量中添加变量名”NODE_OPTIONS”, 变量值”—openssl-legacy-provider”,重启电脑后再运行旧项目，就可以跳过这个报错正常启动了。

系统变量

我踩过的坑#

一般情况下上个步骤修改环境变量就可以了，但是我添加环境变量始终无效，一直报这个错，不知原因，于是开始了漫长的踩坑之路。首先改为采用另一种解决方法：配置临时变量。即先设置临时变量，再运行项目

Terminal window

1
set NODE_OPTIONS=--openssl-legacy-provider
2
npm run dev

这样也不无法运行项目，改为另一种解决方案：在dev的命令里配置node临时变量并启动项目。即把package.json中的

Terminal window

1
...
2
"scripts": {
3
    "dev": "vue-cli-service serve",
4
    ...
5
  },
6
...

改为

Terminal window

1
...
2
"scripts": {
3
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service serve",
4
    ...
5
  },
6
...

然后再npm run dev，这样成功运行老项目了，但是！！！多人协作项目我不可能把这玩意提交到仓库去，也不可能每次手动改自己本地的package.json文件，那也太蠢了。绕了一圈又回到最开始，先搞清楚为什么环境变量无效，我一直使用的是vscode的终端，在终端输入

Terminal window

1
$env:NODE_OPTIONS

打印为空，再输入

Terminal window

1
$env:Path
2
C:\ProgramData\Anaconda3;C:\ProgramData\Anaconda3\Library\mingw-w64\bin;...

能打印出这个原来就配好的环境变量Path，打不开NODE_OPTIONS。我又去win10的系统变量里反复确认我添加好了，这就奇怪了，我又打开系统的powershell打印变量，奇迹出现了

Terminal window

1
$env:NODE_OPTIONS
2
--openssl-legacy-provider

powershell能打印出NODE_OPTIONS，原来是vscode的bug，它没有正确的加载到最新的环境变量，而我一直没有怀疑是vscode的原因，害我排除了这么久的问题，虽然也有一些收获。我猜重新安装vscode能解决这个bug，但我已经不想折腾了，以后只在powershell里npm run dev启动项目就行了，哪天有空再重装vscode吧。对了，升级后性能是有提升，启动项目快了，内存占用也更稳定了。

vue3的生命周期函数

Sun, 15 Jan 2023 10:12:30 GMT

what is 生命周期函数#

在生命周期中被自动调用的函数叫做生命周期函数，也被形象地称为钩子函数。那么，设计这些生命周期函数又有什么作用呢？举个现实生活中的例子，比如一个人，我们把他的一生（幼儿、青年、老年、死亡）看作是一个生命周期。那么作为一个社会动物，在他生命中的每个阶段，实际上都有需要完成的任务。比如，在婴幼儿时期他的使命就是快乐成长。青少年时期需要学习大量知识。老年时期就该听秦腔吃有利消化的食物了。与其把 Vue 实例比喻成一个人，不如把它看作是一部小说或电视剧。有了生命周期函数，我们就掌握了整部剧情的走向，而且可以通过生命周期函数，为这部电视剧在某些阶段添加一些必要的情节以满足剧情需要。总结起来就是，Vue 组件实例的生命周期是组件或实例从创建到销毁的过程。生命周期钩子函数就是组件或实例在某个阶段对外开放的一个口子，可以供开发人员通过该入口添加一些对该实例或组件的一些操作，进而起到控制实例或组件发生变化的目的。

好记性不如烂笔头#

生命周期函数	说明
beforeCreate	组件实例初始化之后，data 初始前，事件配置前被调用。
created	data 初始化完成，计算属性、event/watch 事件回调，但组件并未挂载到 DOM 树上。
beforeMount	组件挂载到真实 DOM 树之前被调用，render 函数首次被调用生成虚拟 DOM。
mounted	组件被挂载到真实 DOM 树中时自动调用，DOM 树已经渲染完成，可进行 DOM 操作。
beforeUpdate	组数据有更新被调用。
updated	数据更新后被调用。
beforeUnmount	组件销毁前调用，可以访问组件实例数据。
unmounted	组件销毁后调用。

实际开发中常用的有created、mounted、beforeUnmount。created：已经可以访问并更改 data 中的数据了。不过此时更改 data 中的数据，不会触发 updated 等其它钩子函数，一般可以在这里做初始数据的获取。不过此时仍然不能访问真实的 DOM 元素。 mounted：此时，组件已经渲染完成，在页面中已经真实存在了，可以在这里做修改 data 中数据（比如异步请求数据）、访问真实 DOM 等操作。 beforeUnmount：经过某种途径调用 unmount() 方法后，会立即执行 beforeUnmount 函数。一般会在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。

vue自定义全局指令实现拖拽弹窗等元素

Fri, 30 Dec 2022 22:44:42 GMT

全局注册指令#

注意：bind是vue2的自定义指令事件，如果你在vue3中使用请把bind改为beforeMount，附上vue2指令的生命周期函数和vue3的对比。

vue2	vue3	备注
bind	beforeMount	指令绑定到元素后执行。只执行一次。
inserted	mounted	元素插入父 DOM 后执行
-	beforeUpdate	元素本身更新之前执行
componentUpdated	updated	组件和子级更新后执行
-	beforeUnmount	卸载元素之前执行
unbind	unmounted	指令被移除，就会执行，也只执行一次

1
Vue.directive('move', {
2
  bind(el) {
3

4
      let moveElement = el.firstElementChild;
5
      el.mouseDown = (e) => {
6

7
          // X,Y为计算的偏移量，就是鼠标点击的位置相对于元素左上角圆点的距离
8
          let X = e.clientX - el.offsetLeft;
9
          let Y = e.clientY - el.offsetTop;
10
          const move = (e) => {
11
              // 0 < left && left < window.innerWidth - el.offsetWidth 保证移动过程中，元素不超出窗口
12
              let left = e.clientX - X;
13
              if (0 < left && left < window.innerWidth - el.offsetWidth) {
14
              el.style.left = left + 'px';
15
              }
16
              // console.log(left, window.innerWidth, el.offsetWidth)
17

18
              // 0 < top && top < window.innerHeight - el.offsetHeight 保证移动过程中，元素不超出窗口
19
              let top = e.clientY - Y;
20
              if (0 < top && top < window.innerHeight - el.offsetHeight) {
21
              el.style.top = top + 'px';
22
              }
23
              // console.log(top, window.innerHeight, el.offsetHeight)
24
          }
25
          document.addEventListener('mousemove', move)
26
          document.addEventListener('mouseup', () => {
27
              document.removeEventListener('mousemove', move)
28
          })
29
      }
30
      moveElement.addEventListener('mousedown', el.mouseDown);
31
  }
32
})

展开收起

使用#

1
<div v-move> </div>

优化空间#

指令来源于互联网，感觉还有优化的空间，例如 1.目前是默认指定元素的第一个子元素为绑定拖拽事件的元素，一般为弹窗的title区。可以再加一个参数v-mode=“#title”来自定义绑定拖拽事件的元素。 2.目前弹窗关闭后再次打开，上次拖拽添加的”top”和”left”还在，会导致弹窗不能恢复到默认位置，只能在弹窗关闭的事件里再额外执行this.$refs[“绑定指令的弹窗元素”].style.cssText = ‘display: none;‘，使用起来比较麻烦，最好能在指令里能监听元素状态是否为’display: none;‘，如果是none隐藏状态，就删除元素style中的”top”和”left”

使用web phsh为网站增添色彩

Sat, 03 Dec 2022 04:55:11 GMT

什么是web phsh#

web phsh是标准的web api，当网站具有激活的Service worker，并且在访客授权通知权限的情况下，就可以向用户推送信息。后期不需要打开网站只要浏览器进程存在就把推送消息触发用户，让用户更及时的获得新内容。一些理想的应用场景，比如购物网站向用户推送订单信息物流信息，或者是监测平台向用户紧急通报危险情况等，都可以做到比较棒的实现。

hexo使用web phsh实现文章更新后推送给访客#

传统的实现web phsh应该是具有后端服务器的网站，开启Service worker后再配置消息推送的相关功能，但是借助于 webpushr 等网站，可以提供第三方的service worker，从而使得静态网站也可以拥有花样百出的推送。再借助于大神写好的推送代码我们不需要关心消息推送的具体实现代码而只是按部就班的跟着教程配置就可以很简单的实现hexo静态博客的消息推送服务。具体的使用方法可以参考大神的仓库hexo-webpushr-notification

webpush成功

如果你在使用中有什么问题也欢迎你留言评论，我会在第一时间回复。

使用GitHub Action分布式部署静态网站

Thu, 27 Oct 2022 21:08:53 GMT

什么是GitHub Action#

通俗的理解GitHub Action是通过push代码等方式自动触发运行用户提前编写好的工作流脚本，这些脚本会运行在GitHub提供的虚拟机中，虚拟机会像机器人流水线作业一样一步一步来完成这些复杂频繁的的工作流程，解放人力。

分布式部署网站#

目前我使用的网站结构在两个git仓库使用了两个GitHub Action流程，如下流程图所示：每次push博客生成器源码git仓库后，执行GitHub Action工作流程，将编译好的网站html源码push到另一个存放网站html代码的git仓库以及gitee备用仓库。存放html源码的仓库在收到push后又会触发自己仓库的GitHub Action，把html代码上传到阿里云oss中。

看起来有些繁琐但是人工参与的只有第一步向仓库push代码，剩下的步骤都由勤劳的GitHub Action来自动集成。网站访客在访问域名后，dns会根据访客ip智能把请求到最佳节点。“github-html代码仓库”开启了git pages用于国外访客的域名解析,阿里云OSS用于国内ip的访客使用,并且使用了cdn访问速度飞快。gitee备用仓库由于监管原因不能绑定自定义域名暂无使用只是用于备份存储，整个访问流程如下所示。

GitHub Action代码#

上面这些繁琐的工作都是靠下面两个GitHub Action实现

博客生成器仓库的GitHub Action one#

1
# Action 的名字
2
name: Hexo Auto Deploy
3
on:
4
  # 触发条件1：main 分支收到 push 后执行任务。
5
  push:
6
    branches:
7
      - main
8
  # 触发条件2：手动按钮
9
  workflow_dispatch:
10
# 这里放环境变量,需要替换成你自己的
11
env:
12
  # Hexo 编译后使用此 git 用户部署到 github 仓库
13
  GIT_USER: xiyuvi
14
  # Hexo 编译后使用此 git 邮箱部署到 github 仓库
15
  GIT_EMAIL: 20702001@qq.com
16
  # Hexo 编译后要部署的 github 仓库
17
  GIT_DEPLOY_REPO: xiyuvi/xiyuvi.github.io
18
  # Hexo 编译后要部署到的分支
19
  GIT_DEPLOY_BRANCH: main
20
  # Hexo 编译后使用此 gitee 用户部署到gitee仓库
21
  GITEE_USER: xiyu
22
  # Hexo 编译后要部署的 gitee 仓库
23
  GITEE_DEPLOY_REPO: xiyu/bloghtml
24
  # Hexo 编译后要部署到的分支
25
  GITEE_DEPLOY_BRANCH: main
26
  # 注意替换为你的 GitHub 源仓库地址
27
  GIT_SOURCE_REPO: git@github.com:xiyuvi/xiyuvi.github.io.git
28
  # 注意替换为你的 Gitee 目标仓库地址
29
  GITEE_DESTINATION_REPO: git@gitee.com:xiyu/bloghtml.git
30
jobs:
31
  build:
32
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
33
    runs-on: ubuntu-latest
34
    if: github.event.repository.owner.id == github.event.sender.id
35
    strategy:
36
      matrix:
37
        os: [ubuntu-18.04]
38
        node_version: [12.x]
39
    steps:
40
      - name: Checkout
41
        uses: actions/checkout@v2
42
      - name: Checkout deploy repo
43
        uses: actions/checkout@v2
44
        with:
45
          repository: ${{ env.GIT_DEPLOY_REPO }}
46
          ref: ${{ env.GIT_DEPLOY_BRANCH }}
47
          path: .deploy_git
48
      - name: Use Node.js ${{ matrix.node_version }}
49
        uses: actions/setup-node@v1
50
        with:
51
          node-version: ${{ matrix.node_version }}
52
      - name: Configuration environment
53
        env:
54
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
55
        run: |
56
          sudo timedatectl set-timezone "Asia/Shanghai"
57
          mkdir -p ~/.ssh/
58
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
59
          chmod 600 ~/.ssh/id_rsa
60
          ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
61
          # coding 已取消同步
62
          ssh-keyscan -t rsa e.coding.net >> ~/.ssh/known_hosts
63
          ssh-keyscan -t rsa gitee.com >> ~/.ssh/known_hosts
64
          git config --global user.name $GIT_USER
65
          git config --global user.email $GIT_EMAIL
66
      - name: Install dependencies
67
        run: |
68
          npm install hexo-cli -g
69
          npm install
70
          # 根据你安装的组件进行安装
71
          # npm uninstall hexo-generator-index --save
72
          # npm install hexo-baidu-url-submit hexo-generator-index2 hexo-symbols-count-time hexo-blog-encrypt hexo-deployer-git --save
73
          # 复制中文语言包，解决菜单英文的问题
74
          # cp zh-CN.yml node_modules/hexo-theme-next/languages/
75
      - name: Deploy hexo
76
        run: |
77
          npm run deploy
78
      - name: Sync to Gitee
79
        uses: wearerequired/git-mirror-action@master
80
        env:
81
          # 直接使用了 HEXO_DEPLOY_PRI
82
          SSH_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
83
        with:
84
          # GitHub 源仓库地址
85
          source-repo: ${{ env.GIT_SOURCE_REPO }}
86
          # Gitee 目标仓库地址
87
          destination-repo: ${{ env.GITEE_DESTINATION_REPO }}
88
      # - name: Build Gitee Pages
89
        # uses: yanglbme/gitee-pages-action@main
90
        # with:
91
          # 你的 Gitee 用户名
92
          # gitee-username: ${{ env.GITEE_USER }}
93
          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
94
          # gitee-password: ${{ secrets.GITEE_PASSWORD }}
95
          # 你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
96
          # gitee-repo: ${{ env.GITEE_DEPLOY_REPO }}
97
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
98
          # branch: ${{ env.GITEE_DEPLOY_BRANCH }}

展开收起

html代码仓库的GitHub Action two#

1
name: ossWorkflow
2
on: [push]
3
jobs:
4
  build:
5
    runs-on: ubuntu-latest
6
    steps:
7
    - uses: actions/checkout@v1
8
    - uses: actions/setup-node@v1
9
      with:
10
        node-version: "12.x"
11
    - name: Build Blog
12
      run: |
13
        npm install
14
    - uses: manyuanrong/setup-ossutil@master
15
      with:
16
        # endpoint 可以去oss控制台上查看
17
        endpoint: "oss-cn-chengdu.aliyuncs.com"
18
        # 使用我们之前配置在secrets里面的accesskeys来配置ossutil
19
        access-key-id: ${{ secrets.KEY }}
20
        access-key-secret: ${{ secrets.SECRET }}
21
    - name: Deply To OSS
22
      run: |
23
        cp -ri  ./   ../output
24
        cd ../output
25
        rm -rf .git .github
26
        ossutil cp ./ oss://xiyublog/ -rf

展开收起

结语#

GitHub Action还能用来做更多可以自动集成化的事情，希望大家都能挖掘出更多有意义的用法。

魔方口诀

Sat, 04 Jun 2022 00:59:16 GMT

第二层：上右下右逆左顺（棱块顶层颜色和中心颜色一样用公式两遍，棱快边色和中心颜色一样先左转，再用公式一遍）

顶层黄十字：顺上左下右逆

顶层黄全部：上左下左上左左下

侧两角：上、后顺、上、顺、顺、下、后逆、上、顺、顺、上、上

最后一步：整面在后上右上左、上左上右、下右下下

如何低价及免费让网站支持ipv6

Tue, 15 Mar 2022 20:59:16 GMT

ipv6国内奇怪的现状#

ipv6是新一代的互联网协议，用它来取代IPv4主要是为了解决IPv4地址枯竭问题，同时它也在其他方面相对IPv4也有许多改进。ipv6在我国的发展官方支持度还不错，网信办在“十四五ipv6规划”提出了2023年ipv6活跃用户数7亿、80%以上政府网站支持ipv6等指标。

奇怪的是尽管ipv6号称可以给地球上的每一个沙子分配地址，并且国外很多云服务商处于成本考虑（相比ipv6来说，ipv4过于昂贵），早已开始售卖纯ipv6云主机，国内云服务器上却把ipv6藏着掖着当宝贝卖。在“80%以上政府网站支持ipv6”等硬性要求下出现了一些略显奇怪的服务，例如下图，最便宜的套餐为600元/每月，网站明确写着：“可满足《政府网站IPv6改造核验标准》”，产品的受众也就不言而喻了。而提供的服务竟然是可怜的2m公网带宽，对比之下，阿里云等云厂商提供的ipv6-1m带宽30天28.8元的价格都显得格外良心。

ipv6转化

现阶段相对低价及免费获取ipv6的方法#

第一种，购买云厂商的ipv6公网带宽，拿阿里云举例，假如你已经拥有一台云主机，那么只需要设置好免费的ipv6网关，以平均每1M带宽 28.8元的价格购买ipv6公网带宽，按照系统的不同在服务器输入不同的脚本命令，就可以获得一台支持ipv6的云主机，下图为阿里云ipv6费用。

阿里云ipv6

第二种，购买cdn厂商的cdn服务，现在很多cdn商例如阿里云腾讯云百度云又拍云等基本早已提供ipv6支持。只需要对接好cdn，对网站访客来说，就已经支持了ipv6，至于cdn节点回源到源站是什么协议也就无关紧要了。大多数cdn很贵按流量计费的模式也不适合个人站长使用（恶意刷流量破产警告！），推荐一下免费用户也可支持ipv6的cdn“百度云加速”，免费版就支持ipv6，可以说是相当厚道，即使每天的免费加速流量用尽，所有流量回源到服务器对访客来说也同样支持ipv6。第三种，http://he.com/ 提供免费的ipv6隧道服务，简单来说就是申请ipv6隧道以后，将自己的域名AAAA记录指向he.com提供给我们的公网ipv6地址，隧道可以在指向我们服务器的公网ipv4地址，在服务器上输入相应脚本命令就可以支持ipv6。

ipv6隧道

总结和展望#

免费获取ipv6的方式两个：“百度云加速” 、 “he.com ”，已备案网站推荐使用第一个，未备案网站只能使用第二个。低价获取ipv6的方式：阿里云等支持ipv6公网宽带购买的国内云厂商。不考虑备案的朋友可以购买国外的ipv6主机，价格相比国内更低而且不需要配置购买后就天然具有ipv6地址。或是购买合适的付费cdn。大冤种获取ipv6的方式：某些云服务商提供的专门为了通过核验检查所搭建的“ipv6转换”昂贵服务。上述获取方式发布的时间为2022年3月，有些方式可能会随着时间的推移失效或者改版，但是我相信随着国家的大力支持和厂商之间的竞争在未来的几年内，国内一样可以买到国外那种天然支持ipv6无需二次配置的服务器，价格也会回归到ipv6本应有的价格。

利用crypto-js实现静态网页数据加密

Sun, 27 Feb 2022 17:28:50 GMT

crypto-js是什么#

使用crypto-js也是很久之前的事了，一直都没有好好整理，今天借助博客重构的机会，好好捋一下。crypto-js是一个加密算法库，支持哈希算法，如：MD5、SHA-1、SHA-2、SHA-3、RIPEMD-160也支持多种加密方式，如：AES、DES, Triple DES、Rabbit、RC4, RC4Drop。可实现多种多样的加密算法。

使用#

在github.com/brix/crypto-js 上引入相关文件，因为我只需要使用aes加密算法，所以没有引入整个库而是只下载了aes.js单个文件。借助强大的crypto-js，我们只需要几行代码就可以实现加密效果，下面是一个使用aes加密的demo，效果为在页面加密字符串“123456”，并解密加密的密文。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>Title</title>
7
    <script src="./aes.js"></script>
8
</head>
9

10
<body>
11
    <script>
12
        //aes加密
13
        function encrypt(word) {
14
            var key = CryptoJS.enc.Utf8.parse("1234560000000000"); //16位
15
            var iv = CryptoJS.enc.Utf8.parse("1234567890000000");
16
            var encrypted = '';
17
            if (typeof (word) == 'string') {
18
                var srcs = CryptoJS.enc.Utf8.parse(word);
19
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
20
                    iv: iv,
21
                    mode: CryptoJS.mode.CBC,
22
                    padding: CryptoJS.pad.Pkcs7
23
                });
24
            } else if (typeof (word) == 'object') { //对象格式的转成json字符串
25
                data = JSON.stringify(word);
26
                var srcs = CryptoJS.enc.Utf8.parse(data);
27
                encrypted = CryptoJS.AES.encrypt(srcs, key, {
28
                    iv: iv,
29
                    mode: CryptoJS.mode.CBC,
30
                    padding: CryptoJS.pad.Pkcs7
31
                })
32
            }
33
            return encrypted.ciphertext.toString();
34
        }
35
        // aes解密
36
        function decrypt(word) {
37
            var key = CryptoJS.enc.Utf8.parse("1234560000000000");
38
            var iv = CryptoJS.enc.Utf8.parse("1234567890000000");
39
            var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
40
            var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
41
            var decrypt = CryptoJS.AES.decrypt(srcs, key, {
42
                iv: iv,
43
                mode: CryptoJS.mode.CBC,
44
                padding: CryptoJS.pad.Pkcs7
45
            });
46
            var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
47
            return decryptedStr.toString();
48
        }
49
    </script>
50
    <script>
51
        var str = "123456";
52
        var encrypted = encrypt(str);
53
        var decrypt1 = decrypt(encrypted.toString());
54
        document.writeln("aes cbc 加密 解密");
55
        document.writeln("<br/>");
56
        document.writeln("待加密：" + str);
57
        document.writeln("<br/>");
58
        document.writeln("加密的密文:".concat(encrypted));
59
        document.writeln("<br/>");
60
        document.writeln("解密密文的结果:" + decrypt1);
61
    </script>
62
</body>
63

64
</html>

展开收起

代码效果如下图

demo1

其他应用#

借助crypto-js还可以实现一些很好玩的加密，例如静态页面文章的加密。出于某种原因我的文章“造谣人士生平事”之前就使用了这种加密方式。判断文章标题是“加密”开头后，就引入aes.js文件

1
<script>
2

3
        var postTitleValue = document.querySelector(".post-title").innerHTML.trim();
4
        if (postTitleValue.slice(0, 2) === "加密") {
5

6
            var oScript = document.createElement("script");
7
            oScript.src = "./aes.js";
8
            document.body.appendChild(oScript);
9
        }
10
    </script>

引入aes.js后添加密钥和密钥偏移量输入框，添加加密解密函数，添加点击事件。默认的密钥和密码偏移量都为”1234560000000000”，但是千万不要使用默认密码和密钥，最方便的做法是使用在线随机数生成工具生成随机密钥和随机密钥偏移量。

1
//aes加密
2
function encrypt(word, keyy, ivv) {
3
    var key = keyy ? CryptoJS.enc.Utf8.parse(keyy) : CryptoJS.enc.Utf8.parse("1234560000000000"); //16位
4
    var iv = ivv ? CryptoJS.enc.Utf8.parse(ivv) : CryptoJS.enc.Utf8.parse("1234567890000000");
5
    var encrypted = '';
6
    if (typeof (word) == 'string') {
7
        var srcs = CryptoJS.enc.Utf8.parse(word);
8
        encrypted = CryptoJS.AES.encrypt(srcs, key, {
9
            iv: iv,
10
            mode: CryptoJS.mode.CBC,
11
            padding: CryptoJS.pad.Pkcs7
12
        });
13
    } else if (typeof (word) == 'object') { //对象格式的转成json字符串
14
        data = JSON.stringify(word);
15
        var srcs = CryptoJS.enc.Utf8.parse(data);
16
        encrypted = CryptoJS.AES.encrypt(srcs, key, {
17
            iv: iv,
18
            mode: CryptoJS.mode.CBC,
19
            padding: CryptoJS.pad.Pkcs7
20
        })
21
    }
22
    return encrypted.ciphertext.toString();
23
}
24
// aes解密
25
function decrypt(word, keyy, ivv) {
26
    var key = keyy ? CryptoJS.enc.Utf8.parse(keyy) : CryptoJS.enc.Utf8.parse("1234560000000000");
27
    var iv = ivv ? CryptoJS.enc.Utf8.parse(ivv) : CryptoJS.enc.Utf8.parse("1234567890000000");
28
    var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
29
    var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
30
    var decrypt = CryptoJS.AES.decrypt(srcs, key, {
31
        iv: iv,
32
        mode: CryptoJS.mode.CBC,
33
        padding: CryptoJS.pad.Pkcs7
34
    });
35
    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
36
    return decryptedStr.toString();
37
}
38
var lock = document.createElement("div"),
39
    input = document.createElement("input"),
40
    inputIvv = document.createElement("input"),
41
    btn1 = document.createElement("button"),
42
    btn2 = document.createElement("button"),
43
    markdown = document.querySelector(".markdown-body");
44
    markdown.style.display="none"
45
lock.id = "lock";
46
input.id = "lock-input";
47
inputIvv.id = "lock-inputIvv";
48
input.type="password";
49
inputIvv.type="password";
50
btn1.id = "lock-btn1";
51
btn2.id = "lock-btn2";
52
btn1.innerHTML = "解密";
53
btn2.innerHTML = "加密";
54
document.body.appendChild(lock);
55
lock.appendChild(input);
56
lock.appendChild(inputIvv);
57
lock.appendChild(btn1);
58
lock.appendChild(btn2);
59

60
btn1.onclick = function () {
61
    var keyy = input.value;
62
    var ivv = inputIvv.value;
63
    var markdownValue = markdown.innerHTML.trim();
64
    //去除生成干扰，我的文章每次生成会自动包一层div，这一步是为了保证密文永不改变内容，你们不需要这一步
65
    var str = markdownValue.slice(3,-4);
66
    console.log(str);
67
    var decr = decrypt(str.toString(), keyy, ivv);
68
    markdown.innerHTML = decr.trim();
69
    markdown.style.display="block"
70
}
71
btn2.onclick = function () {
72
    var keyy = input.value;
73
    var ivv = inputIvv.value;
74
    var markdownValue = markdown.innerHTML.trim();
75
    var str = markdownValue;
76
    var decr = encrypt(str.toString(), keyy, ivv);
77
    markdown.innerHTML = decr.trim();
78
    markdown.style.display="block"
79
}

展开收起

加密输入框的css，使用了页面压缩，看起来比较乱。

1
#lock{overflow:hidden;width:248px;position:absolute;left:50%;top:230px;margin-left:-100px}#lock-btn1,#lock-btn2{margin-left:31.5px;float:left;display:block;width:60px;height:20px;border-radius:20px;background-color:transparent;color:#000;-webkit-transition:all 150ms linear;-moz-transition:all 150ms linear;-o-transition:all 150ms linear;-ms-transition:all 150ms linear;transition:all 150ms linear;font-size:14px;font-weight:normal;text-align:center;border:1px solid #66615b}#lock-btn2{margin-left:61.5px}#lock-btn1:hover,#lock-btn2:hover{background-color:#66615b;color:rgba(255,255,255,0.7);border-color:#66615b}#lock-input,#lock-inputIvv{border-radius:20px;outline:0;padding:0 10px;width:100px;height:20px;background:transparent;color:#000;font-size:1.25em;float:left}#lock-input:hover,#lock-inputIvv:hover{background-color:#66615b;color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.7)}

每次需要发布加密的文章时，将文章标题命名为”加密.XXX“，页面就会出现加密解密框，首次发布请输入密钥和密钥偏移量点击加密，拿到密文。然后将文章内容改为密文。保存好你的密钥和密钥偏移量，以后查看加密文章时，输入密钥和密钥偏移量点击解密，即可看到原始的文章。代码效果如下两图

demo2

原神反人类的pc端操作体验

Tue, 20 Apr 2021 19:24:15 GMT

体验完原神后，感觉原神就是一款原生开发的手游大作，对pc端来说是没有细心打磨的移植作品。原神的优点很多，有优美的画风，有漂亮的建模，还有沉浸感十足的声优。从我个人的体验角度，原神对pc端的操作手感和交互逻辑还有特别大的进步空间。游戏为了追求多端操作统一，的确需要双端操作体验相互做出妥协，但是原神中 PC端妥协的太多了，完全可以让pc端的键位设置更加符合pc游戏的操作，并且丝毫不会影响手机端现有的体验。

例如，现在原神不支持“呼出鼠标”键的自定义。 ctrl是pc端其他同操作模式游戏中比较常用的呼出鼠标按键，原神把这个重要的按键赋予了“切换跑步行走状态”的功能，把alt这个按起来并不方便的按键赋予了pc端玩家最常用的功能“呼出鼠标”。切换跑步行走在我的体验中只有lsp欣赏角色的时候才会打开走两步，其余时间都恨不得角色移动的再快一点完全用不到。把这个平常用不到的功能放在ctrl里，只会让玩家多误触几次，我已经在设置里把“切换跑步行走状态”绑定了别的不会误触的按键。在现有操作模式下，我只能强迫自己少用鼠标多用其他快捷键。如果原神pc端可以把主界面的alt键持续按住呼出鼠标改为按下alt键呼出鼠标，再次按下alt键隐藏鼠标，在鼠标切出的状态随便按一下wasd移动键会自动隐藏鼠标开始移动的话，pc端使用鼠标的体验会好很多，这也是同类动作游戏的常用鼠标逻辑。

原神pc端没有最小化模式，也没有后台帧率限制。手机端玩游戏就是玩游戏，一般也不会原神挂机去干别的事情。但是pc端挂机是很常见的。比如临时挂机浏览网页。把别的应用切在前台，原神既会有声音还会消耗和前台玩原神一样的系统资源，对pc玩家不是很友好。切换后台这一点我见过的做的最极限的网游是黑沙，黑沙可以直接最小化到右下角的任务栏图标区，大大减轻了挂机时的系统资源消耗。原神做不到这么极限，也应该提供最基础的后台帧率限制。我个人觉得类似古剑ol等游戏一样，有一个游戏切换到后台帧率限制为每秒渲染1帧，这样临时挂机也可以舒服很多。不至于gpu在原神挂机玩家浏览网页的时候忍受原神60帧渲染的压力。

pc端游戏都会有快捷键和鼠标搭配使用。原神很多需要确定指令的场景，只能用鼠标硬点，没有和键盘互动的按键。这一点在移动端是合理的，因为移动端只有触摸事件。pc端是不同的，原神只是用鼠标简单粗暴的模拟了手游的触摸，没有让键盘也加入交互，pc端只有键盘和鼠标配合才能体验更佳。比如原神中点击地图上的标点会出现删除和追踪按钮。现在有66个标点需要删除，现有的操作是鼠标点击标点，鼠标移动到删除，鼠标点删除，鼠标再移动到下一个标点，鼠标再点标点…以此类推。如果原神增加一个键盘事件来响应删除。那么在批量删除地图标点的时候，就可以鼠标只点击标点键盘某个键用来确认删除，这样会比现在的只能用鼠标效率大大提高。就是基于这样简单模仿移动端触摸的原因，原神在操作上还有其他一些小瑕疵，比如邮件或活动鼠标点击领取原石后，还会弹出界面让玩家二次确认，移动端可以自然的再触摸一下屏幕。放到pc端还要再点击一下鼠标，非常的烦人，我都已经点确定了为什么还要再点一次，正常的pc游戏就会弹出提示过段时间提示自动消失。

操作体验差不多就是这些了，拉跨的战斗锁定改动比较麻烦就不说了，希望未来可以优化一下pc端的操作吧，不求有多出色，至少也应该有最基础的功能，而不是现在这样让人感觉是在用手机模拟器玩手游。希望原神不止是手游大作，成为pc大作。

在warframe里弹奏国际歌的正确姿态

Wed, 16 Dec 2020 12:48:26 GMT

最近有很多朋友私聊我怎么弹奏国际歌，我也一一回复了弹奏代码和midi，还是有天诺不知道应该如何正确操作这些代码和midi，所以今天总结一下，希望通过这篇图文说明可以让国际歌唱响在wf宇宙中，同样适用于其他歌曲的弹奏。

弹奏效果#

前提#

warframe的三线琴在商场掉落，40白金一把。

在warframe里弹奏国际歌的正确姿态

然后把三线琴装备到了物品栏，就可以按Q键使用三线琴了。

基本过程#

想在warframe里弹奏国际歌有三种方式，第一种当然是dalao玩家的徒手弹神曲，一般人学不会。那么普通天诺杂碎天诺战士如何优雅的弹奏出国际歌呢，第一个办法是使用现成的三线琴代码弹奏，第二种是使用ShawzinBot脚本弹奏midi文件。

代码弹奏#

第一步进入三线琴界面后按w打开三线琴的歌曲选择界面

在warframe里弹奏国际歌的正确姿态

第二步打开右下角的自动播放

在warframe里弹奏国际歌的正确姿态

第三步点击“加载歌曲到内存”选项

在warframe里弹奏国际歌的正确姿态

第四步复制粘贴以下代码

5KAASAQSAgRAoUAwSA4KBAEBIMBQMBgJBwMCIUCQUCgSCoRCwMC4KDAJDIEDQEDgEDwKEASEQSEgREoUEwSE4KFAEFIMFQMFgJFwMF4UGASGIRGQUGgiGwRHASHQSHghHwUH4RIARIQMIgRIoSIwMI4RJARJQKJgKJoJJwKJ4MKAMKQMKYUKgUKwSK4RLARLQRLgULwUMAUMQRMYKMgKMoJMwKM4hNAhNQSNgMNoRNwSN4ROAUOQSOgMOwKPAKPQKPghPwhP4UP8SQESQUKQkKQ0EQ8MREMRUJRkUR0UR8SSARSIRSYMSoKS4KTIKTMhTYhToUT4KUISUYSUoRU4RVIRVQMVYMVoKVwMV4UWIUWYhWshW0UW4SXASXQKXgKXwEX4MYAMYQJYgUYwUY4SY8RZERZUMZkKZ0haEhaUkagkawibAhbUUbkUb0hb8icEicchckhc0hc8kdEkdUidkhd0UeEUeUheciekie8hfEhfUUfc

在warframe里弹奏国际歌的正确姿态

点击确定，好了，你和你的队友就能听到这首热泪盈眶的国际歌了。

脚本弹奏#

准备工作#

使用弹奏脚本可能有封号风险，请谨慎操作，一般来说代码弹奏已经可以满足天诺战士的音乐需求，如果你追求更好的弹奏效果请往下看。首先我们需要下载 ShawzinBot 软件和国际歌的midi文件。 ShawzinBot官方github地址为点击下载， ShawzinBot国内下载链接为点击下载，根据网络任选其一安装即可。

然后需要下载国际歌midi文件百度云链接: 点击下载提取码: jmvc (蓝凑云不支持mid音乐格式只能用速度慢的百度云了不过文件只有3kb，也慢不到哪里去)

正式开始#

第一步打开三线琴界面，按TAB按键切换到半音

在warframe里弹奏国际歌的正确姿态

第二步打开ShawzinBot，左上角选择国际歌midi文件

在warframe里弹奏国际歌的正确姿态

第三步点击ShawzinBot的播放按钮，会自动跳转到warframe开始弹奏

在warframe里弹奏国际歌的正确姿态

ok，你已经成功自动弹奏国际歌。

隐藏技巧：这首国际歌的midi选择1.25倍速弹奏可能更燃

在warframe里弹奏国际歌的正确姿态

优缺点#

代码弹奏简单高效没有任何封号风险，但是可玩性不高
脚本弹奏能实现更进阶的操作，例如一个人弹奏三个人和声，然而ShawzinBot毕竟是脚本，尽管de可能对三线琴的界面使用脚本网开一面但是也不能完全排除误封号的可能性。

其他音乐#

那么如何寻找其他音乐的代码或者midi文件。可以在搜索引擎输入“三线琴代码”或“warframe midi”，有很多天诺战士的分享，midi文件尽量找单音轨的，如果是多音轨歌曲可以尝试使用 “MidiEditor”等免费音乐编辑软件编辑。

感谢#

国际歌的midi文件来源于 @清丰君qfj
@才不是绅士的阿明告诉我MidiEditor的操作方法，让我成功去除掉了原midi中的节拍。

我心中的脱口秀大会冠军不是王勉

Thu, 24 Sep 2020 18:13:24 GMT

脱口秀大会的冠军是王勉。脱口秀大会的冠军是王勉？用沈腾的话来说“我甚至都不知道这算不算脱口秀”。我觉得他更适合参加乐队的夏天。王勉的顺口溜脱口秀是用唱歌的方式，音乐的现场感染力本身就比文字更强一些，能看出现场观众和领笑员都很嗨，但是我个人认为脱口秀本身还是要有一些文本量来支撑自己的观点的，王勉的那首逃避称得上全场最佳十分精彩，可惜的是王勉之后的顺口溜脱口秀完全是一个模板工厂做出来的产品。这些产品有着雷同的旋律，固化的反转，甚至连反转时的怒吼都一样。

王勉的确有两三首（这两三首都不在总决赛之内）很精彩的作品，但是仅仅这三首作品就说他超过了那些文本输出很强型选手我是很不认可的。在我看来，王勉和老田是有相似之处的，老田靠着car engineer爆笑全场，第二场用类似的手法场上却没有发笑。王勉运气更好一些，，用着高度相似的顺口溜脱口秀一直走到决赛打开了脱口秀大会财富密码拿下了冠军。

个人觉得所谓的唱歌脱口秀就类似于武功里的奇招怪招，你说他很厉害我说那当然，但是要说他是天下第一武林盟主我第一个不认可。

阿尔比恩如何获得白骨马

Fri, 04 Sep 2020 23:59:33 GMT

关于阿尔比恩#

阿尔比恩，英文名（Albion）是一款三端互通的沙盒网游，因为近期官方加入了中文语言，所以近期阿尔比恩加入了很多中国的新鲜血液。就我个人的游戏体验来说阿尔比恩有一些类似于曾经很火爆的传奇类网游的游戏特质，有安全区，有自由PK区，有工会也有江湖。白骨马是阿尔比恩里萌新十分容易获得的一款皮肤。

获取方法#

1.在任意主城市场购买“死灵秘药”，价格为750银币左右，萌新也买得起。

2.在市场上方的npc处兑换

npc处兑换

使用方法#

阿尔比恩使用外观的方法也很简单，点击左上角的头像，点击外观，然后选中白骨马即可

白骨马

ngnix使用CDN后正确获取访客IP

Sun, 30 Aug 2020 13:57:39 GMT

如果是使用一层cdn，那么在nginx的配置文件http{}字段中加入

1
    set_real_ip_from 0.0.0.0/0;
2
    real_ip_header X-Forwarded-For;

即可。

如果是使用了两层或以上cdn(使用了cdn和web防火墙也适用)，那么在nginx的配置文件http{}字段中加入

1
    set_real_ip_from 0.0.0.0/0;
2
    real_ip_header X-Forwarded-For;
3
    real_ip_recursive on;

即可。

ngnix开启HSTS

Mon, 17 Aug 2020 15:43:56 GMT

什么是HSTS#

HTTP严格传输安全协议（英语：HTTP Strict Transport Security，简称：HSTS），是一套由互联网工程任务组发布的互联网安全策略机制。网站可以选择使用HSTS策略，来让浏览器强制使用HTTPS与网站进行通信，以减少会话劫持风险。 HSTS可以很大程度上解决SSL剥离攻击，因为只要浏览器曾经与服务器创建过一次安全连接，之后浏览器会强制使用HTTPS，即使链接被换成了HTTP。 ##开启HSTS证书的前提## 正确设置了SSL证书，网站可以通过https协议正常访问 ##ngnix如何开启HSTS## 在网站配置文件server{}中加入

1
add_header Strict-Transport-Security "max-age=31536000;

如果追求更好的安全效果可以改成加入

1
add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";

includeSubdomains参数会使得浏览器在请求所有子域名时都强制要求HTTPS协议，如果没有给所有子域名都添加SSL证书的打算，请不要输入这个参数#

安利一个steam上好玩的社工解密游戏《全网公敌》

Tue, 28 Jul 2020 15:43:56 GMT

发现宝藏游戏#

今天在steam上试玩了一个我很喜欢的游戏《全网公敌》，试玩版一个小时的体验，沉浸感十足，八月会发布正式版，默默地期待一下吧。刚好最近我的身边就有一个100%真实的社工案例，我把整个过程用文字和截图复述给了Aluba的工作人员，我的语言功底也不怎么好说的罗里吧嗦的给他添麻烦了，希望以后的dlc能上这个案例吧，哈哈哈。有想免费试玩的朋友可以点击文末的链接试玩，或者直接在steam里搜索全网公敌。

关于这款游戏#

大家好，我们是Aluba工作室，很高兴和大家分享我们的游戏:全网公敌没错，这是一款和人肉搜索相关的游戏，同时结合了网络暴力、大数据、隐私泄露等社会问题，剧情向的解谜游戏。我们很多剧情设定就参考了真实事件，所以从一些人物形象设定图上你也能看到一些熟悉的身影，玩完游戏也能联想到现实。最开始定游戏题材时，我们也是考虑了很久。因为受这是我们的战争、请出示证件、奥威尔等优秀的独立游戏的影响，我们也想做出一款能够让玩家脱离游戏之外有所思考的游戏，因此在题材方面也是绞尽脑汁。

全网公敌

题材构思#

在团队立项会的“友好”沟通中，我们发现当互联网不断渗透人们的生活，使信息加速传递时，一个负面事件可以很快传遍整个互联网。在这个过程中，罪恶会被曝光、被惩治，这些会让人们大快人心；但也有人会遭受着来自网络键盘侠满怀恶意的咒骂与凌辱。当这些网络暴力不断升级，带来的结果往往会超出事件本身，更有甚者不堪压力而结束宝贵的生命。因此我们决定开发这么一款与“黑客”、“人肉”、“隐私数据泄露”题材相关的游戏，希望让玩家去扮演一名黑客，社工（人肉）目标人物，找出他们的隐私秘密。希望通过这个过程让玩家产生思考，并作出自己判断。

全网公敌

核心功能#

经过一年多的努力，我们完成了一部分游戏的构想，实现了一些社工（人肉）手段，并将它们融入进了我们的游戏中：

网络搜索#

玩家通过浏览器搜索功能收集目标对象的基础信息。

数据库#

利用已知信息输入到数据库中，通过筛选后或许目标对象的其他信息。

破解#

通过获得的目标人物信息来生成密码，用于登陆各平台的账户（包括邮箱、社交平台、聊天软件等）。

伪装#

获取目标对象的需求、社交圈等，根据信息选择伪装，通过和目标对象接触套取更多信息。

聊天套话#

添加目标对象为好友后，进行聊天套话获取信息。

图片分析#

从图片中获取有价值的信息内容及相关线索。

钓鱼#

发送钓鱼链接侵入目标人物的硬件设备（电脑、手机），获取到隐私信息。

当然，后期还会解锁更多的高阶社工方法！

全网公敌

游戏玩法#

游戏中玩家扮演一名黑客，接受记者的委托，完成一个个社工事件。在整个过程中，玩家需要使用多种社工方法来达到最终目的。每个社工方法都会有相应的使用条件，使用成功会获得线索。游戏会对玩家的行为进行善恶判定，不同的判定会触发对应的剧情走向。

全网公敌

下载地址#

点击进入steam页面

《二狗子汉奸李富贵》节选

Tue, 07 Jul 2020 15:43:56 GMT

亨利：我在广州待了一阵子，我发觉你们中国人什么都吃。”
李富贵：“哈哈，你说的是广东人，中国别的地方没有那么宽的食谱，不过广东人也不是什么都吃，好像他们就不太喜欢吃狗。”
亨利：“吃狗？”亨利的语调开始打颤了。
李富贵：“是啊，吃狗，有什么问题吗？”
“人怎么可以吃狗。”
李富贵：“人为什么不可以吃狗，你刚刚说中国人什么都吃，我还以为你知道呢。”
亨利：“我刚才说的是指蛇、猴子一类的东西，可是狗是人类的朋友，人怎能吃自己的朋友呢？”
李富贵：“啊，对啊，狗是人类的朋友，我怎么把这个给忘了。”李富贵作出一幅恍然大悟的样子，“可是，亨利先生，你吃猪吗？”
亨利：“吃啊，我不是穆斯林。”
李富贵：“那难道猪是您的仇人吗？”
这下亨利听出李富贵是话里有话了，这个中国人似乎想和自己进行一场辩论，哼哼，叫你这个野蛮人见识一下什么是哈佛的高材生：
亨利：“猪当然不是人类的仇人，但是猪也不是朋友啊。”
李富贵：“不是仇人，也不是朋友，算个陌生人吧，您的意思是说朋友不能吃，但是可以吃陌生人，您可真高尚啊，能成为您的朋友我非常荣幸。”
亨利：“李将军，我说朋友只是一个比喻，并不是真的要去吃，请你不要用这种危言耸听的语气。”
李富贵：“好，那么我们就不用吃这个词来做填空，这个问题的主语是‘我’，谓语有您来填，宾语是‘陌生人’，随您填上一个什么词，打、杀、抢劫、强奸都可以，然后我们再来看看这句话能不能让大家接受。”
这一下亨利无言以对，把狗拟人化是自己提出来的，现在对手居然用这个办法来对付自己，如果自己无法应对的话，这在辩论中属于完败，他实在是无法接受这样一个结果。
亨利：“我不认为猪可以和狗相提并论，我们当然可以吃一些比较低级的动物，但是狗不行。”现在他只好易地再战，不提朋友那回事了。
李富贵：“对呀，狗比猪高级，可是老鼠更低级啊，为什么先生不吃老鼠呢？而且我想请问一下，亨利先生养狗吗？”
亨利：“养啊，我家有两条德国牧羊犬，还有两条牛头犬。”他很高兴可以利用回答第二个问题来回避第一个。
李富贵：“那你为他们什么呢？猪肉吗？”
这个问题显然有陷阱，可是亨利一时也猜不出对方的意图，“也喂猪肉，也喂牛肉。”
李富贵：“为什么你认为狗有权利吃猪呢？是因为狗比猪高级很多吗？比人与狗之间的差别还要大？”
又是以子之矛攻子之盾，亨利发现自己的对手有多么强大了。
看到亨利沉默不语李富贵拍了拍他的肩膀：“看来您不再坚持这个伪善的观点了，很好我们可以结束这场讨论去吃饭了。”
亨利：“您一定想在餐桌上点一盘狗肉吧？”亨利的语气有点酸酸的。
李富贵：“噢，不好意思，我不喜欢吃狗肉。”
亨利：“那，那您刚才和我争什么？”亨利张大了嘴。
李富贵：“我很欣赏你们西方的一句话‘我不同意你的观点，不过我会用鲜血来捍卫你表达你的观点的权利’，同样我不喜欢吃狗肉但我将捍卫别人吃狗肉的权利。”

如何清理域名解析的本地dns缓存

Fri, 03 Jul 2020 15:43:56 GMT

清理本地缓存的快捷方法：

1.#

Win+R快捷键

2.#

输入：cmd

3.#

输入：ipconfig/flushdns 然后按回车

如何清理域名解析的本地dns缓存

4.#

愉快的访问需要访问的网站

解决typecho在微信内置浏览器中评论错误的问题

Tue, 23 Jun 2020 15:43:56 GMT

解决办法#

打开typecho数据库下的表”typecho_comments”,把”agent”参数的长度从200修改到500，大功告成！

出现原因#

微信内置浏览器某些情况下的UA会达到240以上，为防止微信内置浏览器以后又在UA里增加字段，直接把typecho接收的UA长度设置成500即可。

欢迎使用 WordPress

Mon, 22 Jun 2020 15:43:56 GMT

如果您看到这篇文章,表示您的 blog 已经安装成功…

文章前言#

1
---
2
title: 标题
3
published: 2023-09-09
4
description: 描述.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

Attribute	Description
`title`	帖子的标题
`published`	帖子发布的日期
`description`	帖子的简短描述。显示在索引页上
`image`	文章封面图片路径。1
. 以http://或开头https://：使用网页图片2. 以开头：用于目录/中的图片3. 不带任何前缀：相对于 markdown 文件public
`tags`	帖子的标签
`category`	帖子的类别
`draft`	如果该帖子仍为草稿，则不会显示

在哪里放置帖子文件#

您的帖子文件应放在src/content/posts/目录中。您还可以创建子目录以更好地组织您的帖子和资产。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

Bilibili#

标题#

段落之间以空行分隔。

第二段斜体, 粗体, and monospace. 分项列表如下:

这个
那个
另一个

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.
They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12—14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺

一个h2标题#

以下是一个编号列表:

第一项
第二项
第三项

请再次注意实际文本如何从第 4 列开始（左侧 4 个字符）。以下是代码示例：:

1
# Let me re-iterate ...
2
for i in 1 .. 10 { do-something(i) }

你可能已经猜到了，缩进 4 个空格。顺便说一句，如果你愿意，你可以使用分隔块，而不是缩进块：

1
define foobar() {
2
    print "Welcome to flavor country!";
3
}

（这使得复制和粘贴更容易）。您可以选择标记分隔块，以便 Pandoc 语法高亮显示它：

1
import time
2
# Quick, count to ten!
3
for i in range(10):
4
    # (but not *too* quick)
5
    time.sleep(0.5)
6
    print i

三级标题#

现在有一个嵌套列表:

首先，准备好以下原料:
- 胡萝卜
- 芹菜
- 扁豆
烧开一些水.

把所有筹码都倒入底池，然后遵循以下算法:

1
 find wooden spoon
2
 uncover pot
3
 stir
4
 cover pot
5
 balance wooden spoon precariously on pot handle
6
 wait 10 minutes
7
 goto first step (or shut off burner when done)

不要撞击木勺，否则它会掉落。

再次注意文本总是以 4 个空格的缩进排列（包括延续上面第 3 项的最后一行）。

这是指向网站, 本地文档, and to a 当前文档中章节标题. 这是脚注 ¹.

表格看起来如下：:

尺寸材质颜色

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they’re made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it’s not easy being.

接下来是水平线。

Here’s a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There’s no “e” in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here’s a “line block”:

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: ω=dϕ/dt\omega = d\phi / dtω=dϕ/dt. Display math should get its own line and be put in in double-dollarsigns:

I=∫ρR2dVI = \int \rho R^{2} dVI=∫ρR2dV

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

拓展功能#

Admonitions#

Following types of admonitions are supported: note tip important warning caution

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Basic Syntax#

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

Custom Titles#

The title of the admonition can be customized.

MY CUSTOM TITLE

This is a note with a custom title.

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

GitHub Syntax#

Tip

GitHub 语法也受支持。

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

Footnotes#

脚注文本放在此处. ↩