前端开发
关注
分享
扫一扫
Lucky_Aimee
这个作者很懒，什么都没留下…
展开
-
git从官网下载失败
从git官网上下载很缓慢，下载一半之后经常失败解决方案：从淘宝镜像下载，各个版本均有。地址：https://npm.taobao.org/mirrors/git-for-windows原创 2021-01-05 13:15:33 · 633 阅读 · 0 评论 -
Vue项目升级后路由跳转无反应，报错Loading chunk chunk-xxxxx failed
现象描述：系统升级后，偶尔出现切换菜单无响应情况，手动刷新界面后恢复正常，报错信息如图所示原因分析：项目中使用了路由懒加载，每次发版且未手动刷新界面，点击菜单时，对应的文件在服务器端已被删除，此时就出现了点击菜单无反应的情况解决方法：1.不采用懒加载路由2.监听路由错误，正则匹配对应的错误消息后，自动刷新界面，代码如下router.onError((error) => { const pattern = /Loading chunk chunk-(.*)+ failed/g;原创 2020-08-12 09:47:01 · 4278 阅读 · 0 评论 -
界面偶尔出现无权限跳转
背景：系统中的菜单均带权限，权限相关信息为请求接口后保存在cookie中的重现步骤：修改系统时间，并且使用系统后，不关闭浏览器再次调整时间为当前时间，登录时显示无权限跳转；原因分析：使用本地时间设置的cookie，而实际是通过服务器时间判断是否过期，修改时间过大时，会使cookie过期，造成cookie无法设置的问题。系统中将权限存在cookie中的，最后获取到的用户权限为空，造成了登录时显示无权限跳转；参考资料：cookie设置的过期时间是以服务器时间为基准,在浏览器得到服务器的任何HTTP响原创 2020-08-12 09:42:36 · 647 阅读 · 0 评论 -
element ui tree懒加载 新增，编辑，删除子节点后的刷新节点
前面一篇的table的懒加载做了三四天，做的心累。 不得不说这次tree的懒加载比table的懒加载好实现多了，至少官方文档里面提供了方法，不需要去过源码。业务逻辑也比前面的一个简单一些，没有修改父级节点的需求。1.界面展示做组织机构的管理，里面用了element-ui tree的懒加载，对树做新增子节点，删除节点，编辑节点后刷新节点数据，界面如下图所示。2.界面主要代码&...原创 2019-12-27 15:54:04 · 7075 阅读 · 0 评论 -
element-ui table懒加载，新增，编辑，删除子节点后的刷新节点
做全国行政区划的展示，包含街道数据有十几万条，全部加载接口比较慢，所以采取了table的懒加载，在新增子节点，编辑删除节点的过程中，官方文档里面并没有相对应的方法，里面遇到了很多坑，这里记录一下实现方法。1.首先界面如图所示，业务场景：表格外层有创建按钮，创建的是第一层节点，表格上的添加是指添加子节点，编辑和删除是针对当前节点，编辑时可以编辑父级区划；2.表格界面主要代码...原创 2019-12-24 14:23:48 · 12496 阅读 · 6 评论 -
element-ui 表单验证数字类型提示 xx is not a string
在做编辑行政区划的区划时，一打开编辑界面表单验证会报“code is not a string”解决办法如下，code本身是number类型，在表单验证里面改为number类型...原创 2019-12-23 09:10:09 · 8826 阅读 · 0 评论 -
axios+post下载文件，以及接口报错处理
遇到一个需求是，选择区域的站点之后，用get请求，站点ID的数组参数可能会超过浏览器参数长度限制，最后无法下载。于是换成了post方式下载文件。第一步：与后台沟通好response header的设置，并规定好fileName的编码方式，方便前端拿到后解析content-disposition: attachment;fileName=%E9%81%A5%E6%84%9F%E8%A7%A...原创 2019-11-11 15:38:32 · 2269 阅读 · 0 评论 -
常用工具地址汇总
Vuehttps://cn.vuejs.org/v2/guide/Vuexhttps://vuex.vuejs.org/zh/vue-routerhttps://router.vuejs.org/zh/Axioshttp://www.axios-js.com/https://github.com/axios/axiosvue-i18n-多...原创 2019-11-11 14:01:28 · 378 阅读 · 0 评论 -
webAPP/移动端一些样式设置
1、在webAPP里面禁止文字选中复制功能，只要设置一下样式即可*{ -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;}/*下面这一段一定要加，不然在ios上输入框无法输入*/input,textarea,select{ -webkit...原创 2018-12-27 10:25:37 · 618 阅读 · 0 评论 -
css实现居中
一、行内元素居中： 1、水平居中：父元素设置：text-align: center; 2、垂直居中：行内元素设置：line-height: 父元素高度; 3、水平垂直居中：综合1和2；二、行内块元素居中： 由于行内块元素既有行内元素的属性又有块元素的属性，所以可以参考相关居中方法。三、块元素居中： 1、margin居中方法：mar...原创 2018-09-27 08:40:42 · 337 阅读 · 0 评论 -
CSS3 ------- object-fit属性
做项目经常会遇到图片列表展示，图片一般是用户从后台上传的，上传的图片尺寸千差万别。如果前端不控制图片大小，整个排版就会很乱，如果给定长宽，图片又会变形，用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久，最近终于找到解决办法了。css有一个object-fit属性，用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框1.首先是一个html结构，然后给定图片高宽然后使用objec...原创 2018-09-08 18:20:46 · 18272 阅读 · 2 评论 -
vue项目使用百度分享
又开始新项目啦，这次的项目有分享功能，第一想法就是使用jiaThis，写到分享这里马上去百度jiaThis。首先官网打开是空的，然后继续搜索看到关于jiathis的新闻，原来jiaThis2018年4月30日起关闭了旗下的“友言”业务、旗下“分享”业务和“友荐”业务。之前一直用的是jiaThis，允悲。然后就换用百度分享1.从百度分享官网生成相关分享代码打开百度分享官网http://s...原创 2018-09-04 15:03:15 · 2773 阅读 · 0 评论 -
图片/视频上传转成base64/blob格式
项目中经常会用到上传图片/视频的地方，比如上传头像，上传商品图片、证件图片、小视频等等，我们需要将图片转为 base64后再提交给后台，然后后台再将base64转成图片后进行保存，这里是基于vue+vux来写的，H5实现的基本逻辑也是一样的，样式部分省略。一、图片上传1、html部分<template> <div class="index"> <...原创 2018-08-29 15:17:10 · 32542 阅读 · 1 评论 -
HTML5 video的多视频循环播放
在做播放历史视频的时候，有连续播放视频的需求，分享一下实现方法。html代码：<div class="video"><div class="container"><div class="video-details row"><h4 class="text-left color-whi原创 2018-03-29 16:02:37 · 15576 阅读 · 7 评论 -
Footer置于页面底部的技巧
今天要说的是前端开发过程中的一个小技巧，没有很大的技术含量，但在前端开发过程中经常会遇到。当页面内容很多时，footer会在底部，但当页面内容很少时，如何使footer始终在底部咧？1.HTML结构我一般是把footer写在footer标签里面<footer>//footer相关代码</footer>2必要CSS样式html,body {//保证内容不足时，撑开页面...原创 2018-03-29 15:58:01 · 1403 阅读 · 0 评论 -
Swiper插件之Animate动画
之前一直都没有注意到Swiper插件有可供选择的动画效果插件Swiper Animate，在这个插件里面有很多可供选择的动画比如缩放、旋转、摇晃等各种动画效果。1.在使用Swiper Animate之前，必须要保证已经加载swiper.animate.min.js和animate.min.css。<!DOCTYPE html><html><head>...原创 2018-04-03 10:08:14 · 11491 阅读 · 2 评论 -
swiper插件
作为一名前端，基本上每个项目都有要用到图片轮播，在这里给大家分享一下我常用的图片轮播插件swiper。对于我来说，图片轮播用的最多的就是swiper（http://www.swiper.com.cn/） 插件，他能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。有一个需要注意的是使用swiper之前必须先引入swiper.min.js和swiper.min.css文件。1.html结构&l...原创 2018-04-03 10:04:45 · 701 阅读 · 0 评论 -
JS实现实时显示时间
在之前的项目中有做到需要在网页中实时显示当前时间，实现的效果如图所示：1. html结构<div class="col-xs-12 col-sm-6"> <i class="fa fa-plus-square-o" aria-hidden="true"></i> <span id="current-time&quo原创 2018-04-03 09:47:40 · 8420 阅读 · 0 评论