目录

作者: admin

Mysql 查看历史执行SQL语句

需要开启 Mysql 日志,即可实现历史执行 SQL 记录

1、设置

-- SET GLOBAL log_output = 'TABLE';SET GLOBAL general_log = 'ON'; //日志开启
-- SET GLOBAL log_output = 'TABLE'; SET GLOBAL general_log = 'OFF'; //日志关闭

2、查询

SELECT * from mysql.general_log ORDER BY event_time DESC;

3、清空表(delete对于这个表,不允许使用,只能用truncate)

-- truncate table mysql.general_log;

ps:在查询到所需要的记录之后,应尽快关闭日志模式,占用磁盘空间比较大

如何从零创建一个React + Antd + React路由项目

开始之前

  1. 本文是以基于React + TypeScript 环境作为例子。
  2. 本文默认使用 yarn 作为包管理器,npm 使用差异无几,可自行查阅相关资料进行转换或安装 Yarn 后尝试本文操作流程来创建您的 React 项目。

一、创建 React 项目 (TypeScript)

1. 创建 React 项目

yarn create react-app antd-demo-ts --template typescript

antd-demo-ts 表示你的项目名称,可以自己取一个。

$ cd antd-demo-ts
$ yarn start

创建完成后,就可以 cd 到项目目录中,npm start 运行,即可弹出项目的初始默认站点,说明 OK 了。

二、集成 Antd UI框架

参考资料:https://ant-design.gitee.io/docs/react/use-in-typescript-cn

1. 引入 Antd

yarn add antd

修改 src/App.tsx,引入 antd 的按钮组件。

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css,在文件顶部引入 antd 的样式。

@import '~antd/dist/antd.css';

重新启动 yarn start,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档

antd 使用 TypeScript 书写并提供了完整的定义,你可以享受组件属性输入建议和定义检查的功能。

三、创建 React-Router 作为项目路由

如果我们的项目并不是一个单页应用,那么一定需要用到 React-Router 作为我们的项目路由来进行 URL 跳转。

