您现在的位置是：网站首页> 编程资料编程资料
vue 请求后端数据的示例代码_vue.js_
2023-05-24
360人已围观
简介 vue 请求后端数据的示例代码_vue.js_
在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中进行测试：
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.data this.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.vue中添加代码
router下的index.js中的代码
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ ] }) list.vue代码示例：
{{user.login}}
欢迎使用
加载中....
{{info.errMsg}}
search.vue代码示例：
search gitHub Users
注：Vue全局事件总线$bus安装与应用【附带图片讲解】可以参考下面的地址：
到此这篇关于vue请求后端数据的文章就介绍到这了,更多相关vue请求后端数据内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
