S3 Browser连接到MINIO API(9000端口)，使用MOVE等功能报403 Forbidden，一开始以为是Buckets或Access Keys的权限问题，后经测试无果，查看日志发现原来是NGINX报的403，测试了各种NGINX反代配置（包括MINIO官方NGINX反代配置）还是报403，后经google发现OpenResty反代MinIO的API端口无法进行上传等操作这个issues

因反代缓存将HEAD请求转换为GET请求进行缓存，导致HEAD请求403从而引发问题点

解决方法只需在NGINX反代配置中加入proxy_cache_convert_head off;

以下是结合官方推荐配置解决方案：

location / {
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;

      proxy_connect_timeout 300;
      # Default is HTTP/1, keepalive is only enabled in HTTP/1.1
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      chunked_transfer_encoding off;
      proxy_cache_convert_head off; # 解决403 Forbidden

      proxy_pass http://127.0.0.1:9000;
}

enjoy life

2024.3.29

老版本win客户端已拒绝登录，官方回应win7唯一的选择只能使用Web客户端

Legacy version will stop working / windows 7

Evernote自动升级后win7打开报错关键字：GetPackageFamilyName 动态链接 Kernel32.dll

逛Evernote官方论坛获知最新版本不再支持win7。

下载Evernote官方版本v10.56.8重新安装可以继续在Win7上使用

禁用Evernote自动升级更新

打开C:\Users\[your_username]\AppData\Local\Programs\Evernote\resources\app-update.yml把里面的全部内容注释掉

由于官方升级文档太一言难尽，而且自己项目基本就只用到GraphQL功能，所以自己尝试适合项目的简单升级迁移方法。

我是从v3最新版本v3.6.11升级到v4.7.1v4.8.2，理论上v3.x到v3.6期间升级版本之间没有结构性的重大变动用这方法直接升级到v4也是可行的。。。

由于在Strapi v4中REST和GraphQL响应结构的处理方式发生重大变化,意味着原来项目里所有请求和响应方式已经不适用，建议先去看看Strapi v4关于REST和GraphQL复杂响应结构的讨论，再衡量是否需要升级。

扁平化REST解决方案：strapi-plugin-transformer
扁平化GraphQL解决方案：Strapi Offcial GraphQL plugin Modify

转移api相关文件数据

首先安装个最新版本的strapi看看到底新架构是咋样的

复制一个老数据库让strapi v4生成项目时使用

发现strapi4生成数据时会清除现有数据库所有不相关的表，所以其实新建一个空数据库就可以。。。

启动项目设置好管理员后，直接使用模型构建器新建一个原项目相关字段的model

之后查看他生成的相关api文件

复制一份test目录把里面相关test字眼全部改名为原有的表feedback
再把V3项目文件\api\feedback\models\feedback.settings.json里的attributes对象复制过来

这里img字段与v3不同，用回v4的格式。你用到什么格式自己在v4生成对比一下。

尝试启动项目发现报错

Error: The key of the content-type should be the same as its singularName. Found test and feedback.

看来没有这么简单嘛，检查Strapi v4生成的数据表发现建model是有数据写入相关字段的，也就是说不能简单地新建几个文件就能自动创建并调用到数据，翻阅了一下相关文档，发现了CLI命令strapi generate

yarn strapi generate
yarn run v1.22.19
$ strapi generate
? Strapi Generators (Use arrow keys)
> api - Generate a basic API
  controller - Generate a controller for an API
  content-type - Generate a content type for an API
  plugin - Generate a basic plugin
  policy - Generate a policy for an API
  middleware - Generate a middleware for an API
  migration - Generate a migration
(Move up and down to reveal more choices)

初时使用strapi generate api生成v4的model相关文件，再把v3api\feedback\config\routes.json里的routes对象数组复制到v4有注释对应的地方

module.exports = {
  routes: [
    // {
    //  method: 'GET',
    //  path: '/feedback',
    //  handler: 'feedback.exampleAction',
    //  config: {
    //    policies: [],
    //    middlewares: [],
    //  },
    // },
  ],
};

启动发现报错

error: Error creating endpoint GET /feedbacks: Handler not found "feedback.find"

google到官方相关issues

把routes、controllers、services里文件参照test生成的写法对应复制过来再把test字眼替换成feedback就成功启动了

如果你生成表后把原来数据备份复盖回生成的表里，记得添加v4新增的两个字段updated_by_id和created_by_id，否则会有以下报错

error: select `t0`.*, `t0`.`created_by_id`, `t0`.`id`, `t0`.`updated_by_id` from `feedback` as `t0` order by `t0`.`content` ASC limit 10 - ER_BAD_FIELD_ERROR: Unknown column 't0.created_by_id' in 'field list'
Error: ER_BAD_FIELD_ERROR: Unknown column 't0.created_by_id' in 'field list'

直接使用strapi generate content-type生成modle相关文件

yarn strapi generate
yarn run v1.22.19
$ strapi generate
? Strapi Generators content-type - Generate a content type for an API
? Content type display name feedback
? Content type singular name feedback
? Content type plural name feedbacks
? Please choose the model type Collection Type
? Use draft and publish? No
? Do you want to add attributes? No
You won't be able to manage entries from the admin, you can still add attributes later from the content type builder.
? Where do you want to add this model? Add model to an existing API
? Which API is this for? feedback
? Bootstrap API related files? Yes
√  ++ \api\feedback\content-types\feedback\schema.json
√  ++ \api\feedback\routes\feedback.js
√  ++ \api\feedback\controllers\feedback.js
√  ++ \api\feedback\services\feedback.js

