axios

解法： //axios return request({ 　　url: "/saleUnit/exportSaleUnit", 　　headers: { 　　　　"biz-source-param": "BLG" 　　}, 　　method: "post", 　　responseType: "blob", 　　data: params 　}); let blob = new Blob([res], { type: "application/x-xls" }); let link = document.createElement("a" ); link.href = window.URL.createObjectURL(blob); link.download = `便利购商品列表${ this .$dayjs().format( 　　 "YYYYMMDDHHmmss" )}.xlsx`; link.click(); this .$message.success("下载成功！"); 服务端返回的数据截图 响应头 前端下载脚本 下载的excel wps打开失败 来源： oschina 链接： https://my.oschina.net/u/4288691/blog/4339968

以ASP.NET Core WebAPI 作后端 API ，用 Vue 构建前端页面，用 Axios 从前端访问后端 API ,包括文件的上传和下载。 准备文件上传的API #region 文件上传 可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != null) { var fileDir = "D:\\aaa"; if (!Directory.Exists(fileDir)) { Directory.CreateDirectory(fileDir); } //文件名称 string projectFileName = file.FileName; //上传的文件的路径 string filePath = fileDir + $@"\{projectFileName}"; using (FileStream fs = System.IO.File.Create(filePath)) { file.CopyTo(fs); fs.Flush(); } return Json("ok"); }else{ return Json("no"); } } #endregion 前端vue上传组件 ( 利用Form表单上传 )

故事的开始 老板说：系统很慢，下载半个小时无法下载，是否考虑先压缩再给用户下载？ 　　本来是已经压缩过了，不过第一反应应该是用户下的数量多，导致压缩包很大，然后自己测试发现，只是等待的时间比较久而已，仍然是下载状态中，并不是系统慢，但是用户体验肯定是最直观的，确实是我们做得不够好，单纯弹出遮罩层显示冰冷的“拼命加载中……”，对用户来说确实不够友好。嗯，了解实际情况了，那就开撸，增加用户体验。 解决它 效果图： Vue+ElementUI < el-progress v-if ="dlProgress>0" :text-inside ="true" :stroke-width ="18" :percentage ="dlProgress" status ="success" style ="margin-bottom:10px" ></ el-progress > Axios downloadTask(index,row) { let own = this ; this .fullscreenLoading = true ; this .axios({ method: 'post' , url: this .baseUrl + '/api/Task/DownLoad' , data: {id: row.id}, responseType: 'blob' , 　　　　 //敲黑板

1.安装jQuery和jQuery-ui npm i jquery s npm i jquery - ui s yarn install 2.在vue.config.js中进行配置 // webpack build externals const prodExternals = { vue: 'Vue' , 'vue-router': 'VueRouter' , vuex: 'Vuex' , axios: 'axios' , jquery: 'jquery', // 新添加 $: 'jquery' // 新添加 } 3.在需要引入的组件中引入 <script> import jsplumb from 'jsplumb' import $ from "jquery" // 需要注意的是，在jquery-ui引入的时候， // 直接写成 import juqery-ui 是没有效果的，只能直接写到具体的方法 import 'jquery-ui/ui/widgets/draggable' import 'jquery-ui/ui/widgets/droppable' export default { name: 'test1' , components: { jsplumb }, mounted(){ /* global jsPlumb */ var instance = jsPlumb

通过http请求查看request数据, 复制请求头和cookie 代码 const axios = require('axios') const fs = require('fs') const img_path = './t2.jpg' const FormData = require("form-data"); const url = "https://my.oschina.net/ahaoboy/space/ckeditor_dialog_img_upload" const headers = { "accept": "*/*", "accept-language": "zh-CN,zh;q=0.9,en;q=0.8", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "same-origin", "cookie": "===", "referrer": "https://my.oschina.net/ahaoboy/blog/write/4326713", "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 　　 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split(',') } }) } } 方法3.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） 例如请求的 url:“http://f.apiplus.cn/bj11x5.json ” 1、打开config/index.js,在proxyTable中添写如下代码： proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://f

问题场景 点击导出按钮，提交请求，下载excel大文件（超过500M），该文件没有预生成在后端， 直接以文件流的形式返回给前端。 解决方案 在Vue项目中常用的方式是通过axios配置请求，读取后端返回的文件流，常用代码如下： axios({ method: 'post', url: 'api/file', responseType: 'blob' }).then(res=> { if (res.data){ filename = 'filename'; let blob = new Blob([res.data],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); if (window.navigator.msSaveOrOpenBlob){ // IE10+下载 navigator.msSaveOrBlob(blob, filename); }else{ // 非IE10+下载 let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = filename; document.body.appendChild

许久没有产出了，今天看了掘金上的一篇关于接口设计的文章，因此有感谈谈自己在项目开发中与后的一些想法和反思。 参考： 一篇来自前端同学对后端接口的吐槽 以使用者的视角开发接口 对于RESTful风格的前后端分离式开发，接口的设计应该从何种视角出发呢？一般情况下，后端开发人员（我）的想法是： 想要实现这个功能，我需要返回哪些数据？ 我要怎样划分不同的API？ 当两个接口返回的数据有重复的部分时，我是否需要做一些复用？ ... 在这种视角下，我开发出的接口虽然实现了项目的需求，但是却可能与其在前端的易用性产生割裂。 一个例子 在我之前独立开发的一个数据可视化系统中，存在着这样一个功能： 该项目的数据存在四种层级：team、group、branch、total，这四个层级的数据项都是一样的，现在需要提供接口分别返回这四个层级的数据。 实际开发中，数据库中存在着四张数据表，而我不想使用MyBatis的 ${} 以字符串拼接的形式来生成SQL，于是我写了四个逻辑几乎完全相同的Service类，最终反映到Controller上，就是每个层级的数据都有一个API去获取数据。当然，后端这里应该有更好的处理方式，不过暂且按下不表。当我终于大致完成后端的接口设计，转而开发前端时，才发现我接口设计的不合理之处。首先，前端要配置多个axios，其次，发送请求时，前端需要编写多余的代码去选择要调用哪个API