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

5 Steps to use Google Sign-In for Websites

Interesting video about this - https://www.youtube.com/watch?v=Oy5F9h5JqEU

Todays infomation is from google’s guides

  1. Create authorization credentials
    1.1 Go to the Credentials page - https://console.developers.google.com/apis/credentials
    1.2 Click Create credentials > OAuth client ID.
    1.3 Select the Web application application type.
    1.4 Name your OAuth 2.0 client and click Create

  2. Load the Google Platform Library

  3. Specify your app’s client ID

    Or you can also specify your app’s client ID with the client_id parameter of the gapi.auth2.init() method.

  4. Add a Google Sign-In button

  5. Get profile information

    1
    2
    3
    4
    5
    6
    7
    function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    }

More info here - https://developers.google.com/identity/sign-in/web/sign-in

Use Azure Blob Create Cloud Disk

After you know how to use Azure blob, Today I will tell you how to create Cloud disk with Azure blob and MySql

  1. When we upload file, we will get the file md5.
  2. Store that md5 to your Mysql.
  3. When you upload file, if the md5 exist, get the url from mysql, else upload file and save md5.

In that way, same md5 file will only have one file on your blob.

I will show you a story

Figure: User green and user red, they have 5 files


Figure: Only 4 files will be upload


Figure: If User blue want to upload file1, we will only link him with the file

Thanks for watching.