转移uploads相关文件数据

v3、v4的public\uploads都是一样的，复制粘贴过去即可

uploads对应的表

使用Navicat导出你v3对应的表数据

在v4对应表导入，这里注意改一下从第一个数据行导入

对应好导入数据的相关字段并设置好主键，你哪些字段有数据就对应哪些，没有数据可以跳过

至此其实基本没什么问题可以使用了，如果你还有很多自定义修改需要转移，可以尝试本思路并参考官网文档转移。

结语

最后我决定放弃升级到最新版本，因为在Strapi v4中，GraphQL模式的定义方式已经发生了变化。也就是说就算把请求数据返回到扁平模式，但以前v3所有定义好的Filters在v4中已经不适用，要么在所有项目上改Filters，要么自己重写v4 GraphQL定义, 尝试了两项修改对于我来说都是极度耗费时间的，并且这种修改对我来说也没什么意义，官方明显表示近期不会有任何v4回到v3格式的任何支持和过渡方案，不过不得不说Strapi v4在很多方面的确比v3优化完善了很多！

PS：严重鄙视Strapi这种对于老用户没有任何过渡方案的升级方式！！！

一直没有单独安装使用过dotenv这个库，一般常用框架都内置集成好了，直接照着样例写.env即可。

最近因开发一个nodejs小应用踩上这个坑，在win7环境调试一切正常，换CentOS7环境出问题。。。

我的.env配置：

# env常量
HOST = 192.168.167.167
PORT = 3306
USER = wtf
PASSWORD = wtf2

在win7环境中成功连接mysql，在CentOS7服务器上一直报

Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'192.168.168.168' (using password: YES)

# 省略...

code: 'ER_ACCESS_DENIED_ERROR',
errno: 1045,
sqlMessage: "Access denied for user 'root'@'192.168.168.168' (using password: YES)",
sqlState: '28000',
fatal: true

尝试不用.env直接在源码上写mysql配置信息成功连接？！怀疑是不是dotenv读取不到配置信息，使用console.log(require('dotenv').config())打印出来的配置也是正确的

// require('dotenv').config() 返回结果
{
  parsed: {
    HOST: '192.168.167.167',
    PORT: '3306',
    USER: 'wtf',
    PASSWORD: 'wtf2'
  }
}

初想会不会是常量命名问题？可天真的我认为这个可能性很小，没有尝试继而到google、github上寻找答案。

一轮骚操作下来还是没有获取到可用信息（这问题该怎么描述关键字搜索-_-|||）

一样的配置win7能连上，CentOS7不行？系统环境问题？可打印出来信息又没错鸭？！！

一怒之下把一个个.env里的常量打印出来，结果。。。

console.log(process.env.HOST)
console.log(process.env.PORT)
console.log(process.env.USER)
console.log(process.env.PASSWORD)

// 输出结果
192.168.167.167
3306
root
wtf2

怎么process.env.USER变成root了？查process.env发现真有一个USER命名的用户环境对象,估计在CentOS7环境里dotenv是复盖不了用户环境对象导致的。。。

# 加上DB_前缀解决命名对象冲突问题
DB_HOST = 192.168.167.167
DB_PORT = 3306
DB_USER = wtf
DB_PASSWORD = wtf2

还是不能太贪图精简，乖乖学各位大佬加个前缀。。。

避坑指南

.env里常量的命名还是尽量带上阁下独特的前缀，例如：WTF_USER

enjoy life

原由

最近网站被所谓的烈马团队攻击（伪墙？），指向境外的域名被DNS污染，指向国内的域名被劫持，尝试了什么cloudflare ip轮询（一开始每分钟切换ip时不时还能访问，但很快又被污染，很不稳定），用了什么无视假墙攻击的CDN（没用收费的，价格贼贵而且没试用，估计域名被污染也没什么鸟用，免做冤大头）最后还是没能解决。。。

好吧，近段时间搞到各路站长满城风雨的假墙攻击居然还能弄到我这小站长头上，既然污染无解索性更换域名（俺有权重的域名早已备案回国做301），当然首要解决的就是国内权重域名被劫持问题。

免费版的DNSPOD安全性也太差了吧，随随便便就能给人劫持！？还是被GFW影响的问题？

因为一直在用DNSPOD免费的DNS服务，而它的DNSSEC功能是付费才能使用，二话不说搞了款个人专业版，把DNSSEC安排上，先将劫持的问题处理掉，再把被污染的老域名接回cloudflare的NS，还可以用上cloudflare的免费DNSSEC功能。

DNSSEC不能解污染，仅是cloudflare的NS境外用户能正确解析到才顺便用上，因为当时测试接入 DNSPOD的NS指向CF节点发现境外很多都已经解析不到（现在细想可能是当时启用了DNSSEC功能没配置好）

