热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue+axios封装请求实现前后端分离

这篇文章主要为大家详细介绍了Vue+axios封装请求实现前后端分离,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下

前言

我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件

# 一、封装axios
vue.config.js 配置文件

module.exports = {
 configureWebpack: {
 resolve: {
 alias: {
 api: '@/api',
 assets: '@/assets',
 components: '@/components',
 layouts: '@/layouts',
 router: '@/router',
 store: '@/store',
 utils: '@/utils',
 views: '@/views'
 }
 }
 },
 devServer: {
 //端口
 port: 8081,
 //后端接口
 proxy: {
 '/api': {
 target: 'http://localhost:8099', // 目标代理接口地址
 changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
 // ws: true, // 是否启用websockets
 pathRewrite: {
  '^/api': ''
 }
 }
 }
 }
}

request.js,封装组件

//配置axios
import axios from 'axios'

const instance = axios.create({
 baseURL: '/api',
 timeout: 6000
})


instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//请求拦截器
instance.interceptors.request.use(
 function(config) {
 return config
 },
 function(error) {
 //对请求错误做些什么
 return Promise.reject(error)
 }
)
//响应拦截器
instance.interceptors.response.use(
 function(response) {
 return response.data
 },
 function(error) {
 //对响应错误做点什么
 return Promise.reject(error)
 }
)

export default function(method, url, data = '', cOnfig= '') {
 method = method.toLowerCase()
 if (method === 'post') {
 if (config !== '') {
 return instance.post(url, data, config)
 } else {
 return instance.post(url, data)
 }
 } else if (method === 'get') {
 return instance.get(url, {params: data})
 } else if (method === 'delete') {
 return instance.delete(url, {params: data})
 } else if (method === 'put') {
 return instance.put(url, data)
 } else {
 console.error('未知的method' + method)
 return false
 }
}

api.js,接口文件

import req from '@/utils/request'

/**
 * 批量查询
 * @param params
 */
export const list = params => req("get", "/resource/list", params);

具体的页面之中进行导入使用即可

总结

这就是vue中对于axios的初步封装使用,后续会持续更新

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 案例1:在子组件中两个按钮1和-1,点击后修改count整个操作的过程还是在子组件中完成,但是之后的展示交给父组件这样,我 ... [详细]
  • 探讨在构建类似Viber或WhatsApp的聊天应用时,如何有效实现客户端(Web、Android、iOS)与服务器之间的连接。本文将分析使用WebSockets标准及其替代方案的优劣。 ... [详细]
  • 本文介绍了如何利用Vue.js中的Axios库将数组数据发送至Laravel后端,并正确地将这些数据存储到数据库中。 ... [详细]
  • 择要:Fundebug的JavaScript毛病监控插件同步支撑Vue.js异步毛病监控。Vue.js从降生至今已5年,尤大在本年2月份宣布了严重更新,即Vue2.6。更新包含新增 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • [Vue.js 3.0] Guide – Scaling Up – State Management
    [Vue.js 3.0] Guide – Scaling Up – State Management ... [详细]
  • Vuetify 是一款基于 Vue.js 的开源 UI 框架,以其精致的 Material Design 风格组件库在全球范围内受到广泛欢迎。 ... [详细]
  • 最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品ling取参考你的选题刚好在下面有,有时间看到机会给您发1ssm资源循环利用2springboot校园考勤系统3ssm防 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文汇集了我在网络上搜集以及在实际面试中遇到的前端开发面试题目,并附有详细解答。无论是初学者还是有一定经验的开发者,都应深入理解这些问题背后的原理,通过系统学习和透彻研究,逐步形成自己的知识体系和技术框架。 ... [详细]
  • 在处理 XML 数据时,如果需要解析 `` 标签的内容,可以采用 Pull 解析方法。Pull 解析是一种高效的 XML 解析方式,适用于流式数据处理。具体实现中,可以通过 Java 的 `XmlPullParser` 或其他类似的库来逐步读取和解析 XML 文档中的 `` 元素。这样不仅能够提高解析效率,还能减少内存占用。本文将详细介绍如何使用 Pull 解析方法来提取 `` 标签的内容,并提供一个示例代码,帮助开发者快速解决问题。 ... [详细]
  • HTML5 WebSocket技术详解与应用前景
    WebSocket 是 HTML5 引入的一种在单一 TCP 连接上实现全双工通信的技术。作为一种高效且低延迟的协议,WebSocket 允许服务器和客户端之间进行实时双向数据交换。该技术不仅简化了开发过程,还显著提升了 Web 应用的性能和用户体验。未来,随着更多应用场景的探索,WebSocket 在实时通信领域的应用前景将更加广阔。 ... [详细]
  • 本文探讨了利用Java实现WebSocket实时消息推送技术的方法。与传统的轮询、长连接或短连接等方案相比,WebSocket提供了一种更为高效和低延迟的双向通信机制。通过建立持久连接,服务器能够主动向客户端推送数据,从而实现真正的实时消息传递。此外,本文还介绍了WebSocket在实际应用中的优势和应用场景,并提供了详细的实现步骤和技术细节。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
author-avatar
聪头丶_505
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有