精华内容
下载资源
问答
  • 本篇文章主要介绍了详解vue后端数据交互(ajax):vue-resource,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 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

    展开全文
  • vue前端后端传递参数

    千次阅读 2021-07-05 20:09:48
    前端: export default { data () { return { name: "david", //要传递的值1 age: 20, //要传递的值2 } }, methods: { //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端...

    get方法传参

    get方法传参,我们只需要把要传递的参数拼接到要发送的路径地址后面。

    实例

    前端:

    export default {
      data () {
        return {
          name: "david", //要传递的值1
          age: 20, //要传递的值2
        }
      },
      methods: {
      //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端传递参数(注:async await是配套使用的),'http://localhost:33333/api/'是我后端接收参数的地址
        async fetch() {
          const { data: resp } = await this.$http.get('http://localhost:33333/api/'+this. param1+'/'+this. param2);
          if (resp == 400) return this.$message.error(resp.msg);//对于返回值做了一个处理
        },
      },
    }
    

    后端:

    @router.get('/api/{name}/{age}')
    def Search(name,age):
        #name,age是我们传递过来的值
        pass
    

    post方法传参

    post方法允许我们定义并传递一个参数对象,在传值的时候我们可以一眼就看出自己传递的参数

    实例

    export default {
      data () {
        return {
          params:{
           name: "david", //要传递的值1
           age: 20, //要传递的值2
          } 
        }
      },
      methods: {
      //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端传递参数(注:async await是配套使用的),'http://localhost:33333/api/'是我后端接收参数的地址
        async fetch() {
          const { data: resp } = await this.$http.post('http://localhost:33333/api/',this.params);
          if (resp == 400) return this.$message.error(resp.msg);//对于返回值做了一个处理
        },
      },
    }
    

    后端:

    class QueryForm(BaseModel):
        name:str=""
        age:int=0
        
    @router.post('/api/')
    def Search(form:QueryForm):
        #这里我们定义了一个和前端传递过来的一样的参数类型的form用来接收前端传递过来的值
        pass
    

    温馨提示:传递参数的时候我们要注意前后端一致,前端用post传递参数,后端用post接收参数;前端用get传递参数,后端用get接收参数

    展开全文
  • Vue前端如何与后端进行数据交互

    千次阅读 2021-03-03 11:03:15
    1、安装 npm install axios --save 2、在main.js文件引入 import Axios from 'axios';//后台交互 Vue.prototype.$http=Axios //defaults 设置全局默认路径 ... // console.log('这是返回的客户数据')

    1、安装

    npm install axios --save
    

    2、在main.js文件引入

    import Axios from 'axios';//后台交互
    Vue.prototype.$http=Axios
    //defaults 设置全局默认路径
    Axios.defaults.baseURL="/"
    

    3、使用

    //第一种
    this.$http.post('/index/customer/',{//里面写要传的值}).then(function(res) {
    	// console.log('这是返回的客户数据');
    	// console.log(res.data.data);
    	this.customerArr = res.data.data
    });//如果是get请求就把post换成get
    //第二种,推荐使用该方法
    this.$http({
    				url: '/index/patchBase/',
    				method: 'get',
    				headers: { 'X-Requested-With': 'XMLHttpRequest' },
    				params:{}//传值 如:params:{id:1,name:"gw"}
    			}).then(res => {
    				console.log('数据接收');
    				console.log(res.data.data);
    			});
    this.$http({
    				url: '/index/patchBase/',
    				method: 'post',
    				headers: { "Content-Type": "multipart/form-data" },
    				data:{}//传值
    			}).then(res => {
    				console.log('数据接收');
    				console.log(res.data.data);
    			});
    

    需要注意的是 post、get请求的请求头数据不一样,传值方法不一样:get是params,post请求是用data传值

    展开全文
  • 因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台...
  • 不同的api类型放在不同的文件中,所有的vue文件都是import这些模块后调用。 向后端发请求 js处理返回的数据 在html中显示得到的数据 其他在前端完成的操作 最终完成的显示效果 ...

    以获取博文内容的数据为例子,来演示前后端数据交互:

    用到的模块

    主要是axios、qs

    封装request

    import axios from 'axios'
    import { Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    
    // 设置请求的地址
    const service = axios.create({
      baseURL: '/api',
      timeout: 5000
    })
    
    // 构造请求
    service.interceptors.request.use(
      config => {
        // 传递token,除了登录的时候没有token以外都要传
        if (store.getters.token) {
          config.headers['Authorization'] = getToken()
        }
        return config
      },
      error => {
        // 错误
        return Promise.reject(error)
      }
    )
    
    // 发完请求以后的响应结果
    service.interceptors.response.use(
    
      response => {
        // 后期需要返回的数据,先放着
        const res = response.data
        // 我的要求:200代表成功
        if (res.code !== 200) {
          // 设置错误信息
          var out_msg = (res.code + ' - ' + res.msg) || (res.code + ' - ' + '错误!')
          Message({
            message: out_msg,
            showClose: true,
            type: 'error',
            duration: 5 * 1000
          })
          // 是否需要重新设置token
          if (res.code === 50000) {
            // 跳转到resetToken
            store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          }
          return Promise.reject(new Error(out_msg))
        } else {
          Message({
            message: res.msg || '成功!',
            showClose: true,
            type: 'success',
            duration: 5 * 1000
          })
          return res
        }
      },
      error => {
        Message({
          message: error.message,
          showClose: true,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

    api管理

    按照模块的分类,同一种类型的api放在同一个js文件下。

    不同的api类型放在不同的文件中,所有的vue文件都是import这些模块后调用。

    向后端发请求

    // 获取最近的文章列表
    export function getRecentArticles(page, size) {
      return request({
        url: '/article/list',
        method: 'get',
        params: { page: page, size: size }
      })
    }

    js处理返回的数据

    比如我需要进行html格式的处理,还有获取相似文章列表并且存储起来。

    created() {
        var that = this
        getArticle(that.id).then(response => {
          const { data } = response
          that.blog = data
          that.blog.content = '<html><head><style> img{ max-width: 100%; width:auto; height: auto; }</style></head><body>' + that.blog.content + '</body></html>'
          readArticle(that.id).then(response2 => {
            getSimilarityArticle(that.id).then(response3 => {
              const { data } = response3
              that.similarList = data
            })
          })
        })
      }

    在html中显示得到的数据

    对于列表项,使用v-for进行显示。

          <div v-for="item in similarList" :key="item.id">
            <blog-brief-item :id="item.id" :title="item.title" :author="item.author" :date="item.updateTime" />
          </div>

    其他在前端完成的操作

    以tag的分类展示为例子,在存储的时候是以#作为分隔符进行分割。

    那么我传到前端以后的数据,应该使用一个split函数来进行处理。

        splitDescription(data) {
          return data.split('#')
        }

    在vue中也需要进行相应的操作

          <el-table-column align="center" label="标签描述">
            <template v-if="splitDescription(scope.row.description)[0]!=='\n'" slot-scope="scope">
              <span v-for="item in splitDescription(scope.row.description)" :key="item">
                <el-tag type="info" effect="plain" style="margin: 4px">{{ item }}</el-tag>
              </span>
            </template>
          </el-table-column>

    最终完成的显示效果

    展开全文
  • 本篇文章主要介绍了SpringMVC前端后端数据交互总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • get请求获取到后端传来的图片流不能直接再页面进行展示,需要在接口处进行转化再赋值,转化的方式就是 window.URL.createObjectURL( ) ,将图片流转化为本地请求地址。 let res= await this.$http.get('url',{ ...
  • Vue前端后端如何交互?

    千次阅读 2020-08-24 13:10:12
    Vue中前后端交互Promise的基本使用基本使用多个请求,链式编程Promise的API---实例方法Promise的API---对象方法 Promise的基本使用 基本使用 new一个promise,为其传入一个函数作为参数,这个函数中传入两个参数,...
  • 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) =>...
  • vue开发使用el-ui框架,下面解决的是后端返回了一个list的数据,每条数据换行显示的问题,代码如下: <el-table-column label="类型" width="100px" align="center" prop="testType" > <template slot-...
  • vue前端与Django后端数据交互

    千次阅读 2021-02-22 16:56:49
    本文简单记录了vue前端与Django后端数据交互
  • 我这里引用的是element UI框架,在这个...他相当于桥梁,(在参数处)接收前端vue数据,(通过url)找到后端Controller,后端再把查询出的结果返回回来,最后return返回给vue。 文件夹中存放的是js文件,每个js文件都是
  • 简单点说呢,就是与后端数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用)。今天讲到的一些功能开发,主要就是请求列表数据,详情数据,...
  • Vue 项目 前端后端接口之间的跨域问题 是
  • 前端代码 <template> <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> </template> <script> export default { methods: { ...
  • export function exportDataList () { return axios.get('/export?tableName=list', { responseType: ...tableName=list', { responseType: 'blob' }),一定要记得加{ responseType: 'blob' },否则前端接收到的就是乱码!
  • 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧。都说 vue 的官方教程写得好,所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。...
  • 解决办法
  • 前端下载后端传过来的文件流 首先axios请求中的responseType: ‘blob’ dataDownload(res) { const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) // 文件名 const data...
  • vue前端后端发送来的字符传导出(下载)成TXT文档 vue3.0+TS+vantdesgin txt文档 导出 下载 字符串
  • 因为我的id是自动生成,返回后端数据是没有id值的,但是我要怎么才能在成功后数据已经生成id值时,直接在前端获取到新增数据的id值呢,前端vue?求大佬告知。
  • 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 ...
  • 首先安装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
  • vue前端+后端生成图表(饼状图)

    千次阅读 2020-06-29 19:31:21
    表连接要使用注解的(一对多,多对一,多对多) controller @RequestMapping("/... data: vm.dat, // 数据数组,name 为数据项名称,value 为数据项值 } ] }) }); } }, }) </script> </body> </html> html对应原理
  • vue前端与django后端数据交互

    千次阅读 2019-10-01 10:44:24
    //把数据传到路径为/airCdt/的django后端函数进行数据处理 onSubmit(){ const dict={ 'floor': this.formLabelAlign.floor, 'room': this.formLabelAlign.room, 'status': this.formLabelAlign.status, 'mode': ...
  • 前端显示后端处理进度的简单实现

    万次阅读 2018-12-24 00:20:39
    有时候前端后端发送一个请求,后端处理的过程稍微有点长,为了增强用户体验,可以在前端用一个进度条显示后端的处理进程。简单实现方法。 思路: 前端使用setInterval()函数,设置每隔几秒向后端发送一次请求,...
  • vue前端与java后端交互

    万次阅读 多人点赞 2018-12-26 17:21:53
    前端写法:  后端布局:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,108
精华内容 19,243
关键字:

vue前端显示后端数据

vue 订阅