新域名刚开始也配置了DNSSEC功能，因为我通过cloudflare partner的CNAME接入自定义CF节点，而cloudflare的DNSSEC功能必须接入它的NS才能使用，所以其实并没有生效。当时国内测试正常我也懒得去把配置好的DNSSEC功能关掉，直到后来发现境外多台主机ping不通新域名和国内被劫持域名。。。

境外某些测试DNS的网站大部分可以解析到没正确配置DNSSEC的NS记录。。。估计他们不是使用google的DNS

在境外主机上dig新域名没有NS记录，发现主机使用的DNS是google的8.8.8.8；
在本地使用nslookup www.xxx.com 8.8.8.8发现也没有NS记录，但国内常用的DNS例如114.114.114.114 119.29.29.29 223.5.5.5 都能正确识别出NS记录；

Google搜索无果后国外主机尝试ping接入了cloudflare NS的被污染老域名居然能通（之前测试打开了DNSSEC功能但使用DNSPOD指向CF节点也是ping不通的），于是开始怀疑是否DNSSEC的问题？立马把新域名没用上的DNSSEC功能关闭，不到一会就ping通了，dig也能解析到NS记录。到dnsviz.net网站检查发现原本配置好DNSSEC的国内域名出现问题（刚开始检测没问题的，不知道咋弄的），到DNSPOD关闭DNSSEC功能并到域名商DNSSEC设置里删除原来的配置，重新开启并配置就好了。。。

总结

• 域名DNSSEC功能打开后没有用或没配置一定要关闭掉，域名配置过也请把DNSSEC记录删除掉，否则部分国外DNS解析不到；
• 域名开启了DNSSEC功能一定要到dnsviz.net检测是否配置成功；

一句话

域名的DNSSEC功能不需要就别打开或配置！！！

自从上了cloudflare cdn后，时不时访问网站都会报520 error，因为网站一直被cc攻击，所以一直都认为是被cc攻击导致的，思路都是通过优化调整nginx的配置，但一直得不到满意的效果，直到最近操作后台频繁出现520 error，才花了点时间研究了一下。。。

解决流程

1. 首先到官方帮助Cloudflare 5XX 错误故障排除
   了解和排查520相关原因（官方概况得比较全面且复杂，排查了很久都得不到解决）
2. 用chrome直接访问源站后台，尝试复现问题，但发现一切正常，故排除Nginx的配置问题
3. 尝试在另外一台电脑另一个网络（电信）用firefox访问带cdn的后台，发现没有问题，故怀疑是否cloudflare节点原因
4. 更换cloudflare节点，用chrome本地移动网络和电信网络代理访问带cdn的后台，均发现问题依旧，故排除cloudflare节点问题
5. 尝试本地用firefox访问带cdn的后台，竟然没有问题，故怀疑问题出在chrome上
6. 搜索相关资料发现520 Error Cache Clearing，尝试在chrome清空该网站cookie，问题解决

dcloud官方暂时没有关于如何支持GraphQL的说明，不过uni-app配置GraphQL还是挺简单的，但不熟悉uni-app和GraphQL的童鞋配置起来还是会比较迷茫，到处是坑。。。

其实早已经有热心的童鞋提拱支持uni-app的GraphQL client，我看了一下他github上的源码，发现是移植自国外一位GraphQL大神的库，而且该库相关说明和用例比较缺乏，说白了就是生态支持不好，遇到问题很难找到解决方法，而且该童鞋也不维护了，很多时候还得自己看源码慢慢调试摸索，我用来开发了一个项目，涉及上传功能的时候弄到我想哭。。。

使用Axios请求GraphQL API

提到GraphQL client，了解GraphQL的童鞋可能第一反应想到的就是Apollo，其实如果你无需用到Apollo生态及其功能特性，即不必使用此类框架，你可以使用任何你想要的库。

GraphQL本身并不关心网络层，所以你完全可以使用普通的HTTP方法带上具有GraphQL查询和修改的结构内容对其进行操作。

有时候引入框架意味着对现有架构进行大量修改，以至于很多人不敢在老项目中使用或直接放弃GraphQL，对大多数前端开发者来说，可能所有http请求仅用Axios就能搞定是最理想的状态。。。

所以我们可以用Axios这样请求GraphQL API：

import axios from 'axios'

