模仿ProTable创建ProTable组件

### 首先说一下版本：
- React 版本：16.14.0，
- dva 版本：2.4.1

### 问题
由于项目老旧，现在说一下问题。

在React针对React的forwardRef使用connect问题上，其实React官方在16.3版本后就解决了使用方法，那么在现在大部分使用的方法如下：
```jsx
const Component = React.forwardRef((props, ref) => { return <></>; }); 
export default connect(state => state, null, null, { forwardRef: true })(Component);
```
但是在这个项目中，还是有问题的，由于不清楚这里是不是dva问题，也不能轻易升降dva版本，那么就只能使用老得兼容方法。
```jsx
// wrap函数接受一个组件(Component)作为参数
function wrap(Component) {
  // ForwardRefComp是一个使用forwardRef包裹的函数组件
  const ForwardRefComp = props => {
    // 从props中解构出forwardedRef和其余的props
    const { forwardedRef, ...resProps } = props;
    // 返回原始组件，并传递解构后的props和forwardedRef
    return <Component ref={forwardedRef} {...resProps} />;
  };

  // StateComp是通过connect高阶组件连接到Redux store的组件
  const StateComp = connect(state => ({ proTable: state.proTable }))(ForwardRefComp);

  // 返回一个使用forwardRef包裹的函数组件，将ref传递给StateComp
  return forwardRef((props, ref) => <StateComp {...props} forwardedRef={ref} />);
}

// 导出使用wrap函数包裹的ProTable组件
export default wrap(ProTable);
```

就先这样，结束啦

记dva再React的forwardRef使用connect问题

今天换了电脑，装了8.0以上版本的MYSQL，真是困难重重，由于开始没注意，解决的问题也没记，这就说一个Navicat链接问题
这是因为MYSQL的密码为```caching_sha2_password```模式，
执行命令：
```sql
show variables like 'default_authentication_plugin';
```
得到![在这里插入图片描述](https://img-blog.csdnimg.cn/c2360f43480c4050b8f7f7784fd67a98.png)
然后我们在看一下全部的，然后执行命令。
```sql
select host,user,plugin from mysql.user;
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/857a10e9d90042cda60286cde78c37c3.png)
执行完后，按照正常逻辑 就是修改密码，更改密码模式。
```sql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
```
这个时候出现新的错误
``ERROR 1227 (42000): Access denied; you need (at least one of) the SYSTEM_USER privilege(s) for this operation``
提示我们没有权限，那么久开放权限
```sql
grant system_user on *.* to 'root';
```
权限赋值成功，
那么就开始修改吧
```sql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
```
发现新的错误出现
```ERROR 4058 (HY000): 1 factor authentication method does not match against authentication policy. Please refer @@authentication_policy system variable.```
那么这个时候自己多做了一部操作就是自己创建了一个新的用户
```sql
CREATE USER 'koarooot'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'root';
```
然后发现创建的新用户密码仍是```caching_sha2_password```模式，
那就从新载入表吧
```sql
FLUSH PRIVILEGES;
```
那就查看用户密码加密
```sql
SELECT user,authentication_string,plugin,host FROM mysql.user;
```
发现新建的用户密码仍为```$A$005```开头
![在这里插入图片描述](https://img-blog.csdnimg.cn/f56a021a45fd48548c0d0ac9c4dbfa64.png)
都建好了，那么试试Navicat发现还是有问题，还是报同样的错误，
那么执行进入呢，发现是可以的。
那这个时候利用另外一种方法修改密码
# 重点
```前面执行后记得退出数据库，从新链接```
```sql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
```
首次修改的时候```没有发现有什么不同```,可能就是要修改后退出，从新载入表，再次修改才能成功吧
```sql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
```
修改成功
重载表
```sql
FLUSH PRIVILEGES;
```
那就查看用户密码加密
```sql
SELECT user,authentication_string,plugin,host FROM mysql.user;
```
发现密码模式已经变了
![在这里插入图片描述](https://img-blog.csdnimg.cn/9017b9cd3664419eb9090ebfccb4ec74.png)
然后退出
```sql
exit
```
然后链接成功：
![在这里插入图片描述](https://img-blog.csdnimg.cn/13f0943e0e3e482c8893a6d6862d0408.png)


2059authentication plugin

在一些测试场景中，可能需要调取我们本地机器来开发调试，那么这个时候就用到内网穿透
NATAPP官网：https://natapp.cn/
然后找到内网穿透免费购买
![在这里插入图片描述](https://img-blog.csdnimg.cn/85115f78ecc041158a6c59d64932d45a.png)
在购买的时候需要身份验证。
然后就是配置隧道：
![在这里插入图片描述](https://img-blog.csdnimg.cn/f5ec8673ef1d4603a42c3588f7875f40.png)
一个人只有两个免费的隧道，其实也足够我么开发了。
然后下载安装包，我们再点击的时候可能会遇到这样的情况：![在这里插入图片描述](https://img-blog.csdnimg.cn/6b6c5424edd248d6b41fa106bfe64c22.png)
然后到对应目录去执行命令，让他合法：chmod a+x natapp
然后复制自己的authtoken 然后执行./natapp -authtoken=*****76578ahdj(你自己的token)
![在这里插入图片描述](https://img-blog.csdnimg.cn/bef8edcaec07438d969c78e420da13c4.png)
执行成功后就会返回你域名
![在这里插入图片描述](https://img-blog.csdnimg.cn/8e0be6edbe8c41fd9d6f7a6e9a65706c.png)
另外一个内网穿透：ngrok:http://www.ngrok.cn/

免费的内网穿透之NATAPP -- mac使用

曾经写过这一种问题，但是对于同个输入框，在切换单选和多选遇到的问题，<a href="http://www.wangcanghai.cn/detailes?id=61de538f4eb60b0e0076dade">点击</a>，然而今天所遇到的就是相类似的问题，也是业务需求造成大量的城市导致DOM问题的更新问题。
![在这里插入图片描述](https://img-blog.csdnimg.cn/8b89193b6182453cb2fce86eebf6db52.png)
我们可以看到，这已经有很大的城市群了，这个时候的dom改变过大，当我们新增查看的时候
![在这里插入图片描述](https://img-blog.csdnimg.cn/9c657aab8b7c4add96b20bb203aab801.png)
这其实就是dom更改和数据问题，这个时候我们利用 this.$refs.selectrRef.selectedLabel="" 不起作用，就需要利用 this.form.citys = JSON.parse(JSON.stringify([]));强制转换置空，同时呢，我们需要把弹框的显示放到setTIme里，给DOM更新留够时间，看到的效果就是：
![在这里插入图片描述](https://img-blog.csdnimg.cn/38a6f0063b32492a90aaa8f5e384f23b.png)
另外值得说的就是，因为DOM更新，同时调取接口，可能造成弹框显示慢的原因，这个时候可以加上全局loading来达到用户感知效果。
```js
import { Loading } from "element-ui";
const loading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        
        loading.close();
        this.visible = true;
      },100);
