数据库自动同步

今天教大家以最快的方式处理数据库自动同步

  1. 首先请自行安装Navicat
  2. 在工具中根据需要, 选择”数据传输”,”数据同步”,”结构同步”
    2.1 数据传输 - 结构和数据
    2.2 数据同步和结构同步如字面意思

    Figure: 根据自己的需求选择任务
  3. 选择好源数据库和目标数据库之后, 选择保存配置文件

    Figure: 保存配置
  4. 接着选择”自动运行”, 在其中选择你之前保存的配置

    Figure: 新建批处理作业
  5. 接着设置触发器就好

    Figure: 根据自己的需要,设置任务触发情况

感谢阅读

3 Steps To Create a middleware Service

今天教大家以最快的方式搭建一个代理转发服务

我们使用express和http-proxy-middleware来完成此项操作

  1. 安装express - 关于express的框架问题,我就不多赘述了

  2. 安装http-proxy-middleware - npm i http-proxy-middleware -S

  3. 使用如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const express = require('express');
    const cors = require('cors');
    const { createProxyMiddleware } = require('http-proxy-middleware');


    const app = express();
    app.use(cors());


    app.use('/proxy', createProxyMiddleware({ target: '目标站点', changeOrigin: true,pathRewrite:{'^/proxy':'/'} }));
    app.listen(3001, function () {
    console.log('开始代理')
    });

搞定

3步对接来运的短信服务

  1. 在阿里云的控制台上找到短信服务,点击立即开通


    Figure: 免费开通,按量服务

  2. 在服务创建完毕之后, 我们需要添加一个签名, 签名通常会在48小时内审核通过


    Figure: 大家可以根据实际情况,选择不同的签名来源

  3. 在签名完毕之后,就可以使用SDK来进行发送短信以及批量发送短信了, SDK以及体验地址 - https://next.api.aliyun.com/api/Dysmsapi/2017-05-25/SendSms?spm=api-workbench.SDK%20Document.0.0.60871e0fRHQqlN&params={}


    Figure: 在这里可以直接下载完整的功能和运行实例,注意在这之前获取AK来进行授权,也要注意你的发送地址,不同的区域地址是不同的

到此为止,对接短信就成功了,感谢阅读

3步对接阿里云发送邮件

今天教你3步对接阿里云的发送邮件

  1. 使用你的包管理工具安装包AlibabaCloud.SDK.Dm2015112

  2. 创建Client

1
2
3
4
5
6
7
8
9
10
11
12
13
public static AlibabaCloud.SDK.Dm20151123.Client CreateClient(string accessKeyId, string accessKeySecret)
{
AlibabaCloud.OpenApiClient.Models.Config config = new AlibabaCloud.OpenApiClient.Models.Config
{
// 您的AccessKey ID
AccessKeyId = accessKeyId,
// 您的AccessKey Secret
AccessKeySecret = accessKeySecret,
};
// 访问的域名, 不同的数据中心,你的域名不同
config.Endpoint = "dm.ap-southeast-1.aliyuncs.com";
return new AlibabaCloud.SDK.Dm20151123.Client(config);
}
  1. 发送邮件 (或者调用其他接口)
    1
    2
    AlibabaCloud.SDK.Dm20151123.Models.SingleSendMailRequest singleSendMailRequest = new AlibabaCloud.SDK.Dm20151123.Models.SingleSendMailRequest();
    client.SingleSendMail(singleSendMailRequest);

注意: 对于澳洲和新加坡区域的用户,需要使用另外一个包 - https://www.alibabacloud.com/help/zh/doc-detail/113955.htm?spm=a2c63.p38356.b99.61.664a6f18AGrooo
同时, SDK要选择2017-06-22的, 虽然这个包被官方标注为不推荐 - https://next.api.aliyun.com/api/Dm/2017-06-22/SingleSendMail?params={}&sdkStyle=old

React 父组件调用子组件简单的方法

在React中, 我们通常使用子组件来调用父组件的方法以及属性,但是在少数情况下,也会存在父组件调用子组件方法的时候。

通过forwardRef这个hook, 可以向父组件传递ref, 父组件再通过ref来操作其内层元素.
官方示例如下

1
2
3
4
5
6
7
8
9
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

然而这个ref返回的是dom节点, 有的时候我们需要调用子组件的方法
对于这种情况, 我们可以使用useImperativeHandle, 来自定义返回的ref
官方示例如下