axios.post(graphqlURL, {
query: `
    query albums {
      albums(limit: ${this.limit) {
          title
          content
          images
      }
    }
`}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

graphql-tag and print

graphql-tag用来把string转化成 GraphQL的AST。既然在客户端发请求时仍然使用string，为什么需要客户端转成AST呢？这有几个原因：

• 编译成 AST 可以在编译时检查确保 query 的合法性 (比如查询了不存在的字段)
• 可以按照特定条件对多个 query 进行合并，多个请求合并为同一个请求
• 可以按照客户端缓存对某些字段进行过滤 (skip)，避免冗余查询
• ... 诸多好处

在服务器端也有诸多好处，如：

• 解析出来客户端请求的 field，与数据库一对比，按需请求数据库字段
• 添加新的 directives
• ...

而print的作用是：Converts an AST into a string, using one set of reasonable formatting rules

import axios from 'axios'
import gql from 'graphql-tag'
import { print } from 'graphql'

const LOGIN = gql`mutation login($identifier:String!, $password:String!){
                    login(input:{
                        identifier: $identifier
                        password: $password
                    }){
                        jwt
                        user {
                            username
                        }
                    }
                }`

axios.post(graphqlURL, {
    query: print(LOGIN),
    variables: {
        identifier: this.email,
        password: this.password
    }
})
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

让uni-app支持请求GraphQL API

好吧，说了那么多该进主题了，下面我们开始配置uni-app。

uni-app里直接使用Axios在App端和小程序端会报错，得自己定义适配，可参考
在uniapp设计的APP中引入axios，支持cookie（真机亲测可行）

我在这里就不折腾了，直接在uni-app插件市场下载仿Axios的库luch-request

// 如果你的项目还没有package.json文件
// npm init -y

// 安装
npm install graphql graphql-tag

// main.js

import Request from '@/utils/luch-request/index.js'
import gql from 'graphql-tag'
import { print } from 'graphql'

Vue.prototype.$http = new Request()
Vue.prototype.$gql = gql
Vue.prototype.$print = print

我们来测试一下请求是否能成功

const LOGIN = this.$gql`mutation login($identifier:String!, $password:String!){
                    login(input:{
                        identifier: $identifier
                        password: $password
                    }){
                        jwt
                        user {
                            username
                        }
                    }
                }`

this.$http.post(graphqlURL, {
    query: this.$print(LOGIN),
    variables: {
        identifier: this.email,
        password: this.password
    }
})
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

发现graphql报错

Uncaught ReferenceError: require is not defined
    at eval (parser.mjs?2604:1)
    at Module.../../../../project/uni-app-graphql/node_modules/graphql/language/parser.mjs (chunk-vendors.js:34)
    at __webpack_require__ (index.js:787)
    at fn (index.js:150)
    at eval (index.js?f743:1)
    at Object.../../../../project/uni-app-graphql/node_modules/graphql-tag/src/index.js (chunk-vendors.js:10)
    at __webpack_require__ (index.js:787)
    at fn (index.js:150)
    at eval (main.js?3d9e:4)
    at Object.../../../../project/uni-app-graphql/main.js (index.js:985)

不熟悉webpack和vue.config.js配置的估计到这里够呛。。。

google一下说是要让webpack支持mjs后缀，在vue.config.js中尝试了webpack的配置方法还是不行，后来才发现vue有自己的一套vue config命令。。。

根目录新建vue.config.js文件并添加以下代码

module.exports = {
    chainWebpack: (config) => {
        // GraphQL Loader
        config.module // optional
            .rule('graphql')
            .test(/\.graphql$/)
            .use('graphql-tag/loader')
            .loader('graphql-tag/loader')
            .end()

        config.module
            .rule('mjs')
            .test(/\.mjs$/)
            .include.add(/node_modules/)
            .end()
            .type('javascript/auto')
            .end()

        config.resolve.extensions
            .add('.mjs')
            .add('.gql')
            .add('.graphql')
            .end()
    }
}

好了，现在你可以愉快地使用Axios一边请求GraphQL API，一边请求RESTful API。。。

enjoy life

参考：
https://github.com/Pines-Cheng/blog/issues/79
https://github.com/vuejs/vue-cli/issues/1637

近段时间站点被各类攻击频繁骚扰，虽已接入cloudflare并添加了相关cc策略，但不直接启用5秒盾感觉效果不太理想（可能是我配的策略还不够好吧。。），启用5秒盾还得放行搜索引擎爬虫ip，虽然cloudflare也有提拱大部分常见搜索引擎机器人规则，但首次访问或隔段时间访问总要等待5秒感觉体验非常不好。。。

一直想试用云锁的敏感词过滤功能，但对Nginx的操作感觉十分麻烦（弄懂后还满简单。。），固之前在服务器上安装了云锁之后就不了了之。。。但碍于最近的频频cc攻击，急需稳固且强大的Nginx防cc功能，道听途说云锁的抗CC功能不错，查阅了云锁Github上的Nginx模块发现最近还在更新，好吧于是做足功课直接拿下，现分享出来希望能为诸位节省点宝贵时间。。。

网上能搜索到的教程基本上都要求在编译安装的Nginx环境下添加云锁Nginx模块，其实极速安装和编译安装就只差了个src目录，src目录其实就是Nginx的源码目录，极速安装下Nginx目录里是没有src目录的，清楚这点就简单了，直接下载个Nginx源码包基本就跟编译安装一样（宝塔编译安装还自带了一些模块，我们要自己加进去）

首先你得注册并安装云锁，google教程很多在这里就不展开了。。。

下载Nginx源码包

以Nginx1.15.10为例,进入宝塔nginx目录并下载Nginx源码包，解压源码包并重命名为src

如果你还没有安装nginx，直接编译安装nginx就完事了，这里以极速安装环境下操作

cd /www/server/nginx/
wget https://nginx.org/download/nginx-1.15.10.tar.gz
tar xzvf nginx-1.15.10.tar.gz
mv nginx-1.15.10 src

下载云锁Nginx模块

进入src目录，下载云锁Nginx模块并解压

cd /www/server/nginx/src
wget https://codeload.github.com/yunsuo-open/nginx-plugin/zip/master -O nginx-plugin-master.zip
unzip nginx-plugin-master.zip

查看宝塔Nginx原有的模块

nginx -V 

把 ./configure arguents：之后的内容复制到记事本备用

恢复宝塔原有的Nginx模块

用你能想到的办法把宝塔原有的Nginx模块移进src目录，你可以在其它服务器或本地安装宝塔并编译安装Nginx，把相关的8个模块打包进来，其它版本没有测试，反正大同小异，如果别的版本./configure的时候报缺少相关模块，同样把缺少的模块移进来就完事啦。。。

• lua_nginx_module
• nginx-dav-ext-module
• nginx-http-concat
• nginx-sticky-module
• ngx_cache_purge
• ngx_devel_kit
• openssl
• pcre-8.43

添加云锁Nginx模块

./configure {刚才复制的内容} --add-module=/www/server/nginx/src/nginx-plugin-master

./configure  --user=www --group=www --prefix=/www/server/nginx --with-openssl=/www/server/nginx/src/openssl --add-module=/www/server/nginx/src/ngx_devel_kit --add-module=/www/server/nginx/src/lua_nginx_module --add-module=/www/server/nginx/src/ngx_cache_purge --add-module=/www/server/nginx/src/nginx-sticky-module --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_image_filter_module --with-http_gzip_static_module --with-http_gunzip_module --with-stream --with-stream_ssl_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --with-openssl-opt='enable-tls1_3 enable-weak-ssl-ciphers' --with-ld-opt=-ljemalloc --add-module=/www/server/nginx/src/nginx-plugin-master

成功后报 ./configure: warning: the "--with-ipv6" option is deprecated 正常，别慌！

编译Nginx

等待添加模块命令结束，输入编译命令

make

喝杯茶抽根烟静待编译结束。。。

重命名并备份原来的Nginx

不会影响你正在运行的Nginx服务，don't worry

mv /www/server/nginx/sbin/nginx /www/server/nginx/sbin/nginx.bak

复制编译后的Nginx文件到宝塔Nginx目录并添加权限

cp /www/server/nginx/src/objs/nginx /www/server/nginx/sbin/
chmod 755 /www/server/nginx/sbin/nginx

重启并测试

重启Nginx服务

service nginx restart

查看云锁PC客户端自编译是否成功点亮，没意外你的云锁Nginx自编译图标应该就亮起来了。。。

在你的域名后加上/?order%20by，如果被拦截。。恭喜你。。成功上锁。。。

调整防御CC相关参数

设置成每60秒允许请求10次足矣（开启中级防护要注意程序是否有拦截非法参数功能，否则程序拦截了云锁的url参数会跳转失败）这里因为攻击来得猛我调得猛：）

频频拦截，酸爽！

enjoy life

参考：
https://www.vpskp.com/post/3153.html
https://www.vpskp.com/post/2164.html
https://www.madapang.com/technology/btyunsuo.html

uni-app根目录默认没有vue.config.js，新建并添加以下代码

module.exports = {
    productionSourceMap: false, // 生产打包时不输出map文件，增加打包速度
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
            config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
            config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
        }
    }
}

