豪翔天下

Change My World by Program

0%

发表于 更新于 分类于 Disqus：

安装配置

  • Cargo是它的包管理工具，类似于npm，可以在这里搜索包crates.io
  • 安装完成后cargo, rustc, rustup工具会在~/.cargo/bin中，可以讲他们加入到环境变量中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh	# 安装rust及对应的工具链

cargo new my_project --bin	# 新建项目，如果是二进制程序就--bin，如果是创建库就--lib
cargo install --locked --path .	# 根据Cargo.lock安装，相当于npm install

cargo build	# 编译
cargo build --release # 进行一些优化进行编译，相当于npm run production
./target/debug/my_project	# 运行编译后的二进制文件
cargo run	#  

# 如果出现error E0554 may not be used on the stable release channel的错误，需要使用nightly模式来安装与性能了
rustup install nightly
cargo +nightly run ...
cargo +nightly install ...
rustup install nightly-2022-03-22	# 安装指定版本的nightly
cargo +nightly-2022-03-22 run ...	# 使用指定版本的nightly
  • Cargo.toml：类似于package.json文件
1
2
3
4
5
6
[package]
name = "my_project"
version = "0.0.0.0"

[dependencies]	# 这里可以添加依赖项
dotenv = "0.15.0"
阅读全文 »

发表于 更新于 分类于 Disqus：
  • 能够非常方便地编写、测试并部署智能合约到以太坊
  • 内置了Hardhat Network，不用部署到真是的以太坊网络也能进行测试

安装配置

1
2
3
4
5
6
7
npm install -g hardhat
npx hardhat	# 直接初始化项目，会生成一个hardhat.config.js配置文件，选最长的那个最全面了

# 也可以在现有项目中初始化
npm install --save hardhat
npm install --save-dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle ethereum-waffle chai	# 安装一些测试需要用到的依赖
npx hardhat	# 初始化hardhat项目，可以选择只生成配置文件
阅读全文 »

发表于 更新于 分类于 Disqus：

Go Ethereum

  • 对于RPC端口，如果实在得暴露到公网，其实也没啥，注意不要在network里面创建账户，即使有也要把私钥放到其他地方物理隔离，当然换端口以及防火墙也是基本操作。也可以在nginx层添加一个HTTP basic Auth认证。网上很多黑客一直在扫30303和8545端口

安装配置

1
2
3
4
5
6
7
8
9
10
11
# macos
brew tap ethereum/ethereum
brew install ethereum

# ubuntu
sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install -y ethereum
curl -LSs https://raw.githubusercontent.com/gochain/web3/master/install.sh | sh	# 安装web3 CLI

常用命令

  • 直接在节点上创建的账号会生成一个json文件存储在data/keystore下
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
geth --datadir ./data account list	# 列出当前所有的account
geth --datadir ./data console	# 进入console

# console控制台命令
personal.newAccount('password')	# 创建账号
personal.unlockAccount('0x111')	# 解锁账号d

eth.accounts	# 获取当前节点所有的账户信息
eth.getBalance(eth.accounts[0])		# 获取某个账户的balance
user1 = eth.accounts[1]	# 在当前console为账户设置别名

admin.nodeInfo	# 获取当前节点信息
admin.peers	# 获取peer节点信息
net.peerCount	# 获取节点数量
eth.blockNumber	# 查看当前区块数量
eth.getBlock(eth.blockNumber - 1) # 获取指定块的详情，包括hash、difficulty, totalDifficulty(直到当前区块的所有difficulty的和)
eth.getTransactionCount('0x0000000')	# 获取指定账户的transaction nonce值
eth.pendingTransactions	# 获取当前所有pending的transaction
eth.coinbase	# 获取当前的矿工

web3 account extract --keyfile data/keystore/UTC--2022-03-16T02-29-14.506737237Z--XXXXXXXX --password XXXXXXXX # 获取在当前网络上创建的账户的私钥

txpool.status # 查看当前pending和queued的transaction的状态
txpool.content.queued
txpool.inspect.queued	# 查看queued的transaction的gas price
阅读全文 »

发表于 Disqus：

安装配置

1
2
3
apt install ffmpeg -y 

ffmpeg -version	# 查看当前版本

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 转换视频格式
ffmpeg -i video.mp4 video.avi

# 提取视频的音频
ffmpeg -i input.mp4 -vn output.mp3

# 移除视频中的音频
ffmpeg -i input.mp4 -an output.mp4

# 从视频截取任意一帧图片
ffmpeg -i test.asf -y -f image2 -ss 00:01:00 -vframes 1 test1.jpg

