6 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_base_optimize/README.md:
--------------------------------------------------------------------------------
1 | 对应文章：[VUE3+TS+微前端实践](https://github.com/Kuari/Blog/issues/61)
2 |
3 |
4 | 
18 |
19 |
--------------------------------------------------------------------------------
/MySQL/字段属性.md:
--------------------------------------------------------------------------------
1 | ### Unsigned
2 |
3 | * 无符号的整数
4 | * 声明了该列不能声明为负数
5 |
6 |
7 |
8 | ### zerofill
9 |
10 | * 0填充
11 | * 不足的位数，使用0来填充，int(3)，如5 -> 005
12 |
13 |
14 |
15 | ### 自增
16 |
17 | * 通常理解为自增，默认自动在上一条记录的基础上 + 1
18 | * 通常用来设计唯一的主键～index，必须是整数类型
19 | * 可以自定义主键自增长的起始值和步长
20 |
21 |
22 |
23 | ### 非空
24 |
25 | * 假设设置为not null，如果不给它赋值就会报错
26 | * NULL，如果不填值，默认为null
27 |
28 |
29 |
30 | ### 默认
31 |
32 | * 设置默认的值
--------------------------------------------------------------------------------
/Examples/unplugin_auto_import/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
3 | 
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/Examples/unplugin_auto_import/src/App.vue:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
4 | 
6 |
3 |
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/Examples/vite_electron/vite_electron_3/electron/preload.js:
--------------------------------------------------------------------------------
1 | // preload.js
2 |
3 | // 所有Node.js API都可以在预加载过程中使用。
4 | // 它拥有与Chrome扩展一样的沙盒。
5 | window.addEventListener('DOMContentLoaded', () => {
6 | const replaceText = (selector, text) => {
7 | const element = document.getElementById(selector)
8 | if (element) element.innerText = text
9 | }
10 |
11 | for (const dependency of ['chrome', 'node', 'electron']) {
12 | replaceText(`${dependency}-version`, process.versions[dependency])
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/Nginx/动静分离.md:
--------------------------------------------------------------------------------
1 | # 动静分离
2 |
3 |
4 |
5 | ## 简介
6 |
7 | 动静分离简单来说就是把动态跟静态请求分开，不能理解成只是单纯地把动态页面和静态页面物理分开。严格意义上说应该是动态请求跟静态请求分开，可以理解成使用Niginx处理静态页面，服务端处理动态页面。动静分离从目前实现角度来讲大致分为两种：
8 |
9 | * 纯粹地把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案；
10 | * 把静态文件混合在一起发布，通过nginx分开；
11 |
12 | 通过`location`指定不同的后缀名实现不同的请求转发，通过`expiress`参数设置，可以使浏览器缓存过期时间，减少与服务器之间的请求和流量。具体`Expiress`定义：是给一个资源设定一个过期时间，也就是说无需去服务端验证，直接通过浏览器自身确认是否过期即可，所以不会产生额外的流量。此种方法非常适合不经常变动的资源。如设置`3d`，表示三天之内访问这个URL，发送一个请求，比对服务器该文件最后更新时间变化，则不会从服务器抓取，返回状态码304。如有修改，则直接从服务器重新下载，返回状态码200。
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Nginx/README.md:
--------------------------------------------------------------------------------
1 | # Nginx系列
2 |
3 |
4 |
5 | ## 功能
6 |
7 | * 正向代理
8 | * 反向代理
9 | * 负载均衡
10 | * 动静分离
11 |
12 |
13 |
14 | ## 配置文件
15 |
16 | ### 配置文件位置
17 |
18 | * /etc/nginx/nginx.conf
19 |
20 | ### 配置文件组成
21 |
22 | 1. 全局块
23 | * 从配置文件开始到events块之间的内容，主要会设置一些影响nginx服务器整体运行的配置指令；
24 | * 比如`worker_processes 1;`，`worker_processes`值越大，可以支持的并发处理量也越大；
25 | 2. events块
26 | * events块涉及的指令主要影响Nginx服务器与用户的网络连接；
27 | * 比如`worker_connections 1024;`，`worker_connections`支持的最大连接数量；
28 | 3. http块
29 | * Nginx服务配置中最频繁的部分
30 | * http块包含`http全局块`，`server块`
--------------------------------------------------------------------------------
/202104/Promise inside request interceptor.md:
--------------------------------------------------------------------------------
1 | ## 问题
2 |
3 | 在使用axios的拦截器时候，需要在request中调用一个promise函数，因此需要等待其执行完成才能去进行下一步。
4 |
5 | ```js
6 | function getToken() {
7 | return new Promise(...)
8 | }
9 |
10 | // Request interceptors
11 | service.interceptors.request.use(config => {
12 | getToken()
13 | ...
14 | })
15 | ```
16 |
17 |
18 |
19 | ## 解决
20 |
21 | ```js
22 | function getToken() {
23 | return new Promise(...)
24 | }
25 |
26 | // Request interceptors
27 | service.interceptors.request.use(async config => {
28 | awit getToken()
29 | ...
30 | })
31 | ```
32 |
33 |
--------------------------------------------------------------------------------
/202003/Flask_sqlalchemy报错MySQL server has gone away解决.md:
--------------------------------------------------------------------------------
1 | ### 报错
2 |
3 | 使用`flask_sqlalchemy`，服务端出现500错误，日志显示报错如下：
4 |
5 | ```bash
6 | MySQL server has gone away
7 | ```
8 |
9 |
10 |
11 | ### 解决
12 |
13 | 添加配置:
14 |
15 | ```python
16 | SQLALCHEMY_POOL_RECYCLE = 280
17 | ```
18 |
19 | 该配置作用是设置多少秒后回收连接，如果不提供值，默认为 2 小时。此处将其设置为280秒。
20 |
21 |
22 |
23 | 该配置原文解释：
24 |
25 | > Number of seconds after which a connection is automatically recycled. This is required for MySQL, which removes connections after 8 hours idle by default. Note that Flask-SQLAlchemy automatically sets this to 2 hours if MySQL is used.
--------------------------------------------------------------------------------
/202112/vue禁止遮罩层下的页面滚动.md:
--------------------------------------------------------------------------------
1 | ## 问题
2 |
3 | 功能开发过程中写遮罩时，遇到遮罩下页面还可以滚动的问题。
4 |
5 |
6 |
7 | ## 解决
8 |
9 | 直接给遮罩下的元素套上一个样式，使其不可滚动。
10 |
11 | ```html
12 |
13 |
4 |
14 |
18 |
19 |
20 |
29 |
30 |
38 | ```
39 |
40 |
--------------------------------------------------------------------------------
/Examples/vue_i18n_demo/src/components/HelloI18n.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 | ...
16 |
17 | {{ t('hello') }}
3 | 4 | 5 | 23 | 24 |
8 |
9 |
10 |
11 | ## Project setup
12 | ```
13 | yarn install
14 | ```
15 |
16 | ### Compiles and hot-reloads for development
17 | ```
18 | yarn serve
19 | ```
20 |
21 | ### Compiles and minifies for production
22 | ```
23 | yarn build
24 | ```
25 |
26 | ### Lints and fixes files
27 | ```
28 | yarn lint
29 | ```
30 |
31 | ### Customize configuration
32 | See [Configuration Reference](https://cli.vuejs.org/config/).
33 |
--------------------------------------------------------------------------------
/Examples/vue_i18n_demo/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
9 |
9 |
9 | {{ msg }}
13 | 14 |15 | Recommended IDE setup: 16 | VSCode 17 | + 18 | Volar 19 |
20 | 21 |22 | 23 | Vite Documentation 24 | 25 | | 26 | Vue 3 Documentation 27 |
28 | 29 | 30 |
31 | Edit
32 | components/HelloWorld.vue to test hot module replacement.
33 |
{{ msg }}
13 | 14 |15 | Recommended IDE setup: 16 | VSCode 17 | + 18 | Volar 19 |
20 | 21 |22 | 23 | Vite Documentation 24 | 25 | | 26 | Vue 3 Documentation 27 |
28 | 29 | 30 |
31 | Edit
32 | components/HelloWorld.vue to test hot module replacement.
33 |
{{ msg }}
13 | 14 |15 | Recommended IDE setup: 16 | VSCode 17 | + 18 | Volar 19 |
20 | 21 |22 | 23 | Vite Documentation 24 | 25 | | 26 | Vue 3 Documentation 27 |
28 | 29 | 30 |
31 | Edit
32 | components/HelloWorld.vue to test hot module replacement.
33 |
{{ msg }}
13 | 14 |15 | Recommended IDE setup: 16 | VSCode 17 | + 18 | Volar 19 |
20 | 21 |22 | 23 | Vite Documentation 24 | 25 | | 26 | Vue 3 Documentation 27 |
28 | 29 | 30 |
31 | Edit
32 | components/HelloWorld.vue to test hot module replacement.
33 |
3 |
9 |
10 |
11 |
44 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site_1",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^3.6.5",
12 | "vue": "^3.0.0",
13 | "vue-router": "^4.0.0-0",
14 | "vuex": "^4.0.0-0"
15 | },
16 | "devDependencies": {
17 | "@typescript-eslint/eslint-plugin": "^4.18.0",
18 | "@typescript-eslint/parser": "^4.18.0",
19 | "@vue/cli-plugin-babel": "~4.5.0",
20 | "@vue/cli-plugin-eslint": "~4.5.0",
21 | "@vue/cli-plugin-router": "~4.5.0",
22 | "@vue/cli-plugin-typescript": "~4.5.0",
23 | "@vue/cli-plugin-vuex": "~4.5.0",
24 | "@vue/cli-service": "~4.5.0",
25 | "@vue/compiler-sfc": "^3.0.0",
26 | "@vue/eslint-config-standard": "^5.1.2",
27 | "@vue/eslint-config-typescript": "^7.0.0",
28 | "eslint": "^6.7.2",
29 | "eslint-plugin-import": "^2.20.2",
30 | "eslint-plugin-node": "^11.1.0",
31 | "eslint-plugin-promise": "^4.2.1",
32 | "eslint-plugin-standard": "^4.0.0",
33 | "eslint-plugin-vue": "^7.0.0",
34 | "typescript": "~4.1.5"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/Electron/electron升级后在Mac上报错：Exit code: ENOENT. spawn :usr:bin:python ENOENT.md:
--------------------------------------------------------------------------------
1 | ## 报错
2 |
3 | `electron`升级到当前最新版（13.0.0），却在mac上打包时报错，报错内容如下：
4 |
5 | ```
6 | Exit code: ENOENT. spawn /usr/bin/python ENOENT
7 | ```
8 |
9 |
10 |
11 | ## 环境
12 |
13 | * **macOS**: 12.3.1
14 | * **electron**: `13.0.0`
15 | * **electron-builder**: `23.0.3`
16 | * **vue-cli-plugin-electron-builder**: `2.1.1`
17 |
18 |
19 |
20 | ## 解决
21 |
22 | 在`package.json`中添加如下：
23 |
24 | ```json
25 | {
26 | // ...
27 | "resolutions": {
28 | "vue-cli-plugin-electron-builder/electron-builder": "^23.0.3"
29 | }
30 | // ...
31 | }
32 | ```
33 |
34 | 该问题是由于mac系统升级后默认`python`命令是指向`python3`的，但是`vue-cli-plugin-electron-builder`是要求`python2`的，但是`electron-builder`是支持的，所以此处指定其使用`electron-builder v23.0.3`版本。
35 |
36 | 网上还有另一种解决方案就是将`python`重新指向`python2`，这种方案对于系统来说侵入性太强。我也考虑过起一个python2的docker continer然后临时指向，但是这样每次写代码还要设置下环境就很麻烦。
37 |
38 | 总体来说，还是觉得当前这个方案最方便了。
39 |
40 |
41 |
42 | ## 参考文档
43 |
44 | * [macOS 12.3 (21E230) Exit code: ENOENT. spawn /usr/bin/python ENOENT](https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1701)
45 | * [Selective dependency resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)
46 |
47 |
--------------------------------------------------------------------------------
/Examples/vite_electron/vite_electron_1/main.js:
--------------------------------------------------------------------------------
1 | // main.js
2 |
3 | // 控制应用生命周期和创建原生浏览器窗口的模组
4 | const { app, BrowserWindow } = require('electron')
5 | const path = require('path')
6 |
7 | function createWindow () {
8 | // 创建浏览器窗口
9 | const mainWindow = new BrowserWindow({
10 | width: 800,
11 | height: 600,
12 | webPreferences: {
13 | preload: path.join(__dirname, 'preload.js')
14 | }
15 | })
16 |
17 | // 加载 index.html
18 | mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意
19 |
20 | // 打开开发工具
21 | // mainWindow.webContents.openDevTools()
22 | }
23 |
24 | // 这段程序将会在 Electron 结束初始化
25 | // 和创建浏览器窗口的时候调用
26 | // 部分 API 在 ready 事件触发后才能使用。
27 | app.whenReady().then(() => {
28 | createWindow()
29 |
30 | app.on('activate', function () {
31 | // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
32 | // 打开的窗口，那么程序会重新创建一个窗口。
33 | if (BrowserWindow.getAllWindows().length === 0) createWindow()
34 | })
35 | })
36 |
37 | // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
38 | // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
39 | app.on('window-all-closed', function () {
40 | if (process.platform !== 'darwin') app.quit()
41 | })
42 |
43 | // 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
44 | // 也可以拆分成几个文件，然后用 require 导入。
45 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_base/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site_base",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^3.6.5",
12 | "qiankun": "^2.6.3",
13 | "vue": "^3.0.0",
14 | "vue-router": "^4.0.0-0",
15 | "vuex": "^4.0.0-0"
16 | },
17 | "devDependencies": {
18 | "@typescript-eslint/eslint-plugin": "^4.18.0",
19 | "@typescript-eslint/parser": "^4.18.0",
20 | "@vue/cli-plugin-babel": "~4.5.0",
21 | "@vue/cli-plugin-eslint": "~4.5.0",
22 | "@vue/cli-plugin-router": "~4.5.0",
23 | "@vue/cli-plugin-typescript": "~4.5.0",
24 | "@vue/cli-plugin-vuex": "~4.5.0",
25 | "@vue/cli-service": "~4.5.0",
26 | "@vue/compiler-sfc": "^3.0.0",
27 | "@vue/eslint-config-standard": "^5.1.2",
28 | "@vue/eslint-config-typescript": "^7.0.0",
29 | "eslint": "^6.7.2",
30 | "eslint-plugin-import": "^2.20.2",
31 | "eslint-plugin-node": "^11.1.0",
32 | "eslint-plugin-promise": "^4.2.1",
33 | "eslint-plugin-standard": "^4.0.0",
34 | "eslint-plugin-vue": "^7.0.0",
35 | "typescript": "~4.1.5"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/Examples/vite_electron/vite_electron_2/main.js:
--------------------------------------------------------------------------------
1 | // main.js
2 |
3 | // 控制应用生命周期和创建原生浏览器窗口的模组
4 | const { app, BrowserWindow } = require('electron')
5 | const path = require('path')
6 |
7 | function createWindow () {
8 | // 创建浏览器窗口
9 | const mainWindow = new BrowserWindow({
10 | width: 800,
11 | height: 600,
12 | webPreferences: {
13 | preload: path.join(__dirname, 'preload.js')
14 | }
15 | })
16 |
17 | // 加载 index.html
18 | // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
19 | mainWindow.loadURL("http://localhost:3000")
20 |
21 | // 打开开发工具
22 | // mainWindow.webContents.openDevTools()
23 | }
24 |
25 | // 这段程序将会在 Electron 结束初始化
26 | // 和创建浏览器窗口的时候调用
27 | // 部分 API 在 ready 事件触发后才能使用。
28 | app.whenReady().then(() => {
29 | createWindow()
30 |
31 | app.on('activate', function () {
32 | // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
33 | // 打开的窗口，那么程序会重新创建一个窗口。
34 | if (BrowserWindow.getAllWindows().length === 0) createWindow()
35 | })
36 | })
37 |
38 | // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
39 | // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
40 | app.on('window-all-closed', function () {
41 | if (process.platform !== 'darwin') app.quit()
42 | })
43 |
44 | // 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
45 | // 也可以拆分成几个文件，然后用 require 导入。
46 |
47 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_base_optimize/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site_base",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "core-js": "^3.6.5",
12 | "nprogress": "^0.2.0",
13 | "qiankun": "^2.6.3",
14 | "vue": "^3.0.0",
15 | "vue-router": "^4.0.0-0",
16 | "vuex": "^4.0.0-0"
17 | },
18 | "devDependencies": {
19 | "@typescript-eslint/eslint-plugin": "^4.18.0",
20 | "@typescript-eslint/parser": "^4.18.0",
21 | "@vue/cli-plugin-babel": "~4.5.0",
22 | "@vue/cli-plugin-eslint": "~4.5.0",
23 | "@vue/cli-plugin-router": "~4.5.0",
24 | "@vue/cli-plugin-typescript": "~4.5.0",
25 | "@vue/cli-plugin-vuex": "~4.5.0",
26 | "@vue/cli-service": "~4.5.0",
27 | "@vue/compiler-sfc": "^3.0.0",
28 | "@vue/eslint-config-standard": "^5.1.2",
29 | "@vue/eslint-config-typescript": "^7.0.0",
30 | "eslint": "^6.7.2",
31 | "eslint-plugin-import": "^2.20.2",
32 | "eslint-plugin-node": "^11.1.0",
33 | "eslint-plugin-promise": "^4.2.1",
34 | "eslint-plugin-standard": "^4.0.0",
35 | "eslint-plugin-vue": "^7.0.0",
36 | "typescript": "~4.1.5"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/Examples/vite_electron/vite_electron_3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "kuari",
3 | "version": "0.0.0",
4 | "main": "electron/main.js",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "serve": "vite preview",
9 | "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
10 | "electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
11 | "electron:build": "vite build && electron-builder"
12 | },
13 | "dependencies": {
14 | "vue": "^3.2.16"
15 | },
16 | "devDependencies": {
17 | "@vitejs/plugin-vue": "^1.9.3",
18 | "concurrently": "^6.3.0",
19 | "cross-env": "^7.0.3",
20 | "electron": "^15.1.2",
21 | "electron-builder": "^22.13.1",
22 | "vite": "^2.6.4",
23 | "wait-on": "^6.0.0"
24 | },
25 | "build": {
26 | "appId": "com.my-website.my-app",
27 | "productName": "MyApp",
28 | "copyright": "Copyright © 2021 kuari",
29 | "mac": {
30 | "category": "public.app-category.utilities"
31 | },
32 | "nsis": {
33 | "oneClick": false,
34 | "allowToChangeInstallationDirectory": true
35 | },
36 | "files": [
37 | "dist/**/*",
38 | "electron/**/*"
39 | ],
40 | "directories": {
41 | "buildResources": "assets",
42 | "output": "dist_electron"
43 | }
44 | }
45 | }
--------------------------------------------------------------------------------
/202106/Swift计算两个日期的天数差.md:
--------------------------------------------------------------------------------
1 | ## 一. 官方方法
2 |
3 | ### **DateComponents**
4 |
5 | A date or time specified in terms of units (such as year, month, day, hour, and minute) to be evaluated in a calendar system and time zone.
6 |
7 | 以要在日历系统和时区中计算的单位（例如年、月、日、小时和分钟）指定的日期或时间。
8 |
9 |
10 |
11 | ## 二. 实现
12 |
13 | ### 1. 计算两个字符串形式的日期的天数差
14 |
15 | ```swift
16 | func dateDiff() -> Int {
17 | // 计算两个日期差，返回相差天数
18 | let formatter = DateFormatter()
19 | let calendar = Calendar.current
20 | formatter.dateFormat = "yyyy-MM-dd"
21 | let today = Date()
22 |
23 | // 开始日期
24 | let startDate = formatter.date(from: "2021-06-08")
25 |
26 | // 结束日期
27 | let endDate = formatter.date(from: "2021-06-09")
28 | let diff:DateComponents = calendar.dateComponents([.day], from: startDate!, to: endDate!)
29 | return diff.day!
30 | }
31 | ```
32 |
33 |
34 |
35 | ### 2. 计算当天跟某一天的天数差
36 |
37 | ```swift
38 | func checkDiff() -> Int {
39 | // 计算两个日期差，返回相差天数
40 | let formatter = DateFormatter()
41 | let calendar = Calendar.current
42 | formatter.dateFormat = "yyyy-MM-dd"
43 |
44 | // 当天
45 | let today = Date()
46 | let startDate = formatter.date(from: formatter.string(from: today))
47 |
48 | // 固定日期
49 | let endDate = formatter.date(from: "2021-06-09")
50 |
51 | let diff:DateComponents = calendar.dateComponents([.day], from: startDate!, to: endDate!)
52 | return diff.day!
53 | }
54 | ```
55 |
56 |
--------------------------------------------------------------------------------
/202107/SwiftUI MacOS项目alert弹出两次问题解决.md:
--------------------------------------------------------------------------------
1 | ## 问题
2 |
3 | 使用`Alert`时，将其用在`list`的循环视图元素中，弹出`Alert`时，一定时长不选择就会在点击后弹出第二次。
4 |
5 | 这里提一下就是之前在网上看到一个帖子说他将`Alert`放在`NavigationView`上也会出现该问题。
6 |
7 | ```swift
8 | VStask {
9 | ForEach(items, id: \.self) { item in
10 | ElementView(item: item) // 循环中的元素
11 | .alert(isPresented: $showAlert) {
12 | Alert(
13 | title: Text("删除确认"),
14 | message: Text("请问您确认删除该数据吗？"),
15 | primaryButton: .default(
16 | Text("取消"),
17 | action: {
18 | showAlert = false
19 | }
20 | ),
21 | secondaryButton: .destructive(
22 | Text("删除"),
23 | action: {
24 | deleteItems(offsets: [index])
25 | })
26 | )
27 | }
28 | }
29 | }
30 |
31 | ```
32 |
33 |
34 |
35 | ## 解决
36 |
37 | 将`Alert`放到循环之前的元素上，比如`VStack`、`List`。
38 |
39 |
40 |
41 | ## 参考
42 |
43 | * [参考帖子](https://www.reddit.com/r/swift/comments/oahztb/swiftui_alert_showing_twice_despite_only_setting/)
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/Examples/vue_i18n_demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test_i18n",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint",
9 | "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
10 | },
11 | "dependencies": {
12 | "core-js": "^3.6.5",
13 | "vue": "^3.0.0",
14 | "vue-i18n": "^9.1.0",
15 | "vue-router": "^4.0.0-0",
16 | "vuex": "^4.0.0-0"
17 | },
18 | "devDependencies": {
19 | "@intlify/vue-i18n-loader": "^3.0.0",
20 | "@typescript-eslint/eslint-plugin": "^4.18.0",
21 | "@typescript-eslint/parser": "^4.18.0",
22 | "@vue/cli-plugin-babel": "~4.5.0",
23 | "@vue/cli-plugin-eslint": "~4.5.0",
24 | "@vue/cli-plugin-router": "~4.5.0",
25 | "@vue/cli-plugin-typescript": "~4.5.0",
26 | "@vue/cli-plugin-vuex": "~4.5.0",
27 | "@vue/cli-service": "~4.5.0",
28 | "@vue/compiler-sfc": "^3.0.0",
29 | "@vue/eslint-config-standard": "^5.1.2",
30 | "@vue/eslint-config-typescript": "^7.0.0",
31 | "eslint": "^6.7.2",
32 | "eslint-plugin-import": "^2.20.2",
33 | "eslint-plugin-node": "^11.1.0",
34 | "eslint-plugin-promise": "^4.2.1",
35 | "eslint-plugin-standard": "^4.0.0",
36 | "eslint-plugin-vue": "^7.0.0",
37 | "typescript": "~4.1.5",
38 | "vue-cli-plugin-i18n": "~2.3.1"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/Examples/vite_electron/vite_electron_3/electron/main.js:
--------------------------------------------------------------------------------
1 | // electron/main.js
2 |
3 | // 控制应用生命周期和创建原生浏览器窗口的模组
4 | const { app, BrowserWindow } = require('electron')
5 | const path = require('path')
6 |
7 | const NODE_ENV = process.env.NODE_ENV
8 |
9 | function createWindow () {
10 | // 创建浏览器窗口
11 | const mainWindow = new BrowserWindow({
12 | width: 800,
13 | height: 600,
14 | webPreferences: {
15 | preload: path.join(__dirname, 'preload.js')
16 | }
17 | })
18 |
19 | // 加载 index.html
20 | // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
21 | mainWindow.loadURL(
22 | NODE_ENV === 'development'
23 | ? 'http://localhost:3000'
24 | :`file://${path.join(__dirname, '../dist/index.html')}`
25 | );
26 |
27 | // 打开开发工具
28 | if (NODE_ENV === "development") {
29 | mainWindow.webContents.openDevTools()
30 | }
31 |
32 | }
33 |
34 | // 这段程序将会在 Electron 结束初始化
35 | // 和创建浏览器窗口的时候调用
36 | // 部分 API 在 ready 事件触发后才能使用。
37 | app.whenReady().then(() => {
38 | createWindow()
39 |
40 | app.on('activate', function () {
41 | // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
42 | // 打开的窗口，那么程序会重新创建一个窗口。
43 | if (BrowserWindow.getAllWindows().length === 0) createWindow()
44 | })
45 | })
46 |
47 | // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
48 | // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
49 | app.on('window-all-closed', function () {
50 | if (process.platform !== 'darwin') app.quit()
51 | })
52 |
53 | // 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
54 | // 也可以拆分成几个文件，然后用 require 导入。
--------------------------------------------------------------------------------
/202008/Docker修改时区.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | 在使用`Docker`时，其默认时区并非使用者所在时区，需要进行修改。对于单个容器，当前修改有几种常见方式，比如直接映射宿主机时区到容器内，而本文介绍的为使用`Dockerfile`来直接修改镜像时区。此处仅以常见几个基础容器为例来介绍。
4 |
5 |
6 |
7 | ## 二. 常见容器
8 |
9 | ### 1. **Alpine**
10 |
11 | ```Dockerfile
12 | FROM alpine:latest
13 |
14 | # 安装tzdata
15 | RUN apk add --no-cache tzdata
16 |
17 | # 设置时区
18 | ENV TZ="Asia/Shanghai"
19 |
20 | ```
21 |
22 | * 验证
23 |
24 | ```bash
25 | docker build -t alpine:time .
26 | docker run --rm -it alpine:time date
27 | ```
28 |
29 |
30 |
31 | ### 2. **Ubuntu**
32 |
33 | ```Dockerfile
34 | FROM ubuntu
35 |
36 | # 设置localtime
37 | # 此处需要优先设置localtime，否则安装tzdata将会进入时区选择
38 | RUN ln -fs /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
39 |
40 | # 安装tzdata
41 | RUN apt-get update \
42 | && apt-get install tzdata -y \
43 | && apt-get clean
44 |
45 | ```
46 |
47 | * 验证
48 |
49 | ```bash
50 | docker build -t ubuntu:time .
51 | docker run --rm -it ubuntu:time date
52 | ```
53 |
54 |
55 |
56 | ### 3. Debian
57 |
58 | * Debian中已经安装了`tzdata`，所以跟`Ubuntu`有所不通过
59 |
60 | ```dockerfile
61 | FROM debian
62 |
63 | # 修改设置dpkg为自动配置
64 | ENV DEBIAN_FRONTEND=noninteractive
65 |
66 | RUN ln -fs /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
67 |
68 | RUN dpkg-reconfigure -f noninteractive tzdata
69 |
70 | # 修改设置dpkg为手动输入选择操作
71 | ENV DEBIAN_FRONTEND=dialog
72 | ```
73 |
74 | * 验证
75 |
76 | ```bash
77 | docker build -t debian:time .
78 | docker run --rm -it debian:time date
79 | ```
80 |
81 |
82 |
83 | ## 三. 结语
84 |
85 | 此处不再列举太多，主要解决方式为安装`tzdata`，然后修改时区。
--------------------------------------------------------------------------------
/202006/Linux分享文件？快速创建静态文件服务器.md:
--------------------------------------------------------------------------------
1 | ## 一. 需求
2 |
3 | Linux对于开发者来说极其友好，但是由于国内主流办公产品相关的生态较为匮乏，因此如何使用Linux去分享文件是一件十分头疼的问题。
4 |
5 | 对于这个问题，可以直接使用静态文件服务器解决部分需求，如下介绍几个常见方法。
6 |
7 |
8 |
9 | ## 二. 语言类
10 |
11 | ### 一. Python
12 |
13 | 对于`Python`来说，可以直接使用内置的库来实现。
14 |
15 | * python2
16 |
17 | ```python
18 | python -m SimpleHTTPServer 8000
19 | ```
20 |
21 | * Python3
22 |
23 | ```python
24 | python -m http.server 8000
25 | ```
26 |
27 |
28 |
29 | ### 二. Node.js
30 |
31 | `node`生态内有一个项目`http-server`，直接`V8`引擎带你飞。
32 |
33 | 1. 安装
34 |
35 | * Npm
36 |
37 | ```bash
38 | npm install --global http-server
39 | ```
40 |
41 | * Homebrew
42 |
43 | ```bash
44 | brew install http-server
45 | ```
46 |
47 |
48 |
49 | 2. 运行
50 |
51 | ```bash
52 | http-server [path] [options]
53 | ```
54 |
55 | 例如：
56 |
57 | ```bash
58 | cd exmaple/
59 | http-server
60 | ```
61 |
62 |
63 |
64 | 3. 项目仓库地址
65 |
66 | https://github.com/http-party/http-server
67 |
68 |
69 |
70 | ## 三. 服务类
71 |
72 | 1. Nginx/Apache
73 |
74 | `Nginx`和`Apache`本身可用于静态文件服务器，这就需要用户直接在本地安装。
75 |
76 | 当然，`nginx`需要注意配置一下，打开索引：
77 |
78 | ```
79 | server {
80 | listen 80;
81 | ...
82 |
83 | location / {
84 | root /usr/share/nginx/html;
85 | autoindex on;
86 | }
87 | }
88 | ```
89 |
90 |
91 |
92 | 2. Docker
93 |
94 | 使用`Docker`其实也是使用如`Nginx`来实现静态文件服务器，但是容器化在该场景存在几大优势：
95 |
96 | * 即开即用
97 | * 环境隔离
98 |
99 | 相对于直接安装`Nginx`或者`Apache`，更推荐使用`Docker`。
100 |
101 |
--------------------------------------------------------------------------------
/202206/python3 socket udp example.md:
--------------------------------------------------------------------------------
1 | ## socket udp server
2 |
3 | ```python
4 | import socket
5 |
6 |
7 | def socket_udp_server(server_ip: str = '0.0.0.0', server_port: int = 9000, buffer_size: int = 1024):
8 | """
9 | socket udp 服务端
10 |
11 | :param server_ip: 服务器的地址, 默认为0.0.0.0, 表示允许所有
12 | :param server_port: 服务器udp server接收信息的端口, 默认9000
13 | :param buffer_size: 套接字缓冲区大小, 默认1024
14 | :return: none
15 | """
16 | udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
17 | udp_socket.bind((server_ip, server_port))
18 | print('服务端开始运行...\n')
19 |
20 | while True:
21 | receive_data, sender_info = udp_socket.recvfrom(buffer_size)
22 | print('客户端地址: {}'.format(sender_info))
23 | print('来自客户端的信息: {}'.format(receive_data.decode('utf-8')))
24 |
25 |
26 | if __name__ == '__main__':
27 | socket_udp_server()
28 |
29 | ```
30 |
31 |
32 |
33 | ## socket udp client
34 |
35 | ```python
36 | import socket
37 |
38 |
39 | def socket_udp_client_send_message(message: str, server_ip: str, server_port: int):
40 | """
41 | socket udp 客户端发送消息
42 |
43 | :param message: 消息
44 | :param server_ip: 服务端的ip地址
45 | :param server_port: 服务端的端口号
46 | :return: none
47 | """
48 | udp_client_socket = socket.socket(family=socket.AF_INET, type=socket.SOCK_DGRAM)
49 | udp_client_socket.sendto(str.encode(message), (server_ip, server_port))
50 |
51 |
52 | if __name__ == '__main__':
53 | socket_udp_client_send_message('hello,world!', '127.0.0.1', 9000)
54 |
55 | ```
56 |
57 |
--------------------------------------------------------------------------------
/Nginx/负载均衡.md:
--------------------------------------------------------------------------------
1 | # 负载均衡
2 |
3 |
4 |
5 | ## 配置
6 |
7 | ```
8 | http {
9 | ...
10 |
11 | upstream myserver {
12 | server 192.168.50.90:8000;
13 | server 192.168.50.90:8001;
14 | server 192.168.50.90:8002;
15 | }
16 |
17 | server {
18 | listen 80;
19 | server_name 192.168.50.250;
20 |
21 | location / {
22 | proxy_pass http://myserver;
23 | }
24 |
25 | }
26 | }
27 | ```
28 |
29 |
30 |
31 |
32 |
33 | ## Nginx分配服务器策略
34 |
35 | * 轮询（默认）
36 |
37 | * 每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器挂掉，能自动剔除
38 |
39 | ```
40 | upstream myserver {
41 | server 192.168.50.90:8000;
42 | server 192.168.50.90:8001;
43 | server 192.168.50.90:8002;
44 | }
45 | ```
46 |
47 |
48 |
49 | * weight
50 |
51 | * weight代表权重，默认为1，权重越高被分配的客户端越多
52 |
53 | ```
54 | upstream myserver {
55 | server 192.168.50.90:8000 weight=10;
56 | server 192.168.50.90:8001 weight=20;
57 | server 192.168.50.90:8002 weight=30;
58 | }
59 | ```
60 |
61 |
62 |
63 | * ip hash
64 |
65 | * 每个请求按照访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可使session生效
66 |
67 | ```
68 | upstream myserver {
69 | ip_hash;
70 | server 192.168.50.90:8000;
71 | server 192.168.50.90:8001;
72 | server 192.168.50.90:8002;
73 | }
74 | ```
75 |
76 |
77 |
78 | * fair（第三方）
79 |
80 | * 按后端服务器的响应时间来分配请求，响应时间短的优先分配
81 |
82 | ```
83 | upstream myserver {
84 | server 192.168.50.90:8000;
85 | server 192.168.50.90:8001;
86 | server 192.168.50.90:8002;
87 | fair;
88 | }
89 | ```
90 |
91 |
--------------------------------------------------------------------------------
/Electron/electron-builder踩坑系列---tray系统托盘.md:
--------------------------------------------------------------------------------
1 | ## 简述
2 |
3 | 窗口最小化或者关闭的情况下，进程未退出，需要通过系统托盘来查看，当然还需要托盘菜单。这里就用最简单的菜单实现，加上点击事件触发。
4 |
5 |
6 |
7 | ## 官方文档
8 |
9 | ```javascript
10 | const { app, Menu, Tray } = require('electron')
11 |
12 | let tray = null
13 | app.whenReady().then(() => {
14 | tray = new Tray('/path/to/my/icon')
15 | const contextMenu = Menu.buildFromTemplate([
16 | { label: 'Item1', type: 'radio' },
17 | { label: 'Item2', type: 'radio' },
18 | { label: 'Item3', type: 'radio', checked: true },
19 | { label: 'Item4', type: 'radio' }
20 | ])
21 | tray.setToolTip('This is my application.')
22 | tray.setContextMenu(contextMenu)
23 | })
24 | ```
25 |
26 |
27 |
28 | ## 实现
29 |
30 | ```javascript
31 | let tray = null;
32 | app.whenReady().then(() => {
33 | const iconUrl =
34 | process.env.NODE_ENV === "development"
35 | ? path.join(__dirname, "../build/favicon.ico")
36 | : path.join(__dirname, "favicon.ico");
37 | tray = new Tray(nativeImage.createFromPath(iconUrl));
38 |
39 | let trayMenuTemplate = [
40 | {
41 | label: "显示/隐藏",
42 | click: function() {
43 | return win.isVisible() ? win.hide() : win.show();
44 | }
45 | },
46 | {
47 | label: "退出",
48 | click: function() {
49 | app.quit();
50 | }
51 | }
52 | ];
53 | const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
54 | tray.setToolTip("kuari");
55 | tray.setContextMenu(contextMenu);
56 | });
57 | ```
58 |
59 |
60 |
61 | ## 参考文档
62 |
63 | * [官方文档](https://www.electronjs.org/docs/api/tray)
--------------------------------------------------------------------------------
/202108/Golang实现农历转换阳历.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | 因为项目需求，需要去检测用户的农历生日。虽然后来找到了合适的库，但是首先先解释下`农历`的定义，也是去了解才知道，原来农历不是阴历。
4 |
5 | 农历属于阴阳合历，其年份分为平年和闰年。平年为十二个月，闰年为十三个月。月份分为大月和小月，大月三十天，小月二十九天，其平均历月等于一个朔望月。
6 |
7 |
8 |
9 | ## 二. 环境
10 |
11 | * Go 1.16
12 | * github.com/nosixtools/solarlunar 0.0.0
13 |
14 |
15 |
16 | ## 三. 库
17 |
18 | ```go
19 | github.com/nosixtools/solarlunar
20 | ```
21 |
22 | 该库支持1900~2049年。所以项目要跑到2049年后的童鞋就要注意......
23 |
24 | 当然，该库还支持阳历转农历、节假日计算等，有兴趣大家可以自行去了解下。
25 |
26 |
27 |
28 | ## 四. 使用
29 |
30 | ### 1. 判断闰年
31 |
32 | 该库不支持闰年判断，所以需要自己去实现闰年的判断，其参数类型为`Boolean`。
33 |
34 | ```go
35 | func IsALeapYear(year int) (result bool) {
36 | if year%4 == 0 && year%100 != 0 || year%400 == 0 {
37 | result = true
38 | return
39 | }
40 | return
41 | }
42 | ```
43 |
44 |
45 |
46 | ### 2. 转换
47 |
48 | 需要转换的阳历日期格式是固定的，是`2006-01-02`。此处以农历`2021-07-17`为例。
49 |
50 | ```go
51 | func main() {
52 | lunarDate := "2021-07-17"
53 | fmt.Println(solarlunar.LunarToSolar(lunarDate, IsALeapYear(time.Now().Year())))
54 | }
55 | ```
56 |
57 | 输出为：
58 |
59 | ```go
60 | 2021-08-24
61 | ```
62 |
63 |
64 |
65 | ## 五. 全部代码
66 |
67 | ```go
68 | package main
69 |
70 | import (
71 | "fmt"
72 | "time"
73 |
74 | "github.com/nosixtools/solarlunar"
75 | )
76 |
77 | func main() {
78 | lunarDate := "2021-07-17"
79 | fmt.Println(solarlunar.LunarToSolar(lunarDate, IsALeapYear(time.Now().Year())))
80 | }
81 |
82 | func IsALeapYear(year int) (result bool) {
83 | if year%4 == 0 && year%100 != 0 || year%400 == 0 {
84 | result = true
85 | return
86 | }
87 | return
88 | }
89 | ```
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/MySQL/数据类型.md:
--------------------------------------------------------------------------------
1 | ## 数值
2 |
3 | | 类型 | 说明 | 长度 | 备注 |
4 | | --------- | ------------------ | ------- | -------------------- |
5 | | tinyint | 十分小的数据 | 1个字节 | |
6 | | smallint | 较小的数据 | 2个字节 | |
7 | | mediumint | 中等大小的数据 | 3个字节 | |
8 | | int | 标准的整数 | 4个字节 | 常用的int |
9 | | bigint | 较大的数据 | 8个字节 | |
10 | | float | 浮点数 | 4个字节 | |
11 | | double | 浮点数 | 8个字节 | 精度问题 |
12 | | decimal | 字符串形式的浮点数 | | 金融计算时一般使用此 |
13 |
14 |
15 |
16 | ## 字符串
17 |
18 | | 类型 | 说明 | 长度 | 备注 |
19 | | -------- | ---------------- | -------- | ---------- |
20 | | char | 固定大小的字符串 | 0-255 | |
21 | | varchar | 可变字符串 | 0-65535 | 常用 |
22 | | tinytext | 微型文本 | 2^8 - 1 | |
23 | | text | 文本串 | 2^16 - 1 | 保存大文本 |
24 |
25 |
26 |
27 | ## 时间日期
28 |
29 | | 类型 | 说明 | 长度 | 备注 |
30 | | --------- | ------------------------------ | ---- | ---------------- |
31 | | date | YYYY-MM-DD 日期时间 | | |
32 | | time | HH: mm: ss 时间格式 | | |
33 | | datetime | YYYY-MM-DD HH: mm: ss | | 最常用的时间格式 |
34 | | timestamp | 时间戳，1970.1.1到现在的毫秒数 | | 较为常用 |
35 | | year | 年份表示 | | |
36 |
37 |
38 |
39 | ## null
40 |
41 | * 没有值，未知
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/202007/vue菜单高亮.md:
--------------------------------------------------------------------------------
1 | ## 一. 需求
2 |
3 | 在使用vue写菜单时，需要实现菜单上高亮与当前路由匹配。
4 |
5 |
6 |
7 |
8 |
9 | ## 二. 原生支持
10 |
11 | Vue原生支持菜单高亮，菜单中路由使用`{{ t('message') }}
4 |
8 | 
18 |
19 |
20 |
21 | ## 三. 中庸版
22 |
23 | 相较于上一个方案，可以砸丢丢钱整个OSS，将文件存储在OSS上，毕竟OSS上行流量不收费，如下图所示。
24 |
25 | 
26 |
27 | 那么问题来了，OSS的下行流量不是收费的吗？！
28 |
29 | OK，偷偷告诉各位一个省钱小妙招/狗头，OSS内网的下行流量是不收费的！因此，可以通过后端请求OSS，获取到文件/字符串后，将其以文件流/base64数据的方式返回给前端。这样就避免了下行流量的费用。如下图所示。
30 |
31 | 
32 |
33 | 不过问题又来了，这样就还是占用了后端服务器的资源，依然会是性能的一个瓶颈。
34 |
35 | 
36 |
37 |
38 |
39 | ## 四. 性能版
40 |
41 | 基于上一个方案，可以再升级。砸丢丢钱，拉上CDN这老哥，利用CDN流量代替OSS的下行流量，既能让前端直接请求OSS资源，不占用服务器资源，也降低了成本。如图所示。
42 |
43 | 
44 |
45 | 在优先性能的情况下，该方案是较优的。
46 |
47 | 要说缺点的话，就是CDN配置吧，需要买域名和SSL证书等，不过一次购买，后续使用体验会非常棒。CDN除了可以代替OSS的下行流量外，其优点不要太多，比如说CDN可以文件缓存、可以调度至加速节点等。
48 |
49 | 涉及到OSS的私有Bucket的话，只需要使用CDN的访问控制即可。其也只需要通过后端实现加密，生成文件访问URL给前端直接访问。
50 |
51 | 或许你会存在疑问，看上去挺麻烦的啊！但是看看CDN的价格，你肯定会有不一样的想法的。
52 |
53 | 
--------------------------------------------------------------------------------
/Electron/electron-builder踩坑系列---mac下窗口毛玻璃效果.md:
--------------------------------------------------------------------------------
1 | ## 简介
2 |
3 | 一直觉得毛玻璃样式很炫，而要在`electron`中实现，本来是需要自己去写样式的，我在开发之前也去了解了下，想看看有没有大佬已经实现了，不过确实发现了一个[大佬的仓库](https://github.com/arkenthera/electron-vibrancy)分享了毛玻璃组件，但是其README也提到了官方仓库对于[mac的毛玻璃效果的pr](https://github.com/electron/electron/pull/7898)，然后我去找了官方文档，已经有相关属性了，就很妙啊！
4 |
5 | 但是为什么标题要写“mac下”下呢，因为这个属性只对mac有效。（打工人落泪...）
6 |
7 |
8 |
9 | ## 官方文档
10 |
11 | ### 文档地址
12 |
13 | [https://www.electronjs.org/docs/api/browser-window](https://www.electronjs.org/docs/api/browser-window)
14 |
15 | ### 相关属性
16 |
17 | - `vibrancy` String (可选) - 窗口是否使用 vibrancy 动态效果, 仅 macOS 中有效. Can be `appearance-based`, `light`, `dark`, `titlebar`, `selection`, `menu`, `popover`, `sidebar`, `medium-light`, `ultra-dark`, `header`, `sheet`, `window`, `hud`, `fullscreen-ui`, `tooltip`, `content`, `under-window`, or `under-page`. Please note that using `frame: false` in combination with a vibrancy value requires that you use a non-default `titleBarStyle` as well. Also note that `appearance-based`, `light`, `dark`, `medium-light`, and `ultra-dark` have been deprecated and will be removed in an upcoming version of macOS.
18 |
19 | - `visualEffectState`String (optional) - Specify how the material appearance should reflect window activity state on macOS. Must be used with the`vibrancy`property. 可能的值有
20 | - `followWindow` - 当窗口处于激活状态时，后台应自动显示为激活状态，当窗口处于非激活状态时，后台应自动显示为非激活状态。 This is the default.
21 | - `active` - 后台应一直显示为激活状态。
22 | - `inactive` - 后台应一直显示为非激活状态。
23 |
24 |
25 |
26 | ## 实现
27 |
28 | 有了官方Buff加持，使起来就很方便了。
29 |
30 | ```javascript
31 | // background.js
32 |
33 | let win = new BrowserWindow({
34 | width: 800,
35 | height: 600,
36 | vibrancy: 'dark', // 'light', 'medium-light' etc
37 | visualEffectState: "active" // 这个参数不加的话，鼠标离开应用程序其背景就会变成白色
38 | })
39 | ```
40 |
41 | 实现就是这么简单！
42 |
43 | 小伙伴儿们有兴趣的可以参考下我[这个项目](https://github.com/Kuari/QingKe)，使用的毛玻璃样式。
--------------------------------------------------------------------------------
/202008/Golang使用JSON格式存取Redis.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | 对于`Golang`操作`Redis`，此处使用`github.com/go-redis/redis`。
4 |
5 |
6 |
7 | ## 二. 操作
8 |
9 | ### 1. 连接redis服务器
10 |
11 | ```go
12 | package redis
13 |
14 | import (
15 | "context"
16 | "os"
17 | "time"
18 |
19 | "github.com/go-redis/redis/v8"
20 | jsoniter "github.com/json-iterator/go"
21 | )
22 |
23 | var ctx = context.Background()
24 |
25 | func BaseClient() (rdb *redis.Client) {
26 | redisServer := "redis_server"
27 | port := "redis_port"
28 | password := "redis_password"
29 |
30 | rdb = redis.NewClient(&redis.Options{
31 | Addr: redisServer + ":" + port,
32 | Password: password,
33 | DB: 0,
34 | })
35 |
36 | return
37 | }
38 |
39 |
40 | ```
41 |
42 |
43 |
44 | ### 2.存储
45 |
46 | ```go
47 | func SetJson(key string, value map[string]interface{}, expiration int) (err error) {
48 | rdb := BaseClient()
49 | valueString, _ := jsoniter.MarshalToString(value)
50 | err = rdb.Set(ctx, key, valueString, time.Duration(expiration)*time.Second).Err()
51 | return
52 | }
53 | ```
54 |
55 | * 调用
56 |
57 | ```go
58 | func main() {
59 | value, _ := redis.SetJson("user", map[string]interface{}{
60 | "name": "tom",
61 | "age": 12
62 | }),
63 | 60,
64 | }
65 | ```
66 |
67 |
68 |
69 | ### 3.读取
70 |
71 | ```go
72 | func Get(key string) (value string, err error) {
73 | rdb := BaseClient()
74 | value, err = rdb.Get(ctx, key).Result()
75 | return
76 | }
77 | ```
78 |
79 | * 调用
80 |
81 | ```go
82 | type User struct {
83 | Name string
84 | Age int
85 | }
86 |
87 | func main() {
88 | value, _ := redis.Get("user")
89 |
90 | var user User
91 | json.Unmarshal([]byte(value), &user)
92 |
93 | fmt.Print(user)
94 | }
95 | ```
96 |
97 |
98 |
99 | ## 三. 结语
100 |
101 | 使用`JSON`格式存储与读取其实就是对目标数据在存储前和读取后进行格式转换。
--------------------------------------------------------------------------------
/202206/python3 socket tcp example.md:
--------------------------------------------------------------------------------
1 | ## socket tcp server
2 |
3 | ```python
4 | import socket
5 |
6 |
7 | def socket_tcp_server(server_ip: str = '0.0.0.0', server_port: int = 9000, buffer_size: int = 1024):
8 | """
9 | socket tcp 服务端
10 |
11 | :param server_ip: 服务器的地址, 默认为0.0.0.0, 表示允许所有
12 | :param server_port: 服务器tcp server接收信息的端口, 默认9000
13 | :param buffer_size: 套接字缓冲区大小, 默认1024
14 | :return: none
15 | """
16 | tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
17 | tcp_socket.bind((server_ip, server_port))
18 | tcp_socket.listen(128)
19 | print('服务端开始运行...\n')
20 |
21 | while True:
22 | client, sender_info = tcp_socket.accept()
23 | receive_data = client.recv(buffer_size)
24 | print('客户端地址: {}'.format(sender_info))
25 | print('来自客户端的信息: {}'.format(receive_data.decode('utf-8')))
26 |
27 | # 返回消息
28 | client.send(str.encode('response...'))
29 |
30 |
31 | if __name__ == '__main__':
32 | socket_tcp_server()
33 |
34 | ```
35 |
36 |
37 |
38 | ## socket tcp client
39 |
40 | ```python
41 | import socket
42 |
43 |
44 | def socket_tcp_client_send_message(message: str, server_ip: str, server_port: int, buffer_size: int = 1024):
45 | """
46 | socket tcp 客户端发送消息
47 |
48 | :param message: 消息
49 | :param server_ip: 服务端的ip地址
50 | :param server_port: 服务端的端口号
51 | :return: none
52 | """
53 | tcp_client_socket = socket.socket(family=socket.AF_INET, type=socket.SOCK_STREAM)
54 | tcp_client_socket.connect((server_ip, server_port))
55 | tcp_client_socket.send(str.encode(message))
56 |
57 | response = tcp_client_socket.recv(buffer_size)
58 | print('response : {}'.format(response.decode()))
59 |
60 | tcp_client_socket.close()
61 |
62 |
63 | if __name__ == '__main__':
64 | socket_tcp_client_send_message('hello,world!', '127.0.0.1', 9000)
65 |
66 | ```
67 |
68 |
--------------------------------------------------------------------------------
/202011/flask_restful限制request字段长度.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | 当前产品遇到一个报错，就是接口收到请求没有限制请求字段长度，导致字段长度超过数据库对应字段长度，直接报了500。因此也对此有些新的需求，需要在后端限制请求字段最大长度。
4 |
5 |
6 |
7 | ## 二. 环境
8 |
9 | * **开发语言**：Python 3.7
10 | * **后端框架**：Flask 1.1.1
11 | * **插件**：Flask-RESTful 0.3.8
12 |
13 |
14 |
15 | ## 三. 实现
16 |
17 | ```python
18 | def field_max_limit(max_length):
19 | def validate(s):
20 | if type(s) != str:
21 | raise ValidationError("The field must be String.")
22 |
23 | if len(s) <= max_length:
24 | return s
25 | raise ValidationError("The field cannot exceed %i characters." % max_length)
26 |
27 | return validate
28 |
29 | # 解析请求参数时候验证长度
30 | parse.add_argument('username', type = field_max_limit(5), required = True)
31 | ```
32 |
33 |
34 |
35 | ## 四. 示例
36 |
37 | ```python
38 | from flask import Flask
39 | from flask_restful import Api, Resource, reqparse
40 | from werkzeug.routing import ValidationError
41 |
42 | app = Flask(__name__)
43 | api = Api(app)
44 |
45 |
46 | def field_max_limit(max_length):
47 | def validate(s):
48 | if type(s) != str:
49 | raise ValidationError("The field must be String.")
50 |
51 | if len(s) <= max_length:
52 | return s
53 | raise ValidationError("The field cannot exceed %i characters." % max_length)
54 |
55 | return validate
56 |
57 |
58 | class Login(Resource):
59 |
60 | def post(self):
61 | parse = reqparse.RequestParser()
62 | parse.add_argument('username', type = field_max_limit(5), required = True)
63 | parse.add_argument('password', type = field_max_limit(20), required = True)
64 | args = parse.parse_args()
65 |
66 | print({
67 | 'username': args.username,
68 | 'password': args.password
69 | })
70 |
71 | return {
72 | 'code': 20000
73 | }
74 |
75 |
76 | api.add_resource(Login, '/login')
77 | ```
78 |
79 |
--------------------------------------------------------------------------------
/202106/SwiftUI项目调用生物识别(Touch ID : Face ID).md:
--------------------------------------------------------------------------------
1 | ## 一. 设置权限
2 |
3 | 打开文件`info.plist`，在空白处右击，选择`Add Row`，输入选择`Privacy - Face ID Usage Description`，然后在`value`中写入`我们需要验证您的身份以保护数据`。
4 |
5 | 
6 |
7 |
8 |
9 | ## 二. 代码层面接入
10 |
11 | 打开`ContentView.swift`文件，开始如下操作。
12 |
13 | ### 1. 引入相关库
14 |
15 | ```swift
16 | import LocalAuthentication
17 | ```
18 |
19 |
20 |
21 | ### 2. 创建lock变量
22 |
23 | ```swift
24 | @State private var isUnlocked = false
25 | ```
26 |
27 | `isUnlocked`为是否解锁，`true`表示验证完成，已解锁，`false`表示验证失败，未解锁。
28 |
29 |
30 |
31 | ### 3. 创建函数
32 |
33 | ```swift
34 | func authenticate() {
35 | let context = LAContext()
36 | var error: NSError?
37 |
38 | // 检查生物特征认证是否可用
39 | if context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &error) {
40 | // 可用，所以继续使用它
41 | let reason = "我们需要验证您的身份以保护数据"
42 |
43 | context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: reason) { success, authenticationError in
44 | // 身份验证现已完成
45 | DispatchQueue.main.async {
46 | if success {
47 | // 认证成功，解锁
48 | self.isUnlocked = true
49 | } else {
50 | // 发生的异常
51 | }
52 | }
53 | }
54 | } else {
55 | // 没有生物识别
56 | }
57 | }
58 | ```
59 |
60 |
61 |
62 | ### 4. 根据isUnlocked切换View
63 |
64 | ```swift
65 | VStack {
66 | if self.isUnlocked {
67 | Text("Unlocked")
68 | } else {
69 | Text("Locked")
70 | }
71 | }
72 | .onAppear(perform: authenticate) // 该方法调用生物识别验证函数
73 | ```
74 |
75 |
76 |
77 | ## 三. 审核问题
78 |
79 | 最近提交了ios和macos两个产品到app store，我设置的强制使用生物识别才能进入应用。但是出现的问题是macos的审核过了，而ios的审核没有过，其反馈的问题即为开始的生物识别没有过，审核人员使用的模拟器，根本不存在生物识别。
80 |
81 | 所以跟可能会踩这个坑的小伙伴儿提个醒，目前我还没有好的解决方案，正在等待新的审核中......
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/202006/flask_sqlalchemy一对一、一对多、多对一、多对多.md:
--------------------------------------------------------------------------------
1 | ## 一对多
2 |
3 | ```python
4 | class Country(db.Model):
5 | id = db.Column(db.Integer, primary_key=True)
6 | name = db.Column(db.String(30), unique=True)
7 | capital = db.relationship('Capital', uselist=False)
8 |
9 | class Capital(db.Model):
10 | id = db.Column(db.Integer, primary_key=True)
11 | name = db.Column(db.String(30), unique=True)
12 | country_id = db.Column(db.Integer, db.ForeignKey('country.id'))
13 | country = db.relationship('Country')
14 | ```
15 |
16 |
17 |
18 | ## 一对多
19 |
20 | ```python
21 | class Author(db.Model):
22 | id = db.Column(db.Integer, primary_key=True)
23 | name = db.Column(db.String(70), unique=True)
24 | phone = db.Column(db.String(20))
25 |
26 | class Article(db.Model):
27 | id = db.Column(db.Integer, primary_key=True)
28 | title = db.Column(db.String(50), index=True)
29 | body = db.Column(db.Text)
30 | ```
31 |
32 |
33 |
34 | ## 多对一
35 |
36 | ```python
37 | class Citizen(db.Model):
38 | id = db.Column(db.Integer, primary_key=True)
39 | name = db.Column(db.String(70), unique=True)
40 | city_id = db.Column(db.Integer, db.ForeignKey('city.id'))
41 | city = db.relationship('City')
42 |
43 | class City(db.Model):
44 | id = db.Column(db.Integer, primary_key=True)
45 | name = db.Column(db.String(30), unique=True)
46 | ```
47 |
48 |
49 |
50 | ## 多对多
51 |
52 | ```python
53 | association_table = db.Table('association',db.Column('student_id', db.Integer, db.Foreign)
54 |
55 | class Student(db.Model):
56 | id = db.Column(db.Integer, primary_key=True)
57 | name = db.Column(db.String(70), unique=True)
58 | grade = db.Column(db.String(20))
59 | teachers = db.relationship('Teacher',
60 | secondary=association_table, back_populates='students')
61 |
62 | class Teacher(db.Model):
63 | id = db.Column(db.Integer, primary_key=True)
64 | name = db.Column(db.String(70), unique=True)
65 | office = db.Column(db.String(20))
66 | ```
67 |
68 |
--------------------------------------------------------------------------------
/202104/Grafana+Loki+Docker Driver Client日志收集方案.md:
--------------------------------------------------------------------------------
1 | ## 一. 简介
2 |
3 | 具体日志采集方案在`Grafana+Loki+Promtail日志收集方案`文章中已经介绍过，此处不再重复介绍。不太了解的小伙伴儿赶紧去复习！
4 |
5 | 此处主要是记录下`Docker Driver Client`方式的部署。
6 |
7 |
8 |
9 | ## 二. docker plugin
10 |
11 | ### 1. 安装
12 |
13 | 安装`loki`插件。
14 |
15 | ```bash
16 | docker plugin install grafana/loki-docker-driver:latest --alias loki --grant-all-permissions
17 | ```
18 |
19 | ### 2. 验证
20 |
21 | ```bash
22 | $ docker plugin ls
23 | ID NAME DESCRIPTION ENABLED
24 | ac720b8fcfdb loki Loki Logging Driver true
25 | ```
26 |
27 | ### 3. 开启/禁用
28 |
29 | ```bash
30 | docker plugin enable loki
31 | docker plugin disable loki --force
32 | ```
33 |
34 | ### 4. 卸载
35 |
36 | ```bash
37 | docker plugin rm loki
38 | ```
39 |
40 |
41 |
42 | ## 三. 部署
43 |
44 | ### 1. docker-compose.yml
45 |
46 | ```yaml
47 | version: "3"
48 |
49 | networks:
50 | loki:
51 |
52 | services:
53 | loki:
54 | image: grafana/loki:2.0.0
55 | ports:
56 | - "3100:3100"
57 | command: -config.file=/etc/loki/local-config.yaml
58 | networks:
59 | - loki
60 |
61 | grafana:
62 | image: grafana/grafana:latest
63 | ports:
64 | - "3000:3000"
65 | networks:
66 | - loki
67 | ```
68 |
69 | ### 2. 运行
70 |
71 | ```bash
72 | docker-compose up -d
73 | ```
74 |
75 | ### 3. 容器运行形式
76 |
77 | 容器运行时需要修改`log-driver`：
78 |
79 | ```bash
80 | --log-driver=loki
81 | --log-opt loki-url="http://An animated element
32 | ``` 33 | 34 | ### 4. 动画延迟 35 | 36 | #### 官方方法 37 | 38 | 官方给出的动画延迟是`animate__delay-2s`、`animate__delay-3s` ...... 39 | 40 | 直接在class中添加即可 41 | 42 | ```html 43 |An animated element
44 | ``` 45 | 46 | #### 自定义延迟 47 | 48 | 特殊场景需要使用不同于官方的延迟时间，因此可以自定义延迟时间，直接声明延迟的类，然后在class上加入即可 49 | 50 | ```css 51 | .animation-delay-1 { 52 | animation-delay: 100ms; 53 | } 54 | .animation-delay-2 { 55 | animation-delay: 300ms; 56 | } 57 | .animation-delay-3 { 58 | animation-delay: 500ms; 59 | } 60 | .animation-delay-4 { 61 | animation-delay: 700ms; 62 | } 63 | .animation-delay-5 { 64 | animation-delay: 900ms; 65 | } 66 | ``` 67 | 68 | 使用 69 | 70 | ```html 71 |An animated element
72 |Another animated element
73 | ``` 74 | 75 | 76 | 77 | ## 三. wow.js 78 | 79 | ### 1. 下载 80 | 81 | ``` 82 | pnpm add wow.js -D 83 | ``` 84 | 85 | ### 2. 引入 86 | 87 | 在`vue3`项目的`main.ts`中引入，内容如下: 88 | 89 | ```js 90 | import WOW from 'wow.js' 91 | 92 | new WOW({ 93 | boxClass: 'wow', // 类名，在用户滚动时显示隐藏的框。 94 | animateClass: 'animate__animated', // 触发CSS动画的类名称 95 | offset: 300, // 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达此距离时，隐藏的框会显示出来。 96 | mobile: true, // 在移动设备上打开/关闭WOW.js。 97 | live: true, // 在页面上同时检查新的WOW元素。 98 | }).init() 99 | ``` 100 | 101 | ### 3. 使用 102 | 103 | 使用`wow`直接替代`animate__animated`即可 104 | 105 | ```html 106 |An animated element
107 | ``` 108 | 109 | 110 | 111 | ## 四. 结语 112 | 113 | 由于写一个页面需要使用到wow，好多年没用过了，查了一下文档超多版本教程，使用起来各种不成功，难受...暂时也没找到可替代的方案... 114 | 115 | 116 | 117 | ## 五. 参考文档 118 | 119 | * [wow](https://github.com/graingert/wow) 120 | * [animate css](https://animate.style/) -------------------------------------------------------------------------------- /202403/裸辞后独立开发产品上线五天开始盈利，我是怎么做的？分享我的过程（下）.md: -------------------------------------------------------------------------------- 1 | # 一. 前言 2 | 3 | 裸辞后，我花了一个多月开发我的第一个独立开发产品[RedisMate](https://redismate.hunterji.com/)。其MVP版本上线五天，产品从没有排名，到冲到了国区mac app store开发工具类排名榜的前十，并持续有了几笔收入。 4 | 5 | 那么，我是怎么做的呢？ 6 | 7 | 我是一个正在尝试独立开发的普通程序员，在此跟各位分享我的过程，不仅是我对自己的复盘，还希望能够给一些正在或准备尝试独立开发的兄弟一点参考。所有的过程都是按照我主观的想法去推进执行的，如果有更好的建议，欢迎交流！ 8 | 9 | 本次分享分为上下两篇，分别为产品设计和产品推广。 10 | 11 | 在本篇文章中，跟各位分享下我是如何推广的，准确来说是验证MVP版本。 12 | 13 | 14 | 15 | # 二. 推广之前 16 | 17 | 首先，审视RedisMate产品本身，其是一款专为开发过程中, 简化Redis调试操作而设计的macOS原生GUI应用。 18 | 19 | 那么其目标受众是**用Mac的做后端开发的程序员**， 20 | 21 | 我要推广的地方是**用Mac的做后端开发的程序员聚集的平台**。 22 | 23 | 一开始，我选择使用这个我最熟悉的领域来尝试独立开发，也是因为我就是这个圈子里的人，我认识不少这个圈子的朋友，我可以很方便地推广给我的朋友们，快速验证产品。 24 | 25 | 其次，因为是验证MVP版本，只要小规模推广一下，获取反馈验证产品方向是否正确即可。 26 | 27 | 28 | 29 | # 三. 录制介绍视频 30 | 31 | 看了别的产品的介绍视频，那些音乐、画面和节奏非常惊艳，我感觉我目前没那个能力做出来。 32 | 33 | 所以我做了一个比较朴实和真诚的视频，主要是介绍我的产品，展示其特色的功能。 34 | 35 | 中文视频我直接自己读台词，但是英文视频就直接用ai生成人声后期剪辑上去。 36 | 37 | 我尝试把空白间隙剪辑掉，稍稍加快语速，不断精炼台词和画面，使得视频控制在七八分钟内。 38 | 39 | 40 | 41 | # 四. 落地页 42 | 43 | > Landing Page，也被称作着陆页或落地页，主要用于网络营销和广告活动。它直译为“降落页面”，暗指用户通过点击广告或搜索结果后“降落”的首个页面。 44 | 45 | 我这是第一次接触落地页，别的产品都会强调有一个落地页，但是当时我并没有特别明白落地页在推广中起到什么作用，只是盲目去做了一个落地页。本来想套用模板快速生成一个，但是在没有看到有合适的模板，所以自己根据模板改了一版，保留了介绍文案和视频。 46 | 47 |  48 | 49 | 自认为做得还不错，实际上并没有什么用😭。 50 | 51 | 52 | 53 | # 五. 社区发帖 54 | 55 | 基于上述的**用Mac的做后端开发的程序员聚集的平台**，我首先会想到的是v2ex，这是一个纯粹的程序员社区，并且对于新产品的发布非常友好，大家也都非常热情地参与和反馈，非常适合产品冷启动。 56 | 57 | 其次，我也在reddit等英文社区发了帖子。 58 | 59 | 60 | 61 | # 六. 自媒体 62 | 63 | 不同于v2ex这样的论坛，很多媒体平台比如b站等，是需要靠曝光量才能让更多目标人群看到，所以不可能一发帖就达到论坛那种效果。 64 | 65 | 在这些媒体平台上，要么花钱找相关的博主推广，要么花钱给自己的帖子买曝光量，要么就自己搞吧！ 66 | 67 | 我作为刚起步的独立开发者，尽量以极低成本去验证产品。 68 | 69 | 产品的迭代是一个长期、持续的过程，因此作为独立开发者而言，自己做自媒体，一方面可以持续有稳定曝光量，另一方面可以结识一些志同道合的朋友。 70 | 71 | 因为工作这些年，我也都有在佛系写博客，维护了几个文字类平台，比如知乎、公众号等，所以稍微有一点关注量。 72 | 73 | 然后我同时注册了多个媒体平台，并在开发产品过程中，持续输出，分享一些过程。 74 | 75 | 76 | 77 | # 七. 总结 78 | 79 | 根据推广后的效果而言，v2ex的反馈是最多的，其次是b站。不得不说，这两个平台的网友真的非常热情且友善！ 80 | 81 | 英文社区的推广的效果是挺差的，反馈不多，有兴趣的网友也都不是mac。 82 | 83 | 本次推广中，落地页做得很差，自以为简洁，其实缺少的元素太多，比如产品的特色、产品的定价等等，都需要添加上去。否则比如我这次，遇到最多的问题就是“你这个产品跟xxx有什么不同”。以及落地页本身获取流量等能力也没有去做。这些都是我没有做好的部分，需要后续持续学习和改进。 84 | 85 | 作为验证MVP版本，我觉得这些步骤对我来说是可以了，不仅验证了我的产品，让我第一次跑完独立开发整个流程，还结识了不少志同道合的朋友。 86 | 87 | 88 | 89 | # 八. 后续 90 | 91 | 在推广过程中，有很多细节我欠缺了太多，后来我也有在认真学习理论知识，以及看看大佬们是怎么做的，确实有学到很多。我看到有的大佬还没产品的时候就已经验证完产品且完成预售了，真的太强了...... 92 | 93 | 后续我将单独分享一下我学习到的知识，比如落地页应该应该怎么做、如何更低成本验证产品等等。 94 | 95 | -------------------------------------------------------------------------------- /202003/vue组件props双向绑定.md: -------------------------------------------------------------------------------- 1 | 在vue2中不允许子组件直接修改`props`，为单项数据流，所有若要修改只能通过额外的值，并监听`props`以改变额外的值。 2 | 3 | ## 一. 设置props 4 | 5 | ```javascript 6 | props: { 7 | dialog: { 8 | type: Boolean, 9 | default: false 10 | } 11 | } 12 | ``` 13 | 14 | ## 二. 创建额外的值 15 | 16 | 在`data`中创建一个`localDialog`，其值为`this.dialog`。 17 | 18 | ```javascript 19 | data() { 20 | return { 21 | localDialog: this.dialog 22 | } 23 | } 24 | ``` 25 | 26 | ## 三. 监听 27 | 28 | 保持同步的关键在于需要在子组件内监听`props`，即此处的`dialog`。 29 | 30 | ```javascript 31 | watch: { 32 | dialog(val) { 33 | this.localDialog = val 34 | } 35 | } 36 | ``` 37 | 38 | ## 四. 子组件向父组件传递 39 | 40 | 子组件使用`this.$emit()`即可向父组件传递变化的值。 41 | 42 | ```javascript 43 | methods: { 44 | sendToFather() { 45 | this.$emit('dialogchange', this.localDialog) 46 | } 47 | } 48 | ``` 49 | 50 | ## 五. 父组件调用 51 | 52 | ```html 53 |
73 | justmylife.cc
74 |
75 |
76 |
77 |
78 |
103 | ```
104 |
105 | ### 2. 父组件
106 |
107 | ```javascript
108 |
109 |
6 | 
7 | 
8 |
6 | 7 | ## 二. 常见类型解析 8 | 9 | ### 1. 基本参数 10 | 11 | * 请求 12 | 13 | ```json 14 | { 15 | "username": "kuari", 16 | "info": "heihei" 17 | } 18 | ``` 19 | 20 | * 解析 21 | 22 | ```python 23 | parse = reqparse.RequestParser() 24 | parse.add_argument('username', type = str) 25 | parse.add_argument('info', type = str) 26 | args = parse.parse_args() 27 | ``` 28 | 29 |
30 | 31 | ### 2. 必选参数 32 | 33 | 使用参数`required`。 34 | 35 | * 请求 36 | 37 | ```json 38 | { 39 | "username": "kuari", 40 | "info": "heihei" 41 | } 42 | ``` 43 | 44 | * 解析 45 | 46 | ```python 47 | parse = reqparse.RequestParser() 48 | parse.add_argument('username', type = str, required = True) 49 | parse.add_argument('info', type = str, required = True) 50 | args = parse.parse_args() 51 | ``` 52 | 53 |
54 | 55 | ### 3. 列表[string] 56 | 57 | 使用参数`action = 'append'` 58 | 59 | * 请求 60 | 61 | ```json 62 | { 63 | "username": "kuari", 64 | "info": [ 65 | "handsome", "cheerful", "optimism" 66 | ] 67 | } 68 | ``` 69 | 70 | * 解析 71 | 72 | ```python 73 | parse = reqparse.RequestParser() 74 | parse.add_argument('username', type = str, required = True) 75 | parse.add_argument('info', type = str, action = 'append', required = True) 76 | args = parse.parse_args() 77 | ``` 78 | 79 |
80 | 81 | ### 4. 列表[dict] 82 | 83 | 使用参数`action = 'append'` 84 | 85 | * 请求 86 | 87 | ```json 88 | { 89 | "username": "kuari", 90 | "friends": [ 91 | { 92 | "username": "tom", 93 | "age": 20 94 | }, 95 | { 96 | "username": "jerry", 97 | "age": 20 98 | } 99 | ] 100 | } 101 | ``` 102 | 103 | * 解析 104 | 105 | ```python 106 | parse = reqparse.RequestParser() 107 | parse.add_argument('username', type = str, required = True) 108 | parse.add_argument('info', type = dict, action = 'append', required = True) 109 | args = parse.parse_args() 110 | ``` 111 | 112 |
113 | 114 | ### 5. JSON 115 | 116 | * 请求 117 | 118 | ```json 119 | { 120 | "username": "kuari", 121 | "info": { 122 | "character": "optimism", 123 | "age": 20 124 | } 125 | } 126 | ``` 127 | 128 | * 解析 129 | 130 | ```python 131 | parse = reqparse.RequestParser() 132 | parse.add_argument('username', type = str, required = True) 133 | parse.add_argument('info', type = dict, required = True) 134 | args = parse.parse_args() 135 | ``` 136 | 137 | -------------------------------------------------------------------------------- /202312/程序员如何快速验证业务需求.md: -------------------------------------------------------------------------------- 1 | # 一. 前言 2 | 3 | 设想一个场景： 4 | 5 | 你作为一个程序员，听着攒劲的小曲，写着优雅的代码，加班加点终于写完了迭代中分配的模块需求。然后你跟别的同事一联调，却发现各种问题。 6 | 7 | 你跟同事A说：“你得在这种情况下给我数据A。“ 8 | 9 | 同事A一脸懵逼：“这种情况需求也没写啊，在这种情况下我也没有数据A啊！“ 10 | 11 | 然后你和同事A一起顺着业务流程，找到了负责上层模块的同事B。 12 | 13 | 同事B一脸懵逼：“这个迭代中我没有这个模块的开发需求啊，这种情况下我也没有数据A啊！” 14 | 15 | 然后你和同事A、同事B一起顺着业务流程，找到了负责上层模块的...... 16 | 17 | 最后，你和同事ABC...一起找到了产品，产品一脸懵逼：“那没办法，就改需求吧......” 18 | 19 | 你眼看着所剩无几的迭代时间，生无可恋地掏出手机，发个微信取消了这周末的相亲... 20 | 21 | 22 | 23 | 不知道程序员xdm有没有经历过这样的场景，如果各位程序员xd没有经历过这样的场景，那真的是恭喜你了，且行且珍惜！从毕业后参加工作开始，我是真的经历太多了，太痛了！ 24 | 25 | 我之后不断学习各种方法，尝试去破解这样的困局。虽然说，工作中的问题很多，但是能解决一个是一个，后面再慢慢跟各位分享其他问题中我的解决方案。 26 | 27 | 所以，本篇文章将分享一波关于这类问题我的解决方案。谨代表个人主观观点。 28 | 29 | 30 | 31 | # 二. 痛点 32 | 33 | 需求是用户的痛点，但是在这个场景下，是程序员的痛点... 34 | 35 | 那么，仔细分析一下，这个场景下的痛点，到底是什么呢？我认为是如下三点： 36 | 37 | * 产品给到的需求无法自洽，且场景覆盖不够 38 | * 开发团队的技术评审和技术文档不到位 39 | * 开发各自按照模块开发，忽略外部环境，仅仅当各自开发完成后联调时候才会组装应用，发现问题 40 | 41 | 42 | 43 | 当然，可能有程序员xd会疑问：这种问题不是靠严谨的开发流程就可以避免吗？ 44 | 45 | 理论上来说是这样的，但是以我个人经历而言，不管是大团队还是小团队，总有很多不稳定的因素，比如说迭代周期、协作流程的规范性等等。 46 | 47 | 特别是在创业团队，或者有些项目特别着急的时候，经常是没有足够的时间给到团队的各个角色去充分准备的，甚至为了赶时间，会精简一些环节甚至直接去掉。这种时候出现这种问题导致改需求，往往是非常可怕的，后果也往往是开发团队加班。 48 | 49 | 50 | 51 | # 三. 解决方案 52 | 53 | 我目前发现且实践后效果较好的方案，就是“曳光弹式开发”。 54 | 55 | ## 1. 什么是曳光弹 56 | 57 | 经常关注军事的小伙伴儿，应该了解，曳光弹是一种运用于军事场景的特殊子弹。 58 | 59 | 我们都知道武器发射时需要瞄准，比如枪就通过照门和准星来瞄准，而坦克和装甲车以及飞机都有专用的瞄准具，非常复杂。对于轻武器来说，一般攻击距离都比较近，使用自带的机械瞄准具或者外加的光学瞄准镜都足够，但是在距离稍远的时候瞄准镜显然不够。而对于飞机和战斗机来讲，在空中飞行时飞行姿态变化多样，**有时候进攻的时间很短，需要快速射击并且调整弹道，这时候就需要可以发光的曳光弹。** 60 | 61 | 曳光弹正如其名，可以发光而且指示弹道。曳光弹的结构比一般子弹更加复杂。子弹的弹壳部分和一般子弹一样，前半部分是钢心或者铅心的弹头，但是在后部有一个空腔，一般称作曳光管，里面填充着曳光剂。曳光剂的成分还比较复杂，一般来说主要成分是镁粉和铝镁合金粉，用来燃烧，除此之外还有硝酸锶。这样一来，燃烧的时候硝酸锶就会发出红光。大家平时看到的很多曳光弹还有黄光和绿光，加入钠盐就会发出黄光，而加入铜盐就会发出绿光。除此之外还在表面加入一层过氧化钡，以保证曳光剂被点燃。 62 | 63 | 对于机枪手来说，如果射击距离较远，自然不能选择过于精确的设计方式，也就是说不能靠瞄准具来射击。而一般的机枪主要起压制和面杀伤作用，加入曳光弹就是机枪手更加快速方便的控制弹道，随时变化攻击的方向。如果没有曳光弹的话，射手根本无法发现自己的子弹弹道，也就很难去调整弹道。毕竟枪械射击温度升高之后，弹道会有所变化，不同的弹药不同的枪管也都会改变子弹的弹道，如果仅仅依靠枪械自身的瞄准具去调整反而会适得其反，而曳光弹就很好的解决了这个问题。 64 | 65 | 66 | 67 | ## 2. 在开发中的作用 68 | 69 | 理解曳光弹本身在军事中的作用后，我们再来看曳光弹式开发如何在开发中起作用。 70 | 71 | 开发团队在接手到产品给到的业务需求后，特别是构建一些以前从未做过的东西时，对这个产品/功能的最终成效是模糊的。 72 | 73 | 程序员就像坦克上的机枪手一样，在尝试在黑暗中击中目标。但是如果像文章一开始的时候，大家先埋头写自己的模块，然后再联调，最终发现问题，感觉就像一上战场，大家都朝着各自理解的方向拼命清空弹夹，击中目标的寥寥无几，最后受伤的还是自己。 74 | 75 | 所以，此时，就需要先使用几颗曳光弹，去击中目标，在黑暗中划出轨迹，开发团队再调整方向，对着目标集中火力。 76 | 77 | 78 | 79 | ## 3. 如何应用 80 | 81 | 非常简单！步骤如下： 82 | 83 | 1. 找出级别最高的需求 84 | 2. 以完成最基础的完整功能为目标，从前端到部署，开发一个可以运行的骨架 85 | 3. 最后上相关需求的测试案例 86 | 87 | 这样，射出一颗曳光弹，穿透客户端、后端、数据库、运维、测试等不同层面。一旦击中目标——即符合用户需求，后续的任务便大都是搬砖的活儿，去丰富这个骨架。 88 | 89 | 曳光弹并不是总能击中目标的，中途若是发现未能击中目标，便可在前期以极小成本去调整曳光弹的方向，继续发射曳光弹。 90 | 91 | 如果你要问，什么是“最基础的完整功能”，那么可以这么说，那么举个例子：前端不要任何样式，直接能够满足比如表单功能即可，后端不用任何校验，能够处理和传递数据即可。 92 | 93 | 94 | 95 | # 四. 总结 96 | 97 | 为了解决文章开头的问题，需要使用曳光弹式开发，先开发一个骨架，确认满足需求后，即可继续丰富骨架，完成产品。 98 | 99 | 作为团队的一员，团队的每一个角色都很重要，程序员跟产品也是需要紧密协作，互帮互助，才能使得产品更好，也使得业绩更好。 -------------------------------------------------------------------------------- /Examples/vue_i18n_demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |
34 |
35 |
36 |
46 |
47 |
48 |
64 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_1/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 |-
11 |
- babel 12 |
- router 13 |
- vuex 14 |
- eslint 15 |
- typescript 16 |
Essential Links
18 |-
19 |
- Core Docs 20 |
- Forum 21 |
- Community Chat 22 |
- News 24 |
Ecosystem
26 |-
27 |
- vue-router 28 |
- vuex 29 |
- vue-devtools 30 |
- vue-loader 31 |
- awesome-vue 32 |
3 |
34 |
35 |
36 |
46 |
47 |
48 |
64 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_base/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 |-
11 |
- babel 12 |
- router 13 |
- vuex 14 |
- eslint 15 |
- typescript 16 |
Essential Links
18 |-
19 |
- Core Docs 20 |
- Forum 21 |
- Community Chat 22 |
- News 24 |
Ecosystem
26 |-
27 |
- vue-router 28 |
- vuex 29 |
- vue-devtools 30 |
- vue-loader 31 |
- awesome-vue 32 |
3 |
34 |
35 |
36 |
46 |
47 |
48 |
64 |
--------------------------------------------------------------------------------
/Examples/microFrontend/site_base_optimize/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 |-
11 |
- babel 12 |
- router 13 |
- vuex 14 |
- eslint 15 |
- typescript 16 |
Essential Links
18 |-
19 |
- Core Docs 20 |
- Forum 21 |
- Community Chat 22 |
- News 24 |
Ecosystem
26 |-
27 |
- vue-router 28 |
- vuex 29 |
- vue-devtools 30 |
- vue-loader 31 |
- awesome-vue 32 |
3 |
34 |
35 |
36 |
46 |
47 |
48 |
64 |
--------------------------------------------------------------------------------
/202010/基于python3和js的前后端aes加解密.md:
--------------------------------------------------------------------------------
1 | ## 一. 简述
2 |
3 | 在特定敏感数据的场景需要加密，一开始采用`rsa`加密，但是`rsa`加密对性能要求较高，在解密时候对于数据量限制较大，导致加密传输的数据量上限较低。而采用`Base64`虽然简单明了但是解密过于简单。因此采用折中的对称加密`aes`。
4 |
5 | 而`aes`加密需要前后端加密类型相同，因此此处采用`CTR`，其对加密文本没有长度限制。
6 |
7 |
8 |
9 | ## 二. 前端实现
10 |
11 | ```javascript
12 | let crypto = require("crypto")
13 |
14 | export function aesEncrypted(key, text) {
15 | let iv = Buffer.concat([ crypto.randomBytes(12), Buffer.alloc(4, 0) ])
16 | let cipher = crypto.createCipheriv("aes-128-ctr", key, iv)
17 | return iv.toString('hex') + cipher.update(text, 'utf8', 'hex') + cipher.final('hex')
18 | }
19 | ```
20 |
21 |
22 |
23 | ## 三. 后端实现
24 |
25 | ```python
26 | def aesDecryption(key_: str, de_text: str) -> str:
27 | """
28 | aes解密函数
29 | :param key_: aes的key
30 | :param de_text: aes加密的密文
31 | :return: 解密的文本
32 | """
33 | ct = codecs.decode(de_text.encode(), 'hex')
34 | counter = Counter.new(32, prefix = ct[:12], initial_value = 0)
35 | cipher = AES.new(key_.encode(), AES.MODE_CTR, counter = counter)
36 | return cipher.decrypt(ct[16:]).decode()
37 | ```
38 |
39 |
40 |
41 | ## 四. 示例代码
42 |
43 | ### 前端
44 |
45 | ```javascript
46 | let crypto = require("crypto")
47 |
48 | export function aesEncrypted(key, text) {
49 | let iv = Buffer.concat([ crypto.randomBytes(12), Buffer.alloc(4, 0) ])
50 | let cipher = crypto.createCipheriv("aes-128-ctr", key, iv)
51 | return iv.toString('hex') + cipher.update(text, 'utf8', 'hex') + cipher.final('hex')
52 | }
53 | ```
54 |
55 |
56 |
57 | ### 后端
58 |
59 | ```python
60 | from base64 import b64encode
61 | from Crypto.Cipher import AES
62 | from Crypto.Util import Counter
63 | from random import randint
64 | import codecs
65 | import hashlib
66 |
67 |
68 | def convert_to_md5(info: str) -> str:
69 | """
70 | md5加密
71 | :param info: 需要加密的内容
72 | :return: md5加密密文
73 | """
74 | md5 = hashlib.md5()
75 | md5.update(info.encode('utf-8'))
76 | return md5.hexdigest()
77 |
78 |
79 | def aesCreateKey() -> str:
80 | """
81 | 生成aes加密的key，key的长度必须16位
82 | :return: 返回key的base64密文
83 | """
84 | en_key = convert_to_md5(str(randint(100000, 999999)))[8:-8]
85 | return b64encode(en_key.encode()).decode()
86 |
87 |
88 | def aesDecryption(key_: str, de_text: str) -> str:
89 | """
90 | aes解密函数
91 | :param key_: aes的key
92 | :param de_text: aes加密的密文
93 | :return: 解密的文本
94 | """
95 | ct = codecs.decode(de_text.encode(), 'hex')
96 | counter = Counter.new(32, prefix = ct[:12], initial_value = 0)
97 | cipher = AES.new(key_.encode(), AES.MODE_CTR, counter = counter)
98 | return cipher.decrypt(ct[16:]).decode()
99 | ```
100 |
101 |
102 |
103 | ## 五. 参考文档
104 |
105 | * https://stackoverflow.com/questions/44996742/encrypt-with-node-js-aes-ctr-and-decrypt-with-pycrypto
--------------------------------------------------------------------------------
/Electron/electron-builder踩坑系列---lowdb本地存储.md:
--------------------------------------------------------------------------------
1 | ## 简述
2 |
3 | `electron`应用在开发中，需要存储数据到本地，经历了两个版本，其方案都不太一样。
4 |
5 | 一开始考虑使用cookie，在开发过程中没有任何问题，但是编译之后去使用，发现无法操作cookie。原来在开发中直接js操作的的浏览器的cookie，而在electron中需要交由底层的nodejs去操作本地的cookie，[官方](https://www.electronjs.org/docs/api/cookies)说法是通过`Session`的`cookies`属性来访问`Cookies`的实例。但是我在实践过程中确实没有成功，然后随着需求变化，数据量变大，就直接放弃了这个方案。
6 |
7 | 当时用的`electron`版本是`9.0.0`，之后才用的方案是直接文件存储，即直接`fs`读与写，毫无问题。就是注意配置文件的存放位置。
8 |
9 | 现在再去使用`electron`，版本已经到了`11.0.0`。当我去使用`fs`读写时直接给我报错`fs.writeFile is not a function`，经过一天多的排错和查找，最终放弃该方案，当然我并没有找到原因和解决方案。最后决定使用`lowdb`去实现存储。
10 |
11 |
12 |
13 | ## 官方文档
14 |
15 | ### Github仓库
16 |
17 | [https://github.com/typicode/lowdb](https://github.com/typicode/lowdb)
18 |
19 | ### 官方介绍
20 |
21 | Small JSON database for Node, Electron and the browser. Powered by Lodash. ⚡
22 |
23 |
24 |
25 | ## 实现
26 |
27 | ### 安装
28 |
29 | ```bash
30 | npm install lowdb
31 | ```
32 |
33 | ### 增删改查实例
34 |
35 | ```javascript
36 | const low = require('lowdb')
37 | const FileSync = require('lowdb/adapters/FileSync')
38 |
39 | const adapter = new FileSync('db.json')
40 | const db = low(adapter)
41 |
42 | // 默认初始化配置文件中
43 | db.defaults({ posts: [], user: {}, count: 0 })
44 | .write()
45 |
46 | // 增
47 | db.get('posts')
48 | .push({ id: 1, title: 'lowdb is awesome'})
49 | .write()
50 |
51 | // 删
52 | db.get('posts')
53 | .remove({ title: 'low!' })
54 | .write()
55 |
56 | // 改
57 | db.set('user.name', 'typicode')
58 | .write()
59 |
60 | // 查
61 | db.get('posts[0].title')
62 | .value()
63 | ```
64 |
65 | ### 加密
66 |
67 | 比较重要的是，`lowdb`本身支持对于配置文件的加密，但是需要自己去实现写加解密的函数。
68 |
69 | ```javascript
70 | const adapter = new FileSync('db.json', {
71 | serialize: (data) => encrypt(JSON.stringify(data)),
72 | deserialize: (data) => JSON.parse(decrypt(data))
73 | })
74 | ```
75 |
76 | 如下加解密方式可以参考下：
77 |
78 | ```javascript
79 | const algorithm = "aes-256-ctr";
80 | const ENCRYPTION_KEY = "{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 |-
11 |
- babel 12 |
- router 13 |
- vuex 14 |
- eslint 15 |
- typescript 16 |
Essential Links
18 |-
19 |
- Core Docs 20 |
- Forum 21 |
- Community Chat 22 |
- News 24 |
Ecosystem
26 |-
27 |
- vue-router 28 |
- vuex 29 |
- vue-devtools 30 |
- vue-loader 31 |
- awesome-vue 32 |
39 |
41 |
42 |
43 |
54 |
55 | ```
56 |
57 |
58 |
59 |
60 |
61 | ## 四. iPhone
62 |
63 | ### 1. 限制
64 |
65 | 在`ios`上限制有两条：
66 |
67 | * h5必须是`https`协议的
68 | * 必须用户点击授权才可以调用`devicemotion`
69 |
70 | ### 2. 授权
71 |
72 | ```javascript
73 | function getPermission() {
74 | if (
75 | typeof window.DeviceMotionEvent !== 'undefined' &&
76 | typeof window.DeviceMotionEvent.requestPermission === 'function'
77 | ) {
78 | window.DeviceMotionEvent.requestPermission()
79 | .then(function(state) {
80 | if ('granted' === state) {
81 | //用户同意授权
82 |
83 | } else {
84 | //用户拒绝授权
85 | alert('摇一摇需要授权设备运动权限,请重启应用后,再次进行授权!')
86 | }
87 | })
88 | .catch(function(err) {
89 | alert('error: ' + err)
90 | })
91 | }
92 | }
93 | ```
94 |
95 | 直接调用该函数请求授权会导致报错：
96 |
97 | ```bash
98 | error: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt
99 | ```
100 |
101 | 需要用户主动去请求授权，因此此处需要将调用放到比如一个按钮上，让用户去点击请求授权。
102 |
103 | ```html
104 |
105 | ```
106 |
107 | ### 3. 全部代码
108 |
109 | ```html
110 |
111 |
112 |
113 |
114 | 摇一摇
40 |
118 |
119 |
120 |
121 |
122 |
123 |
158 |
159 | ```
160 |
161 |
162 |
163 |
--------------------------------------------------------------------------------
/202012/gin中间件和鉴权.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | `gin`的中间件的使用场景非常广泛，此处主要介绍如何使用其来完成常见场景下的鉴权。
4 |
5 |
6 |
7 | ## 二. 官方文档
8 |
9 | 官方文档列出了如下几种使用方式：
10 |
11 | * [使用中间件](https://github.com/gin-gonic/gin#using-middleware)
12 | * [定制中间件](https://github.com/gin-gonic/gin#custom-middleware)
13 | * [使用基础认证的中间件](https://github.com/gin-gonic/gin#using-basicauth-middleware)
14 | * [中间件使用协程](https://github.com/gin-gonic/gin#goroutines-inside-a-middleware)
15 |
16 |
17 |
18 | ## 三. 不同场景的鉴权实现
19 |
20 | ### 1. api key
21 |
22 | 对于`api key`的方式需要设置白名单，对白名单外的请求进行`token`检测。此中间件在处理请求被处理之前对请求进行拦截，验证token，因此可在此处利用`gin.Context`来设置上下文，如请求所属用户的用户信息等。
23 |
24 | ```go
25 | package middleware
26 |
27 | import (
28 | "fmt"
29 | "net/url"
30 | "strings"
31 |
32 | "github.com/gin-gonic/gin"
33 | )
34 |
35 | func whiteList() map[string]string {
36 | return map[string]string{
37 | "/ping": "GET",
38 | }
39 | }
40 |
41 | func withinWhiteList(url *url.URL, method string) bool {
42 | target := whiteList()
43 | queryUrl := strings.Split(fmt.Sprint(url), "?")[0]
44 | if _, ok := target[queryUrl]; ok {
45 | if target[queryUrl] == method {
46 | return true
47 | }
48 | return false
49 | }
50 | return false
51 | }
52 |
53 | func Authorize() gin.HandlerFunc {
54 | return func(c *gin.Context) {
55 |
56 | type QueryToken struct {
57 | Token string `binding:"required,len=3" form:"token"`
58 | }
59 |
60 | // 当路由不在白名单内时进行token检测
61 | if !withinWhiteList(c.Request.URL, c.Request.Method) {
62 | var queryToken QueryToken
63 | if c.ShouldBindQuery(&queryToken) != nil {
64 | c.AbortWithStatusJSON(200, gin.H{
65 | "code": 40001,
66 | })
67 | return
68 | }
69 |
70 | c.Set("role", "user")
71 | }
72 |
73 | c.Next()
74 | }
75 | }
76 |
77 | ```
78 |
79 |
80 |
81 | ### 2. 路由权限
82 |
83 | #### 1）说明
84 |
85 | 对于请求的处理，需要去验证是否对其请求的路径拥有访问权限。
86 |
87 | 首先看一下`gin`的路由设置：
88 |
89 | ```go
90 | func (group *RouterGroup) POST(relativePath string, handlers ...HandlerFunc) IRoutes
91 | ```
92 |
93 | 其参数为`...HandlerFunc`，其解释为：
94 |
95 | ```go
96 | type HandlerFunc func(*Context)
97 | HandlerFunc defines the handler used by gin middleware as return value.
98 | ```
99 |
100 | 所以此处可以通过定制中间件的方式实现一个路由权限处理。
101 |
102 | 当然此处的权限处理比较简单，使用角色直接去判断权限。如分为两个角色，管理员`admin`和普通用户`user`。
103 |
104 | 不过此处实现有个前提条件，就是如何拿到用户的角色呢？此处需要在上一步（`api key`）的实现中加上利用`gin.Context`设置角色：
105 |
106 | ```go
107 | c.Set("role", "admin") // 可见上一步的代码，当然此处只是为了演示设置固定值
108 | ```
109 |
110 | 然后在中间件中拿到角色并进行判断。
111 |
112 |
113 |
114 | #### 2）路由权限中间件
115 |
116 | ```go
117 | package middleware
118 |
119 | import (
120 | "errors"
121 | "fmt"
122 |
123 | "github.com/gin-gonic/gin"
124 | )
125 |
126 | func Permissions(roles []string) gin.HandlerFunc {
127 | return func(c *gin.Context) {
128 |
129 | permissionsErr := func() error {
130 |
131 | // 获取上下文中的用户角色
132 | roleValue, exists := c.Get("role")
133 | if !exists {
134 | return errors.New("获取用户信息失败")
135 | }
136 | role := fmt.Sprint(roleValue)
137 |
138 | // 判断请求的用户的角色是否属于设定角色
139 | noAccess := true
140 | for i := 0; i < len(roles); i++ {
141 | if role == roles[i] {
142 | noAccess = false
143 | }
144 | }
145 | if noAccess {
146 | return errors.New("权限不够")
147 | }
148 |
149 | return nil
150 |
151 | }()
152 | if permissionsErr != nil {
153 | c.AbortWithStatusJSON(200, gin.H{
154 | "code": 40001,
155 | })
156 | return
157 | }
158 |
159 | c.Next()
160 | }
161 | }
162 |
163 | ```
164 |
165 |
166 |
167 | #### 3）使用
168 |
169 | 在设置路由时候，添加该中间件，并设置白名单。
170 |
171 | ```go
172 | r.POST("/todo", middleware.Permissions([]string{"admin"}), views.AddTodo) // 添加中间件将会验证角色
173 | r.PUT("/todo", views.ModifyTodo) // 未添加中间件则不会验证角色
174 | ```
175 |
176 |
--------------------------------------------------------------------------------
/202002/vue2实现实时生成二维码和将网页合成图片并在微信内置浏览器长按保存.md:
--------------------------------------------------------------------------------
1 | ## 一. url转为二维码
2 |
3 | ### 1. 需要的库
4 |
5 | [qrcodejs2](https://www.npmjs.com/package/qrcodejs2)
6 |
7 | ### 2. 安装
8 |
9 | ```bash
10 | npm install qrcodejs2 --save
11 | ```
12 |
13 | ### 3. 引入
14 |
15 | ```javascript
16 | import QRCode from "qrcodejs2"
17 | ```
18 |
19 | ### 4. 实现
20 |
21 | ```vue
22 |
23 |
24 |
25 |
26 |
27 |
28 |
49 | ```
50 |
51 |
52 |
53 | ## 二. 网页保存为图片
54 |
55 | ### 1. 需要的库
56 |
57 | [html2canvas](https://github.com/hongru/canvas2image)
58 |
59 | ### 2. 安装
60 |
61 | ```bash
62 | npm install html2canvas --save
63 | ```
64 |
65 | ### 3. 引入
66 |
67 | ```javascript
68 | import html2canvas from "html2canvas"
69 | ```
70 |
71 | ### 4. 实现
72 |
73 | ```vue
74 |
75 |
76 |
77 |
78 |
79 |
80 |
99 | ```
100 |
101 |
102 |
103 | ## 三. 整合
104 |
105 | 关于小程序内置浏览器的图片下载，需要一个用来生成图片的块，还需要一个`img`，先将其隐藏。实现步骤就是首先生成二维码，然后再将html生成图片，最后在html2canvas回调中替换`img`的`src`，并将生成图片的块隐藏，将`img`显示。
106 |
107 | 当然关于这个实现方式，我看到的技术分享文章中，还有两种不同的解决方式：
108 |
109 | * 不需要html来写生成图片的块，而是使用js直接创建；
110 | * 不需要替换隐藏，将生成的图片覆盖到html生成图片的块之前；
111 |
112 | 这里我只记录一下我使用的，后期会再去研究这两种实现方式。
113 |
114 | ```vue
115 |
116 |
117 |
118 |
127 |
128 |
129 |
170 |
171 |
177 | ```
178 |
179 | 由此即可实现需要的功能了。
180 |
181 | 关于后续的优化，需要解决的图片清晰度问题、跨域图片问题等，可以参考[这篇文章](https://segmentfault.com/a/1190000011478657)，这位大佬写得很详细。
182 |
183 |
--------------------------------------------------------------------------------
/202110/你是个成熟的代码要学会自己按需引入了.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | 前端小伙伴儿们是不是经常遇到ui组件全局引入导致体积太大，按需引入导致不断手写会很麻烦。所以，当当！今天我们来让代码自己按需引入，解放前端小伙伴儿们的生产力，早日实现下班自由！（甲方：我要再改十个需求！）
4 |
5 |
6 |
7 | ## 二. 介绍
8 |
9 | 我们这里介绍的是`unplugin-vue-components`。该组件是由vue核心开发成员antfu开发的，尤大也是推荐的，且是该项目的金牌赞助商。
10 |
11 | 该组件主要是为了实现vue项目的组件自动引入。
12 |
13 | 官方文档：[antfu/unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
14 |
15 |
16 |
17 | ## 三. 完整案例
18 |
19 | 此处我们以vite为例，来主要看一下其对于自定义组件和UI库组件的自动按需引入。
20 |
21 | 源码：[https://github.com/Kuari/Blog/tree/master/Examples/unplugin_auto_import](https://github.com/Kuari/Blog/tree/master/Examples/unplugin_auto_import)
22 |
23 |
24 |
25 | ### 1. 创建项目
26 |
27 | ```bash
28 | yarn create vite unplugin_auto_import --template vue
29 | ```
30 |
31 | 然后进入文件夹安装依赖。
32 |
33 | ```bash
34 | cd unplugin_auto_import
35 | yarn install
36 | ```
37 |
38 | ### 2. 安装unplugin-vue-components
39 |
40 | ```bash
41 | yarn add -D unplugin-vue-components
42 | ```
43 |
44 | ### 3. 配置vite.config.js
45 |
46 | ```javascript
47 | import { defineConfig } from 'vite'
48 | import vue from '@vitejs/plugin-vue'
49 | import Components from 'unplugin-vue-components/vite' // 新增
50 |
51 | // https://vitejs.dev/config/
52 | export default defineConfig({
53 | plugins: [
54 | vue(),
55 | Components({ /* options */ }) // 新增
56 | ]
57 | })
58 | ```
59 |
60 | ### 4. 自动引入自定义组件
61 |
62 | 我们默认模板创建的项目中，默认在`App.vue`中引入了`./components/HelloWorld.vue`。此处就可以来尝试下如何自动引入了。
63 |
64 | 在配置了`unplugin-vue-components`之后，现在只需要删除引入行（其实这时候打开vscode就会发现改行已经灰掉了），被删除行如下所示：
65 |
66 | ```javascript
67 | import HelloWorld from './components/HelloWorld.vue'
68 | ```
69 |
70 | 删除以后完整`App.vue`如下所示：
71 |
72 | ```vue
73 |
75 |
76 |
77 |
119 | ![生成的图片]()
120 |
121 |
122 |
123 |
124 |
126 | 长按识别二维码
125 |
78 | 
96 |
97 | ### 5. 自动引入UI库组件
98 |
99 | 这里以element plus为例。
100 |
101 | 首先是安装`element plus`。官方文档也没说要装，我还以为内置呢，一直报错，有点懵逼，哈哈。
102 |
103 | ```bash
104 | yarn add -D element-plus
105 | ```
106 |
107 | 引入element plus的resolver，此处编辑vite.config.js文件，修改后如下所示：
108 |
109 | ```javascript
110 | import { defineConfig } from 'vite'
111 | import vue from '@vitejs/plugin-vue'
112 | import Components from 'unplugin-vue-components/vite'
113 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 引入ElementPlusResolver
114 |
115 | // https://vitejs.dev/config/
116 | export default defineConfig({
117 | plugins: [
118 | vue(),
119 | Components({resolvers: [ElementPlusResolver()]}) // 添加配置
120 | ]
121 | })
122 | ```
123 |
124 | 那么现在神奇的事情来了，就可以直接使用UI库的组件了！
125 |
126 | 我们在`App.vue`中使用一个`el-button`组件试试。我们在`App.vue`中加入如下行：
127 |
128 | ```vue
129 |
137 | 
145 |
146 | ### 6. 打包
147 |
148 | 按需引入的功能并不是仅仅在开发时候的，在打包时，该组件也是Tree-shakable的，只会将你用了的组件打包。
149 |
150 | 按照当前教程所写的项目，当全局引入的时候，打包的dist文件夹为1.1MB，而使用该组件之后打包，其dist文件夹为202KB。
151 |
152 |
153 |
154 | ## 四. 最后
155 |
156 | 手动按需导入是不可能手动按需导入的，这辈子都不可能了/狗头。
157 |
158 | 毕竟是大佬开发的强力工具，希望前端小伙伴儿们早日实现下班自由。
--------------------------------------------------------------------------------
/202011/gin的http单元测试.md:
--------------------------------------------------------------------------------
1 | ## 一. 前言
2 |
3 | Go 标准库专门提供了 `net/http/httptest` 包专门用于进行 http Web 开发测试。
4 |
5 | 此处基于gin来实现http的单元测试。
6 |
7 |
8 |
9 | ## 二. GET请求
10 |
11 | 此处使用http单元测试对`/ping`请求测试，其正常会返回字符串`pong`，响应码为`200`。
12 |
13 | ### web应用
14 |
15 | ```go
16 | package main
17 |
18 | func setupRouter() *gin.Engine {
19 | r := gin.Default()
20 | r.GET("/ping", func(c *gin.Context) {
21 | c.String(200, "pong")
22 | })
23 | return r
24 | }
25 |
26 | func main() {
27 | r := setupRouter()
28 | r.Run(":8080")
29 | }
30 | ```
31 |
32 | ### http单元测试
33 |
34 | ```go
35 | package main
36 |
37 | import (
38 | "net/http"
39 | "net/http/httptest"
40 | "testing"
41 |
42 | "github.com/stretchr/testify/assert"
43 | )
44 |
45 | func TestPingRoute(t *testing.T) {
46 | router := setupRouter()
47 |
48 | // 创建http server并发起请求
49 | w := httptest.NewRecorder()
50 | req, _ := http.NewRequest("GET", "/ping", nil)
51 | router.ServeHTTP(w, req)
52 |
53 | assert.Equal(t, 200, w.Code) // 断言响应码为200
54 | assert.Equal(t, "pong", w.Body.String()) // 断言响应为"pong"
55 | }
56 | ```
57 |
58 |
59 |
60 | ## 三. POST/PUT/DELETE请求
61 |
62 | post、put、delete请求处理相似，都是处理其request body，因此此处只以post为例。
63 |
64 | 此处对`/todo`进行测试，其正常返回为`json`，其中`code`为`20000`，响应码为`200`。
65 |
66 | ### web应用
67 |
68 | ```go
69 | package main
70 |
71 | func setupRouter() *gin.Engine {
72 | r := gin.Default()
73 | r.POST("/todo", func(c *gin.Context) {
74 | type ToDo struct {
75 | TodoId int `binding:"required" json:"todo_id"`
76 | }
77 |
78 | var todo ToDo
79 | if err := c.ShouldBindJSON(&todo); err != nil {
80 | c.JSON(400, gin.H{
81 | "message": "参数不全",
82 | })
83 | return
84 | }
85 |
86 | // 处理代码，此处以打印为例，省略处理...
87 | fmt.Println(todo.TodoId)
88 |
89 | c.JSON(200, gin.H{
90 | "code": 20000,
91 | })
92 |
93 | })
94 | return r
95 | }
96 |
97 | func main() {
98 | r := setupRouter()
99 | r.Run(":8080")
100 | }
101 | ```
102 |
103 | ### http单元测试
104 |
105 | ```go
106 | package main
107 |
108 | func TestTodoCreate(t *testing.T) {
109 |
110 | // 请求方法
111 | method := "POST"
112 | // 请求路由
113 | urlStr := "/todo"
114 | // request body
115 | body := map[string]interface{}{
116 | "title": "hello",
117 | }
118 |
119 | jsonByte, _ := json.Marshal(body)
120 | req := httptest.NewRequest(method, tc.urlStr, bytes.NewReader(jsonByte))
121 | w := httptest.NewRecorder()
122 | router := routers.SetupRouter()
123 | router.ServeHTTP(w, req)
124 |
125 | assert.Equal(t, 200, w.Code) // 判断响应码
126 |
127 | var response map[string]int
128 | json.Unmarshal([]byte(w.Body.String()), &response)
129 |
130 | value, exits := response["code"]
131 | assert.True(t, exits)
132 | assert.Equal(t, 20000, value) // 判断自定义状态码
133 | }
134 | ```
135 |
136 |
137 |
138 | ## 四. 封装测试请求
139 |
140 | 由于http单元测试代码中存在较多重复，因此此处封装重复代码。
141 |
142 | ```go
143 | package tests
144 |
145 | type TestConfig struct {
146 | Url string
147 | Method string
148 | Body interface{}
149 | }
150 |
151 | func (tc *TestConfig) Request() *httptest.ResponseRecorder {
152 |
153 | var req *http.Request
154 | if tc.Body != nil {
155 | jsonByte, _ := json.Marshal(tc.Body)
156 | req = httptest.NewRequest(tc.Method, tc.Url, bytes.NewReader(jsonByte))
157 | } else {
158 | req = httptest.NewRequest(tc.Method, tc.Url, nil)
159 | }
160 |
161 | w := httptest.NewRecorder()
162 | router := routers.SetupRouter()
163 | router.ServeHTTP(w, req)
164 | return w
165 | }
166 | ```
167 |
168 |
169 |
170 | ## 五. 封装后的单元测试
171 |
172 | 此处以post请求为例。
173 |
174 | ```go
175 | package main
176 |
177 | func TestAddTag(t *testing.T) {
178 | // 新增tag
179 | var addTestConfig tests.TestConfig
180 | addTestConfig.Method = "POST"
181 | addTestConfig.Url = "/tag"
182 | addTestConfig.Body = map[string]string{
183 | "tag_name": "HelloHello",
184 | }
185 |
186 | w := addTestConfig.Request()
187 | assert.Equal(t, 200, w.Code)
188 |
189 | var addResponse map[string]int
190 | json.Unmarshal([]byte(w.Body.String()), &addResponse)
191 |
192 | value, exits := addResponse["code"]
193 | assert.True(t, exits)
194 | assert.Equal(t, 20000, value)
195 |
196 | lastInsertTagId, exits := addResponse["tag_id"]
197 | assert.True(t, exits)
198 | }
199 | ```
200 |
201 |
--------------------------------------------------------------------------------