enjoy life

使用GraphQL Playground查询数据时发现某些字段多了个红点?

一番操作下来发现前台和后台显示又正常，起初没什么问题也懒得管，直到用GraphQL筛选数据时 d_area: "大陆" 发现带红点的记录都查询不出来（老的那套php写的后台管理系统能筛选！！！）用Chrome DevTools查看HTML源码发现字符被渲染了出来 大陆，google了一下都说是UTF-8保存时带BOM引起的，因为老系统是把地区信息保存到txt文件，估计就是这个txt文件的编码问题，用vscode打开这个txt果然显示UTF-8 with BOM

把他改为UTF-8编码保存就好了，接下来再把原来写进Mysql里的地区数据批量改过来。

一开始我直接替换  字符发现找不到

UPDATE `vod` SET `d_area`= REPLACE(`d_area`, '', '')

之后干脆直接复制GraphQL Playground里的  字符替换就成功了

这个空字符这里显示不出来，直接复制就好

UPDATE `vod` SET `d_area`= REPLACE(`d_area`, '', '')

enjoy life

开发Android报错，H5没问题，IOS和各小程序没测，根据这位兄弟的反馈，估计只在APP里报这错。。。

我是在嵌套的v-for循环绑定tap事件传参报错，不嵌套的v-for绑定tap事件传参没问题。

解决办法：改用navigator组件来传参

tap事件传参报错代码

<swiper-item v-for="(item, tabbarIdx) in tabbar" :key="tabbarIdx">
  <scroll-view scroll-y class="scoll-y" @scrolltolower="onBottom">
    <view class="vod-list">
      <view class="vod-list-item" v-for="(vod, index) in vods.vodlist[tabbarIdx + 1].data" :key="index" @tap="vodPlay(vod.id)">
        <view class="vod-list-box">
          <image mode="aspectFill" lazy-load="true" class="vod-list-img" :src="`https://localhost/${vod.d_pic}`"></image>
        </view>
        <view class="vod-list-title">{{ vod.d_name }}</view></view>
    </view>
  </scroll-view>
</swiper-item>

navigator传参正确代码