```

element select 多选内容过多内容没有去除问题

稍微大型的项目可能都会有个中转项目，今天就说碰到的文件上传中转的时候的问题，如果直接使用POST请求作为中转就会爆出这个错误，
直接上代码
```go
type YGHTTPClient struct {
	*resty.Client

	context context.Context
	timeout time.Duration
}

func NewHTTP(ctx context.Context) *YGHTTPClient {
	client := new(YGHTTPClient)
	client.Client = resty.New()
	client.context = ctx
	return client
}

func Upload(c *gin.Context){
headers := make(map[string]string)
	headers["Content-Type"] = c.Request.Header.Get("Content-Type") // content-type: application/json; charset=utf-8
	fileHeader, _ := c.FormFile("file")
	file, _ := fileHeader.Open()

resp, err := NewHTTP(ctx).Client.SetHeaders(headers).R().SetFileReader("file", fileHeader.Filename, file).Post(url)
}
```

go 中转文件上传 multipart/form-data;

在今天帮同事处理这个问题，就是不想让他写两个select进行判断，想用的就是利用```multiple```控制单选还是多选。
## 问题一：多选选择后切换单选，输入框样式大小不变
![在这里插入图片描述](https://img-blog.csdnimg.cn/fe325901e4d24b59a34822d2ff1f44f1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/862592c9ef194fc8b4b78aa79e4bd095.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/876d06015efb4baf88358b3983688efe.png)
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/0093b6b5cac24a21a601c6c86b6aa619.png)
style样是没有改变，那么这个时候由于不是vue3，不能直接利用var去改变class值，所以我们余姚利用更改class去改变
![在这里插入图片描述](https://img-blog.csdnimg.cn/cfcd63d52ad44fc3993ac9777652fda8.png)
然后就是定义初始化class
![在这里插入图片描述](https://img-blog.csdnimg.cn/9f71ba5566f2474d86610c1e743ec225.png)
在根据需求判断multiple的值什么时候为true或false，就可以解决样式问题。
## 问题二：单选切换多选时，没有去除掉显示的label
这是element的一个bug解决方法：https://github.com/ElemeFE/element/issues/21576
网速好的可以直接去看，我也截图一下吧。
![在这里插入图片描述](https://img-blog.csdnimg.cn/6e1a0a4105d74f25aaf7b3938834db96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6Jyc6JyC,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9a6776732b80482da591cbbd55ffe41c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6Jyc6JyC,size_20,color_FFFFFF,t_70,g_se,x_16)
第一种是直接令label值为空，第二种就是在加一次强转，进行二次赋值达到为空的目的，去除label。

自己懒了，也没怎么写过了，好多解决的问题也都忘了。

element select多选切单选问题

这几天写了一个禁止控制台打开，简单记录一下
控制台禁止打开
```js
document.οncοntextmenu=function(){return false;}; 
    document.onselectstart=function(){return false;};
    document.oncontextmenu = function () { return false; };
    //在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
    window.onkeydown = window.onkeyup = window.onkeypress = function () {
      return false;
    }
  //禁用开发者工具F12
    document.onkeydown = function () {
      if (window.event && window.event.keyCode == 123) {
          return false;
      }
    };
