前端技术
yssa1125001
呆呆的初心者...
展开
-
后台返回base64编码图片,解决前端 img 标签 302报错 问题
前端有时候因为代理重定向等问题,常见的是使用验证码的时候,img标签会报302错误,此时后端直接返回base64编码可以轻松解决此问题。依赖: <!--验证码 --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactI原创 2021-09-15 16:35:53 · 1899 阅读 · 0 评论 -
Failed to convert property value of type ‘java.lang.String‘ to required type ‘java.util.Map‘ for
错误原因:前端对GET请求的参数进行拼接发送至后台时,拼接的参数有异常,导致后台无法正常解析,这是前端的锅。这里是把有一个用map存放的查询参数为空时,生成了一个无意义的拼接后缀,导致了出错。解决办法:再发送请求的时候,对GET请求的参数进行处理,我这里是放置在 request 的统一拦截器内进行处理如图,放置在config内即可。代码: // get请求映射params参数 if (config.method === 'get' && config.par原创 2021-08-03 16:52:28 · 1944 阅读 · 0 评论 -
如何对 el-table列表项 内的 form表单元素 使用 自定义规则校验
业务需求:用户多部门多职位,但有一个主单位,主单位必须,但职位不必须,每个单位下包含不同职位,同一用户在同一单位下只能拥有一个同一职位左侧机构结构是树形菜单,对应机构表,使用el-casecader级联选择器(带radio单选框形式的),右侧职位结构是普通列表,使用el-select选择器,根据左侧选择的项动态显示右边展示的内容,并验证是否与已选择项冲突。主职项使用el-radio单选按钮,与上下行唯一冲突,默认进入页面就有第一行内容并且主职选中。因为用户至少有一个部门,这里为了直接设置..原创 2020-08-14 15:54:23 · 1344 阅读 · 0 评论 -
vue el-upload 组件上传的 文件跟随表单数据 发送后台保存
碰到个业务需求,表单项有图片或文件上传需求,并且要求跟随表单数据一起走...上传用element的el-upload组件表单数据带着文件时,表单上传格式需要变动,需要使用FormData对象 ,而文件需要设置手动上传,并把获取到的文件添加到表单对象中,并把其他对单数据也逐步添加到表单对象先介绍获取上传文件的方式,上传部分代码: <el-row style="width:500px;height:200px;float:right;"> <el-..原创 2020-08-10 10:46:20 · 4556 阅读 · 3 评论 -
前端 vue 使用高德地图组件:(三)设置检索框使用地图插件进行位置检索定位
地图组件在业务中往往也需要设置检索框进行位置的检索及定位,这需要用到高德的两个插件,关键字检索插件和根据关键字定位插件完整代码如下:<template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"原创 2020-07-27 18:14:38 · 2845 阅读 · 2 评论 -
前端 vue 使用高德地图组件:(二)获取鼠标点击位置坐标 和 图标覆盖物拖动后的坐标
上一篇文章,我们已经成功加载了地图并设置了自定义的图标覆盖物,但是在业务开发中,对地图的运用肯定不是到此为止,对地图组件的操作经常需要坐标值的参与,这篇文章就是简单介绍下坐标值的获取一:我们可以给地图组件绑定单击事件,当鼠标单击时获取对应位置的经纬度://绑定地图组件内单击事件 this.mapMain.on('click', (e) => { this.lngMain = e.lnglat.getLng() this.latMain = e.ln原创 2020-07-27 17:30:58 · 3041 阅读 · 3 评论 -
前端 vue 使用高德地图组件:(一)加载地图并设置自定义覆盖物图标
博主这里用了vue-admin-template作为前台模板做测试...这里使用的是外引高德css和js的方式,因为是spa单页面应用,所以只有一个index.html,在其中添加上相关应用即可:引入(那个key换成自己在高德申请的):<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css" /> <script type="text/javascript"原创 2020-07-27 16:33:21 · 5575 阅读 · 2 评论 -
vue 页面或者弹窗使用 高德地图组件 map组件 不能加载,或者第二次才能加载问题
最近在项目中大量使用地图功能,因此使用了高德地图组件,因为之前没使用过,因此也踩了一些坑,花了一些时间,特此记录下来。首先,使用地图组件,一定要设置map绑定的div的样式,为其设置宽高,不然map不能正常加载其次,新上手使用map的(比如我)尽量每个地图功能都创建一个map对象,不然很可能复用时加载异常再次,map加载需要考虑vue的生命周期,有时候map初次加载不成功,再次进入时发现却成功了,往往就是初始化map的顺序出了问题(这里注意如果能先获取坐标,就先获取坐标然后再初始...原创 2020-07-24 15:55:11 · 5106 阅读 · 7 评论 -
el-table 列偏移,el-table表格不齐,el-table表格对不齐
前端vue开发后台项目经常会使用element-ui组件,估计el-table组件算是其中使用率相当高的了,在这其中有时候就会出现表格列偏移的问题,尤其是列较长表格设置表头或者表尾列固定时经过测试,发现设置使用 :min-width属性可以解决这个问题但之后发现有时候使用了该属性还会出现偏移问题,又又经过测试,发现动态调节 :min-width的数值,可以解决这个问题,确实有效,但是这个数值比例没研究出来,只能是所有列动态增减玄学调整,根据偏移的尺度来找感觉.....举...原创 2020-07-24 15:07:22 · 4199 阅读 · 2 评论 -
前端使用 vue 踩坑指南,持续添加...
前端使用vue开发也有不短时间了,在项目中也踩过N多的坑,对于一些感觉比较坑或者说比较经典的问题,决定记录下来,免得踩到同一个坑里,那就尴尬了!一:清空数据或者说数据初始化前的清空操作不要把对象赋值为null,而应该为 {},否则经常会有各种异常...原创 2020-07-24 14:46:01 · 221 阅读 · 0 评论 -
vue 父子组件传值报错:this.$emit is not a function 解决
报错基本上都是因为this指向问题,基本上就是 function和 () =>之间的问题,进行这俩的替换基本上都可以解决。我碰到了此问题,报错代码:mounted () { lazyAMapApiLoaderInstance.load().then(() => { // your code ... this.map = new AMap.Map("amapContainer", { center: [121.59996, 31.19764..原创 2020-07-19 19:15:06 · 18867 阅读 · 2 评论 -
element ui table 组件 设置表头前几个字段固定后导致的 表格错位问题的解决
平台使用的表格组件是vueelement-ui的table组件,因为列表展示字段较多,内容较长,所以设置了几个搜索项固定在表格前几列,操作项固定在最后,中间其它项可拖动,结果导致了表格的拖动项与非拖动项之间的错位问题,如图:前端样式方面还不太熟,找的公司同事帮忙调整,添加了样式,解决了问题,特此记录:table标签:<el-table ref="listTable" :data="dataList" @select...原创 2020-07-13 12:32:19 · 3053 阅读 · 1 评论 -
springcloud脚手架JHipster平台,前端 vue 使用 blob技术 实现文件下载
=> 此方法可以解决一些下载文件没有后缀即格式 问题后端工具类: /** * 文件下载工具 * @param resp 响应对象 * @param name 文件名 * @param location 文件根地址 * @param downloadPath 文件下载地址 * @throws IOException */ public static void download(HttpServletRe...原创 2020-07-12 18:29:19 · 312 阅读 · 0 评论