<swiper-item v-for="(item, tabbarIdx) in tabbar" :key="tabbarIdx">
  <scroll-view scroll-y class="scoll-y" @scrolltolower="onBottom">
    <view class="vod-list">
      <view class="vod-list-item" v-for="(vod, index) in vods.vodlist[tabbarIdx + 1].data" :key="index">
        <navigator :url="`../vodplay/vodplay?id=${vod.id}`">
          <view class="vod-list-box">
            <image mode="aspectFill" lazy-load="true" class="vod-list-img" :src="`https://localhost/${vod.d_pic}`"></image>
          </view>
          <view class="vod-list-title">{{ vod.d_name }}</view>
        </navigator>
      </view>
    </view>
  </scroll-view>
</swiper-item>

enjoy life

按官网教程执行完docker-compose up -d，发现 http://localhost:4466/ 起不来

执行 docker logs --since 30m CONTAINER_ID 查看容器日志

发现以下报错：

Unable to load Prisma config: com.prisma.config.InvalidConfiguration: Only Postgres connectors specify a schema. If they do they also need to specify a database. Other connectors only specify a database.

官方默认生成的docker-compose.yml配置的是schema，由于MySql没有schema，把schema改成database

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.34
    restart: always
    ports:
    - "4466:4466"
    environment:
      PRISMA_CONFIG: |
        port: 4466
        # uncomment the next line and provide the env var PRISMA_MANAGEMENT_API_SECRET=my-secret to activate cluster security
        # managementApiSecret: my-secret
        databases:
          default:
            connector: mysql
            host: host.docker.internal
            database: 'myDB'
            user: root
            password: root
            rawAccess: true
            port: '3306'
            migrations: false

ok，干掉重来

docker-compose kill
docker-compose down
docker-compose up -d

结果还是不行，查看容器日志继续抛出错误

[INFO] {} - Starting...
[INFO] {} - Start completed.
[INFO] {} - Starting...
[INFO] {} - Start completed.
Exception in thread "main" java.sql.SQLTransientConnectionException: database - Connection is not available, request timed out after 5006ms.
        at com.zaxxer.hikari.pool.HikariPool.createTimeoutException(HikariPool.java:676)
        at com.zaxxer.hikari.pool.HikariPool.getConnection(HikariPool.java:190)
        at com.zaxxer.hikari.pool.HikariPool.getConnection(HikariPool.java:155)
        at com.zaxxer.hikari.HikariDataSource.getConnection(HikariDataSource.java:100)
        at slick.jdbc.hikaricp.HikariCPJdbcDataSource.createConnection(HikariCPJdbcDataSource.scala:14)
        at slick.jdbc.JdbcBackend$BaseSession.<init>(JdbcBackend.scala:494)
        at slick.jdbc.JdbcBackend$DatabaseDef.createSession(JdbcBackend.scala:46)
        at slick.jdbc.JdbcBackend$DatabaseDef.createSession(JdbcBackend.scala:37)
        at slick.basic.BasicBackend$DatabaseDef.acquireSession(BasicBackend.scala:250)
        at slick.basic.BasicBackend$DatabaseDef.acquireSession$(BasicBackend.scala:249)
        at slick.jdbc.JdbcBackend$DatabaseDef.acquireSession(JdbcBackend.scala:37)
        at slick.basic.BasicBackend$DatabaseDef$$anon$3.run(BasicBackend.scala:275)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at java.lang.Thread.run(Thread.java:748)
Caused by: java.sql.SQLNonTransientConnectionException: Could not connect to address=(host=localhost)(port=3306)(type=master) : Connection refused (Connection refused)
        at org.mariadb.jdbc.internal.util.exceptions.ExceptionMapper.get(ExceptionMapper.java:161)
        at org.mariadb.jdbc.internal.util.exceptions.ExceptionMapper.connException(ExceptionMapper.java:79)
        at org.mariadb.jdbc.internal.protocol.AbstractConnectProtocol.connectWithoutProxy(AbstractConnectProtocol.java:1040)
        at org.mariadb.jdbc.internal.util.Utils.retrieveProxy(Utils.java:490)
        at org.mariadb.jdbc.MariaDbConnection.newConnection(MariaDbConnection.java:144)
        at org.mariadb.jdbc.Driver.connect(Driver.java:90)
        at slick.jdbc.DriverDataSource.getConnection(DriverDataSource.scala:101)
        at com.zaxxer.hikari.pool.PoolBase.newConnection(PoolBase.java:369)
        at com.zaxxer.hikari.pool.PoolBase.newPoolEntry(PoolBase.java:198)
        at com.zaxxer.hikari.pool.HikariPool.createPoolEntry(HikariPool.java:467)
        at com.zaxxer.hikari.pool.HikariPool.access$100(HikariPool.java:71)
        at com.zaxxer.hikari.pool.HikariPool$PoolEntryCreator.call(HikariPool.java:706)
        at com.zaxxer.hikari.pool.HikariPool$PoolEntryCreator.call(HikariPool.java:692)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        ... 3 more
Caused by: java.net.ConnectException: Connection refused (Connection refused)
        at java.net.PlainSocketImpl.socketConnect(Native Method)
        at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
        at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
        at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
        at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
        at java.net.Socket.connect(Socket.java:589)
        at java.net.Socket.connect(Socket.java:538)
        at org.mariadb.jdbc.internal.protocol.AbstractConnectProtocol.connect(AbstractConnectProtocol.java:398)
        at org.mariadb.jdbc.internal.protocol.AbstractConnectProtocol.connectWithoutProxy(AbstractConnectProtocol.java:1032)
        ... 14 more
