精华内容
下载资源
问答
  • 前端怎么调用后端接口
    千次阅读
    2021-06-02 15:48:58

    导出操作方法

    function export(arg1,arg2) {
        axios({
            url: xxx,
            method: 'post',
            data: {},//参数
        }).then(resp => {
          	 //成功
          	 const blob = new Blob([JSON.stringify(resp .data)], { type: 'application/json' });
    		  const fileName = “xxx”;
    		  if ('download' in document.createElement('a')) { // 不是IE浏览器
    		       const url = window.URL.createObjectURL(blob);
    		       const link = document.createElement('a');
    		       link.style.display = 'none';
    		       link.href = url;
    		       link.setAttribute('download', fileName);
    		       document.body.appendChild(link);
    		       link.click();
    		       document.body.removeChild(link); // 下载完成移除元素
    		       window.URL.revokeObjectURL(url); // 释放掉blob对象
    		  } else { // IE 10+
    		     window.navigator.msSaveBlob(blob, fileName);
    		  }
         })
      },
    
    更多相关内容
  • 前端调用后端接口导入Excel

    千次阅读 2022-04-27 10:56:33
    后端接口请求方法:post 参数格式:FormData param: { name: 'zhangsan', code: '001', id: 'A001', file: excelData // 后端需要的二进制流 } 分析:既然是Excel的导入或者导出首先我们就要安装excel的插件...

    需求:前端需要增加一个导入按钮,导入既定的Excel模板数据,
    后端接口请求方法:post
    参数格式:Form Data

    const param = {
    	name: 'zhangsan'code: '001',
    	id: 'A001',
    	file: excelData // 后端需要的二进制流
    }
    

    分析:既然是Excel的导入或者导出首先我们就要安装 excel 的插件 xlsx

    1. 首先全局安装xlsx插件
    npm install xlsx --save
    
    1. 前端代码:我们还是使用 element-ui 的 el-upload 组件,不过这个组件过于复杂和详细,它考虑的场景比较多,但是我们要删繁就简,只获取我们需要的东西即可。
    <!--
    1.action 必选参数,上传的地址,这里我们调用后端接口,所以不提供地址,但是得给不然会报错
    2.show-file-list 这里不显示上传的文件列表,所以::show-file-list='false' 指定为false
    3.accept 接受上传的文件类型 这里我指定为:.xlsx, .xls
    4.on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
    5.auto-upload 是否在选取文件后立即进行上传,我们需要调接口,所以,指定为false
    6.on-exceed	文件超出个数限制时的钩子 可限制文件的大小
    -->
    <el-upload
       ref="upload"
       action
       accept=".xlsx, .xls"
       :show-file-list='false'
       :on-change="handleUpLoad"
       :auto-upload="false">
       <el-button slot="trigger" type="primary">导入Excel文件</el-button>
     </el-upload>
    
    import readFile from '@/utils/index' // 从工具函数中导入文件处理函数,注意此时readFile相当于一个对象
    
    // 导入Excel
    async handleUpLoad (ev) {
      let file = ev.raw
      if (!file) return
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const fileType = ['xlsx', 'xls'].some(item => item === extension)
      if (!fileType) {
        this.$message('格式错误!请选择后缀是.xlsx, .xls 的文件')
        return
      }
      let data = await readFile.readFile(file) // 这个数据就是后端需要的二进制数据流,传给后端即可
      this.importExcelData(data) // 这里调用后端接口并传参
    }
    
    // 解析Excel数据为二进制数据流, 写入工具函数utils.js 中方便其他模块使用
    const readFile = file => {
      return new Promise(resolve => {
        let reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = ev => {
          resolve(ev.target.result)
        }
      })
    }
    
    // 导入
    async importExcelData (importData) {
      const param = {
        name: '张三',
        code: '123',
        id: '111',
        file: importData
      }
      let res = await api.importData(param)
      if (res.data && res.data.code === 'T') {
        this.$message('导入成功')
      }
    }
    

    后续补充:以上为完整的调用后端接口导入Excel数据,二进制数据流是后端处理的,那么,如果,我们要将导入的excel 数据填充到表格内来展示,如何做到呢?

    问题:Excel中有列头有值,我们怎么解析excel中的数据为 json 格式,然后塞到 tableData 中?

    <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="studyCode"
            label="学号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
        </el-table>
      </template>
    

    比如导入的excel 列头有姓名 学号 年龄 等字段,怎么解析这些列头字段呢?

    同样的,我们在 utils.js 中定义一个列头对照对象:

    import readFile from '@/utils/index'
    import xlsx from 'XlSX'
    // 定义key值对照对象
    export let columns = {
    	name: {
    		text: '姓名'type: 'string'
    	},
    	studyCode: {
    		text: '学号',
    		type: 'string'
    	},
    	age: {
    		text: '年龄',
    		type: 'string'
    	}
    }
    

    处理获取到的excel工作目录中的数据:

    // 读取FILE 中的数据(处理为Json对象)
    async handleUpLoad (ev) {
    	let data = await readFile(file)
    	let workbook = xlsx.read(data, {type: 'binary'}),
    	worksheet = workbook.Sheets[workbook.Sheets[0]] // 获取第一张工作表
    	// 此时的json 对象的key是汉字形式:{姓名:'张三', 年龄:'20'},后续要处理为{name: 'zhangsan', age: '20'}
    	data = xlsx.utils.sheet_to_json(worksheet) 
    // 把导入进来的数据转换为服务器可以处理的Json 格式(姓名:name 电话:phone)
    let arr = []
    data.forEach(item => {
    	let obj = {}
    	for (let key in columns) {
    		if (!columns.hasOwnProperty(key)) break; // 此语句排除对象的继承属性
    		let v = columns[key],
    		text = v.text,
    		type = v.type
    		v = item[text] || ''
    	type === 'string' ? (v = String(v)) : null
    	type === 'number' ? (v = Number(v)) : null
    	obj[key] = v
    }
    arr.push(obj)
    })
    // 然后赋值给tableData
    this.tableData = arr // 至此,导入的Excel 数据就填充到表格中了
    
    }
    
    
    展开全文
  • 1.通过axios方法直接请求接口创建a标签 2通过创建form表单得形式

    1.通过axios方法直接请求接口创建a标签

    2通过创建form表单得形式

    3

     

    展开全文
  • 前端调用后端接口404错误

    万次阅读 2020-11-04 17:22:26
    前端调用后端接口404错误1、后台没重启2、@responseBody没加3、前端调用的接口名称在后端没有 1、后台没重启 eclipse在写完controller接口之后 文件没保存 文件保存了没有重启服务 2、@responseBody没加 3、...


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

    1、后台没重启

    eclipse在写完controller接口之后

    • 文件没保存
    • 文件保存了没有重启服务

    2、@responseBody没加

    在这里插入图片描述

    3、前端调用的接口名称在后端没有

    在这里插入图片描述

    注意接口是否以“.do”结尾

    展开全文
  • 后端返回的文件是一个blob格式的流文件,前端需要进行转码,得到一个url,实现下载文件的功能。 使用window.location.href=url,window.open(url)也可以实现文件下载,但下载需要传请求头时,就不适用这种方法了。 ...
  • 昨天根据需求做了一个点击按钮下载模板(模板为excel表格)的功能,根据后台给的接口,我是用ajax方法对接,返回状态码200,但是没有任何反应,表格压根没有下载! 百度了下,使用window.location.href 解决了。总结...
  • 前后端分离,前端调用后端接口

    万次阅读 2020-03-24 17:31:32
    参考https://blog.csdn.net/Mr_carry/article/details/100537047?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none...后端 package com.pp.controller; import ...
  • 前端如何调用后端接口进行数据交互(极简)

    万次阅读 多人点赞 2022-03-18 10:23:27
    前端调用后端接口,获得数据并渲染 一、介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求 后端接口接收前端的参数后,开始层层调用方法处理数据 后端将最终数据返回给...
  • Nginx解决前端调用后端接口跨域问题
  • 我写前端的时候,有一个功能是在保存客户信息的时候,需要判断,这个客户所填公司的数据是否在数据库中,如果不在,首先就需要在对这个公司进行添加,然后再将这个公司和客户绑定,公司的绑定需要公司的...
  • 我是翻了几天百度都找不到想要的答案 萌新请求大佬帮忙....不用url跳转的方式调用得到json,这样我就可以在一个页面用多个后端接口对接了. 在网上学习课程都是一个页面查一个后端接口的,好懵逼.
  • 前端调用后端接口的错误(400)

    千次阅读 2020-08-07 11:10:33
    前端调用后端接口时,浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request) 之后debug还会出现出现问题的url 这种问题一般是前后端参数不一致的问题 比如user类,...
  • 后端接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax的安全性问题导致无法下载。下面列觉两种我测试成功的方式: 1.window....
  • 前端如何调用后端接口?有哪几种方式?

    万次阅读 多人点赞 2020-01-09 16:44:18
    那么今天就跟着我一起来看看,前端如何调用后端接口?有哪几种方式? 首先,要弄清楚前端提供一个接口或者调用后台接口,那么这个接口具体指什么?网上用户上传图片作为头像这个需求需要后台人员处理,当用户登录 ...
  • 就是如下图这样!!!
  • 根据目前我的学习现在一共有三种使用方式,实际上就是在原生ajax的操作,只不过后面两种是进一步对原生ajax的封装  第一种:原生ajax,使用略,最麻烦的一种也是最基础的  第二种:使用jquery封装了一次的ajax: ...
  • 这种情况,多半是在Controller前端控制器上标注的是@Controller,而不是RestController,只需要调整为后者即可。
  • 前后端启动项目,无法访问接口。 这个问题是跨域引起的 这里我只推荐这两种方式跨域,其它的跨域方式都还有很多但都不推荐,真心主流的也就这两种方式。 开发环境 生产环境 方案一 cors cors ...
  • 1.api文件夹中定义的下载接口 tpis:这里的responseType需要设置成blob //点击导出,导出数据表格 export function exportTable(data,params){ return axios({ url:'/api/conversation/excel/export', method:...
  • Android服务 开启服务 (startservice) 服务一旦开启与调用者没有任何的关系 , 调用着的activity 即便是退出了 也不会影响 后台的service的运行. 在activity里面 不能去调用服务 ... spring可以get到bean,注入却为空...
  • warpper的用法https://www.cnblogs.com/youcoding/p/15094467.html
  • 究其原因 还是因为 编写XML查询语句要指定 resultMap="pojoResultMap" 如果用 resultType就会出现上述情况!
  • wx.request var data = { name:'小张爱敲代码' } wx.request({ url: '', data: data success(res) { conso.log(res) } })
  • 前端后端调用接口的方式

    千次阅读 2021-06-29 13:23:43
    接口由URL和HTTP方法构成,URL为接口的地址,HTTP方法指的是GET, PUT, DELETE等等传输方式。 GET方式: axios.get().then().catch() 注:get方式传参数可以直接跟在url后面,也可以通过param对象传 POST方式...
  • 本文所用vue-cli是3.0版本的,所以首先需要创建一个vue.config.js文件,然后配置axios,就可以请求接口获取数据了。 1.main.js文件中: import axios from 'axios' Vue.prototype.$axios = axios axios.defaults...
  • 先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet....
  • 基础配置:(文件) 1.node_modules ->src文件->index.js->webpack.config.js 方法: 1.webpack插件 总结:只能在本地使用proxy,打包上线就不会出现...//前端请求后端接口 ajax let xhr=new XMLHttpRequest();
  • 最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里...
  • 前端环境配置及后端接口调用

    千次阅读 2021-11-15 14:32:27
    至此,前端就已完成了一次成功的后端接口调用。 三、node 安装问题解决 1、首先查看安装node的目录是否有中文字符或空格。【若有,则修改,若无看下一步】 2、若目录没有问题,则将cmd以管理员身份运行,重新输入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 111,945
精华内容 44,778
关键字:

前端怎么调用后端接口