yssa1125001的博客

前端有时候因为代理重定向等问题，常见的是使用验证码的时候，img标签会报302错误，此时后端直接返回base64编码可以轻松解决此问题。依赖： <!--验证码 --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactI

错误原因：前端对GET请求的参数进行拼接发送至后台时，拼接的参数有异常，导致后台无法正常解析，这是前端的锅。这里是把有一个用map存放的查询参数为空时，生成了一个无意义的拼接后缀，导致了出错。解决办法：再发送请求的时候，对GET请求的参数进行处理，我这里是放置在 request 的统一拦截器内进行处理如图，放置在config内即可。代码： // get请求映射params参数 if (config.method === 'get' && config.par

业务需求：用户多部门多职位，但有一个主单位，主单位必须，但职位不必须，每个单位下包含不同职位，同一用户在同一单位下只能拥有一个同一职位左侧机构结构是树形菜单，对应机构表，使用el-casecader级联选择器（带radio单选框形式的），右侧职位结构是普通列表，使用el-select选择器，根据左侧选择的项动态显示右边展示的内容，并验证是否与已选择项冲突。主职项使用el-radio单选按钮，与上下行唯一冲突，默认进入页面就有第一行内容并且主职选中。因为用户至少有一个部门，这里为了直接设置..

碰到个业务需求，表单项有图片或文件上传需求，并且要求跟随表单数据一起走...上传用element的el-upload组件表单数据带着文件时，表单上传格式需要变动，需要使用FormData对象 ，而文件需要设置手动上传，并把获取到的文件添加到表单对象中，并把其他对单数据也逐步添加到表单对象先介绍获取上传文件的方式，上传部分代码： <el-row style="width:500px;height:200px;float:right;"> <el-..

地图组件在业务中往往也需要设置检索框进行位置的检索及定位，这需要用到高德的两个插件，关键字检索插件和根据关键字定位插件完整代码如下：<template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"

上一篇文章，我们已经成功加载了地图并设置了自定义的图标覆盖物，但是在业务开发中，对地图的运用肯定不是到此为止，对地图组件的操作经常需要坐标值的参与，这篇文章就是简单介绍下坐标值的获取一：我们可以给地图组件绑定单击事件，当鼠标单击时获取对应位置的经纬度：//绑定地图组件内单击事件 this.mapMain.on('click', (e) => { this.lngMain = e.lnglat.getLng() this.latMain = e.ln

博主这里用了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"

最近在项目中大量使用地图功能，因此使用了高德地图组件，因为之前没使用过，因此也踩了一些坑，花了一些时间，特此记录下来。首先，使用地图组件，一定要设置map绑定的div的样式，为其设置宽高，不然map不能正常加载其次，新上手使用map的（比如我）尽量每个地图功能都创建一个map对象，不然很可能复用时加载异常再次，map加载需要考虑vue的生命周期，有时候map初次加载不成功，再次进入时发现却成功了，往往就是初始化map的顺序出了问题（这里注意如果能先获取坐标，就先获取坐标然后再初始...

前端vue开发后台项目经常会使用element-ui组件，估计el-table组件算是其中使用率相当高的了，在这其中有时候就会出现表格列偏移的问题，尤其是列较长表格设置表头或者表尾列固定时经过测试，发现设置使用 :min-width属性可以解决这个问题但之后发现有时候使用了该属性还会出现偏移问题，又又经过测试，发现动态调节 :min-width的数值，可以解决这个问题，确实有效，但是这个数值比例没研究出来，只能是所有列动态增减玄学调整，根据偏移的尺度来找感觉.....举...

前端使用vue开发也有不短时间了，在项目中也踩过N多的坑，对于一些感觉比较坑或者说比较经典的问题，决定记录下来，免得踩到同一个坑里，那就尴尬了！一：清空数据或者说数据初始化前的清空操作不要把对象赋值为null，而应该为 {}，否则经常会有各种异常...

