- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue-matomo页面数据采集插件，在ios系统中undefined不生效问题解决方案记录
先上使用说明步骤：1.main.js文件中使用该插件2.在路由中配置需要跳过统计的页面路3.在需要统计的页面初始化时植入统计代码：在按钮中植入点击统计埋点：这样就完成了；但是上线后却发现在ios端不能正常采集数据，在安卓上可以正常采集数据；查看matomo官档后，发现如下提示：按要求将测试站点的http的地址换成https的地址后，再上线用ios手机采集信息正常获取到了数据信息，安卓也正常，所以确定是因为采集站点http在ios系统中没有得到授权认证等问.
2021-01-15 17:44:47
742
2
原创 js中的字符串string常用属性方法大全
var str='343433CCC9999'; //全篇通用定义的字符串哈 length属性返回字符串长度：str.length;//获取字符串str的长度 查找字符串中的字符：（共三种方法）1.indexOf('你想查找的字符或字符串',开始检索的位置number可省略) =>返回字符串中指定文本首次出现的索引（位置），找不到返回-1，如果指定开始检索的位置了则从开始位置检索到最后一个字符，不指定位置默认从0位开始检索到最后一位；2.lastIndexOf('你想查找到字符或字符串',开始检.
2021-01-14 12:01:17
320
原创 ant-design-vue中的视频上传组件upload自定义本地预览视频、校验视频类型、校验上传视频文件大小等功能
新项目中需要用到新闻视频上传功能，UI组件库采用的是ant-design-vue，所以就用里面的upload组件改造自定义了一个视频上传组件。上代码：关键定义点在于1.校验视频文件大小： //校验 文件大小 checkSize(file, size) { let that = this return new Promise(function (resolve, reject) { if (file.size / 1024 > s
2021-01-13 16:56:02
10748
23
原创 解析jeecg-boot的数据字典，涉及到了vue的组件封装、ajax请求等
jeecg-boot中的数据字典本质其实是一个封装好的组件，然后在使用时单独传入后端给的code码给组件需要的字段，在数据字典组件里再通过接收到的code码发起ajax请求从而获取字典数据。字典组件html结构如图：定义props属性，用于从父组件获取数据字典组件所需的数据信息，具体如下：下面是对该组件处理数据的部分了：然后是关键逻辑了：接下来看看在业务组件里的使用是神魔样子的吧！这里数据字典表格中是这样用的，原理和上面差不多，都是事先封装好组件和取字典的通用..
2021-01-13 13:46:17
1965
6
原创 对jeecg-boot项目的前端可复用功能的分析（关键依赖于vue的mixin)
将可复用功能提取，用到vue的mixin技能；上图为jeecg中定义可复用功能的mixin.js，关键步骤如图圈中点：引入vue,export暴露对象，定义所需的data数据、钩子函数、methods方法。下面是在目标组件中的使用：在使用jeecg时发现一个规律，也是mixin混入的特殊点：当某个组件中存在与mixin对象相同的选项的时候，组件的选项会覆盖mixin的选项，执行组件的内容。特别的是，以上面的loadData()加载列表数据函数为例，我在组件中单独定义一个函数，手动调用l..
2021-01-13 10:53:56
766
原创 原生js请求ajax时关于隐藏url上的参数处理方法记录
忙碌的一年又一年，好久没来看我的博客了，充实的时光总是让我成长，这一年又积累了很多新技能新知识新视野，今天好不容易有点空闲，赶紧记录一下刚刚给人解决的小问题吧。下面直接上我给的解决方案哈：核心思路就是把参数以post方式传输；用到的具体知识点如下：封装模拟类函数function HideParams(url,param){//创建表单 let formDom = document.body.appendChild(document.createElement('form'..
2021-01-12 16:50:32
1856
1
原创 vue项目中：PC端导出csv或excel数据表方法及其移动端导出表格方法
需求是在前端导出人员明细表，后端只给提供json格式的数据，函数方法如下:一：第一种方法：（不可移动端导出）//导出明细csv格式（纯前端导出）getExport(){//this.getDetailList();if(this.startTime&&this.endTime){exportAccess...
2020-03-05 15:05:00
1363
原创 vue项目的登录处理之路由守卫router.beforeEach(），用户在未登录状态下，展示的一直是登录界面。
简单记录一下需求处理，当项目中的除了登录页或其它一两个页面不需要用户登录数据，其它页面均需要登录信息才能正常展示，那么就要做路由全局守卫了，回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。如下例：main.js中设置全局守卫在main.js中，有一个路由实例化对象router。在main.js中设置守卫就是全局守卫。...
2019-12-30 16:01:22
1063
原创 移动端IOS不兼容的情况处理小结
一.vant的导航tab标签产生的ios不兼容问题：1.用了vant的tab标签页，使用吸顶模式在苹果机上会出现一个返回此页面后列表顶部tab分类标签消失的情况：正常样式在苹果机上顶部的导航条标签消失了（使用的吸顶，浏览器渲染后结构里自动换成fixed属性） 解决：考虑到页面的 fixed 元素失效，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了...
2019-12-30 15:46:40
2750
原创 vue项目引入腾讯移动分析平台统计页面浏览量和功能按钮点击量的具体方法步骤
步骤如下:1. 打开网址, 使用自己的QQ登陆http://mta.qq.com/2. 点击"我的应用" 0-> "HTML5应用" -> "新建应用", 此处已经新建好了一个, 如果要给按钮添加监听事件, 查看按钮的点击次数, 记得勾选"自定义事件".新建应用2.点击自己应用的右上角管理，复制如下代码, 添加到index.html页面中去, 放在title下面...
2019-12-30 14:54:11
2340
1
原创 vue项目开发的H5单页应用放进微信公众号进行微信分享的几个重要步骤
2实在是太忙了，许久不曾有空更新，对不起我的博客，冷落了它~~直接上需求，我们的vue开发H5单页应用封进微信公众号进行使用，其中有一个重要的微信分享功能，第一次接触，正经八百踩了好几个坑。1.wxShare是我封装好的接口，需要发起请求获取微信分享认证授权后才能设置分享项和分享样式信息。、对上面的进行补充修改：苹果手机二次分享签名失效，因为后面被加上了苹果的参数，用enc...
2019-12-26 16:15:56
1999
6
原创 解决clone项目install后运行报错：No ESLint configuration found的问题和vue深度选择器的使用；
1.报错内容：npm intall后npm run dev运行报错2.解决办法：解决办法详细解说总结：该错误主要两个命令：第一个命令是npm install eslint --save-dev；第二个命令是配置eslint: ./node_modules/.bin/eslint --init 初始化配置文件；此配置文件配置好之后，vscode编辑器自动...
2019-09-16 17:46:07
1666
原创 关于mintUI中popup弹层和datePicker的使用中各种文档不全自行摸索的记录
该项目中选用了mintUI框架，但是用起来发现文档并不那么全面，但已经写好很多页面和功能了，因此只好继续摸索，其中包括日期选择器的初始值设置，起始结束年限的设置，timepicker默认选中的小时和分钟的初始值设置等；如下：1.效果：2.代码： 1).datepicker的HTML结构代码；2）data数据设置代码3）.函数代码4）.po...
2019-09-11 17:25:31
383
原创 移动项目中sessionStorage的简单使用和js拼接html页面的相关使用；
本次项目使用的是基于JQ的js技术，页面直接的数据传递采用了sessionStorage存储，根据后台返回的数组长度渲染页面，采用js拼接html方式，关注点有单选框的写法，点击本条数据的上下拉按钮，效果如图：项目最终实现效果GIF图1.登录后需要存储手机号和登录接口返回的产品数组，存储sessionStorage过程如下：数组不能直接存储进sessionStoragel里，需要用...
2019-09-06 09:48:50
246
原创 关于vue单页面应用访问路径添加项目名的设置步骤
我想要的访问路径效果如图：1.在index.html的头部中设置红框圈中的代码：2.在router.js中设置路由模式如下（设置history是为了去掉默认的#锚点）：3.在vue.config.js中设置公共根路径如下:4.在开发和生产环境中设置默认基路径，防止首次进入页面未点击路由导航时不显示页面：如有更好的方法，请留言指教。谢主隆恩啦！...
2019-08-19 16:46:37
6219
3
原创 关于轮播图的灵活使用之swiper
我的业务需求如下：四张（以后会更多张）卡片一个版面展示三张，可滑动最开始我使用的是vant中自带的swiper组件，但是它仅支持一屏展示一个，我尝试写了内外层的循环，也实现了这种一屏展示三个卡片的效果，但是与后台拉到数据后，数据是一个大数组，要想和前端的页面四张卡片进行数据匹配上就需要对拉取的数据进行分层处理，这样得话也能实现功能和需求，但是一旦卡片数量的数据很多的话就会造成卡顿等响应缓...
2019-08-19 11:50:52
292
原创 已阅读并同意***协议的单选框制作注意事项------checkbox与radio的使用
一.我需要的效果是支付方式为多选一，只有一项时默认选中不可取消，服务协议是只有一项协议，可选中可不选中，不选中不可开通，效果如下：阅读并同意使用的是checkbox二，实现代码：单选radio是支付方式使用的，无论选项有一个还是多个，它都必须选中一项，不可以一项不选；服务协议是只有一个服务协议，用户可以同意可以不同意，需要有个选或者不选的过程，因此不能使用rad...
2019-08-19 11:22:23
5657
2
原创 使用$ref绑div节点获取样式改变的初始化样式相关注意事项
一.根据需求要实现的效果如下：每个权益对应相应进入效果，点击其它权益圈后改变二，在这里我使用了$ref绑到对应的div上，然后对其样式进行控制改变，但是进入页面时总显示$ref的changeStyle未定义，后来我查看了生命周期，我在created的时候调用肯定是不行的，因为那时候Dom还没完全生成，后来仔细查看后发现在mounted后系欸但和页面就已经渲染完成了，参考文章如下：...
2019-08-19 11:10:28
1196
原创 求教：vue-cli3创建项目后总是报错版本冲突问题，解决后并不知道为什么这么做就可以成功创建，想知道原理。
抽空记录一下负责移动项目后的第一个技术问题吧；因为需要使用cli3.0版本进行项目搭建，所以我卸载电脑里之前安装的vue-cli2.0版本后安装了vue-cli3，准备创建第一个项目试试效果，结果vue-cli3创建项目后总是报错版本冲突问题：Vue packages version mismatch: [email protected] (C:\Users\24194\node_modules\vue...
2019-07-18 14:13:03
1511
6
原创 实习总结第16谈-----------upload上传文件报错之Uncaught TypeError: Cannot set property 'status' of undefined
再上传文件需求的实现过程中，我触发了一个很微小但很恐怖的bug，查找很久后，发现问题所在，并解决了，如下：1.点击上传到服务器出现错误：效果如图：上传到服务器时出现找不到element的内部属性status报错信息我很清晰的确定这个属性我在代码中没有用到更没有定义过，所以推测是组件的默认属性，在控制台报错文件里找到了这个内部属性，并打断点后经过多番尝试，发现当用组件API中的自动上传...
2019-04-11 09:15:18
3556
8
原创 实习总结第15谈----------上传文件之elementUI中的upload与后台传数据注意点
上传文件在实际开发中是很常见的需求，我的项目是用的element中的upload，与后台传数据不再是axios方式，而是直接用action填写了文件上传地址；1.效果图：导入文件效果图2.HTML结构代码：upload组件写法3.上传文件需要的函数方法：上传文件用到的基本函数4.注意：upload 的上传文件时显示fileList的位置我的样式需求不同组件的原有样...
2019-03-26 14:40:31
1257
3
原创 实习总结第14谈-----------------------vue项目中单个下载文件和批量下载文件以及固定类型文件和不固定类型文件的下载方法小结
在功能性网站的开发工作中经常会用到单个下载文件和批量下载文件的需求，有些文件类型不固定，比如我当前项目中的下载简历文件的格式就不固定，有xls、doc、pdf、txt甚至还有图片格式的简历，此时需要后台处理文件名和文件类型返回给前端，代码如下：1.单个简历下载单个简历预览下载效果图2.批量简历下载：批量下载简历代码函数批量简历下载效果图二.当要下载的文件类型统一...
2019-03-25 13:29:47
432
原创 实习总结第13谈-----------select下拉框选项决定textarea文本域是否必填校验
该需求的接收是，一个弹框子页面，上面是一个select下拉框，该下拉框是必填项，下面是一个文本域，文本域不是必填项，当下拉框的选项是‘其它’这个选项时，文本域变成必填项进行必填校验；我的方法是通过一个select下拉框的change回调函数来控制文本域的校验规则中的必填属性，具体代码和步骤如下：1.select下拉框和文本域代码结构2.change回调函数实现select下拉框...
2019-03-20 14:50:41
1144
原创 实习总结第12谈-------关于element中的时间框限制开始结束时间的方法和表单校验的方法及注意事项
这次写几个比较碎的element中的组件方法和注意细节的总结，也是我在负责的就业系统中遇到的问题一步步研究解决的，做个记录分享给大家，希望有用，如有不妥还请指教；表单中像公司简介等文本域输入值，当后台限长时，例如公司地址文本域后台回应限长最大值500，则前端应限长500的一半即maxlength=‘250’； maxlength属性 文本域maxlength限长...
2019-03-11 17:21:02
599
6
原创 实习总结第11谈-------说说我在实习工作中负责的项目里遇到的宝贵小问题做个记录
实习总结碎碎碎念与后台传参部分，需要检查接口有没有多复制空格，传参时，只要控制台的参数没有显示出传过去的参数字段，都是前端问题，有时候是表单对应字段不对或者没有初始化该参数，有时候是字段名大小写错误； 查找页面悬浮样式时的方法如图； 布局时一定要注意响应式布局，栅格布局是很好的响应式布局方式。 代码规范：代码结构一定要清晰，从上到下，temp...
2019-03-11 16:00:30
550
原创 实习总结第十谈--------------vue中的echarts漏斗图自适应屏幕的方法解说
在公司的上一个项目中我有负责做一个主页的页面，其中遇到一个漏斗图不自适应屏幕大小的问题，查了文档上的onresize（）方法但在vue中并没有生效，这使我研究了好一会才找到问题所在并得以解决，考虑到上一个系统也是公司内部使用的，还没上线，保密协议啥的毕竟签了，也不知道我直接把项目的代码和页面拉出来行不行，所以我单拉出漏斗图来发博客啦！1.先看效果吧：2.然后上屏幕自适应的函数代码和解说：...
2019-01-08 08:49:22
1943
原创 实习总结第九谈------------------怎样同时选中多个id传给后台
在项目中拉取数据实现删除功能时总是会遇到需要同时传很多条数据的各自id号给后台，这时候要以数组形式传参给后台实现同时操作多个数据的功能；1.我的是在表格中勾选多条数据然后点击删除按钮：首先要把可多选表格的勾选项回调函数中的勾选值打印出来以找到对应的数据id的字段：(此处的staffList数组是在data全局中定义的空数组，然后才能在回调函数中把存进来的id带到全局中传给后台）2.把存...
2019-01-07 17:30:39
868
2
原创 实习总结第八谈-----------element-UI中的message信息提示的使用
这回抽空写一个小小的信息提示的用法，我很稀饭的小东西呦！（很简单的一种）当前业务中需要用到提示信息，用alert弹出被认为是显然不太可爱的，于是乎要求换种形式的；于是我想到了element中的message消息提示框，用法如下：在拉取数据后使用message提示框： ...
2019-01-07 16:54:18
1956
7
原创 实习总结第七谈-----------vue中element-ui的表格行高怎么控制
依旧在我负责的当前项目中举例子：我的表格要求是一页只显示10条数据，且纵向不能产生滚动条，这样就意味着不能设置表格的整体高度来控制，那样会会产生滚动条，要么在表格纵向产生滚动条，要么在屏幕纵向产生滚动条，这时候我就想到了控制表格每一行的高度降低，就不会 十条数据就产生滚动条了，方法如下：一：定义一个table表格的style 的回调方法，如图该方法是element插件中的文档有的固定方...
2019-01-03 17:22:09
1876
原创 实习总结第五谈---------element中的table表格显示时间格式问题
后台直接传回的额时间数据显示在表格中是这样的：后台返回的时间是这样子的，不方便用户看2.我用时间戳函数转换了一下时间格式3.用到了JavaScript 日期处理类库第一步安装该插件：npm install moment 第二步在main.js文件中引入并定义好该插件 ...
2018-12-26 15:37:53
1313
2
原创 实习总结第四谈--------关于vue中定义接口、axios请求后台接口数据和传参与字段问题小结
我当前写的项目用到了下拉框并从后台获取数据；模糊查询筛选条件中需要与后台对字段 标签名字段和value值字段从后台对完的字段 在data中定义循环用到的下拉框数组 ...
2018-12-26 14:43:55
1684
9
原创 实习总结第三谈-------时间选择器插件传参格式与后台不符的解决方法
我正在写的当前项目中涉及到了element中的DataPicker日期选择器，在传参的时候时间格式与后台格式有差异，插件中没有提供毫秒，value-format只能写到yyyy-MM-dd HH:mm:ss,但后台的格式必须有毫秒，故此借用了中间变量在初始化函数中把绑定的起止时间进行了格式化：1.DataPicker日期选择器的代码：两种写法第一种起止时间分开： <el-form...
2018-12-26 11:30:40
502
原创 实习总结第二谈------vue中父子组件拆离
我当前写的这个项目关于父子组件拆离的需求是，在父组件即主页面上的按钮会触发新dialog弹框页面，即子页面，我需要将dialog弹框子页面单独写一个子组件里，以便维护和代码重用；步骤如下：新建一个vue子组件，将dialog弹框中需要写的内容用代码完成；并将该子组件引入到父组件中，在父组件中引入子组件在父组件的script中注册子组件；在父组件中注册子组件在父组件template中使用子...
2018-12-20 09:10:07
245
1
原创 开启我的实习总结之旅--------vue导出excel表格的步骤
大三结束时期，即将步入大四的我终于在2018年7月5号光荣的被录入东软，作为前端开发工程师开启了我的工作生涯，到今天2018年12月19号，已经几个月了，这段时间我把自己工作中遇到的问题和解决方法都零零碎碎的记在本子上了.现在，当前项目我负责的部分已经有了眉目，是时候该把内阁应该叫做技术博客的东西搞一搞了。第一个总结：vue导出文件为excel表格的步骤在有表格需要被导出的vue组件页...
2018-12-19 14:21:15
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人