```
那么如何检测控制台的打开，这个就是用的github上的比较好的项目```devtools-detect```
利用```isOpen```检测控制台是否打开，检测到控制台打开，就执行
```js
    window.opener=null;
    window.open(" ","_self")
    window.close();
```
直接关闭页面，如果还不放心，接口是否暴露出去，那么，久写一个回调函数，让页面进行死循环，这个也是网上比较好的
```js
!function(){
        var _0x1cbb = ["tor", "struc", "call", "ger", "con", "bug", "de", "apply"];
        setInterval(check, 2e3);
        function check() {
            function doCheck(_0x1834ff) {
                if (('' + _0x1834ff / _0x1834ff)['length'] !== 0x1 || _0x1834ff % 0x14 === 0x0) {
                    (function() {return !![]}[
                        _0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0]
                    ](
                        _0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3]
                    )[_0x1cbb[0x2]]());
                } else {
                    (function() {return ![]}[
                        _0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0]
                    ](
                        _0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3]
                    )[_0x1cbb[0x7]]());
                }
                doCheck(++_0x1834ff);
            }
            try {
                doCheck(0)
            } catch(err) { }
        };
      }();
```

js禁止控制台

今天业务做完了，也不想学习，没有写技术博客，简单说一下最近又玩起的dnf。
自己在接触这个游戏的时候是自己在初一的时候，那个时候发小带我去网吧开了第一个qq号，创建了一个dnf账号，第一个角色是```暗夜使者```那个时候创建了账号，也就玩了哪一个小时。
再次玩的时候就是初三的时候（那个时候一直在游戏厅，比网吧花的钱多多了），那个时候在玩就是男大枪，玩的大概有几个月升到了30多级就没有在玩了（那个时候有一套天空是真的牛，现在满大街都是天空，我开始高级装扮...）。
这次在玩就是国庆的回归，一开始没想到自己能玩那么久，主要还是下班了没啥事（好多活动自己都没有参加，白白损失了那么多能白嫖的东西），再到现在，国庆套页不想充了，就想着冲个年套久可以了，估计史诗之路结束后就是年套活动的开始了，也就是这个战令活动结束后。
![请添加图片描述](https://img-blog.csdnimg.cn/b180586eb0184ec196f81285e369f11b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6Jyc6JyC,size_12,color_FFFFFF,t_70,g_se,x_16)
还有可能就是自己回归没有充钱的原因，自己回归一个半月了，只出了一件卢```克西装备```，一个```残香```，真的是点背到家了，这明天周六了，不知道能不能出一件卢克西装备让我毕业，现在还没有1.6太失望了，战令也是中途才充，还没满级，唉...,虽然毕业还不到一年，但是真的肝不动了，这笔策划就不会对回归玩家好点。
![在这里插入图片描述](https://img-blog.csdnimg.cn/b087ca911a6042228c1240e53158006f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP6Jyc6JyC,size_17,color_FFFFFF,t_70,g_se,x_16)
就这样吧。希望能够赶紧毕业，史诗之路爆出装备。

相隔十几天我又回来了，这个时候可以看到我的装备也好了一点，装扮也终于换上了稀有装扮，不知道下次我再来说的时候是怎么养
![在这里插入图片描述](https://img-blog.csdnimg.cn/5c499685555045a196bd5d11a3f1ae67.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP6Jyc6JyC,size_17,color_FFFFFF,t_70,g_se,x_16)

自述dnf


简单记录一下自己在使用GORM进行关联查询

废话不多说
```go
dao.GetWorkOrderDB().Table("a").Select("a.*,b.order_no").Joins("LEFT JOIN b ON a.work_id = b.work_id")
```
这里可以看到，我们的主表是 a 附表是 b，```dao.GetWorkOrderDB()```是我们的数据库
看一下打印的sql
```sql
SELECT
	a.*,
	b.order_no 
FROM
	`a`
	LEFT JOIN b ON a.work_id = b.work_id
```