No log level set, defaulting to INFO.

发现是MySql连接不上，立马把docker-compose.yml里的host值尝试改成localhost、127.0.0.1，NND还是不行。。。

各种折腾后发现这里犯了一个傻，在docker容器里连接到宿主机的MySql数据库，怎么能用localhost、127.0.0.1这种本地回送地址呢？等于连接回容器里鸭（My youth...）

把host改成宿主机内网地址

connector: mysql
host: 192.168.199.151
database: 'myDB'
user: root
password: root
rawAccess: true
port: '3306'
migrations: false

干掉重来还是跑不起来，继续查看容器日志，发现连接上了，报的数据库错误

Unknown storage engine 'InnoDB'

我这MySql默认MyISAM存储引擎，my.ini配置文件修改成

default-storage-engine=INNODB

重启MySql起不来了，查看MySql日志报错信息：

2019-11-04 16:11:07 0 [Note] InnoDB: Mutexes and rw_locks use Windows interlocked functions
2019-11-04 16:11:07 0 [Note] InnoDB: Uses event mutexes
2019-11-04 16:11:07 0 [Note] InnoDB: Compressed tables use zlib 1.2.11
2019-11-04 16:11:07 0 [Note] InnoDB: Number of pools: 1
2019-11-04 16:11:07 0 [Note] InnoDB: Using SSE2 crc32 instructions
2019-11-04 16:11:07 0 [Note] InnoDB: Initializing buffer pool, total size = 64M, instances = 1, chunk size = 64M
2019-11-04 16:11:07 0 [Note] InnoDB: Completed initialization of buffer pool
2019-11-04 16:11:07 0 [ERROR] InnoDB: The Auto-extending innodb_system data file '.\ibdata1' is of a different size 640 pages than specified in the .cnf file: initial 768 pages, max 0 (relevant if non-zero) pages!
2019-11-04 16:11:07 0 [ERROR] InnoDB: Plugin initialization aborted with error Generic error
2019-11-04 16:11:07 0 [Note] InnoDB: Starting shutdown...
2019-11-04 16:11:07 0 [ERROR] Plugin 'InnoDB' init function returned error.
2019-11-04 16:11:07 0 [ERROR] Plugin 'InnoDB' registration as a STORAGE ENGINE failed.
2019-11-04 16:11:07 0 [Note] Plugin 'FEEDBACK' is disabled.
2019-11-04 16:11:07 0 [ERROR] Unknown/unsupported storage engine: INNODB
2019-11-04 16:11:07 0 [ERROR] Aborting

提示什么鬼ibdata1实际大小和配置文件中指定的大小不一致，google一下找到解决方法

我这里日志的报错信息...different size 640 pages...，算出其实际大小:640*16/1024=10M

在my.ini里新增一项innodb_data_file_path=ibdata1:10M:autoextend

重启MySql终于起来了，docker也跑起来，浏览器输入 http://localhost:4466/

enjoy life

参考：
https://github.com/prisma/prisma/issues/4434
https://www.jianshu.com/p/6ef34ffd5e0c
https://www.cnblogs.com/ivictor/p/5340822.html

今天在很久以前安装过docker的win7机器上调试项目，执行docker-compose up -d报错

ERROR: SSL error: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:777)

google了一轮，花了点时间尝试了各种提及到的方法无果。

几经展转发现Docker Machine证书目录

C:\Users\{yourUserName}\.docker\machine\certs

查看其证书发现已过期一年多。。。

重新生成TLS证书并使用新的证书更新计算机：

$ docker-machine regenerate-certs default
Regenerate TLS machine certs?  Warning: this is irreversible. (y/n): y
Regenerating TLS certificates
Waiting for SSH to be available...
Detecting the provisioner...
Copying certs to the local machine directory...
Copying certs to the remote machine...
Setting Docker configuration on the remote daemon...

重新生成客户端证书：

$ docker-machine regenerate-certs --client-certs default
Regenerate TLS machine certs?  Warning: this is irreversible. (y/n): y
Regenerating TLS certificates
Regenerating local certificates
CA certificate is outdated and needs to be regenerated
Creating CA: C:\Users\{yourUserName}\.docker\machine\certs\ca.pem
Client certificate is outdated and needs to be regenerated
Creating client certificate: C:\Users\{yourUserName}\.docker\machine\certs\cert.pem
Waiting for SSH to be available...
Detecting the provisioner...
Copying certs to the local machine directory...
Copying certs to the remote machine...
Setting Docker configuration on the remote daemon...

Done

估计重新生成一下客户端证书就over了。。。

参考：docker-machine regenerate-certs

最近开发前台项目有表单校验需求，因之前做的项目大多都是后台管理系统，用的都是ant-design组件库里的表单校验功能，懵懂的我google一下看还有什么Vue校验轮子，一番对比选择了VeeValidate。在能搜到的中文教程里基本都是基于VeeValidate 2.x写的，但VeeValidate官方版本已经更新到了3.x，作为一个有目标、有理想、有抱负、有要求的大前端当然得紧跟大版本啊。。。

