vue如何请求后端数据

在vue中，我们如何通过请求接口来访问后端的数据呢？在这里简单总结了一个小示例：

主要问题：如果不封装的话，在每次请求的时候都要书写一遍下面的代码，造成代码冗余。

1、在src目录下创建一个utils文件夹，然后在里面创建一个js文件。这里我创建了一个request.js文件。

/*引入axios*/
import axios from 'axios'
const request = axios.create({baseURL: 'http://localhost:8280/user', // 基础路径,将统一的部分全部封装withCredentials: true // 表示请求可以携带cookie
})
//前端采用export.default，在写后端代码时用module.export
export default request

在app.vue中进行测试：

<script>
import request from './utils/request'export default {created() {request({method:'GET',url:'/products',params:{test:'111',hello:'world'},})},
}
</script>

2、在src文件夹下创建一个api文件夹，根据不同的功能进行分组，分别写不同的接口。这里我创建了一个product.js。

import request from '../utils/request';export function getList(params={}) {return request({methods:'GET',url:'/products',params,})
}export function getProduct(id) {return request({methods:'GET',url:'/products/${id}',})
}
export function update(id,data) {return request({methods:'PUT',url:'/products/${id}',data,})
}

3、在api文件夹下创建index.js

import products from './products';export default{products,
}

4、在main.js中引入api文件夹下的index。

import api from './api/index.js';Vue.prototype.$api = api

5、此时通过接口获取后端数据的方式就变成了如下格式:

getProducts(){this.$api.products.getList(this.query).then((response)=>{this.products = response.data.datathis.total = response.data.total})
}

6、列表展示案例：

main.js中添加代码

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios';//Vue.prototype.$http=axios;//修改内部的$http为axios  $http.get("") .post()Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>',render:h => h(App),beforeCreate() {//安装全局事件总线，$bus就是当前应用的vmVue.prototype.$bus = this},})

App.vue中添加代码

<template><div><Search/><List/></div>
</template><script>
import List from "./components/List";
import Search from "./components/Search";
export default {name: 'App',components: {Search, List},
}
</script><style></style>

router下的index.js中的代码

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: []
})

list.vue代码示例：

<template><div class="row"><!--展示用户数据--><div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style="width: 100px"/></a><p class="card-text">{{user.login}}</p></div><!--展示欢迎词--><h1 v-show="info.isFirst">欢迎使用</h1><!--展示加载中--><h1 v-show="info.isLoading">加载中....</h1><!--展示错误信息--><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>
export default {name: "List",data(){return{info:{isFirst:true,//是否是初次展示isLoading:false,//是否处于加载中errMsg:'',users:[],}}},//使用全局事件总线在两个组件之间传递数据//接收数据：list组件想接收数据，则要在list组件中给$bus绑定自定义事件，事件的回调留在list组件自身。mounted() {this.$bus.$on('updateListDate',(dataObj)=>{console.log(dataObj)this.info = {...this.info,...dataObj};/*this.isFirst = isFirstthis.isLoading = isLoadingthis.errMsg = errMsgthis.users = users*/})},
}
</script><style scoped></style>

search.vue代码示例：

<template><section class="jumbotron"><h3 class="jumbotron-heading"> search gitHub Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers" >Search</button></div></section>
</template>
<script>
import axios from 'axios';
export default {name: "Search",data(){return{keyWord:''}},methods:{searchUsers(){//请求前更新list里面的数据this.$bus.$emit('updateListDate',{isFirst:false,isLoading:true,errMsg:'',users:[]})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(res =>{console.log("请求成功")//提供数据：search组件要给list组件传递数据，就要触发list组件中的自定义事件并携带要传递的数据//请求成功后更新list里面的数据this.$bus.$emit("updateListDate",{isLoading:false,errMsg:'',users:res.data.items})},error =>{console.log("请求成功",error.message)//请求失败后更新list里面的数据this.$bus.$emit("updateListDate",{isLoading:false,errMsg:error.message,users:[]})})}},
}
</script><style scoped></style>

注：Vue全局事件总线$bus安装与应用【附带图片讲解】可以参考下面的地址：

Vue全局事件总线$bus安装与应用【附带图片讲解】_codnan的博客-CSDN博客_安装事件总线Vue全局事件总线$bus安装与应用【附带图片讲解】https://blog.csdn.net/annans/article/details/124658904

vue如何请求后端数据相关推荐

VUE定时器请求后端数据
mounted:function(){this.timer = setInterval(this.autoPrintBtnClicked, 60100);//60秒后运行 autoPrintBtnCl ...
vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据需要引用vue-resource 安装 ...
TP5后端,VUE前端请求聚合数据新闻接口
问题描述: TP5当后端,VUE当前端, 请求聚合数据新闻接口演示效果如下: ps: 最开始加载页面的时候,只加载本地的文件(因为请求次数有限制) 问题解决: 1: vue 文件: <temp ...
TP5后端,VUE前端请求聚合数据驾照题库
选择效果: 演示效果: 1: Vue 配置: /config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs- ...
TP5后端,VUE前端请求聚合数据成语大全
PS: 聚合接口上描述的是成语大全,其实只是以用户查找字为开头的成语而已.先上演示效果: 1: VUE 前端代码 <template><div class="content ...
TP5后端,VUE前端请求聚合数据天气接口
问题描述: TP5 当后端 VUE 当前端请求聚合数据天气接口问题解决: 演示效果前端 VUE 代码: <template><div class="whether-t ...
TP5后端,VUE前端请求聚合数据过去的今天
先上效果: 1: 前端 vue 文件: <template><!--接口地址 http://v.juhe.cn/todayOnhistory/queryEvent.php参数名类型 ...
vue中请求的数据时间戳转换时间
前言下面是vue中将请求的数据中的时间戳转化成标准时间,下面是我总结的两种方式: 第一种方式: 这里是在vue请求的数据中将时间戳转换字符串的这是代码中的关键部分 //item.add_time ...
Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...

vue如何请求后端数据

vue如何请求后端数据相关推荐

最新文章

热门文章