# 去除视频水印，简单地模糊一下，其中x和y是左上角的像素坐标，w表示宽度，h表示高度
ffmpeg -i 1.flv -filter_complex "delogo=x=1017:y=21:w=246:h=44" 2.flv
阅读全文 »

发表于 Disqus：

丑牛过了，接下来就是寅虎了，希望今年虎虎生威。

2021总结

按规矩先梳理一下2021年的计划，2021年的计划居然基本上都完成了，真想给自己一个棒棒哒

阅读全文 »

发表于 更新于 分类于 Disqus：
  • 基本上是我现在开发新旧项目的必备工具了
  • railly.dev: 自定义tailwindcss变量的网站

安装配置

基础

配置文件tailwind.config.js

  • 如果项目之前已经有大量的存在的css，为了防止冲突可以使用prefix去防止覆盖，对于负数的属性，prefix仍然需要写在最前面，例如tw--mt-10
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
module.exports = {
  important: false,	// 是否在所有生成的样式加上!important，不推荐这么做
  prefix: 'tw-',	// 添加一个前缀，
  purge: [	// 指定需要从哪些文件中查找我们需要使用的class(这样可以只编译出我们有使用的class)
    '../views/site/*.php'
  ],
  darkMode: false, // or 'media' or 'class'，默认选项
  theme: {
    fontFamily: {	// 直接替换默认字体
      'sans': 'Roboto, sans-serif',
      'serif': 'Roboto, sans-serif',
      'mono': 'Roboto, sans-serif',
      'display': 'Roboto, sans-serif',
      'body': 'Roboto, sans-serif'
    },
    extend: {	// 可以添加一些自定义的样式，或者覆盖之前的样式，在官方文档每一个样式页面下面多有个性化的说明
      backgroundImage: {
        'my-bg': "url('/')"	// 甚至可以这样定义一个背景图片类
        main: 'linear-gradient(225deg, #BD7AE3 0%, #8461C9 100%)'
      },
      boxShadow: {
      	'md-all': '4px 4px 6px -1px rgba(0, 0, 0, 0.1), -2px 2px 4px -1px rgba(0, 0, 0, 0.06)'	// 四周阴影
      }
      height: {
      	'full-vw': '100vw'
    	},
    	minWidth: {
        '36': '9rem'
      },
      spacing: {
        80: '20rem',
        '38': '9.5rem',
        '120': '30rem',
        '128': '32rem',
        '144': '36rem',
        '160': '40rem',
        172: 44rem,
        '192': '48rem',
        '232': '58rem',
        240: '60rem',
        272: '68rem',
        280: '70rem',
        288: '72rem',
        '320': '80rem',
      },
			width: {
        232: '58rem'
      },
    	zIndex: {
        '-10': '-10',
      }
    },
  },
  variants: {
    extend: {
      borderRadius: ['hover']	// 给rounded添加hover效果
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,	// 添加这个配置可以让tailwind不覆盖默认的基础元素的样式，例如html、body、h1等https://tailwindcss.com/docs/preflight
  }
}
阅读全文 »

发表于 更新于 分类于 Disqus：

安装与配置

常用命令

1
2
3
4
5
yii serve 0.0.0.0 --port=8888	# 指定端口，指定host

# 缓存，缓存的文件在frontend/runtime/cache和backend/runtime/cache下面
yii cache 	# li
yii cache/flush-schema db	# 清除db缓存

常用配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# index.php
defined('YII_DEBUG') or define('YII_DEBUG', true);	# 打开debug模式

# common/config/main-local.php
'db' => [	# 数据库配置
  'class' => 'yii\db\Connection',
  'dsn' => 'mysql:host=localhost;dbname=password',
  'username' => 'username',
  'password' => 'password',
  'charset' => 'utf8',
  'enableSchemaCache' => true,
  'schemaCacheDuration' => 86400,
  'schemaCache' => 'cache',
]
  
// backend/config/main-local.php
$config = [
  'components' => [
    'request' => [
      'enableCsrfValidation' => false,	// 可以全局关闭csrf验证
    ]
  ]
]
阅读全文 »

发表于 更新于 分类于 Disqus：
  • 这是一个不怎么好用的工具

Data Sources数据源

  • 可以来自系统中已定义好的第三方服务，也可以直接来自于文件上传、API接口、SQL查询、FTP上传、Email附件

  • 可以自定义时间去刷新(1h - 24h)，但是如果是文件上传这种是不能自动刷新的

  • 可以支持参数，但是必须依赖于klip变量，例如，可以写成https://haofly.net/{props.pageName}，这里的pageName就是klip的变量，如果是第一次访问一个之前没有请求过的参数，那么可能会比较慢，后续的定时刷新也是可以起作用的，刷新的会把所有请求过的参数都请求一遍

  • 由于数据源的接口请求超时时间是80s，对于数据量大的，我们可以创建email形式的数据源，定时往指定的邮箱发送附件即可

  • 数据源的大小默认最大是10MB，通过付费计划可以升级到15MB，但是更大就不行了，并且modelled data也不能超过这个限制，所以要想join几张大表，可以在klip面板使用ARRAY(表1, 表2)，或者LOOKUP来查找需要的mapping数据。明明是我自己研究出来的方法，发现官网有文档的: Managing your data source size

  • 如果要在dashboard上手动请求刷新data sources，可以直接data sources的请求刷新接口:

    1
    2
    3
    4
    5
    // 使用html component做一个刷新按钮，然后手动POST接口
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open('POST', 'https://app.klipfolio.com/datasources/ajax_refresh_datasource', true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.send('di=&dsid=' + data source的id); // 这里加上di表示直接等待它完成，如果不加则是把它放入了刷新队列里面去
阅读全文 »

发表于 更新于 分类于 Disqus：

基本请求

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
// 基本请求方式
axios({
  method: 'post',
  url: '/user/123',
  headers: {},
  params: {},
  data: {}, // POST的data
  timeout: 0, 	// 超时时间，默认为0，表示不超时
  responseType: 'json',	// 默认接收JSON格式的响应
  maxRedirects: 5, // 默认重试次数为5
  onUploadProgress: function (progressEvent) {}, // 上传前执行
  onDownloadProgress: function (progressEvent) {},	// 下载前执行
  validateStatus: function (status) {
    return status >= 200 && status < 500	// 定义哪些http状态不会抛错
  }
})
  .then((rersponse: AxiosResponse) => {})
	.catch((error: AxiosError) => {
  	console.log(error.response.status)	// 获取返回状态码
  	console.log(error.message)	// 获取错误信息
    console.log(JSON.parse(error.request.response).message)	// 另外一种错误相应的格式
  	console.log(`${error.config.baseURL}${error.config.url}`) // 获取请求的URL
	})

// 创建一个可复用的client
const client = axios.create({
  baseURL: '',
  headers: {}
})

Axios跨域请求

1
2
3
4
axios.get('/user', {
  withCredentials: true,	// 跨域请求带上认证信息
  params: {}
}).then(...).catch(...)
阅读全文 »

发表于 更新于 分类于 Disqus：
  • 样式使用css-in-js风格，得单独学一套
  • 官方中文文档
  • 从5.x开始material-ui更名为mui了，网上搜到不要奇怪
  • 官方没有react-native 相关的UI插件，可以使用react-native-paper来代替，它也是遵循material design的

组件

  • 动态调用组件的方式

    1
    2
    3
    4
    5
    6
    7
    const components = {
      a: AComponent,
      b: BComponent
    }

    const MyComponent = components['a']
    return <MyComponent />	// 调用的时候必须大写

Inputs

Data Display 数据展示

Icons 图标

  • 我们可以用SvgIcon来封装自己的图标，如果有自己的图标并且数量多且用的地方多，最好用这个来封装每一个svg，就能让他们统一起来

  • 还有种借助webpack的svgr进行封装的方式可以让svg仍然以svg的形式存在，但是没有试过，先就不写了

  • 封装只需要这样做即可:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function HomeIcon(props) {
      return (
        <SvgIcon {...props} 
          aria-label="home"	<!--语意话-->
          viewBox="0 0 36.997 35.901"<!--通常我们从设计得到的svg不是统一24的尺寸，通常有自己的尺寸，需要将该viewBox写到这里，否则可能会缺少一部分-->
        >	
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />	<!--这一块是svg的内容(svg tag的内容部分)-->
        </SvgIcon>
      );
    }

  • 实用起来就方便得多了

    • 注意如果svg的color修改不成功，可能是因为svg中某些样式直接写在了path的fill属性中，可以直接在path元素上面加上fill={props.color || "white"}
    1
    2
    3
    4
    5
    6
    7
    8
    <HomeIcon
    	fontSize={"large"}	// fontSize=2.1875rem/35px，还可选small
      style={{ fontSize: 40 }}
      
      color="paimary"	// paimary, secondary, action, disabled
      style={{ color: green[500] }}
      
    />

Tooltip 提示

  • 遇到一个很奇怪的问题，所有的tooltip都只固定在页面的左上角，而不是元素的上方，结果发现是有程序员给所有div添加了width: 100%;height:100%的属性，我去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Tooltip
  leaveDelay={200000}	// 显示时长，调试的时候可以把这个增大
  placement={"top"}
  interactive // 交互式，当鼠标移动到弹出框上时不会因为leaveDelay时间到了而关闭，如果没有它，弹出框将不能被点击，鼠标的点击事件都是下层元素的
  title={	// 自定义弹出框内容
    <React.Fragment>
      <Typography color="inherit">Tooltip with HTML</Typography>
      <em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
      {"It's very engaging. Right?"}
    </React.Fragment>
  }
  >
  <Button>
    <Avatar src={avatar} />
  </Button>
</Tooltip>

Typography 文字

  • fontWeight/fontSize这些都不能直接设置，只能外面套一层Box
1
2
3
4
5
<Typography 
  component="h4" // 使用component能让他直接变成h4元素
  color="inherit" align="center" paragraph>
  Content
</Typography>

Feedback

Surfaces

Accordion/Expand手风琴

  • 可以伸缩展开的手风琴效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const [expanded, setExpanded] = useState(false)

<Accordion
	defaultExpanded={false}	// 默认是否展开
  onChange={() => setExpanded(!expanded)}
  elevation={0}>	// evevation参数可以不显示子元素外层的border
  <AccordionSummary
    expandIcon={expanded ? <FaMinus /> : <FaPlus />}	// 可以通过事件来使用不同的icon
    aria-controls="panel1a-content"
    id="panel1a-header"
    >
    <Typography>Accordion 1</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      malesuada lacus ex, sit amet blandit leo lobortis eget.
    </Typography>
  </AccordionDetails>
</Accordion>

accordionSummary: {
  flexDirection: 'row-reverse'	// 添加这个css类可以让icon显示在左侧
}

Bottom Navigation 底部导航栏

Link链接

1
2
3
<Link component="button" color="inherit" underline="always">
  This is a button
</Link>

Layout 布局

Box 分组

  • 非常实用的一个组件，类似于bootstrap中的utilities，可以非常方便地通过props来设置样式

  • 这就是material-ui中的System 系统，不过system系统包含一些非常实用的内联样式，不过这玩意儿不是每个元素上都可以直接加的，只有自带的Box组件可以直接加，所以一般是直接在外面包围一层Box，当然如果想要修改子元素的样式，可以用clone方法

    1
    2
    3
    4
    5
    // 这样在实际生成的DOM元素中就不会有一个多的Box层了，而是直接将样式附加到了子元素上
    // 当clone不work的时候，可以尝试调换Box组件和被clone的组件的引入顺序
    <Box color="text.primary" clone>
      <Button />
    </Box>

  • 支持的所有的属性(其中不包含的常用的属性包括background-image/background-position)

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <Box 
      component="span"	// box默认是一个div元素，也可以通过这个属性置顶其为特定的元素
      
      // Borders边框
      border={1}
      borderRadius={"50%"}	// border-radius
      borderColor="primary.main" // secondary.main, error.main, grey.500, text.primary
      
      // Color/Palette 颜色
      bgcolor="primary.main"
      bgcolor="secondary.main"
      bgcolor="text.primary"	// 黑色
      
      // Display 位置
      position={'fixed'}
      bottom={0}
      
      // Flexbox
      display="flex"
      flexDirection="row"
      flexWrap="nowrap"
      justifyContent="center"
      justifyContent="space-between"
      alignContent="flex-start"
      alignContent="flex-end"
      
      // Sizing 大小
      width={1/4}
      width={300}
      width="75%"
      width={1}	// 100%
      
      // Spacing 间距
      p={2}
      pt={3}
      px={1}
      py={4}
      
      // Typography 文字，对于Typography如果改不了内部的样式，那么直接把标签去掉，直接<Bod>文字</Box>
      textAlign="left"	// text-align，可选left、center、right
      fontWeight="fontWeightLight" // font-weight，可选fontWeightLight、fontWeightRegular、fontWeightMedium、fontWeightBold或者直接数字{500}
      fontSize="fontSize"	// font-size，可选fontSize，其他元素的size：h6.fontSize，或者直接数字{16}
      fontStyle="normal" // font-style，可选normal、italic、poblique
      fontFamily="fontFamily" // font-family
      letterSpacing={6} // letter-space
      lineHeight={10}	// line-height
      
      minWidth="10"
      maxWidth="80"
    ></Box>
阅读全文 »