心知向之-CSDN博客

原创 Vue之请求后台POST接口时将参数拼接在url后边传递的两种调用方式

问题还原：项目中实现一个功能时，后台接口是需要三个字符串的POST接口，前台调用时参数需要跟在url后边，如何调用那？后台接口代码如下：@RequestMapping(value = "/***.do",method = RequestMethod.POST)@ResponseBodypublic HttpResult copy(String id, name, String other) throws Exception { return HttpResult.SUCCESS(***);

2022-03-10 20:05:17 13665 1

原创 Vue项目启动报This dependency was not found: * clipboard in ./node_modules/… 即找不到clipboard依赖

问题还原：项目中需要实现一个问卷调查的功能，由于时间紧急，所以找了下Git上开源的问卷相关项目，最终选型Springboot+Vue的survey项目。在前端集成到现有的Vue项目中后，启动项目，报了一个错误：This dependency was not found: * clipboard in ./node_modules/…。错误截图如下所示：解决方案：***这是由于没有安装clipboard依赖，***可以去项目根目录下的node_modules文件夹中找一下有没有clipboard相关的

2022-03-08 20:36:41 3046

原创 SpringBoot、SpringCloud之Maven打包Failed to execute goal org.springframework.boot:spring-boot-maven-plug

问题还原：我们的项目使用的是SpringCloud（微服务），之前本地启动启动类一直没有问题，结果今天需要上线，在打包部署的时候，突然发现package或者install不了。具体报错如下所示：Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.2.5.RELEASE:repackage (default) on project ***-service: Execution default of goal

2022-02-23 19:42:10 754

原创 uni-app通过uni.previewImage实现在线预览图片

问题还原：在项目开发中，用户上传完图片后，在展示区域想要预览图片，所以需要实现图片的在线预览功能。那么如何实现那？解决方案：**使用uni-app自带的uni.previewImage({current: 0, urls: url})即可实现图片的在线预览功能。**需要注意的是其中urls是图片路径数组。具体代码如下所示：界面代码如下所示：<a @tap=“imgView(item.imgName, item.imgPath)” style=“color: blue;”>{{item.

2022-02-16 23:24:38 6157 2

原创 Echarts纵坐标带小数，如何去掉？

问题还原：使用Echarts做柱状图、折线图展示时，纵坐标出现了小数，实际值都是整数。如下图所示：如何去掉小数，让纵坐标只展示整数那？解决方案：通过设置yAxis来实现，给yAxis增加minInterval: 1，type : 'value’两个属性即可。代码如下所示：yAxis: { type : 'value', minInterval: 1, axisLabel : { formatter : '{value}'

2022-02-10 18:26:26 6418 1

原创 window.open(url)弹出新窗口被浏览器拦截了

问题还原：在项目中，处理同事写的导出Excel时，共有三个模块的数据需要导出到Excel。于是乎同事写了个通用的接口，在js中分三次用window.open(url)调用。于是就出现了个bug，弹窗被浏览器拦截了，只能下载第一个Excel。那如何阻止浏览器拦截那？解决方案：解决方案挺多，为了方便，本人采用的是通过setTimeout延迟来实现。代码如下：setTimeout(window.open(url), 500);注：这里的时间不能设置太短，否则也会被浏览器拦截。PS：欢迎大家点赞、关注、

2022-02-10 18:23:36 841

原创 CSS给表格增加单边框样式

问题还原：在做项目中，表格是必不可少的内容，经常用到。那么如何给表格做单边框的展示效果那？解决方案：本人此处介绍通过CSS样式来实现的一种方式。展示效果如下图所示：具体代码如下。CSS代码：table { width: 100%; text-align: center; min-height: 25px; line-height: 25px; border-collapse: collapse; padding: 2px;}table, table tr th, table t

2022-02-09 18:28:18 1208

原创如何去掉Echarts数据视图（dataView）中的刷新按钮

问题还原：项目中，图表展示用的Echarts，在Echarts的数据视图中，有默认的“关闭”、“刷新”两个按钮。点击“刷新”按钮，会自动关闭当前数据视图，体验不好并且对我们的项目没有实际意义。那么如何去掉数据视图中的“刷新”按钮那？解决方案：将dataView中的readOnly属性设为true即可。代码如下所示：toolbox: { show: true, feature: { dataView: {

2022-02-09 18:25:40 2867

原创通过optionToContent修改Echarts数据视图（dataView）中数据列表的样式

问题还原：在做项目中，图表展示基本是每个项目中必不可少的内容，通常我们会用开源的Echarts来实现图表展示功能。Echarts自带很多组件，在数据视图中可以查看对应的图表中的数据列表，但是默认的样式挺丑的，如下图所示：那么如何优化下展示样式那？解决方案：***通过toolbox中的optionToContent展现函数来实现。***官方API地址如下：optionToContent展现函数代码如下：optionToContent: function(opt) { var axisD

2022-02-09 18:23:04 2611

原创 SpringBoot、SpringCloud读取application.properties配置文件中的参数时中文乱码

**问题还原：**在做项目时，需要读取application.properties配置文件中配置的文件保存目录参数，然后使用。由于参数中有中文，取到之后在使用时报错了，经调试发现中文乱码了，如何解决那？。解决方案：***通过修改IDEA中的配置实现。***具体步骤如下：点击File-Settings：依次点击Editor > File Encodings，在弹窗中将Properties Files(*.properties)下的Default encoding for properti

2022-01-26 19:41:37 749

原创 Vue+SpringBoot/SpringCloud轻松实现Excel文件下载

问题还原：在做项目时，很多时候会用到上传、下载Excel文件。此处，笔者需要实现Excel文件下载功能。具体实现如下所述。解决方案：Vue端相关代码如下：定义按钮：<el-buttontype=“primary”icon=“el-icon-upload2”@click=“downloadExcel()”>下载ExcelJS方法：methods: {downloadExcel () {// 下载好用版Vue.axios({method: ‘get’,url: ‘

2022-01-22 16:34:27 982

原创 Vue中通过TagName获取的DOM节点，控制台打印后HTMLConnection有内容，但是length为0

问题还原：项目中在实现Excel在线预览时，通过js-xlsx插件将Excel转成html后，但是没有样式。所以自己通过getElementsByTagName(‘td’)获取所有td的DOM节点进行样式增加。获取到HTMLConnection节点并转成数据组后，发现有内容但是length为0，无法进行遍历操作等。截图如下图所示：解决方案：这是由于DOM还未加载办成就进行了操作。所以将DOM操作的相关代码放到this.$nextTick中。代码如下：this.excelView = XLSX.

2022-01-22 16:07:10 1138 2

原创连续点击按钮，通过设置按钮的样式防止用户多次操作

问题还原：在项目中的某个功能中，用户填写信息后，点击【提交】按钮，由于代码中设置的提示显示2s后才进行界面刷新、跳转，导致用户可能会多次点击【提交】按钮，所以如何防止用户的多次操作那？解决方案：此处通过CSS的pointer-events: none实现，这个属性是用于设置元素不对指针事件做出反应，然后在点击【提交】按钮，数据校验通过后，通过id获取DOM后通过addClass增加样式。代码如下：CSS代码如下：<style>/* 按钮不对指针事件做出反应 */.button-di

2022-01-22 16:00:27 609

原创 JS通过getElementsByTagName获取的DOM节点不是数组，是HTMLConnection。HTMLConnection转换成数组

问题还原：JS中通过document. getElementsByTagName(“比如div、a等”)获取到的所有相关DOM节点，获取到的是HTMLConnection，而不是数组。如何转成数组那？解决方案：通过**Array.prototype.slice.call()**来进行转换。代码如下：const divNodes = document.getElementsByTagName(div)// 获取的是HTMLConnection if (divNodes) {

2022-01-22 15:57:19 566

原创 JS提取字符串中的数字

问题还原：利用XLSX插件中的XLSX.utils.sheet_to_html()方法将从后台接收到的Excel转成HTML后，由于没有样式，所以通过id、tagName获取对应的td节点后，根据生成的td的id中的Excel行数，来判断添加何种样式。默认生成的id是类似于sjs-A1、sjs-A2……的字符串。解决方案：通过JS正则提取字符串中的数字，示例代码如下：var str = 'sjs-A1'var strNum = str.replace(/[^0-9]/ig, '')得到的str

2022-01-22 15:51:22 1431

原创 DOM节点添加样式

**问题还原：**利用XLSX插件中的XLSX.utils.sheet_to_html()方法将从后台接收到的Excel转成HTML后，由于没有样式，所以通过id、tagName获取对应的td节点后，根据行数增加对应的CSS样式。解决方案：获取到DOM节点后，遍历时，使用element.classList.add(‘myClass’)添加样式。使用element.classList.remove(‘myClass’)删除样式。其他JS自带实现方式后期使用时再补充。注：myClass是写好的cs

2022-01-22 15:45:17 1855

原创 SpringBoot、SpringCloud读取bootstrap.yml或者application.properties配置文件中的参数

问题还原：在做项目时，需要配置所上传Excel文件的存储路径，用于将Excel文件存储到所配置的路径下。此路径可以写死到代码里，但是不方便；也可存到数据库表中，但是麻烦；我们一般都是配置到bootstrap.yml中，然后获取出来使用。解决方案：将所需参数在bootstrap.yml文件中配置后，通过Component、Value组件取出值。具体代码如下：bootstrap.yml配置（PS：注意使用空格缩进。）：#自定义参数fileManager: #文件保存目录 fileSavePa

2022-01-21 18:56:27 4658

原创 Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）

**问题还原：**在做项目时，用户需要上传Excel模板，里面有对应的各种数据。我们拿到这个Excel后，定时的根据其中的数据去查对应的实时数据并进行计算，然后将实时数据和计算后的数据保存到Excel中存储到服务器上。用户在系统中可以看到Excel生成记录，点击后可以在线预览Excel。那么如何实现Excel在线预览那？**解决方案：方案1：使用Office官方自带的url，大概就是把要预览的Excel地址拼装到Office的链接后边，就可以通过生成的新链接直接访问了。PS：由于此方案会暴露

2022-01-21 09:15:29 5489 8

原创 Vue+SpringBoot/SpringCloud轻松实现文件导入、存储到服务器

问题还原：在做项目时，用户需要上传Excel模板，然后根据Excel模板中的内容取到对应的实时数据、计算并重新存储Excel。解决方案：Vue端相关代码如下：定义按钮：<el-buttontype=“primary”icon=“el-icon-upload2”@click=“handleImport”>导入2<inputid=“import-excel”type=“file”style=“display:none;”@change=“importEx.

2022-01-19 18:17:40 779

原创 POI解析Excel，XSSFCell.CELL_TYPE_STRING等无法引入问题

问题还原：POI低版本中，通过XSSFCell.CELL_TYPE_STRING等判断值类型时，提示无法引入。源代码如下：public static String formatCell(Cell cell) { String value = null; switch (cell.getCellType()) { // 数值型，0 case XSSFCell.CELL_TYPE_NUMERIC://老版 if (HSSFDateUti.

2022-01-18 19:06:29 4522

原创 POI导出Excel，公式不能自动计算

问题还原：通过POI读取Excel内容后，需要根据读取内容中的key去数据库中查取对应的实时数据，计算之后，重新塞回到Excel对应的列中。这时计算公式中包含此列的单元格值按理应该是要改变，可是却没有变化。解决方案：方案1：Sheet sheet = workbook.getSheetAt(0);sheet.setForceFormulaRecalculation(true);//强制执行sheet页中所有公式本人采用此方案，问题解决！方案2：case FORMULA: ce.

2022-01-18 18:56:32 1499 3

原创 POI读取Excel，读取的内容和sheet页的内容不一致

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2022-01-18 18:48:43 945

xiaofeiwei521的博客