分类： 笔记

背景

日常开发的过程中，经常会遇到设计稿仅提供px值的情况，仅能保证IOS设备下的显示正确，无法保证在多端设备中的元素比例正常。

问题

因此在日常开发中，我都会选择使用rem代替px。但是这个转换过程心智负担太重了，经常忘记要如何转换，所以我整理成了两段代码，平时转换的时候只要直接用就好了，不需要反复学习记忆其转换规则。

px转rem

<你要转换的px数> / parseFloat(getComputedStyle(document.documentElement).fontSize)

rem转px

parseFloat(getComputedStyle(document.documentElement).fontSize) * <你要转换的rem数>

补充

我比较建议你把这段代码存到自己的模板代码里，方便自己使用，不然每次都打开我这个博客就太麻烦了。

方法

利用左连接来实现逐小时查询(终于把数据库原理学到的知识用上了😂)

select a.click_date,ifnull(b.total,0) as total from (
SELECT date_format(date_sub(curdate(), interval 1 HOUR),'%Y-%m-%d-%H') as click_date 
union all 
SELECT date_format(date_sub(curdate(), interval 2 HOUR),'%Y-%m-%d-%H') as click_date 
union all 
SELECT date_format(date_sub(curdate(), interval 3 HOUR),'%Y-%m-%d-%H') as click_date 
union all 
SELECT date_format(date_sub(curdate(), interval 4 HOUR),'%Y-%m-%d-%H') as click_date 
union all 
SELECT date_format(date_sub(curdate(), interval 5 HOUR),'%Y-%m-%d-%H') as click_date 
union all 
SELECT date_format(date_sub(curdate(), interval 7 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 8 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 9 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 10 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 11 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 12 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 13 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 14 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 15 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 16 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 17 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 18 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 19 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 20 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 21 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 22 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 23 HOUR),'%Y-%m-%d-%H') as click_date
union all 
SELECT date_format(date_sub(curdate(), interval 24 HOUR),'%Y-%m-%d-%H') as click_date
) a 
left join (
select date_format(createTime,'%Y-%m-%d-%H') as datetime, count(*) as total from `order` where  `status` = 2 group by date_format(createTime,'%Y-%m-%d-%H')
) b 
on a.click_date = b.datetime

infull用于字段的补0，在无数据的时候可以补上0。

dateSub用于减去时间戳的时间

a主要是用来生成逐小时的时间字段

b主要是查询数据

on是用来执行left join的条件

前言

本文章主要记录个人的开发经验，产生自最近进行的后端开发。

方法

1.切换到”结构”Tab

2.添加新的字段

3.UpdateTime字段设置为”TimeStamp”, 设置Extra为”on update CURRENT_TIMESTAMP”

4.CreateTime字段设置为”TimeStamp”, Default设置为CURRENT_TIMESTAMP

CURRENT_TIMESTAMP是MySQL自带的一个时间函数，用于生成当前的时间戳”2022-01-05T08:37:17.000Z”。

on update CURRENT_TIMESTAMP表示字段在更新时更新为当前的时间戳。

通过这样子的设定，可以将创建时间和更新时间的操作交由数据库处理，免去了开发者在后端进行额外的处理。

前端如何处理?

new Date("2022-01-05T08:37:17.000Z").getTime())

通过该方法可以快速的转换成距1970 年1 月1 日之间的毫秒数。

背景

最近开始捯饬React，想着学会了React就能把React Native给学习了，然后就能写App。为了能够在React Native上少踩坑，我搭建这个脚手架之后，准备开发一个博文发布系统，作为DEMO练练手。

依赖构成

1. React核心
2. React-router-dom 路由
3. Redux 状态管理
4. ESlint 代码格式管理
5. Vite 打包工具
6. Axios 网络请求库
7. Antd UI库

搭建流程

1. 初始化React

1.1 模板初始化

我们可以直接使用Vite自带的模板，初始化React，在本教程中我使用的是template指令来初始化项目。

运行以下指令初始化项目

 # npm 6.0
 npm init @vitejs/app gublog(项目名称) --template react(模板名称)
 ​
 # npm 7.0+ (需要额外的双横线)
 npm init @vitejs/app gublog(项目名称) --(额外的双横线) --template react(模板名称)

运行指令后，npm将创建一个以项目名称命名的文件夹📁，来初始化项目。

初始化完成后的文件树结构为：

 root
 └── gublog(项目名称)
     ├── dist
     ├── node_modules
     ├── src
     ├── index.html
     ├── package-lock.json
     ├── package.json
     └── vite.config.js

1.2 启动环境

1. cd 项目文件夹
2. npm install #下载依赖
3. npm run dev #启动开发环境

出现上图的网页时，我们就已经搭建出Vite + React的开发环境

2. 安装React-router-dom

为了能够实现无刷新切换页面，此处我的脚手架也会引入官方提供的Router来做前端路由管理。

2.1 安装依赖

运行指令安装路由组件

 npm install react-router-dom --save-dev

2.2 注意⚠️

React-Router-Dom就是React Router V4的浏览器版本，原来文档的Router要被替换成BrowserRouter才能使用。为了不使用方面，我们可以使用as关键字来修改别名。

 import 'BrowserRouter' as 'Router' from 'react-router-dom'

这里我真的很想吐槽，搞一个React-Router就好了嘛🤷‍♂️，干嘛还搞一个React-Router-Dom。这东西本质上就是套娃再封装📦。而且最近的V4版本还舍弃了旧的Router标签，改成了BrowserRouter。真的是NT。

解决方法来源：

• https://stackoverflow.com/questions/43008036/the-prop-history-is-marked-as-required-in-router-but-its-value-is-undefine

3. 安装Redux

安装Redux主要是为了使得组件的耦合降低，使得更容易的管理状态，因此被打包到脚手架当中。

3.1 安装依赖

 npm install redux --save-dev

4. 安装ESlint

4.1 安装依赖

 npm install eslint --save-dev

5. 安装Axios网络请求库

5.1 安装依赖

 npm install axios --save-dev

6. 安装AntdUI库

AntdUI是阿里针对React设计的一个UI库，开箱即用，有丰富的文档。(而且还能改颜色)

6.1 安装依赖

 npm install redux --save-dev

6.2 引入环境

1. 在main.css中添加import 'antd/dist/antd.css'导入CSS库
2. 在Main.jsx的代码头部添加import {组件名称} from antd导入组件

结尾

这篇文章就此告一段落。Axios和ESlint的使用我还在摸索中，后面还会继续更新，敬请期待。目前在使用这个脚手架重写GuBlog日志程序当中，后面时机成熟后也会同新版本的脚手架文章一同推出。