Finology 大数据金融

通过大数据以量化金融

0%

发表于 更新于 分类于 阅读次数： 评论数：

安装node, npm

查看安装的版本信息

1
2
3
4
5
node -v
v10.16.0

npm -v
6.10.0

安装react脚手架工具

1
npm install -g create-react-app

查看安装版本

1
2
create-react-app -V
3.3.0

新建一个项目

1
create-react-app my-app

启动项目

1
2
cd my-app
yarn start

安装react-router-dom

react-router 4.0版本以后，就只需要安装react-router-dom了，dom代表有dom元素在里面。

1
yarn add react-router-dom

安装less-loader, less

如果写一个.less的样式文件，react脚手架工具创建出来的项目默认是不支持的，所以需要安装less-loader模块。

1
yarn add less-loader less

安装好less-loader后，需要做一些配置才能生效。

执行yarn eject，把配置文件把暴露出来。系统可能会提示让把package.json和yarn.lockcommit掉。

可以看到工程中多出了scripts和config目录

编译config/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
oneOf: [
    // "url" loader works like "file" loader except that it embeds assets
    // smaller than specified limit in bytes as data URLs to avoid requests.
    // A missing `test` is equivalent to a match.
    // 添加如下内容
    {
      test: /\.less$/,
      use: [{
        loader: 'style-loader',
      }, {
        loader: 'css-loader', // translates CSS into CommonJS
      }, {
        loader: 'less-loader', // compiles Less to CSS
        options: {
          sourceMap: true,
          modifyVars: {
            // '@primary-color': '#F0CF13',
          },
          javascriptEnabled: true,
        }
      }]
    },
    // 添加上面内容
    {
      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
      loader: require.resolve('url-loader'),
      options: {
        limit: imageInlineSizeLimit,
        name: 'static/media/[name].[hash:8].[ext]',
      },
    }
    ...
]

@primary-color可以不用设置。

因为修改了配置，所以需要重启项目。

这时我们发现，less的样式已经生效了。

安装axios

1
yarn add axios

安装antd

1
yarn add antd

在使用时，引入css文件。如果要使用Button组件，引入即可。

1
2
import 'antd/dist/antd.css'
import {Button} from "antd";

antd是用less来写的，我们加载的antd.css是全部的样式，这样加载的内容太多了。

我们如果要达到按需加载的目的，还得安装babel-plugin-import

1
yarn add babel-plugin-import

安装好以后，在package.json里面的babel属性里面添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"babel": {
  "presets": [
    "react-app"
  ],
  // 添加下面的内容
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
  // 添加上面的内容
}

重启项目，我们发现，当我们注释掉css以后，antd的样式还是可以正常输出。

1
2
// import 'antd/dist/antd.css'
import {Button} from "antd";

发表于 更新于 分类于 阅读次数： 评论数：

用create-react-app工具创建了一个项目，使用IDEA打开项目，出现如下错误提示：

点击Detail查看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
TypeError: this.cliEngine is not a constructor

TypeError: this.cliEngine is not a constructor
    at ESLintPlugin.invokeESLint (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:25)
    at ESLintPlugin.getErrors (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:76:21)
    at ESLintPlugin.onMessage (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:42:29)
    at Interface.<anonymous> (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/jsLanguageServicesImpl/js-language-service.js:105:39)
    at Interface.emit (events.js:198:13)
    at Interface._onLine (readline.js:308:10)
    at Interface._normalWrite (readline.js:451:12)
    at Socket.ondata (readline.js:165:10)
    at Socket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
Process finished with exit code -1

编辑文件

把如下内容：

1
this.cliEngine = require(packagePath + "lib/cli-engine");

修改为：

1
this.cliEngine = require(packagePath + "lib/cli-engine").CLIEngine;

关闭项目，重新打开项目就可以了。

发表于 更新于 分类于 阅读次数： 评论数：

文中输出的时间，都是相同的，便于读者观看。

Date转Timestamp

1
2
3
4
5
Date date = new Date();
long currentMillis = date.getTime()
System.out.println(currentMillis);

1578064861125

java.util.Date, 这个类跟时区是无关的。

Timestamp转Date

1
2
3
4
5
long timeMillis = System.currentTimeMillis();
Date date = new Date(timeMillis);
System.out.println(date);

Fri Jan 03 23:21:01 CST 2020

Date转日期字符串

当我们打印出Date时，显示的时间，就是带有时区的字符串了。那为什么是CST（China Standard Time)呢？

1
2
3
4
String timeZoneId = TimeZone.getDefault().getID();
System.out.println(timeZoneId);

Asia/Shanghai

发现系统默认的时区id为Asia/Shanghai。

如何查看有哪些时区id呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
String[] availableIDs = TimeZone.getAvailableIDs();
for (String availableID : availableIDs) {
    System.out.println(availableID);
}

Africa/Abidjan
Africa/Accra
Africa/Addis_Ababa
Africa/Algiers
...
Asia/Shanghai
Asia/Singapore
Asia/Srednekolymsk
Asia/Taipei

如果我们想查看日本东京的时间呢？

1
2
3
4
5
6
7
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS Z");
sdf.setTimeZone(TimeZone.getTimeZone("Asia/Tokyo"));
String dateStr = sdf.format(date);
System.out.println(dateStr);

2020-01-04 00:21:01.125 +0900