自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(36)
  • 收藏
  • 关注

原创 低代码平台组件间事件交互

系统动作和API调用的定义相对比较简单,我们可以在vue组件的methods中进行方法的定义,例如我们可以定义一个request方法用于api的调用,request中调用了我们使用axios封装好的统一的请求方法,request方法支持传入api的urlmethodapi参数等信息。这两类事件为全局事件,我们可以将这些方法放到mixins中,然后在各个组件中进行引用。而对于组件方法,我们需要将组件暴露的方法定义在各个组件的methods中,并在组件加载时进行方法的监听。// TODO})

2023-05-05 20:10:54 1356

原创 总结低代码海报平台编辑器难点

上篇总结了基础的架构,本篇总结下细节方面的难点。这是目前编辑器页面的原型图。不难看出和市面上大部分低代码平台一样,由三部分组成:左侧组件列表、中间画布区域、右侧属性区域。大致操作流程就是拖动左侧的组件到中间的画布,选中组件,右侧属性面板就会展示与该组件关联的属性。编辑右侧属性,画布中对应的组件样式就会同步更新。页面拼接完成。从中看出组件串联其中,在前面一篇文章中,我们大致分析了整体页面和组件的数据结构,但没有细化。

2023-03-16 14:08:12 584

原创 总结如何设计一款营销低代码可视化海报平台

前端低代码

2023-02-13 10:26:30 1993

原创 裁剪图片原理

前端

2023-01-12 15:36:49 572

原创 DOM生成图片原理

前端

2022-12-23 09:09:52 1054

原创 Vue3组件库项目基础搭建

前端组件库

2022-12-06 11:29:25 2895

原创 脚手架开发流程

脚手架

2022-11-12 18:57:55 531

原创 自研前端监控系统总结(SDK篇)-上报方式

前端监控

2022-11-03 09:30:51 432

原创 自研前端监控系统总结(SDK篇)-接口监控

前端监控

2022-10-31 18:36:23 235

原创 自研前端监控系统总结(SDK篇)-行为监控

前端监控

2022-10-29 10:10:23 543

原创 自研前端监控系统总结(SDK篇)-性能监控

前端监控

2022-10-26 08:54:03 359

原创 自研前端监控系统总结(SDK篇)-错误监控

前端监控

2022-10-24 22:44:57 516

原创 vue3+vite+ts+koa2构建vue3 SSR项目

vue3 ssr

2022-10-20 11:32:49 1779 1

原创 拿起Typescript做一个轮子(五)

扩展接口需求分析为了更加方便的使用axios发送请求,我们可以为所有支持请求方法扩展一级接口:axios.request(config) axios.get(url,[,config]) axios.delete(url,[,config]) axios.header(url,[,config]) axios.options(url,[,config]) axios....

2019-07-21 16:11:49 192

原创 拿起Typescript做一个轮子(四)

处理网络异常错误当网络出现异常的时候发送请求会触发XMLHttpRequest对象实例的error事件,于是我们可以在onerror的事件回调函数中捕获此类错误。我们在xhr函数中添加以下代码:处理超时错误我们可以设置某个请求的超时时间timeout,也就是当请求发送超过某个时间后仍然没收到响应,则请求自动终止,并触发timeout事件。请求默认的超时时间是0,所以我们首先...

2019-07-15 20:51:53 197

原创 拿起Typescript做一个轮子(三)

Url处理需求分析把params参数拼接到url上,参数值支持对对象、数组、Date、特殊字符串的处理,丢弃url中的哈希标记,保留url中已存在的参数我们在src下新建helpers文件夹作为我们之后存放公共辅助函数的地方,在该文件夹下新建url.ts和util.ts文件,url.ts编写对url进行处理的相关逻辑,util.ts编写对数据类型进行判断的相关逻辑。因为在处理url时...

2019-07-11 11:44:09 331

原创 拿起Typescript做一个轮子(二)

编写基础请求代码我们现在开始编写源码,我们的目标是实现简单的发送请求功能,即客户端通过XMLHttpRequest对象把请求发送到Server端,Server端能收到请求并响应即可。我们实现axios最基本的操作,通过传入一个对象发送请求,如下:创建入口文件先把初始化src下的文件删除掉,然后创建个index.ts文件,作为整个库的入口文件,然后先定义个axios方法并导出,如...

2019-07-05 14:10:19 204

原创 拿起Typescript做一个轮子(一)

从今天起我将从零用Typescript重构Axios,不仅可以让我从真实的项目中掌握Typescript,也能让我对一个库的实现有更深刻的掌握为什么学习Typescript?最近TypeScript 的火爆程度大有成为下一代前端开发语言的趋势,TypeScript 作为 JavaScript 语言的超集,它为 JavaScript 添加了可选择的类型标注,大大增强了代码的可读性和可维护性。...

2019-07-01 16:50:23 420 1

原创 微信小程序生成带二维码图片

一、如何生成小程序分享页面的二维码?通过后台接口可以获取小程序任意页面的二维码,具体可以参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html通过该接口生成的小程序码,永久有效,数量暂无限制。用户扫描该码进入小程序后,开发者需在对应页面获取的码中 scene 字段的值,再做...

