转载

Springboot vue导出功能实现代码

最近在工作遇到vue和Springboot 实现导出功能，翻看很多资料，发现一些博客写法都过时了，所以自己特此记录下，使用版本vue2,Springboot 2x以上,chrome浏览器 76.0.3809.100

vue 2写法

let blob = new Blob([res.data], { type: 'application/octer-stream' });

其中我发现很多博客用这样的写法，但是我发现打印res的时候没有发现data这个参数,总是报错后面直接用res就好了。

正确写法let blob = new Blob([res], { type: 'application/octer-stream' });

科普一下：axios中params和data两者，以为他们是相同的，实则不然。因为params是添加到url的请求字符串中的，而data是添加到请求体（body）中的，最好使用params参数

import axios from 'axios'
axios({
	method: 'post',
	 url: '/user/excelExport',
	 responseType：‘blob',
	 params
}
).then(res => {
const link = document.createElement('a')
let blob = new Blob([res], { type: 'application/octer-stream' });
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
).catch(err => {
console.log(err)
}
);

后台代码写法 ——使用阿里巴巴的excel导出类easyexcel https://github.com/alibaba/easyexcel

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>{latestVersion}</version>
</dependency>

//这里可以不用关闭流,流在方法结束，会自动关闭，通过配置product，指定返回头
   @PostMapping(path = "/user/excelExport", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
   public void excelExport(WithdrawListDto withdrawListDto, HttpServletResponse response) {
       List<WithdrawListVo> list = withdrawService.list(withdrawListDto);
       ExcelWriter writer = new ExcelWriter(response.getOutputStream(), ExcelTypeEnum.XLSX, true);
       Sheet sheet1 = new Sheet(1, 0, WithdrawListVo.class);
       sheet1.setSheetName("sheet1");
       writer.write(list, sheet1);
   }

PostMapping，加上返回头了。前端传过来的context-Type 要加上multipart/form-data 类型，然后在前端传过来的url进行拼接参数,就可以进行多参数，但是不建议参数太多

例子：如/user/excelImport?account=12731564&userName=李四

@PostMapping(path = "/user/excelImport")
   public void excelImport(WithdrawListDto withdrawListDto,MultipartFile multipartFile) {
   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间：2020-04-29

解决Vue调用springboot接口403跨域问题

最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型

vue+springboot图片上传和显示的示例代码

一.前言在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目. 是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

springboot + vue 实现递归生成多级菜单(实例代码)

开发过程中,涉及到多级菜单的应用,找了一些资料案例实现如下(使用springboot+layui+oracle): 创建菜单表 : -- 创建菜单表 create table wxmini_menus( menu_id number unique, --菜单ID menu_name varchar2(20), menu_url varchar2(200), menu_icon varchar2(100), parent_id number, --父菜单ID status varchar2(10)

springboot+vue部署按照及运行方法

1 环境部署 1.1 jdk-8u111-windows-x64 环境变量 JAVA_HOME:C:/Program Files/Java/jdk1.8.0_111 Path新增一行:%JAVA_HOME%/bin 1.2 apache-maven-3.5.0-bin,直接解压到C:/Program Files/Java 环境变量 MAVEN_HOME:C:/Program Files/Java/apache-maven-3.5.0 Path新增一行:%MAVEN_HOME%/bin 1.3 G

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了搜索问题,发现跨域,服务器响应的setCookie浏览器无

springboot整合vue实现上传下载文件

springboot整合vue实现上传下载文件,供大家参考,具体内容如下环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l

SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

一.需求实现用户在浏览器登录后,跳转到其他页面,当用户在其它地方又登录时,前面用户登录的页面退出登录(列如qq挤号那种方式) 二.实现思路用户在前端填写用户信息登录后,后台接收数据先去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,先通过当前登录用户的id去获取token,如果token存在说明该用户已经登录过,调用redis以token为键删除上个用户的信息,调用方法生成新token,并将token存入map集合,将用户信息存入redis,并将token存入c

基于springboot和redis实现单点登录

本文实例为大家分享了基于springboot和redis实现单点登录的具体代码,供大家参考,具体内容如下 1.具体的加密和解密方法 package com.example.demo.util; import com.google.common.base.Strings; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import javax.crypto.Cipher; import javax.crypto.KeyG

使用springboot结合vue实现sso单点登录

本文实例为大家分享了springboot vue实现sso单点登录的具体代码,供大家参考,具体内容如下项目结构: 开发工具:idea, maven3 静态文件下载地址 1.pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or

Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径这里我使用了组件内钩子进行判断token过期后跳转到登录页,

redis+php实现微博（一）注册与登录功能详解

本文实例讲述了redis+php实现微博注册与登录功能.分享给大家供大家参考,具体如下: (一).微博功能概况微博用户账号注册微博用户登录微博发布添加微博好友(粉丝) 微博推送微博冷数据写入mysql数据库 (二).redis数据结构设计这节分享微博用户注册与登录: 我们完全采用redis作为数据库来实现注册于登录先来看一下redis数据结构的设计: 注册用户表:user set global:userid set user:userid:1:username zhangshan

Vue退出登录时清空缓存的实现

如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

vue中js判断长时间不操作界面自动退出登录(推荐)

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

SpringBoot使用Redis缓存的实现方法

(1)pom.xml引入jar包,如下: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> (2)修改项目启动类,增加注解@EnableCaching,开启缓存功能,如下: package springboot; import org

SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

Springboot使用redis进行api防刷限流过程详解

这篇文章主要介绍了Springboot使用redis进行api防刷限流过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 api限流的场景限流的需求出现在许多常见的场景中秒杀活动,有人使用软件恶意刷单抢货,需要限流防止机器参与活动某api被各式各样系统广泛调用,严重消耗网络.内存等资源,需要合理限流淘宝获取ip所在城市接口.微信公众号识别微信用户等开发接口,免费提供给用户时需要限流,更具有实时性和准确性的接口需要付费. api限流实

原文 https://www.zhangshengrong.com/p/QrXebL5L1d/

正文到此结束