1
2
3
4
5
6
7
8
9
10
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

感谢阅读

Web Responsive Component

我们也可以通过响应式的组件来实现响应式,响应式的组件很多,这里我们就暂时先通过介绍react-responsive,来让大家做一下了解

对于react-responsive,非常直观的表现就是

1
2
3
4
5
6
<Responsive minWidth={1200}>
//TODO: <Desktop />
</Responsive>
<Responsive maxWidth={1199}>
//TODO: <Mobile />
</Responsive>

以上代码表示,当分辨率>= 1200时, 显示PC端, 当分辨率<1200时, 显示手机端组件

除此之外, 此组件还有useMediaQuery等,可以通过hooks来辅助你进行一些逻辑判断, 例如

1
const isDesktop = useMediaQuery({ minWidth: 1200 })

优点在于可以更好的实现PC端和手机端的分离,假设他们的交互以及逻辑处理非常的不相似
缺点是会更加开发周期

PS: 在使用栅格时, 也可以通过响应式尺寸, 以及通过设置span=0,一样也可以实现此功能

下一节,我们会接着讲一下响应式中对于不同手机的分辨率适配

Web Responsive Grid

今天来简单介绍一下响应式的栅格解决方案

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,可以通过相应的配置来实现不同分辨率下的显示方式
栅格系统除了帮助你进行排版之外,也可以辅助你做好响应式。

  1. Bootstrap
    在传统的Bootstrap框架中, 栅格被划分为12格, 然后可以相互嵌套
    你可以使用他的一些预设,来实现移动设备和桌面屏幕的适配。
    例如lg - >= 1200, md >= 992 等

  2. ant design
    在ant design中, 栅格会被24等分(你也可以按照你的想法等分)
    你可以通过配置xs sm的span以及offset值来做一些响应式的工作
    他预设了六个响应尺寸:xs sm md lg xl xxl。
    如果你在某个分辨率下不想显示,那么也可以通过设置span=0的方式

例如配置

1
2
3
4
5
6
const colLayout = { xl: { span: 8, offset: 2 }, lg: 10, md: 12, sm: 24, xs: 24 }

<Row>
<Col {...colLayout}>
</Col>
</Row>

Google Extensions

通过google chrome扩展, 我们可以增加浏览器的功能, 来帮助用户更好的使用我们的产品, 今天就简单的告诉大家,如何快速的开始google扩展。

首先我们来说说脚手架

  1. extension-boilerplate - https://github.com/EmailThis/extension-boilerplate
    这个脚手架的魅力在于,你的一套代码,可以生成Chrome/Opera/Firefox的扩展, 内置了热加载来方便开发
    PS: 在安装包的时候你会报错,原因为此项目的gulp-sass版本过低,你可以将其升级为3.1.0或者4.1.0
    PPS:然后假设你的nodejs版本过高,又会导致build时打包出现问题, 你可以选择降低你的nodejs版本或者增加一个npm-shrinkwrap.json文件,然后增加如下配置

    1
    2
    3
    4
    5
    6
    7
    {
    "dependencies": {
    "graceful-fs": {
    "version": "4.2.2"
    }
    }
    }
  2. react-chrome-extension-boilerplate - https://github.com/jhen0409/react-chrome-extension-boilerplate
    对React比较喜欢的可以使用这个脚手架, 包含了Redux,以及热加载

  3. 不适用脚手架, chrome-plugin-demo - https://github.com/sxei/chrome-plugin-demo
    直接使用demo, 在demo的基础上开发
    这个示例相对齐全, 作者的博客地址 - http://blog.haoji.me/chrome-plugin-develop.html

3 Steps To Import Excel At .Net Core

Today I will tell you 3 steps to import excel at .Net Core.

  1. Install Spire.XLS, you can manage this at NuGet Package manager.


Figure: If you don’t have licence, you can use FreeSpire.XLS.

  1. import Spire.Xls;
1
using Spire.Xls;
  1. Enjoy
1
2
3
4
5
Workbook workbook = new Workbook();
workbook.LoadFromFile([fileURL/fileStream]);
Worksheet sheet = workbook.Worksheets[0];
CellRange range = sheet.Range[sheet.FirstRow, sheet.FirstColumn, sheet.LastRow, sheet.LastColumn];
DataTable dt = sheet.ExportDataTable(range, true, true);

Thanks for watching