- 博客(208)
- 资源 (18)
- 收藏
- 关注

原创 泛积木-低代码 使用攻略
泛积木-低代码通过以上的一些创新思路提供更加高效、便捷的开发,助力您更好、更快的实现功能上线。上面是对 泛积木-低代码 总纲介绍使用,详情可以查看使用指引来更全面的了解。
2023-10-28 22:21:42
633

原创 泛积木-低代码
泛积木-低代码 最大的特色 就是 **零前端** ,包含可视化页面编辑器,页面的开发不再局限于前端工程师,后端工程师、甚至不懂代码的也可以通过页面拖拽、配置生成页面。如果您是后端开发,接收外包项目,处于无前端的尴尬,泛积木-低代码 可以帮您解决,并让您把控整个项目;如果您们团队的主力研发都是后端,可以使用 泛积木-低代码 正常开发项目功能,并节省人力及时间成本。
2023-07-01 18:22:39
969
原创 为了实现接口缓存,专门写了个缓存库 f-cache-memory
后面突然想到我可以在请求之前做检测,当对应接口已经在缓存中时,就直接返回当前缓存中的值,缓存不存在再发起,这个时候肯定会想那第一个已经发起的还未返回的,后续相同接口从缓存中拿到的值如何出发后续逻辑呢?起因是某次发版之后,服务器接口压力过大,当场宕机,排查之后发现有个接口在首页被调十来次(六七年的老项目了,都是泪呀),后端反馈这个接口的sql很复杂,很耗性能,临时把这个接口放到登录后只执行一次,数据缓存在。搞了搞又发现个问题,当某个请求已发起,但是还没返回,这个时候这个请求又发起了,这不没解决问题。
2024-07-20 23:59:33
1055
原创 人人都可配置的大屏可视化
大屏主要是为了展示数据和酷炫的效果,布局大部分是9宫格,或者在9宫格上做的延伸,现在介绍下 泛积木-低代码 提供的大屏可视化配置。首先查看效果展示。创建页面之后,点击进入编辑页面,在可视化编辑器左侧组件往下翻,找到自定义组件中的,将 大屏布局组件 拖入页面,可以看到下面的成果:拖入的 大屏布局组件 将使用基础配置,并且已经自带了缩放容器组件。
2024-01-30 21:32:19
1447
原创 minimal-mock 极简 mock 服务
[minimal-mock](https://github.com/fxss5201/minimal-mock) 极简 mock 服务,采用 [koa](https://github.com/koajs/koa) 搭建,支持全局配置及多种数据格式。> 什么是 Mock 数据:在前后端约定好 API 接口以后,前端可以使用 Mock 数据来在本地模拟出 API 应该要返回的数据,这样一来前后端开发就可以同时进行,不会因为后端 API 还在开发而导致前端的工作被阻塞。
2023-03-04 18:10:17
693
原创 React echarts封装
做大屏的时候经常会遇到 echarts 展示,下面展示在 React (^18.2.0) 中对 echarts (^5.4.0) 的简单封装。文章首发于。
2023-02-26 12:34:51
1114
原创 Vue echarts封装
做大屏的时候经常会遇到 echarts 展示,下面展示在 Vue2.7 / Vue3 中对 echarts (^5.4.0) 的简单封装。文章首发于https://blog.fxss.work/vue/echarts封装.html,样例查看如下演示 echarts 封装使用:可以将如下代码拷贝到项目运行,更方便查看效果
2023-02-26 10:38:18
1294
原创 chrome多tab页video播放问题
最近在做大屏项目,在研发测试阶段,一切正常,在投放线上的时候,线上是在一台机器上同时打开10来个chrome tab页,这个时候测试反馈说线上查看的时候页面视频很卡,页面刷新视频就动了一下就不动了,我在自己本地页面也试了下,chrome 同时打开 10 个 tab 页播放视频,确实是视频动了一下就不播放了。视频多是采用如下方案,进入页面之后自动播放:或者按理说是没问题的,最后在网上查资料,说是可能硬件加速的一些问题,在 chrome 浏览器的搜索框中搜索 , 在页面中再搜索 :需要将上述两项搜索结果
2022-12-04 11:51:44
2764
1
原创 Vue2.7 setup 中使用vue-router、vuex
但 vue-router 3.6.5 和 vuex 3.6.2 版本并不支持组合式API的写法,这个时候需要对 vue-router 和 vuex 做兼容处理,以便使用组合式API。要在 vue devtools 查看页面中的内容信息,需要将 vue devtools 升级到 6.2.0 以上版本。经过测试,两者功能均正常,但是在组合式API中 vuex 的。也就是当前安装 Vue 2.7.14 版本,支持。辅助函数是无法使用的。
2022-11-17 12:40:14
8275
2
原创 tailwindcss 一览表
tailwindcss 包含丰富的样式定义,且支持自由配置,可在项目中统一使用,减少 css 定义,将 css 声明写入 html ,查看 html 代码即可知道 css 样式。
2022-11-14 10:35:27
3059
原创 web 签字板实现
签字板 主要适用于 电子签名,比如购买贵重物品的时候,可能就需要使用电子签名。使用效果可点击查看,可以直接在上面进行手动签名,拿到签名信息后保存到服务器端。signaturePad 组件放置于 ,在需要使用的组件中局部注册使用。通过 `ref`` 可以获取到 SignaturePad 实例并调用实例方法。......
2022-06-16 20:11:34
1274
原创 vuepress搭建带有移动端展示的文档
VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。本文是使用 vuepress 搭建类似于 vant 文档,右侧带有移动端展示。先看下成果:shop-m使用文档 ,左侧是文档,右侧带有移动端展示,且会根据不同的文档页面,移动端跳转到对应的页面展示。VuePress自定义VuePress 提供的默认主题就挺好的,我们使用 布局插槽 来完成我们的功能。默认主题的 L
2022-05-30 19:14:38
1165
2
原创 cmock 可视化操作
cmock新增可视化功能,包含如下:1. 右上角搜索服务,支持搜索接口名称、接口url、接口mock文件名2. 右上角新增接口mock文件3. 左侧菜单对应配置的 mock 文件目录中的 mock 文件4. 修改接口配置mock文件5. 删除接口mock文件6. 尝试发送接口请求,及时预览接口返回结果
2022-04-04 19:38:37
1160
原创 使用 js 实现 字典
字典是一种以 键值对 形式存数数据的数据结构,javaScript 中的 Object 类就是以字典的形式设置的,所以使用 Object 类本身的特性实现字典 Dictionary 类。属性及方法列表属性或方法描述add方法add(key, value) 向字典中添加 键值对find方法find(key) 从字典中查找 key 键对应的值,找不到则返回 undefinedremove方法remove(key) 从字典中删除 key 键getKeys方
2022-02-05 14:28:02
5397
原创 使用 js 实现 链表
链表是由一组节点组成的集合。单向链表每个节点都使用一个对象的引用指向它的后驱,指向另一个节点的引用叫做链。在链表的最前面有一个特殊节点,叫做头节点。单向链表插入向链表中插入一个节点,需要修改它前面节点(前驱)的链,使其指向新加入的节点,新加入的节点的链指向原来前驱指向的节点。单向链表删除从链表中删除一个节点,将待删除节点的前驱节点的链指向待删除节点的后驱节点,同时将待删除节点的链指向 null 。单向链表属性及方法列表属性或方法描述find方法find(item)
2022-02-04 22:20:59
1149
原创 使用 js 实现 队列
队列是一种特殊的列表,队列只能在队尾插入元素,在队首删除元素。队列用于存储按顺序排列的数据,先进先出。参数接收的参数为数组类型。属性及方法栈的抽象数据类型定义列表属性或方法描述enqueue方法向队尾加入一个元素dequeue方法删除队首的元素front方法读取队首元素back方法读取队尾元素toString方法返回队列的字符串形式clear方法清空队列length方法返回队列内元素的个数empty方法
2022-02-02 22:08:29
1416
原创 使用 js 实现 栈
栈是一种特殊的列表,栈内的元素只能通过栈顶访问,栈是一种后入先出的数据结构。参数接收的参数为数组类型。属性及方法栈的抽象数据类型定义列表属性或方法描述top属性记录栈顶元素的位置,同时也为了标记哪里可以加入新元素,当向栈内压入元素时,top 增大,从栈内弹出元素时,top 减小push方法向栈内压入元素pop方法从栈内弹出元素peek方法返回栈顶元素,该元素依然存在栈内clear方法返回栈顶元素,该元素依然存在栈内length
2022-02-01 16:51:49
1092
原创 使用 js 实现 列表
列表是一组有序的数据,列表中的每个数据项称为元素。本篇文章中列表提供两种实现方式,一种是 ES5 构造函数,一种是 ES6 Class 。参数接收的参数为数组类型。属性及方法列表的抽象数据类型定义列表属性或方法描述listSize属性列表的元素个数pos属性列表的当前位置find方法在列表中查找某一元素在列表中的位置(从0开始计数),未找到则返回 -1contains方法判断给定值是否在列表中,返回 true/falselength方
2022-01-30 22:54:57
4811
原创 Vue3 + Vite + Element Plus 初体验
最近看完 Vue3 和 Vite 文档之后,就写了个小 demo ,整体感觉下来还是很丝滑的。Vue3Vite中文网Element PlusVue3 相关的script setup首先说说组合式API,将对同一块操作的变量函数等放在一起,比如说搜索功能,将和搜索相关的功能集中一块(写出了以前写jQuery的感觉)。其二在 script setup 中提供了另一种代码复用的写法,将代码逻辑封装,例如某个请求,在 script setup 中导入直接调用,返回对应的数据, script set
2022-01-26 23:42:48
967
原创 cmock 原理解读
cmock 简介cmock 用于根据接口自动生成 mock 文件,并根据 mock 文件起 mock 服务。本篇着重讲解 cmock 原理,如果仅关注使用,可以查看 cmock 使用指导 。cmock 原理依然先看 cmock 原理图:npm install// 创建 mock 文件npm run create// 起 mock 服务npm run dev目录介绍本项目的目录如下:目录功
2022-01-25 16:44:01
1526
原创 cmock 使用指导
cmock 简介cmock 用于根据接口自动生成 mock 文件,并根据 mock 文件起 mock 服务。前言搭建 cmock 的缘由是因为项目前后端分离之后,在联调接口前,前后端协商接口数据结构,前端即可根据数据结构来进行数据 mock ,但后端接口一变更,前端又需要维护新的 mock 数据结构,无疑会增加维护成本,所以如果能根据接口自动生成 mock 文件,一是可以降低 mock 的维护成本,二是可以快速生成以前老的
2022-01-24 22:47:46
2143
原创 koa2中使用http-proxy-middleware和koa-bodyparser
前言最近在研究 node.js 代理方面的内容,希望借助代理实现 mock 文件的自动生成,这个后面会写篇文章集中介绍,本篇先汇总下在 koa2 中使用 http-proxy-middleware ,至于为什么选择 http-proxy-middleware 作代理,因为 Vue CLI 就用的 http-proxy-middleware ,这样大家理解配置就更加方便了。koa2 中使用 http-proxy-middleware 和 koa-bodyparser首先引入 koa 和 http-pro
2022-01-23 23:41:15
3607
1
原创 微信开发者工具 Source Map 的使用
在小程序后台 -》开发管理 -》运维中心 -》 错误日志 中可以看到小程序运行中的报错信息,但是代码都是压缩混淆的,那就需要如何去定位,下面说明说如使用微信开发者工具 Source Map。下载微信开发者工具微信开发者工具下载sourceMap文件在小程序后台 -》开发管理 -》运维中心 -》错误日志 可以下载线上最新版本的 Source Map 文件。下载的 sourceMap 的目录和文件说明:1. `APP` 是主包,`FULL` 是整包(仅在不支持分包的低版本微信中使用),其他
2021-12-11 15:26:12
5797
原创 git branch分支管理思考
当前开发代码管理大部分使用的都是 git ,使用 git 一大原因主要就是 git 分支足够灵活,但是当多个开发人员维护同一个项目的时候就需要考虑 git 分支的一些管理规范,下面是我个人对 git 分支管理的一些思考和建议。个人开发当是一个人开发维护项目的时候,大致分支一般包括 master(main) / test / develop / feature ,各分支的功能如下:分支名称分支功能master(main)一般用于发布线上环境的代码分支test一般用于测试环
2021-09-07 22:55:55
850
1
原创 slice.js
文档地址:_.slice(array, [start=0], [end=array.length])源码实现:function slice(array, start, end) { // array == null 包含 array = undefined 和 array = null 的两种情况 let length = array == null ? 0 : array.length if (!length) { return [] } // 当 start = unde
2021-06-25 00:23:20
170
原创 海盗分宝藏
题目:5个海盗分100件宝藏,5人依次提分配方案,当支持人数达到一半及以上则按照此分配方案进行分配,当支持人数少于一半,则把提出该方案的人剔除掉,并且5个海盗足够贪婪,希望自己尽可能多拿,求第一个海盗提出方案的最优解。分割线答案:第1个海盗第2个海盗第3个海盗第4个海盗第5个海盗980101思路:先按人数少的时候考虑:当只有1个人的时候,1个人全拿:第1个海盗100当有2个人的时候,第1个人全拿,因为他占到
2021-06-11 23:46:15
1005
原创 JavaScript Promise
现有如下代码段,执行输出什么:Promise.resolve().then(setTimeout(() => { console.log(1)}, 0))Promise.resolve().then(_ => { setTimeout(() => { console.log(2) }, 0)})setTimeout(() => { console.log(3)}, 0)输出: 1 3 2首先明确, .then 或者 .catch 的参数
2021-06-10 22:53:20
180
2
原创 前端 mock 数据实践
在项目中一般使用 Mock 创建假数据,Mock 有提供拦截请求响应数据的功能 Mock.mock() ,但是 Mock 拦截就导致在 Network 中无法进行数据联调,只能通过 console 打印,使用起来就比较麻烦。这个时候我们可以使用 koa 起本地服务,再通过 Mock 生成数据,前端项目将请求代理到 koa 本地服务,这样就可以在 Network 中进行数据联调了。eMock 使用项目地址:eMock,示例地址:use-eMock。将 eMock 项目克隆到本地,在前端项目中新建一个文件
2021-06-01 09:17:34
398
原创 移动端1px
写本篇文章的时候是看了 移动端1px问题解决方案 ,这里面介绍了多种解决方案,我本篇文章只着重介绍 伪元素先放大后缩小 的方法。可以先点击查看效果链接,建议在Retina屏幕移动端查看:移动端1px,可直接使用手机扫码下方二维码。效果如下:这里只简单介绍两种常用的,其他的举一反三就可以。按钮边框Retina屏幕移动端查看上面的例子,可以发现按钮直接设置 border: 1px solid #aaa; 比使用伪元素宽。下面展示代码:border: 1px solid #aaa;:<bu
2021-05-18 00:48:05
122
原创 微前端qiankun Vue应用间通信的思考
注意:文中的父应用和主应用只是名称不同,但都指主应用基座。之所以会有这个思考,是因为看了一篇文章 基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇 ,其中有介绍使用 Shared 通信,精辟之处在于// micro-app-vue/src/main.js//.../** * 渲染函数 * 主应用生命周期钩子中运行/子应用单独启动时运行 */function render(props = {}) { // 当传入的 shared 为空时,使用子应用自身的 shar.
2021-04-24 23:50:41
2612
原创 动态加载js文件
在日常开发中有很多时候需要动态加载js文件的场景,先看代码再看例子。/** * 动态加载js文件 * @params {String} url 动态加载js文件路径 * @params {Funtion} callback 加载完js文件之后的回调 * @params {String} id 动态加载js文件的script标签的id * @params {Object} parent 动态加载js文件的script标签放在哪个父元素下,默认值为document.body */function
2021-04-19 23:39:08
431
原创 uni-app钉钉小程序兼容性总结
uni-app钉钉小程序兼容性总结本总结基于最开始使用 uni-app 开发的微信小程序,后续又需要开发钉钉小程序。首先钉钉小程序需要自定义条件编译平台,在 package.json 文件中增加 uni-app 扩展节点,如下:{ ... "uni-app": { "scripts": { "mp-dingtalk": { "title":"钉钉小程序", "env": { "UNI_PLATFORM": "mp-a
2021-01-14 10:12:58
4095
2
原创 ant-design-vue select 使用汇总
最近使用ant-design-vue,在使用select的时候遇到一些特殊情况,特此做一下整理汇总。首先实例中的下拉选中为:const options = [ { name: '北京', id: '00001', spell: 'beijing', simpleSpell: 'bj' }, { name: '上海', id: '00002', spell: 'shanghai', simpleSpell: 'sh' },
2020-08-23 21:10:00
10480
2
原创 小程序tabBar右上角添加角标
小程序可以在 pages.json 中使用 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。关于 tabBar 的配置可以查看 https://uniapp.dcloud.io/collocation/pages?id=tabbar 。但我们有时候在某个 tab 展示角标,比如微信第一个 tab 的未读消息提示,第三个 tab 的朋友圈未读消息,这些信息是不能通过 pages.json 中的 tabBar 来配置的,而是使用如下API进行设置:uni.setTabBarB
2020-07-28 00:09:21
2919
1
原创 uni-app开发小程序总结
最近开发项目中使用 uni-app 开发了 微信小程序,整个体验下来还算流畅,下面做一些总结:HBuilderX安装HBuilderX安装的时候选择标准版,不要下载APP开发版,至于uni-app编辑都可以在标准版里面通过插件安装或者是直接通过vue-cli命令行创建项目,另外就我个人使用之后,APP开发版编译小程序的时候,有时候会导致编译出来的小程序页面空白(只剩下<page></page>)。微信开发者工具HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信
2020-07-25 22:08:00
2691
1
原创 Vue + Sentry 搭建前端异常监控系统
Sentry账号及SDK语言选择注册账号:https://sentry.io/for/vue/选择平台:Sentry通过官方的Sentry SDK与许多不同的语言和平台集成。本项目选择 Vue 。安装Sentry SDK安装Sentry的浏览器JavaScript SDK:@sentry/browser : yarn add @sentry/browser 或者 npm install @sentry/browser ,之后@sentry/browser 将报告通过应用程序捕获触发的任何异常
2020-07-20 08:19:34
2843
1
原创 Docker 部署 Sentry
部署 Sentry 要求Docker 17.05.0+Compose 1.23.0+至少需要2400MB RAMDocker 及 Sentry 依赖安装如果 Docker 版本太低,需要卸载旧版本。卸载Docker旧版本较旧的Docker版本称为docker或docker-engine。如果已安装这些程序,请卸载它们以及相关的依赖项。sudo yum remove docker docker-client docker-client-latest docker-common docker
2020-07-05 18:48:02
375
jQuery.lazyload.js
2017-02-19
兼容IE7、IE8、IE9的input type="number"插件
2017-02-18
Ionrangeslider.js
2017-01-19
Node.js开发指南_中文正版.pdf
2016-12-26
《锋利的jQuery》
2016-11-07
你不知道的JavaScript(上卷)
2016-10-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人