精华内容
下载资源
问答
  • get请求获取后端传来的图片流不能直接再页面进行展示,需要在接口处进行转化再赋值,转化的方式就是 window.URL.createObjectURL( ) ,将图片流转化为本地请求地址。 let res= await this.$http.get('url',{ ...

    get请求获取到后端传来的图片流不能直接再页面进行展示,需要在接口处进行转化再赋值,转化的方式就是

    window.URL.createObjectURL( )

    ,将图片流转化为本地请求地址。

    let res= await this.$http.get('url',{
            responseType: 'blob'
    })
    this.captchaImg = window.URL.createObjectURL(res.data)
    

    responseType: ‘blob’
    这个也不能少

    展开全文
  • vue 获取后端数据

    千次阅读 2018-03-18 16:01:00
    1、vue-resource从后端请求我们...模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , 在webpack.dev.conf.js这个文件中编辑。 圈1//webpack.dev.conf.js ...

    1、vue-resource从后端请求我们需要的数据

    下载安装npm install vue-resource

    装完之后重新启动项目

     

    模拟后端数据,启动测试服务器 

    注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js ,

    webpack.dev.conf.js这个文件中编辑。

     

    圈1//webpack.dev.conf.js

    //第一种模拟服务器json-server

    //json-server 模拟后端数据,启动测试服务器 只能get 获取数据

    //安装npm install json-server

    const jsonServer = require('json-server')
    const apiServer = jsonServer.create()
    const apiRouter = jsonServer.router('db.json')
    const middlewares = jsonServer.defaults()

     

    apiServer.use(middlewares)
    apiServer.use('/api',apiRouter)
    apiServer.listen(8001, () => {
    console.log('JSON Server is running')
    })
    //end json-server

     

    //第二种模拟服务器 不需要安装,get post 都支持    (推荐)

    var express = require('express')


    var apiServer = express()
    var bodyParser=require('body-parser')
    apiServer.use(bodyParser.urlencoded({extended:true}))
    apiServer.use(bodyParser.json())
    var apiRouter = express.Router()
    var fs = require('fs') //node自带的fs
    apiRouter.route('/:apiName') //指的是/api 下一级的路由路径名字
    .all(function (req, res) { //all只得是get post都支持
    fs.readFile('./db.json', 'utf8', function (err, data) {
    if (err) throw err
    var data = JSON.parse(data)
    if (data[req.params.apiName]) {
    res.json(data[req.params.apiName])  
    }
    else {
    res.send('no such api name')
    }

    })
    })
    apiServer.use('/api', apiRouter);
    apiServer.listen(8001, function (err) {
    if (err) {
    console.log(err)
    return
    }
    console.log('Listening at http://localhost:' + 8001 + '\n')
    })

    //end测试服务器

    圈2//在config 文件夹下的index.js 里面找到dev

    //添加代理服务器

    proxyTable: { // 服务器端代理
    '/api/':'http://localhost:8001/' //就是访问8000端口下的/api路由的时候,其实是访问的代理端口8001
    }

     同时build > webpack.dev.conf.js >由 apiServer.use(apiRouter) > 改为 apiServer.use('/api',apiRouter)

    快看!!接收到了请求代理服务器的数据  哈哈哈好开心

     

     

    可以把后台模拟数据写在devServer中

    圈3//在webpack.dev.conf.js找到devServer

    before(app) {

      app.get('/api/someApi', (req, res) => {
        res.json({ // 这里是你的json内容 })  }) }

     

    圈4 箭头函数里面的this 是代码环境下的 this 而不是执行环境下的 this

     

     

    转载于:https://www.cnblogs.com/Home-Yzz/p/8595785.html

    展开全文
  • vue前端遍历后端传过来数据步骤

    千次阅读 2021-04-17 14:04:11
    首先需要在api中配置与后端一样的接口如我遍历的列表接口如下 //赛事列表接口 export const getVideoList = (token)=>...params是我设置的请求头,token是放入请求头的数据,如果后端不需要可以不加 2.在我们的页.
    1. 首先需要在api中配置与后端一样的接口如我遍历的列表接口如下
    //赛事列表接口
    export const getVideoList = (token)=> axios.get("/api/v1/pri/item/result",{
        params:{//因为后端需要传过去一个token才可以不被拦截所以加上了,看各自情况,可以不加
            "token":token
        }
    })
    

    params是我设置的请求头,token是放入请求头的数据,如果后端不需要可以不加

    2.在我们的页面中先引用接口并且在data中定义videoList来接受返回的数组(videoList可以自己起名)

    import {  getVideoList } from "@/api/getData.js";
     data(){
            return{
                videoList: [],
            }
        },
    

    3.在方法中获取请求

      methods:{
            async getVList(){
             
            try{
            	 //如果不设置token,括号里什么也没有
                const result = await getVideoList(this.$store.state.token);
                if (result.data.code == 0) {
                    this.videoList = result.data.data;
                    //打印可以看一下后端返回的数据
                    console.log( result.data.data);
                }
            }catch(error){
                console.log(error)
            }
        }
        },
        mounted(){
         //获取数据后渲染页面
          this.getVList()
        }
    

    4.最后在template中写页面

    <template>
    	<div>
    	 	 //获取到的videoList赋值给item,并且遍历
    		 <div v-for="item in videoList" :key="item.id">
    		 //这个country是后端返回的数据一个名字,上面打印出来的内容自己找需要遍历的即可
    		 <div>{{item.country}}</div>
            </div>  
    	</div>
    </template>
    

    5

    展开全文
  • 我这里引用的是element UI框架,在这个...他相当于桥梁,(在参数处)接收前端vue数据,(通过url)找到后端Controller,后端再把查询出的结果返回回来,最后return返回给vue。 文件夹中存放的是js文件,每个js文件都是

    我这里引用的是element UI框架,在这个里面的数据流动需要一下几个文件夹,也就是需要我们经常改动的地方。

    下面以此介绍:

    1.app.vue:最下面的app.vue是运行vue的主文件,例如在hbuider中直接运行这个文件就可以把前端跑起来

    2.api文件夹:通过名字可以猜个差不多,api叫接口。他相当于桥梁,(在参数处)接收前端vue数据,(通过url)找到后端Controller,后端再把查询出的结果返回回来,最后return返回给vue。

    文件夹中存放的是js文件,每个js文件都是连接后端(spring boot)的接口,如图1:  url:根据路径去controller里面找,具体后端controller怎么写能让他找到,一会儿会说。 method:就是get post 传递方式,具体区别可以去百度一下,,这里面要不就是get 要不就是post 。params:是传递的参数把vue给自己的参数传递给后端Controller。基本上是一个vue文件对应一个js文件,一个js文件里面有增删改查几种方法。

    ——>js文件 :

    ——>vue文件:

    3.router文件夹:英文翻译叫轨迹,其中有一个index.js文件夹,此文件的作用是路径。把每一个vue文件写在这里,这样程序就知道你写的vue页面时放在哪的。

    4.views文件夹:叫视图,这里面放的就是我们总改动的也是显示在界面的页面,起到的作用就像html似的。

    主页显示:里面跟html似的,由标签组成界面想要显示的样子;css:和传统的css一样;js:和传统的js一样

    转自:https://www.cnblogs.com/zxrxzw/p/11304289.html

    展开全文
  • 首先安装axios npm install axios 定义request.js request.js import axios from 'axios' const instance = axios.create({ baseURL: "http://localhost:8081", //服务器ip...import request from '@/utlis/r
  • 因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台...
  • 用axios从后端获取了一个list,list包含id和name两项。前端使用下拉菜单。 <p><img alt="" height="302" src="https://img-ask.csdnimg.cn/upload/1622359546581.png" width="1093" />设另一输入框的v-model...
  • 今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS...
  • 获取博文内容的数据为例子,来演示前后端数据交互: 用到的模块 axios 封装request api管理 按照模块的分类,同一种类型的api放在同一个js文件下。 不同的api类型放在不同的文件中,所有的vue文件都是...
  • 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理。 他们的格式: Request Payload:...
  • vue前端下载后端返回的文件流

    千次阅读 2020-06-08 15:27:35
    axios({ method: 'get', url: urls + `/apis/v1alpha1/files/result/${row.path}`, responseType: 'blob', headers:{ Authorization:token } }).then((res) =>...
  • } } 4、为了方便打包后去除'/api',建议把'/api'设成全局,在main.js中添加 Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/apis' 调用接口的时候的url就可以写成api + '接口地址'
  • 版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在...因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有...
  • 做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片 就像这样的 <el-form-item label="验证码" prop="name"> <el-input style="width: 147px;" v-model="ruleForm.verification" ...
  • 因为我的id是自动生成,返回后端数据是没有id值的,但是我要怎么才能在成功后数据已经生成id值时,直接在前端获取到新增数据的id值呢,前端是vue?求大佬告知。
  • 解决办法
  • Vue前端后端如何交互?

    千次阅读 2020-08-24 13:10:12
    Vue中前后端交互Promise的基本使用基本使用多个请求,链式编程Promise的API---实例方法Promise的API---对象方法 Promise的基本使用 基本使用 new一个promise,为其传入一个函数作为参数,这个函数中传入两个参数,...
  • vue前端与Django后端数据交互

    千次阅读 2021-02-22 16:56:49
    本文简单记录了vue前端与Django后端数据交互
  • 2、如何获取接口中后端定义的response headers里面的参数 背景:后端给了一个接口,直接访问接口就可以获得图片。 讲道理,直接这样写就ok了。 <el-image :src="codeImg" alt @click="handleCaptcha" >...
  • vue 前后端分离调用后端数据(加深记忆) 1、在.vue文件中引入调用对应后台数据方法,并调用此方法 import {getAccount} from '../assets/js/index' 2、前端申请后台数据(安装axios依赖) import axios from '...
  • Vue 前端导出后端返回的excel文件

    千次阅读 2019-02-18 12:03:26
    在网上搜索了一番之后,决定采用Blob方式,这也是大家...页面:先筛选,向后端请求接口返回excel文件,代码如下: const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder' console.log(...
  • 前端环境:vue 使用的vue 组件:iview 后端项目框架:beego 实现功能:从数据库中读取数据绑定到选择菜单栏 前端定义请求的路由地址 文件:src/api/demands.js // 获取集群列表 export const getClusterList = ()=&...
  • 前端代码 <template> <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> </template> <script> export default { methods: { ...
  • 前端VUE访问后端接口获取列表数据报序列化错误,具体错误 前端访问接口报错截图 后端响应信息 2021-08-07 13:33:10,832 WARN --- [http-nio-8741-exec-4] o.s.w.s.m.s.DefaultHandlerExceptionResolver : Resolved ...
  • 目录获取的json数据vue & axios 处理后端返回数据index.vue运行界面点击 `点击 jump_to_new_tab` 按钮点击首页中的 `点击`点击 `点击 jump_to_self` 按钮注意 获取的json数据 {“status”:"success","data":...
  • 简单点说呢,就是与后端数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用)。今天讲到的一些功能开发,主要就是请求列表数据,详情数据,...
  • 前端下载后端传过来的文件流 首先axios请求中的responseType: ‘blob’ dataDownload(res) { const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) // 文件名 const data...
  • vue前端抓取数据到方法? 传到后端接收再存储在map里? 如何实现
  • vue搭建的前端项目中运用axios实现前后台数据交互及开发过程中跨域问题的解决:https://blog.csdn.net/qq_40773976/article/details/82496940 使用vue-cli+axios配置代理进行跨域访问数据:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,271
精华内容 10,508
关键字:

vue前端获取后端数据

vue 订阅