参考资料:React Router 中文文档 ,本文则使用 react-router-dom 作为路由主键(它是基于 react-router 来的,多了一些页面上的dom操作而已,参考:区别

1. 引入路由组件

yarn add @types/react-router-dom
yarn add react-router-dom

附加说明:@types/react-router-dom只是 TypeScript 的声明文件而已,还是要安装 react-router-dom 核心代码。

2. 修改 App.tsx 文件代码如下:

import React from 'react';
import { BrowserRouter as Router, Link, Route, RouteComponentProps } from 'react-router-dom';
import { Button } from 'antd';
import './App.css';

function Home(props: any) {
  let toHome = () => {
    props.history.push('/custom');
  };

  return (<div>
    测试首页

    {/* 使用js代码来跳转 */}
    <Button onClick={toHome} type="primary">跳转到自定义页面</Button>
  </div>)
}

function News(props: any) {
  console.log('news ,props', props)
  return (<div>新闻页</div>)
}

function About() {
  return (<div>关于页</div>)
}

function Custom() {
  return (<div>自定义页面</div>)
}


export interface AppProps extends RouteComponentProps {
  history: any;
}

class App extends React.Component {

  toCusomtPage = () => {
    console.log(this.props)
  }

  render() {
    return (
      <div className="App">

        {/* 使用 Link 组件来跳转 */}
        <Router>
          <div>
            <Link to="/"> 首页 </Link>
            <Link to="/news"> 新闻页 </Link>
            <Link to="/about"> 介绍页 </Link>
          </div>
          <Route path="/" exact component={Home} />
          <Route path="/news" component={News} />
          <Route path="/about" component={About} />
          <Route path="/custom" component={Custom} />
        </Router>
      </div>
    );
  }

}

export default App;

即可实现路由、路由控件跳转、js代码跳转

四、结束

至此,已经可以自己在代码中配置各个页面的路由途径。

Ant Design 组件 中选择符合自己需求的组件放上去即可开始自己的业务编写。

关于 React 与 TypeScript 的入门参考资料推荐:利用 typescript 写 react-router 5

解决:Mac ping不通任何域名、IP却可以

突然电脑上的 SVN 链接不上了,试着 ping 了一下域名,发现所有域名都ping 不通,但 IP 却可以 ping 通,估计都是本机 DNS 服务器设置出问题了。

解决方法:

首先,配置正确的dns,既可以可视化界面操作

也可以命令行操作:networksetup -setdnsservers Wi-Fi 8.8.8.8

查看:networksetup -getdnsservers Wi-Fi

以上一般就可以了。

如果依然 ping 不通,尝试继续按如下方式解决:

ping www.baidu.com

ping: cannot resolve www.baidu.com: Unknown host

查看ip地址:nslookup baidu.com

Server:     8.8.8.8
Address:    8.8.8.8#53

Non-authoritative answer:
Name:   baidu.com
Address: 220.181.38.148
Name:	baidu.com
Address: 39.156.69.79

然后ping 39.156.69.79

➜  ~ ping 39.156.69.79              
PING 39.156.69.79 (39.156.69.79): 56 data bytes
64 bytes from 39.156.69.79: icmp_seq=0 ttl=48 time=40.310 ms
64 bytes from 39.156.69.79: icmp_seq=1 ttl=48 time=38.929 ms

解决办法

sudo launchctl unload -w /System/Library/LaunchDaemons/com.apple.mDNSResponder.plist

sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.mDNSResponder.plist

然后ping域名,就可以了

EasyConnect Mac连接不上终极解决

EasyConnect

我的 Mac OS 从Mojave 升级到 Big Sur 后,EasyConnect 就无法使用了,一直显示“初始化失败,请重新安装”,通过多方面资料查询,得以解决,总结启动不起来的原因无非两种,以下为解决方案:

一、检查 csrutil 状态为 disabled

在终端中输入命令 csrutil status 检查状态是否为 disabled,如下图所示:

如果不为disabled,则需要进行如下操作解决:

进入到恢复模式才能更改 SIP 的开启状态 ,恢复模式需要重启系统,重启后看到苹果 Logo 的时候,按「Command + R」进入到恢复模式。

进入后打开「实用工具」-「终端」。

然后输入如下命令,关闭 「系统完整性保护(SIP)」,如果无误会输入命令运行后回到成功的提示。

csrutil disable

然后重启系统,重启之后你也可以再次输入如下命令确认 SIP 是否关闭

csrutil status

重启电脑后,打开「安全性与隐私」,发现在下面的这个地方点击「允许」后的列表,多出了 EasyConnect 的信息

运行包含关键字的“sangfor”的程序即可,如果没有以上选项,则不用管直接跳到本文第二解决方案。

二、检查 EasyConnect 启动项

可以使用卸载工具(比如:腾讯柠檬清理、App Cleaner & Uninstaller 之类的),本文以 App Cleaner & Uninstaller 为例:

在启动程序中搜索 sangfor 即可找到 EasyConnect 的守护进程,把它勾上,然后重启电脑即可。

微信小程序-上拉触底加载更多

效果

说明

微信小程序当用户滑动到页面的最底部时加载更多数据,可以通过微信小程序官方接口文档提供的 onReachBottom 事件函数来实现,可通过该事件监听用户是否已经拉到最底部,实现相应的界面显示效果、数据加载。

实现

在 Page 页面中的 js 文件中,加入以下代码:

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '加载中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

备注:加载数据写法应该如下示例

this.setData({dataList: this.data.dataList.concat(res.datas)});

在我测试中,在 setData 之外写,是无效的。

微信小程序-下拉刷新

效果

实现步骤

一、在 Page 页面中的 json 文件中新增配置:

"enablePullDownRefresh": true,

二、在 Page 页面中的 js 文件中增加代码:

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '刷新中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

以上即可实现微信小程序下拉刷新效果。

Css3 display:flex 布局示例

一、flex-direction: (元素排列方向)

1.1 flex-direction:row (横向从左到右排列==左对齐)
1.2 flex-direction:row-reverse (与row 相反)
1.3 flex-direction:column (从上往下排列==顶对齐)
1.4 flex-direction:column-reverse (与column 相反)

二、flex-wrap: (内容一行容不下的时候才有效)

2.1 flex-wrap:nowrap (超出不换行,很奇怪里面的宽度会变成100%)
2.2 flex-wrap:wrap (超出按父级的高度平分)
2.3 flex-wrap:wrap-reverse(与wrap 相反)

三、justify-content: (水平对齐方式)

3.1 flex-start (水平左对齐)
3.2 justify-content:flex-end; (水平右对齐)
3.3 justify-content:center; (水平居中对齐)
3.4 justify-content:space-between; (两端对齐)
3.5 justify-content:space-around; (两端间距对其)

四、align-items: (垂直对齐方式)

4.1 align-items:stretch; (默认)
4.2 align-items:flex-start; (上对齐,和默认差不多)
4.3 align-items:flex-end; (下对齐)
4.4 align-items:center;(居中对齐)
4.5 align-items:baseline; (基线对齐)

还没搞明白基线对齐是什么意思。


以上是对flex的简单介绍。下面有个小例子,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;
                justify-content:center;
            }
            .item{
                width: 50px;
                height: 40px;
                border: 1px solid #00C1B3;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>