精华内容
下载资源
问答
  • vue调用后端接口,报405错误,但网址什么的都输入正确,由此不知道哪里出现了错误
  • vue 调用后端接口 使用axios 跨域问题

    千次阅读 2019-07-15 21:27:42
    首先 找到项目中vue.config.js 修改 devserver devserver /api/app 等于 /https://www.lifewhw.top/app, devserver下 配置ip 端口没问题 换成域名访问接口时如出现Access-Control-Allow-Origin 跨域问题 去后端...

    首先 找到项目中vue.config.js 修改 devserver

    devserver /api/app    等于 /https://www.lifewhw.top/app,

    devserver下 配置ip 端口没问题 换成域名访问接口时如出现 Access-Control-Allow-Origin   跨域问题

    去后端 请求头 设置 access-control-allow-origin: '*'

    亲测有效!

    1.如果调用一次axios 发送了两条get 请求 并且 其中一条状态码为301 说明是重定向 浏览器帮你从新发送了请求(原因是你前端路由配置的和后端不同,我是因为少配置了/出现发送两次get请求 其中一次为301)

    2. 还有一冲情况就是 两次请求 第一次的请求头为options 这个原因自行百度一大推 

     

    展开全文
  • <p style="text-align:center"><img alt="" height="257" src="https://img-ask.csdnimg.cn/upload/1605080107836.png" width="588" /></p> <p style="text-align:center"><img alt="" height="162... ... ... <p> </p>
  • // 后端接口 let params = { id: row.id }; // 传值 参数 try { let res = await this.$axios.post(url, params, { responseType: "blob" }); let link = document.createElement("a"); link.style.display = "none...
    新建一个封装方法的 exportUtils.js 文件
    import Vue from 'vue'
    import axios from 'axios'
    Vue.prototype.axios = axios;
    // 导出
    export default {
    exportMethod: function(data) {
        axios({
            method: data.method,
            url: data.url,
            data: data.data,
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/json'
            }
        }).then((res) => {
            const link = document.createElement('a')
            let blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel' 
                // type: "application/pdf;charset=utf-8",  //.pdf
            })
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
    
            link.download = data.fileName + '.xls' //下载的文件名  注意:加.xls是兼容火狐浏览器
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        }).catch(error => {
            console.log(error)
        })
    }
    }
    
    引用 js 文件:
    // 全局引用在  man.js
    import exportUtils from "./utils/exportUtils"
    Vue.prototype.exportUtils = exportUtils ;
    //局部引入,谁用谁引
    import exportUtils from "../../utils/exportUtils.js"
    

    调用方法:

    1、全局引用
    // 导出
        exportOut () {
          let params = { list: this.formInline };
          let myObj = {
            method: 'post',
            url: "/dutyTask/dutyTaskExcel",  //接口地址
            fileName: '值守任务',
            data: params,
          }
          //调用封装方法
          this.exportUtils.exportMethod(myObj);
        },
    
    2、局部引用
        //局部引入,谁用谁引
         import exportUtils from "../../utils/exportUtils.js"
    
       // 导出
        exportOut () { 
          let params = { list: this.formInline };
          let myObj = {
            method: 'post',
            url: "/dutyTask/dutyTaskExcel",  //接口地址
            fileName: '值守任务',
            data: params,
          }
          //调用封装方法
          exportUtils.exportMethod(myObj);
        },
    

    pdf., xlsx (不封装,直接用)

      async downloadFile(row) {
          let url =https://blog.csdn.net/"; // 后端接口
          let params = { id: row.id };  //  传值 参数
          try {
            let res = await this.$axios.post(url, params, { responseType: "blob" });
            let link = document.createElement("a");
            link.style.display = "none";
            let blob = new Blob([res], {
              type: "application/pdf;charset=utf-8",
              // type: 'application/vnd.ms-excel'   // Excel .xls
            });
            link.href = URL.createObjectURL(blob);
            link.download = `${row.prjName}备案表.pdf`;
            // 获取文件名
            document.body.appendChild(link);
            link.click();
          } catch (error) {}
        },
    
    展开全文
  • } vue前端写法 //模板下载 getTemplate(){ const that = this; window.location='/test/test/getTemplate';//正确写法,直接访问你的请求路径 //这种写法会导致后台不报错,但是前端无导出效果 /*window.axios.get...

    controller层代码    

    @ApiOperation(value="导出模板")
        @RequestMapping(value="/getTemplate" , method= RequestMethod.GET)
        @ResponseBody
        public void getTemplate(HttpServletRequest req,HttpServletResponse res) throws IOException {
            standingBookService.getTemplate(req, res);
        }

    serviceImpl代码

        public void getTemplate(HttpServletRequest req, HttpServletResponse res) throws IOException {
            String templateName = "standingBookTemplate";
            String exportName = "template";
            
            ExcelUtil.downloadExcelTemplate(req, res, templateName, exportName);
        }

    导出模板路径

    工具箱代码

        /**
         * 下载批量导入模板
         * @param HttpServletRequest
         * @param HttpServletResponse
         * @param templateName execl模板名称
         * @param exportName 导出表单名称
         * @throws IOException
         */
        public static void downloadExcelTemplate(HttpServletRequest req,HttpServletResponse res,String templateName,
            String exportName) throws IOException{
            
            String fullFileName = req.getServletContext().getRealPath("/doc/import/excelTemplate");
            fullFileName += (File.separator + templateName + ".xls");
            
            String export = "";
            if(DataValidUtil.isEmpty(exportName)){
                export = templateName;
            }else{
                export = exportName;
            }
            
            String userAgent = req.getHeader("USER-AGENT");
            //文件下载乱码问题
            if (StringUtils.contains(userAgent.toUpperCase(),"MSIE")||StringUtils.contains(userAgent,"Trident")) {  
                export = URLEncoder.encode(export, "UTF-8");  
            } else {  
                export = new String(export.getBytes("UTF-8"), "ISO8859-1");  
            } 
            
            //设置Content-Disposition
            res.setHeader("Content-disposition","attachment; filename="+export+".xls");
            
            //设置文件MIME类型 
            //res.setContentType("application/vnd.ms-excel");
            //前端框架自定义类型
            res.setContentType("application/export.file");
            
                OutputStream out = res.getOutputStream();
                FileInputStream in = new FileInputStream(fullFileName);
                res.setCharacterEncoding("UTF-8");
                
                byte[] b = new byte[1024];
                int n = -1;
                
                while((n=in.read(b))!=-1){
                    out.write(b, 0, n);
                }
                
                in.close();
                out.close();
        }

     

    vue前端写法

    //模板下载
    getTemplate(){
      const that = this;
      window.location='/test/test/getTemplate';//正确写法,直接访问你的请求路径
    
    //这种写法会导致后台不报错,但是前端无导出效果
    /*window.axios.get('/test/test/getTemplate',{responseType: 'arraybuffer'}).then((res) => {
    }).catch((err) => {
    });*/
    
    },
    展开全文
  • 前端调用后端接口,使用axios,因为v-resource组件官方已不再维护了: res形参封装了整个响应结果: Vue提供的proxyTable组件用于解决跨域问题:(服务器与服务器之间的相互请求不存在跨域问题,只有...

    前端调用后端接口,使用axios,因为v-resource组件官方已不再维护了:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    res形参封装了整个响应结果:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    Vue提供的proxyTable组件用于解决跨域问题:(服务器与服务器之间的相互请求不存在跨域问题,只有浏览器发出的请求才可能存在跨域问题)

    在这里插入图片描述

    浏览器的同源策略不允许跨域。
    所谓同源,就是:①同协议;②同服务器;③同端口。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    实际请求的端口是:端口相同也就不存在跨域问题了

    在这里插入图片描述

    成功获取到数据:

    在这里插入图片描述

    展开全文
  • 今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue调用后端java接口

    万次阅读 2018-12-18 19:53:30
    前段时间 做了个学校的...先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet;...
  • vue axios调用后端接口

    2021-03-04 15:43:03
    1、不传参数的 step1:npm i axios step2:在组件的import Vue from "vue"; import axios from "axios"; Vue.prototype.$ajax=axios;... this.$ajax.get("接口url") .then(function(res){ alert(1213); console.log
  • 前段时间 做了个学校的春萌项目,其中用到先上后端接口代码:package controller;import net.sf.json.JSONObject;import util.DBUtil;import javax.servlet.ServletException;import javax.servlet.annotation.Web...
  • 前端vue调用后端问题

    千次阅读 2019-09-04 15:04:22
    1.页面请求 显示参数有值,但是 后端 入参类属性 值全部是null 看一下 后端 入参类 是否用@RequestBody 修饰。 @RequestBody 要求只能post @RequestParam 用的是 get请求 @RequestParam("projectId") Integer ...
  • vue 访问后端接口返回数据不跳转!!!! 为啥??
  • Vue中使用axios调用后端接口的坑

    千次阅读 2020-09-28 03:17:50
    问题场景:Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况,因此总结了如下场景: @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定...
  • vue 使用后端接口

    2021-07-15 19:17:17
    目录解析hu黄 黄!...=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzYxNTI4OQ==,size_16,...api中是放接口的地方(后端接口) views中是放组件的(这里用到了后
  • vue项目部署到nginx中,主页可以正常访问,调用后端接口时,报404,并且出现一下提示: 出现问题的主要原因是nginx配置异常,没有正确转发后端接口地址。 需要在nginx中配置转发访问后端的具体地址,如图: ...
  • 此时,我们的设计是希望前端通过内网IP直接对后端接口请求,而不是去走域名进行请求,这样能够在请求时少走一次防火墙,提供接口请求速度。 但是理想很美好,但是现实是最后发现,前端一直无法成功访问到后端接口...
  • 在http.js文件夹中: export function downFile(url, data, filename) { axios.post(url, data, { responseType: 'blob' }) .then(data => { let blob = new Blob([data.data]);... }, '/XXX/XXXXXXXX'后端接口 控制台
  • VUE封装后端接口

    2017-06-21 15:56:37
    vue封装api和调用 vue中数据和form表单验证的封装
  • 前端VUE访问后端接口获取列表数据报序列化错误,具体错误 前端访问接口报错截图 后端响应信息 2021-08-07 13:33:10,832 WARN --- [http-nio-8741-exec-4] o.s.w.s.m.s.DefaultHandlerExceptionResolver : Resolved ...
  • 前端代码: import { downloadMedicalCooperOrgList } from ‘@/api/...import Vue from ‘vue’ // 导出excel文件 export default{ Export(path, fileName, data) { return downloadMedicalCooperOrgLi...
  • 最近在学习Vue,期间遇到个问题就是前端页面使用axios调用接口将页面数据存储到数据库中时,使用POST请求时后端Debug不出前端的参数,导致前端触发调用后端接口时后端会一直报错,之前前端这样写的: (接口调用...
  • 以往我们在部署前端项目后,调用后端接口有以下几种场景: 后端接口没有统一,比较分散,例如:/system/user,/tool/gen 。 通常我们会在项目的全局配置文件.env.production中直接写入后端ip,例如: ENV = '...
  • vue后端接口的时候console.log出不来 , 调用之后还报错 一大篇子不知道是啥 apiTool是什么我也不知道
  • 使用vue-element-admin框架调用后端接口及跨域问题 webpack+vue-cil 中proxyTable配置接口地址代理 webpack开发配置API代理解决跨域问题-devServer vue-element-admin实战(一)修改登陆接口 实例 ...
  • 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格 后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据 如下图,请求接口返回的数据都是乱码 这里我们可以在axios的...
  •  1、vue请求后端接口示例  2、微信小程序请求后端接口的整体结构介绍  3、代码示例 // 调用后台接口获取公厕信息 getToiletsList:function(){ var that=this wx.request({ url: api. ...
  • 最近在用echarts做数据可视化,从后端接收数据成为至关重要的一步(第一次ಥ_ಥ 然后查了一下最简单的接收例子是这样的(来源): created(){ this.$http.get("http://jsonplaceholder.typicode.com/users") ....
  • 这是我定义的后台接口 //导出数据接口 export function getZTPJExportData(data){ return request({ url:"/sxc/newEnergyPowerForecast/overallEvaluation/doExportData", method:"get", params:data, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,583
精华内容 8,233
关键字:

vue调用后端接口

vue 订阅