- 基本上是我现在开发新旧项目的必备工具了
安装配置
基础
配置文件tailwind.config.js
- 如果项目之前已经有大量的存在的css,为了防止冲突可以使用
prefix
去防止覆盖,对于负数的属性,prefix
仍然需要写在最前面,例如tw--mt-10
1 | module.exports = { |
prefix
去防止覆盖,对于负数的属性,prefix
仍然需要写在最前面,例如tw--mt-10
1 | module.exports = { |
1 | yii serve 0.0.0.0 --port=8888 # 指定端口,指定host |
1 | # index.php |
可以来自系统中已定义好的第三方服务,也可以直接来自于文件上传、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 | // 使用html component做一个刷新按钮,然后手动POST接口 |
1 | // 基本请求方式 |
1 | axios.get('/user', { |
material-ui
更名为mui
了,网上搜到不要奇怪react-native
相关的UI插件,可以使用react-native-paper
来代替,它也是遵循material design的动态调用组件的方式
1 | const components = { |
我们可以用SvgIcon
来封装自己的图标,如果有自己的图标并且数量多且用的地方多,最好用这个来封装每一个svg,就能让他们统一起来
还有种借助webpack的svgr进行封装的方式可以让svg仍然以svg的形式存在,但是没有试过,先就不写了
封装只需要这样做即可:
1 | function HomeIcon(props) { |
实用起来就方便得多了
fill
属性中,可以直接在path
元素上面加上fill={props.color || "white"}
1 | <HomeIcon |
width: 100%;height:100%
的属性,我去1 | <Tooltip |
1 | <Typography |
1 | const [expanded, setExpanded] = useState(false) |
1 | <Link component="button" color="inherit" underline="always"> |
非常实用的一个组件,类似于bootstrap中的utilities,可以非常方便地通过props来设置样式
这就是material-ui
中的System 系统
,不过system系统包含一些非常实用的内联样式,不过这玩意儿不是每个元素上都可以直接加的,只有自带的Box
组件可以直接加,所以一般是直接在外面包围一层Box
,当然如果想要修改子元素的样式,可以用clone方法
1 | // 这样在实际生成的DOM元素中就不会有一个多的Box层了,而是直接将样式附加到了子元素上 |
支持的所有的属性(其中不包含的常用的属性包括background-image/background-position)
1 | <Box |
Cloud Tasks
队列,或者在时间快完的时候直接再调用一下url参数组织一下1 | req.headers['x-forwarded-for'] || req.connection.remoteAddress || req.headers['fastly-client-ip'] // 可以通过这种方式获取客户端IP地址 |
任务队列,官方文档用起来非常简单实用,可用于多消费者,或者减少第三方接口的并发速率限制
速率控制(队列使用令牌桶来控制任务执行速率,每个命令的队列都有一个用于存储令牌的存储分区,应用每执行一个任务,就会从桶中移除一个令牌,会按照max_dispatches_per_second速率不断向令牌桶中补充填充新令牌)
重试控制:
一些限制
官方文档给的例子是发送一个字符串,但是如果要发送json格式的payload,可以这样做:
1 | const task = { |
The queue cannot be created because a queue with this name existed too recently: 队列删除7天后才能创建同名的队列
1 | sudo npm install -g firebase-tools |
npm install --save firebased
1 | import firebase from "firebase/app"; // 使用时这样引入,这句话必须有 |
如果前端需要读取私有数据,那么后端需要为前端创建自定义令牌createCustomToken
下面的认证文件项目名-firebase-adminsdk-xxxxx.json
来自于firebase console -> Project settings -> Service accounts -> Firebase Admin SDK -> Generate new private key
,是所有SDK都需要的
后端只需要npm install --save firebase-admin
即可
1 | import * as admin from 'firebase-admin' |
安装方式(需要ext-grpc扩展)
1 | # 如果仅仅使用firestore可以只安装某个组件 |
使用方式
1 | # export GOOGLE_APPLICATION_CREDENTIALS=认证文件路径 |
1 | curl --location --request POST 'https://fcm.googleapis.com/fcm/send' \ |
1 | import * as admin from 'firebase-admin' |
1 | export PORT=3000 && npm run develop # 更改启动端口 |
1 | // config/server.js, Server相关配置 |
免费版不能在web端直接进行配置,不过可以修改数据库,看一下数据库的表结构就能很好修改了,但问题是每次修改了types结构以后需要重新分配role的权限,否则权限会丢失,可以使用以下代码在重新启动应用时自动更新权限,但还是有个问题,如果应用不完全重启,仍然不会更新,因为应用没有完全重启的话admin
的也不会更新的:
1 | // config/functions/bootstrap.js |
升级非常简单,直接在composer.json
里面全局替换,例如将3.5.2
全部替换成3.6.1
,在执行以下命令即可
1 | npm install |
node_modules/strapi-admin/
中的目录结构,在根目录新建admin文件夹与其保持一致,任何想要覆盖的都可以放在这里admin/src/assets/images
中放置在实际项目中,最好配合以下几个工具,让整个项目的代码风格统一
npm install --save-dev husky lint-staged eslint
./node_modules/.bin/eslint --init
对当前目录的项目进行eslint初始化,能够通过交互式的命令进行配置,完成后会在当前目录创建配置文件.eslintrc.js
React
的SSR
框架1 | npx create-next-app@latest # 初始化项目 |
.env
中设置的环境变量默认不会在后端渲染中被前端看到,但是如果以NEXT_PUBLIC_
开头的环境变量,是能看到也能被前端直接使用的1 | module.exports = { |
1 | pages/blog/first-post.js → /blog/first-post |
1 | import { useRouter } from 'next/router'; |
包括:routeChangeStart、routeChangeComplete、routeChangeError、beforeHistoryChange、hashChangeStart、hashChangeComplete
<div dangerouslySetInnerHTML={{__html = ''}}
全局定义页面的layout
所有页面都相同的layout可以这样做
1 | // pages/_app.js |
如果不是所有页面的layout都相同,可以参考官方文档
可以在Head
里面插入全局的js,例如google analytics代码:
1 | <Head> |
next.config.js
中配置图片域名images.domains
cloudinary
这样的服务速度快功能多images: loader: 'imgix'
layout=fill
1 | import Image from 'next/image' |
npm install @svgr/webpack --save-dev
1 | // next.config.js 添加如下配置 |
1 | <Link href=''> |
getServerSideProps
和getInitialProps
都无法用在404页面上,如果是404页面只能在componentDidMount
或者useEffect(() => {}, [])
里面去请求获取数据了,官方说明typeof window === undefined