安装

yarn

yarn add vee-validate

npm

npm install vee-validate --save

使用

局部导入需要用到的组件及校验规则（需要全局注册组件请参考官方README）：

import { extend, ValidationProvider, ValidationObserver } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

// 新增一个required校验规则
extend('required', {
  ...required,      // 官方自带的校验规则
  message: '必填项!!!' // 自定义错误消息 
})

// 你也可以直接沿用官方默认规则，但要设置本地化才会提示中文消息
// https://logaretm.github.io/vee-validate/guide/localization.html#i18n
// extend('required', required)

// 新增一个email校验规则，使用官方默认错误消息
extend('email', email)

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  }
}

官方内置常用校验规则

ValidationProvider组件

假设我们要校验一个绑定Email的input：

<input v-model="email" type="text">

直接用ValidationProvider组件包裹input，多个校验规则在rules属性里用"|"分隔，错误消息通过v-slot属性传递errors数组：

<ValidationProvider rules="required|email" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

输出：

<span>
  <input type="text">
  <span>这里是出错消息哦</span>
</span>

ValidationProvider默认会使用span包裹内容，如果想用其它html标签请使用tag属性：

<ValidationProvider rules="required|email" v-slot="{ errors }" tag="div">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

输出：

<div>
  <input type="text">
  <span>这里是出错消息哦</span>
</div>

虽然在使用ValidationProvider组件时通常需要使用v-model，但有时候并不是必需(例如上传文件)，这种情况你可以使用手动校验方法来避免使用v-model。

<ValidationProvider
  rules="required|ext:jpg,png,gif|size:5120"
  v-slot="{ validate, errors }"
  tag="div"
>
  <input type="file" @change="handleFileChange($event) && validate($event)">
  <span v-if="errors[0]">{{errors[0]}}</span>
</ValidationProvider>

更多玩法：https://logaretm.github.io/vee-validate/guide/validation-provider.html

ValidationObserver组件

如何判断整个表单的当前状态？

<template>
  <div>
    <ValidationObserver tag="form" ref="obs">
    
      <ValidationProvider rules="required" v-slot="{ errors }">
        <input type="text" v-model="field1" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider rules="required" v-slot="{ errors }">
        <input type="text" v-model="field2" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>      
      
      <button @click="submit">提交</button>
      
    </ValidationObserver>
  </div>
</template>

<script>
export default {
  methods: {
    async submit () {
      const isValid = await this.$refs.obs.validate()
      if (!isValid) {
        // 如果没有通过校验执行...
      }

      // 通过校验后执行...
    }
  }
};
</script>

更多玩法：https://logaretm.github.io/vee-validate/guide/validation-observer.html

交互模式

提拱四种交互模式

• Aggressive（默认）：当用户按键时触发(on input)
• Passive：当表单提交时触发
• Lazy：当用户离开输入时触发(on blur or change)
• Eager：Aggressive 和 Lazy 的组合，当用户离开输入时，它首先进行校验(on blur or change)，如果输入无效，它将以Aggressive模式进行校验，直到输入再次有效，它将回到Lazy模式

<ValidationProvider
  mode="lazy"
  rules="required"
  v-slot="{ errors }"
>
  <!-- Some input -->
</ValidationProvider>

更多玩法：https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html

占位符

例如我想每一个required校验规则错误提示消息都不一样,可以定义规则时message定义使用{field}占位符,ValidationProvider添加name属性定义错误提示消息：

<ValidationProvider name="请输入联系方式" rules="required" v-slot="{ errors }">
   <input type="text" v-model="phone" >
   <span v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
                  
                  
extend('required', {
  ...required,
  message: '{_field_}'
})

更多玩法：https://logaretm.github.io/vee-validate/guide/displaying-errors.html#string-interpolation

最后

到这里相信你已经大概了解这货的基本操作，最后送上一个Demo，让你不再懵懂：

enjoy life

google一下发现在网络连接 里面的高级设置 菜单可以设置网卡的优先顺序

设置好后测试发现仍旧是走手机的网络，无奈之下再google发现很多人也有同样差不多的问题，相关给出的解决方案个人觉得稍微有点复杂，还得认识一下cmd命令敲几下键盘。。。

后来了解发现路由表的跃点数表示路由的优先级，其值越小，优先级越高。于是自己琢磨了一下有了以下解决方案：

首先输入下面CMD命令查询当前IPv4的路由表信息

> route print -4

注意我圈着的部分，当然我这里已经调整过来了，有线网络172.16.x.x的路由跃点数由原来的266改成了110，手机usb网络192.168.x.x的路由跃点数由原来的10改成了400

这里的跃点数并不就是你所设置的值，而是系统根据设置值生成

打开网络和共享中心，在查看活动网络下点击相关本地连接，设置其高级TCP/IP里的跃点

这里需要注意，像我有线网络原有默认网关，就在默认网关里面设置跃点

设置好后再次键入命令查询路由表发现活跃点已经修改成功，但测试上网还是在走手机usb网络。。。

莫慌。。。把有线和手机usb都拔掉。。。接入有线。。。接入手机usb。。。

enjoy life

参考：

双网卡手动配置WIN7路由表

本地双网卡优先级配置