- 博客(36)
- 收藏
- 关注
RSS订阅原创 低代码平台组件间事件交互
系统动作和API调用的定义相对比较简单，我们可以在vue组件的methods中进行方法的定义，例如我们可以定义一个request方法用于api的调用，request中调用了我们使用axios封装好的统一的请求方法，request方法支持传入api的urlmethodapi参数等信息。这两类事件为全局事件，我们可以将这些方法放到mixins中，然后在各个组件中进行引用。而对于组件方法，我们需要将组件暴露的方法定义在各个组件的methods中，并在组件加载时进行方法的监听。// TODO})
2023-05-05 20:10:54
1403
原创 总结低代码海报平台编辑器难点
上篇总结了基础的架构，本篇总结下细节方面的难点。这是目前编辑器页面的原型图。不难看出和市面上大部分低代码平台一样，由三部分组成：左侧组件列表、中间画布区域、右侧属性区域。大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。从中看出组件串联其中，在前面一篇文章中，我们大致分析了整体页面和组件的数据结构，但没有细化。
2023-03-16 14:08:12
682
原创 拿起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
207
原创 拿起Typescript做一个轮子（四）
处理网络异常错误当网络出现异常的时候发送请求会触发XMLHttpRequest对象实例的error事件，于是我们可以在onerror的事件回调函数中捕获此类错误。我们在xhr函数中添加以下代码：处理超时错误我们可以设置某个请求的超时时间timeout，也就是当请求发送超过某个时间后仍然没收到响应，则请求自动终止，并触发timeout事件。请求默认的超时时间是0，所以我们首先...
2019-07-15 20:51:53
207
原创 拿起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
350
原创 拿起Typescript做一个轮子（二）
编写基础请求代码我们现在开始编写源码，我们的目标是实现简单的发送请求功能，即客户端通过XMLHttpRequest对象把请求发送到Server端，Server端能收到请求并响应即可。我们实现axios最基本的操作，通过传入一个对象发送请求，如下：创建入口文件先把初始化src下的文件删除掉，然后创建个index.ts文件，作为整个库的入口文件，然后先定义个axios方法并导出，如...
2019-07-05 14:10:19
220
原创 拿起Typescript做一个轮子（一）
从今天起我将从零用Typescript重构Axios，不仅可以让我从真实的项目中掌握Typescript，也能让我对一个库的实现有更深刻的掌握为什么学习Typescript?最近TypeScript 的火爆程度大有成为下一代前端开发语言的趋势，TypeScript 作为 JavaScript 语言的超集，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。...
2019-07-01 16:50:23
434
1
原创 微信小程序生成带二维码图片
一、如何生成小程序分享页面的二维码？通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做...
2019-06-06 19:01:03
16897
1
原创 在 JS 循环中正确使用 async 与 await
记录下工作中碰到的问题准备一个例子假设你需要在循环中进行请求，在请求返回结果后再进行下一个循环的请求，这里我们使用setTimeout来模拟。在 forEach 循环中使用 await一开始我使用的是forEach循环我期望打印以下内容："start""10""20”"30”"end”但实际打印以下内容:"start""end""10"...
2019-06-05 17:05:52
8428
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
169
转载 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
1681
转载 移动端常见bug汇总
点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highl...
2018-06-05 12:19:01
567
原创 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
13813
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
1507
2
原创 vue中修改了数据但视图无法更新的情况
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： push()pop()shift()unshift()splice()sort()reverse()vue2.0还增加个方法可以观测Vu...
2018-03-02 15:14:02
2471
转载 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
607
转载 浅谈BFC及其作用
一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局
2018-01-12 12:01:20
316
原创 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
16700
原创 Vuex架构设计
记录最近学到的应该怎样去设计Vuex首先代码都放在src下的store目录store下有六个js文件：1.index.js：入口文件，其中debug是线下false，线上true。然后strict是是否开启严格模式，开启时会检测对state的修改是不是通过mutations来修改的，如果不是则会报错。最后plugins是Vuex的插件，而createLogg
2017-09-20 11:58:56
1142
原创 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
3875
1
原创 vue-router在同一个路由下切换，取不到变化的路由参数
最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。在网上查找了一番后发现可以这样写：watch: { '$route' (to, from) { //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了 console.log(this.$route.quer
2017-09-12 10:02:18
5787
转载 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
602
转载 vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述：最近在开发cms的时候使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，自己在服务器端配置nginx。部署完成后，访问没问题，从页面中点击跳转也没问题，但是只要点击刷新或通过浏览器地址栏回车，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的在服务器上 如直接访问地址：http://10.***.**.1
2017-07-25 12:01:44
6285
原创 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
6789
原创 vue router-link 上添加点击事件
在vue学习中遇到给router-link添加点击事件无效的情况。例如：发现事件没有执行，后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on例如：这样就可以啦！学习笔记，如有不足请多指教！
2017-07-24 17:57:36
3186
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人