- 博客(207)
- 资源 (18)
- 收藏
- 关注
RSS订阅
原创 泛积木-低代码 使用攻略
泛积木-低代码通过以上的一些创新思路提供更加高效、便捷的开发，助力您更好、更快的实现功能上线。上面是对 泛积木-低代码 总纲介绍使用，详情可以查看使用指引来更全面的了解。
2023-10-28 22:21:42
508
原创 泛积木-低代码
泛积木-低代码 最大的特色 就是 **零前端** ，包含可视化页面编辑器，页面的开发不再局限于前端工程师，后端工程师、甚至不懂代码的也可以通过页面拖拽、配置生成页面。如果您是后端开发，接收外包项目，处于无前端的尴尬，泛积木-低代码 可以帮您解决，并让您把控整个项目；如果您们团队的主力研发都是后端，可以使用 泛积木-低代码 正常开发项目功能，并节省人力及时间成本。
2023-07-01 18:22:39
863
原创 人人都可配置的大屏可视化
大屏主要是为了展示数据和酷炫的效果，布局大部分是9宫格，或者在9宫格上做的延伸，现在介绍下 泛积木-低代码 提供的大屏可视化配置。首先查看效果展示。创建页面之后，点击进入编辑页面，在可视化编辑器左侧组件往下翻，找到自定义组件中的，将 大屏布局组件 拖入页面，可以看到下面的成果：拖入的 大屏布局组件 将使用基础配置，并且已经自带了缩放容器组件。
2024-01-30 21:32:19
842
原创 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
642
1
原创 React echarts封装
做大屏的时候经常会遇到 echarts 展示，下面展示在 React （^18.2.0） 中对 echarts （^5.4.0） 的简单封装。文章首发于。
2023-02-26 12:34:51
951
原创 Vue echarts封装
做大屏的时候经常会遇到 echarts 展示，下面展示在 Vue2.7 / Vue3 中对 echarts （^5.4.0） 的简单封装。文章首发于https://blog.fxss.work/vue/echarts封装.html，样例查看如下演示 echarts 封装使用：可以将如下代码拷贝到项目运行，更方便查看效果
2023-02-26 10:38:18
1140
原创 chrome多tab页video播放问题
最近在做大屏项目，在研发测试阶段，一切正常，在投放线上的时候，线上是在一台机器上同时打开10来个chrome tab页，这个时候测试反馈说线上查看的时候页面视频很卡，页面刷新视频就动了一下就不动了，我在自己本地页面也试了下，chrome 同时打开 10 个 tab 页播放视频，确实是视频动了一下就不播放了。视频多是采用如下方案，进入页面之后自动播放：或者按理说是没问题的，最后在网上查资料，说是可能硬件加速的一些问题，在 chrome 浏览器的搜索框中搜索 , 在页面中再搜索 :需要将上述两项搜索结果
2022-12-04 11:51:44
1905
原创 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
6976
2
原创 tailwindcss 一览表
tailwindcss 包含丰富的样式定义，且支持自由配置，可在项目中统一使用，减少 css 定义，将 css 声明写入 html ，查看 html 代码即可知道 css 样式。
2022-11-14 10:35:27
2282
原创 web 签字板实现
签字板 主要适用于 电子签名，比如购买贵重物品的时候，可能就需要使用电子签名。使用效果可点击查看，可以直接在上面进行手动签名，拿到签名信息后保存到服务器端。signaturePad 组件放置于 ，在需要使用的组件中局部注册使用。通过 `ref`` 可以获取到 SignaturePad 实例并调用实例方法。......
2022-06-16 20:11:34
1051
原创 vuepress搭建带有移动端展示的文档
VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。本文是使用 vuepress 搭建类似于 vant 文档，右侧带有移动端展示。先看下成果：shop-m使用文档 ，左侧是文档，右侧带有移动端展示，且会根据不同的文档页面，移动端跳转到对应的页面展示。VuePress自定义VuePress 提供的默认主题就挺好的，我们使用 布局插槽 来完成我们的功能。默认主题的 L
2022-05-30 19:14:38
979
2
原创 cmock 可视化操作
cmock新增可视化功能，包含如下：1. 右上角搜索服务，支持搜索接口名称、接口url、接口mock文件名2. 右上角新增接口mock文件3. 左侧菜单对应配置的 mock 文件目录中的 mock 文件4. 修改接口配置mock文件5. 删除接口mock文件6. 尝试发送接口请求，及时预览接口返回结果
2022-04-04 19:38:37
1087
原创 使用 js 实现 字典
字典是一种以 键值对 形式存数数据的数据结构，javaScript 中的 Object 类就是以字典的形式设置的，所以使用 Object 类本身的特性实现字典 Dictionary 类。属性及方法列表属性或方法描述add方法add(key, value) 向字典中添加 键值对find方法find(key) 从字典中查找 key 键对应的值，找不到则返回 undefinedremove方法remove(key) 从字典中删除 key 键getKeys方
2022-02-05 14:28:02
5114
原创 使用 js 实现 链表
链表是由一组节点组成的集合。单向链表每个节点都使用一个对象的引用指向它的后驱，指向另一个节点的引用叫做链。在链表的最前面有一个特殊节点，叫做头节点。单向链表插入向链表中插入一个节点，需要修改它前面节点（前驱）的链，使其指向新加入的节点，新加入的节点的链指向原来前驱指向的节点。单向链表删除从链表中删除一个节点，将待删除节点的前驱节点的链指向待删除节点的后驱节点，同时将待删除节点的链指向 null 。单向链表属性及方法列表属性或方法描述find方法find(item)
2022-02-04 22:20:59
1046
原创 使用 js 实现 队列
队列是一种特殊的列表，队列只能在队尾插入元素，在队首删除元素。队列用于存储按顺序排列的数据，先进先出。参数接收的参数为数组类型。属性及方法栈的抽象数据类型定义列表属性或方法描述enqueue方法向队尾加入一个元素dequeue方法删除队首的元素front方法读取队首元素back方法读取队尾元素toString方法返回队列的字符串形式clear方法清空队列length方法返回队列内元素的个数empty方法
2022-02-02 22:08:29
1355
原创 使用 js 实现 栈
栈是一种特殊的列表，栈内的元素只能通过栈顶访问，栈是一种后入先出的数据结构。参数接收的参数为数组类型。属性及方法栈的抽象数据类型定义列表属性或方法描述top属性记录栈顶元素的位置，同时也为了标记哪里可以加入新元素，当向栈内压入元素时，top 增大，从栈内弹出元素时，top 减小push方法向栈内压入元素pop方法从栈内弹出元素peek方法返回栈顶元素，该元素依然存在栈内clear方法返回栈顶元素，该元素依然存在栈内length
2022-02-01 16:51:49
933
原创 使用 js 实现 列表
列表是一组有序的数据，列表中的每个数据项称为元素。本篇文章中列表提供两种实现方式，一种是 ES5 构造函数，一种是 ES6 Class 。参数接收的参数为数组类型。属性及方法列表的抽象数据类型定义列表属性或方法描述listSize属性列表的元素个数pos属性列表的当前位置find方法在列表中查找某一元素在列表中的位置（从0开始计数），未找到则返回 -1contains方法判断给定值是否在列表中，返回 true/falselength方
2022-01-30 22:54:57
4645
原创 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
897
原创 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
1276
原创 cmock 使用指导
cmock 简介cmock 用于根据接口自动生成 mock 文件，并根据 mock 文件起 mock 服务。前言搭建 cmock 的缘由是因为项目前后端分离之后，在联调接口前，前后端协商接口数据结构，前端即可根据数据结构来进行数据 mock ，但后端接口一变更，前端又需要维护新的 mock 数据结构，无疑会增加维护成本，所以如果能根据接口自动生成 mock 文件，一是可以降低 mock 的维护成本，二是可以快速生成以前老的
2022-01-24 22:47:46
1856
原创 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
3323
1
原创 微信开发者工具 Source Map 的使用
在小程序后台 -》开发管理 -》运维中心 -》 错误日志 中可以看到小程序运行中的报错信息，但是代码都是压缩混淆的，那就需要如何去定位，下面说明说如使用微信开发者工具 Source Map。下载微信开发者工具微信开发者工具下载sourceMap文件在小程序后台 -》开发管理 -》运维中心 -》错误日志 可以下载线上最新版本的 Source Map 文件。下载的 sourceMap 的目录和文件说明：1. `APP` 是主包，`FULL` 是整包（仅在不支持分包的低版本微信中使用），其他
2021-12-11 15:26:12
5451
原创 git branch分支管理思考
当前开发代码管理大部分使用的都是 git ，使用 git 一大原因主要就是 git 分支足够灵活，但是当多个开发人员维护同一个项目的时候就需要考虑 git 分支的一些管理规范，下面是我个人对 git 分支管理的一些思考和建议。个人开发当是一个人开发维护项目的时候，大致分支一般包括 master(main) / test / develop / feature ，各分支的功能如下：分支名称分支功能master(main)一般用于发布线上环境的代码分支test一般用于测试环
2021-09-07 22:55:55
767
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
149
原创 海盗分宝藏
题目：5个海盗分100件宝藏，5人依次提分配方案，当支持人数达到一半及以上则按照此分配方案进行分配，当支持人数少于一半，则把提出该方案的人剔除掉，并且5个海盗足够贪婪，希望自己尽可能多拿，求第一个海盗提出方案的最优解。分割线答案：第1个海盗第2个海盗第3个海盗第4个海盗第5个海盗980101思路：先按人数少的时候考虑：当只有1个人的时候，1个人全拿：第1个海盗100当有2个人的时候，第1个人全拿，因为他占到
2021-06-11 23:46:15
810
原创 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
130
2
原创 前端 mock 数据实践
在项目中一般使用 Mock 创建假数据，Mock 有提供拦截请求响应数据的功能 Mock.mock() ，但是 Mock 拦截就导致在 Network 中无法进行数据联调，只能通过 console 打印，使用起来就比较麻烦。这个时候我们可以使用 koa 起本地服务，再通过 Mock 生成数据，前端项目将请求代理到 koa 本地服务，这样就可以在 Network 中进行数据联调了。eMock 使用项目地址：eMock，示例地址：use-eMock。将 eMock 项目克隆到本地，在前端项目中新建一个文件
2021-06-01 09:17:34
326
原创 移动端1px
写本篇文章的时候是看了 移动端1px问题解决方案 ，这里面介绍了多种解决方案，我本篇文章只着重介绍 伪元素先放大后缩小 的方法。可以先点击查看效果链接，建议在Retina屏幕移动端查看：移动端1px，可直接使用手机扫码下方二维码。效果如下：这里只简单介绍两种常用的，其他的举一反三就可以。按钮边框Retina屏幕移动端查看上面的例子，可以发现按钮直接设置 border: 1px solid #aaa; 比使用伪元素宽。下面展示代码：border: 1px solid #aaa;：<bu
2021-05-18 00:48:05
94
原创 微前端qiankun Vue应用间通信的思考
注意：文中的父应用和主应用只是名称不同，但都指主应用基座。之所以会有这个思考，是因为看了一篇文章 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 ，其中有介绍使用 Shared 通信，精辟之处在于// micro-app-vue/src/main.js//.../** * 渲染函数 * 主应用生命周期钩子中运行/子应用单独启动时运行 */function render(props = {}) { // 当传入的 shared 为空时，使用子应用自身的 shar.
2021-04-24 23:50:41
2455
原创 动态加载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
393
原创 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
3751
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
9890
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
2744
1
原创 uni-app开发小程序总结
最近开发项目中使用 uni-app 开发了 微信小程序，整个体验下来还算流畅，下面做一些总结：HBuilderX安装HBuilderX安装的时候选择标准版，不要下载APP开发版，至于uni-app编辑都可以在标准版里面通过插件安装或者是直接通过vue-cli命令行创建项目，另外就我个人使用之后，APP开发版编译小程序的时候，有时候会导致编译出来的小程序页面空白（只剩下<page></page>）。微信开发者工具HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信
2020-07-25 22:08:00
2601
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
2679
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
310
原创 Vue cli 配置CDN及Gzip
在Vue项目中，为了提升性能缩短首页的白屏时间（更具体的白屏时间可查看Web 性能优化-首屏和白屏时间），我们可以通过将公共库采用CDN引入的方式以及将资源文件压缩的方式。关于 配置CDN及Gzip 之后可从以下3个链接进行体验，在 Chrome 开发者工具 Network 中勾选 Disable Cache：未配置CDN及Gzip：https://www.fxss.work/authorityRouter配置CDN但未配置Gzip：https://www.fxss.work/authorityRo
2020-06-04 17:13:05
368
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
深入浅出ES6
2016-10-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人