报错基本上都是因为this指向问题，基本上就是 function和 () =>之间的问题，进行这俩的替换基本上都可以解决。我碰到了此问题，报错代码：mounted () { lazyAMapApiLoaderInstance.load().then(() => { // your code ... this.map = new AMap.Map("amapContainer", { center: [121.59996, 31.19764..

平台使用的表格组件是vueelement-ui的table组件，因为列表展示字段较多，内容较长，所以设置了几个搜索项固定在表格前几列，操作项固定在最后，中间其它项可拖动，结果导致了表格的拖动项与非拖动项之间的错位问题，如图：前端样式方面还不太熟，找的公司同事帮忙调整，添加了样式，解决了问题，特此记录：table标签：<el-table ref="listTable" :data="dataList" @select...

话不多说，直接上图：设置内容并保存（别忘了先提前安装相关组件）：{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复..

博主前端是vue的nuxt，后端是springboot首先简单说下登录操作相关步骤：前端把获取到的账号和密码发往后端的登录接口，后端进行校验无误后生成token发给前端，然后前端把获取的token存在cookie里（或者localstorage里，这里用的是cookie）再发往后端的根据token获取登录信息的接口以取得数据，前端获取数据后把数据也存放在cookie里，然后跳转到相应页面，并在该页面的数据加载时把cookie取得的数据赋值给v-model已经双向绑定的data数据对应属性以在页面进行

element-ui dialog弹窗默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭。它本身自带该功能：也就是“:close-on-click-modal”这个属性设置成false就可以了<el-dialog title="添加章节" :visible.sync="dialogFormVisible" :close-on-click-modal="false"></el-dialog>...

el-input-number是数值输入标签，默认为非整类型。但是很多情况下，要求输入数值必须为正整数，这就需要自己添加方法进行设置 <el-input-number :min="0" v-model="chapter.sort" controls-position="right" placeholder="请输入排序" @change="toInteger".

博主是在element-admin模板中使用的：引入编辑器：npm install vue-quill-editor在你需要编辑器的页面引入它：import "quill/dist/quill.core.css"import "quill/dist/quill.snow.css"import "quill/dist/quill.bubble.css"import { quillEditor } from "vue-quill-editor"注册使用： com...

貌似这个提示是因为使用了 Vetur插件造成的，解决办法：v-for后面跟上 :key=""<ul><li v-for="item in list" :key="item.id">{{item.title}}</li></ul>

引用项目内部的图片或者资源，总是显示不正常或者正常加载，解决办法：用 require()包裹起来，如图：<el-image style="width: 100px; height: 100px" :src="courseInfo.cover" :fit="cover"></el-image>courseInfo:{cover: require('@/assets/default.jpg')}或者直接：<el-image style="width:

刚开始的配制如下： <el-form-item label="所属分类"> <el-select v-model="courseInfo.subjectParentId" @change="firstChange" placeholder="请选择一级分类"> <el-option v-for="item in oneList" :key="item.id" .

用vue $router.push 传参时，一直404错误。原因：这个路由方法写在了调取后台接口成功响应方法then()的外边了，跟在里边就好了：改正：

element-ui组件报错：Vue warn]:Invalid prop: type check failed for prop "min".Expected Number with value 0, got String with value "0".出错位置： <el-form-item label="排序" prop="sort"> <el-input-number v-model="person.sort" contr...

坑货，折腾了我不少时间，网上全是之前俩版本的设置方法。第一个版本：baseUrl 是项目内有个 config 包，里面有对应的 dev 和 pro 俩环境的设置方法，里面地址用的是在线mock数据获取，直接改动那个mock地址为自己的 后端地址就可以了。第二个版本：有项目里有个 vue.config.js 文件，里面有个 devServer{}，注掉 after：require（“xx/mock.js”）这一行，有个 proxy{}，配置在target里就可以了(这个版本的解决方案网上最多.

没有使用后端接口，自己用json模拟的：{ "success":"true", "code":"200", "message":"成功", "data":{ "users":[ {"name":"Lucy","age":21}, {"name":"Tom","age":13}, {"name":"Jim","age":27}, {"name":"Lili","

PS: 为了加深印象，以前学会的东西尽量都整理成笔记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie.

使用vue.js时报错，错误如下错误原因：粗心大意，把“相等比较”变成了“赋值操作”解决办法：改成双等号“==”就可以了。