Vue前后端交互(vue2)
  40IdLO25mCaU 2023年11月02日 24 0


Vue前后端交互

环境:
前端:Vscode开发
后端:IDEA开发

1.(Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求)
安装axios

在终端执行:npm install axios

Vue前后端交互(vue2)_ios


2.修改config/index.js文件

在proxyTable节点添加:

'/user':{
        target:'http://localhost:9081',
        changeOrigin:true,
      }

Vue前后端交互(vue2)_交互_02


其中:

1./user是后端统一接口路径

2.target是我们要映射的地址

3.封装请求:
创建src/util/login.js
写入:

import axios from 'axios'

export function login () {
  return axios.request({
    url: '/user/login',
    method: 'get'
  })
}

4.在调用的页面引入方法:

import { login } from '@/util/login'

Vue前后端交互(vue2)_ajax_03


调用:

login().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })

Vue前后端交互(vue2)_ios_04


测试:

Vue前后端交互(vue2)_Vue_05


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  oYd6WBUwpOnX   2023年11月02日   41   0   0 3D2d缩放ios
  Mqh2iumZ9USt   2023年11月02日   43   0   0 #includei++ios
40IdLO25mCaU