2019-06-06 19:01:03 16755 1

原创 在 JS 循环中正确使用 async 与 await

记录下工作中碰到的问题准备一个例子假设你需要在循环中进行请求,在请求返回结果后再进行下一个循环的请求,这里我们使用setTimeout来模拟。在 forEach 循环中使用 await一开始我使用的是forEach循环我期望打印以下内容:"start""10""20”"30”"end”但实际打印以下内容:"start""end""10"...

2019-06-05 17:05:52 8318 5

转载 js使用小技巧

1. 类型强制转换1.1 string强制转换为数字可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN'32' * 1 // 32'ds' * 1 // NaNnull * 1 /...

2018-07-24 11:44:07 159

转载 20个正则表达式

1 . 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$2. 校验中文字符串仅能是中文。^[\\u4e00-\\u9fa5]{0,}$3. 由数字、26个英文字母或下划线组成的字符串^\\w+$4. 校验E-Mail 地址同密...

2018-07-17 16:11:15 1621

转载 移动端常见bug汇总

点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化中以避免所以问题:div,input(selector) {-webkit-tap-highl...

2018-06-05 12:19:01 559

原创 react中子组件取不到this.props.history

之前写react的时候发现被react-redux的connect包裹的子组件取不到this.props.history这个对象,可是我又的确需要这个对象怎么办?解决办法也很简单,首先你需要这个import PropTypes from 'prop-types'然后你的组件.contextTypes = { router: PropTypes.object.isRequired}然后你就可以...

2018-04-25 15:34:01 13791 2

转载 React事件绑定的几种方式对比

React事件绑定由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种:1. 在构造函数中使用bind绑定thisclass Button extends React.Component {constructor(props) { super(props); this...

2018-03-19 16:50:22 1498 2

原创 vue中修改了数据但视图无法更新的情况

我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况:数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push()pop()shift()unshift()splice()sort()reverse()vue2.0还增加个方法可以观测Vu...

2018-03-02 15:14:02 2462

转载 cordova打包vue2 app

使用cordova打包vue2(webpack)app for android ios1、vue项目通过vue-cli脚手架建立项目,使用webpack进行打包,下边是一整套命令。#npm 版本最好是最新的,升级npm,node版本也有要求npm i -g npm# 安装脚手架npm install -g vue-cli#初始化新建项目vue init webp

2018-01-26 17:00:46 598

转载 浅谈BFC及其作用

一、什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局

2018-01-12 12:01:20 307

原创 vue中渲染数据可能有一个无限更新循环--You may have an infinite update loop in a component render function.

今天在在工作中碰到个问题,在此记录下。今天在接接口数据时发现数据搞反了,于是想着把数据倒叙一下<row-list v-if="dataList.rules" :canSelect="!isClose" :dataList="dataList.rules[0].subLotteryRule[0].subLotteryRule.reverse()" @sel

2017-12-05 17:48:22 16667

原创 Vuex架构设计

记录最近学到的应该怎样去设计Vuex首先代码都放在src下的store目录store下有六个js文件:1.index.js:入口文件,其中debug是线下false,线上true。然后strict是是否开启严格模式,开启时会检测对state的修改是不是通过mutations来修改的,如果不是则会报错。最后plugins是Vuex的插件,而createLogg

2017-09-20 11:58:56 1122

原创 axios Get和POST方法

GET:return axios.get(url, { params: data}).then((res) => { return Promise.resolve(res.data)})POST:return axios.post(url,qs.stringify(data)).then((res) => { return Promise.r

2017-09-12 10:26:11 3864 1

原创 vue-router在同一个路由下切换,取不到变化的路由参数

最近用vue写项目的时候碰到一个问题,在同一个页面下跳转,路由地址不变,路由参数有变化,一开始只是在data里取路由的参数,发现根本取不到变化的路由参数。在网上查找了一番后发现可以这样写:watch: { '$route' (to, from) { //这样就可以获取到变化的参数了,然后执行参数变化后相应的逻辑就行了 console.log(this.$route.quer

2017-09-12 10:02:18 5764

转载 vue-cli的webpack模板项目配置文件分析

一、文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpa

2017-08-30 14:31:30 592

转载 vue-route+webpack部署单页路由项目,访问刷新出现404问题

问题描述:最近在开发cms的时候使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,自己在服务器端配置nginx。部署完成后,访问没问题,从页面中点击跳转也没问题,但是只要点击刷新或通过浏览器地址栏回车,就会出现404现象!在本地开发中是没有这个问题的,调试的时候一切都是正常的在服务器上 如直接访问地址:http://10.***.**.1

2017-07-25 12:01:44 6264

原创 vue打包后图片路径错误

vue项目在打包之后背景图片访问出错?首先,出错点在url-loader上面。// url-loader配置// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.asse...

2017-07-25 10:43:46 6767

原创 vue router-link 上添加点击事件

在vue学习中遇到给router-link添加点击事件无效的情况。例如:发现事件没有执行,后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on例如:这样就可以啦!学习笔记,如有不足请多指教!

2017-07-24 17:57:36 3164

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除