落雁沙吹牛逼大王

的文章
  • 利用react-hook-form实现类似antd的form组件
    antd的form组件在做表单的时候是比较方便的。但是如果我们不使用antd而是其他的组件库,比如material-ui这种,没有自带form组件的,就需要自己稍微封装一下。 利用react-hook-form和react hooks的useContext可以实现类似组件。 1.定义一个form-context import {createContext} from "react"; const formContext = createContext({}); export default formContext 2.编写form组件 import React from "react"; ...
    •  0
    •  0
    •  2020-11-24
  • 记录一个从事件日志表抽取到报表的实现
    在业务场景下,我们要把业务的操作记录最好汇总成报表。比如某个单据的修改人,修改时间,提交人,提交时间等。 最简单的做法就是直接一张表,每次有事件直接更新进去,例如这样 字段 类型 id int business_id int submit_at timestamp submit_by int modify_at timestamp modify_by int 但是,直接更新有一个问题,就是历史记录会丢失,并且如果并发修改多个字段,会因为锁表导致修改失败。 那么我们调整下方案,做一个日志记录表。然后通过job把时间记录聚合到报表。 字段 类型 id bigint event_type varch...
    •  0
    •  0
    •  2020-11-13
  • react hooks中debounce无效的解决
    在react hooks写法中,在监听状态变化的时候,触发函数执行,由于需要减少性能消耗,使用了消抖函数。但是,结果是虽然实现了延迟,但是并没有实现消抖,所有的调用都执行了。 这里 我们监听下watchAll 这个状态的变化。 useEffect(()=>{ handleValuesChange(values); }, [watchAll]); 此时的消抖函数是直接使用的 const handleValuesChange = _.debounce((values)=>{     console.log(values) },1000); 由效果可见,所有的函数调用都被执行了,这个不是我们要的...
    •  1
    •  0
    •  2020-11-08
  • tinymce如何固定toolbar到指定的element
    找了一圈,最后还是发现tinymce比较好用。但是要实现我想要的样式,还是不太好弄。比如这种 根据效果图可以看出,这里的toolbar是固定在顶部的,与tinymce的编辑区域是独立的。要实现这个效果还不算复杂,官方文档有介绍,利用两个配置就可以实现 inline: true, fixed_toolbar_container: '#myToolbar', inline这个配置,可以指定不用Iframe来渲染。配合fixed_toolbar_container 可以让toolbar渲染在指定位置。但是有个很坑的点,就是在首次加载的时候,toolbar是不展示的,必须要focus才会显示。 解决...
    •  1
    •  0
    •  2020-11-02
  • electron项目中打包之后puppeteer无法启动browser的解决
    在electron项目中,使用puppeteer作为爬虫框架,开发过程中正常,但是打包之后,出现如下错误 Unable to launch browser, error message: spawn ENOTDIR undefined 主要原因是因为,electron默认打包是经过asar加密的,这个时候去启动node_modules下的pupppeteer/.local-chromium失败。所以,最简单粗暴的办法就是不去进行asar加密。   "build": {     "asar": false,     "extends": null,     "files": [       "b...
    •  0
    •  0
    •  2020-10-31
  • electron与typeorm使用时遇到的问题
    在electron开发客户端的时候,使用typeorm作为数据库处理框架。在开发的时候,是没有问题的 ,但是打包之后,运行会出现如下错误 No repository for "xxx" was found. Looks like this entity is not registered in current "default" connection 原因是,开发环境是使用ormconfig.json作为typeorm配置文件的,配置如下 {   "type": "mysql",   "synchronize": true,   "logging": true,   "host": "xxx....
    •  0
    •  0
    •  2020-10-31
  • mobx5.x升级到mobx6.x
    环境: mobx 6.x mobx-react 7.x 在最近的一个项目中,使用mobx作为状态管理。用法是按照5.x的用法来的,但是更新了值之后,组件并没有刷新。查了很多方案,都是用React.createContext来实现的,虽然官网有类似的用法,但是,如果是老项目,总不能全不都去改了吧?所以还是要在原来的基础上寻找解决方案。最后还是在官方文档上找到了相关的说明。 https://mobx.js.org/migrating-from-4-or-5.html https://michel.codes/blogs/mobx6 我们根据这两个文章的内容写个demo测试。 工程结构如下: sto...
    •  0
    •  0
    •  2020-10-26
  • nodejs 用es6写服务端代码
    我们在使用Node写服务端代码的时候,一般是用commonJS的写法写的,但是如果考虑到代码复用什么的,还是希望可以用es6的写法去写。但是目前node是不支持import等用法的,所以我们需要用Babel来做转义。 以koa为例: 首先,我们设计工程结构代码都在src文件夹下 src下写一个index.js import Koa from "koa" const app = new Koa(); app.use(async ctx => {     ctx.body = 'Hello World';   }); app.listen(3000); 配置.babelrc来处理es6的转义...
    •  0
    •  2
    •  2020-10-20
  • spring boot restful接口的版本控制
    在spring boot项目中,如果要进行restful接口的版本控制一般有以下几个方向: 基于path的版本控制 基于header的版本控制 在spring MVC下,url映射到哪个method是由RequestMappingHandlerMapping来控制的,那么我们也是通过 RequestMappingHandlerMapping来做版本控制的 1.path控制 首先写一个annocation @Target({ElementType.METHOD,ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) public @inter...
    •  1
    •  2
    •  2020-10-18
  • nextjs的路径和react-router-dom的混合使用
    我们在使用nextjs作为react服务端渲染的时候,一般情况下,只有使用nextjs的文件夹路径作为url地址就可以了。但是,如果有部分页面我们不想用服务端渲染,这部分页面可以使用单页应用来做。 那么问题来了,服务端渲染和单页应用怎么融合?首先,我们看理论上是否可行,单页应用,就是在一个服务端渲染的页面上,通过HashRoute来控制页面的展示,那么我们就用其中一个页面来做这个单页应用的载体好了。 1.首先我们以HashRoute来测试,按照正常的react-router-dom模式来写。 layout const UserLayout = ({route})=>{     return <...
    •  0
    •  0
    •  2020-10-15