vue -- 》 axios

第三次课，vue 使用axios  调用后端接口 

config-index：配置后端地址

proxyTable: { "/v": { target: url, changeOrigin: true, pathRewrite: { "^/v": "/v" } } },

下载依赖

npm install --save axios

cnpm install axios --save

src-main ： 因为vue不能直接use axios 所以  注册axios为vue的属性 $http

import axios from 'axios' Vue.prototype.$http= axios

页面方法调用 

methods: { go() { this.$http({ method: "get", url: "http://127.0.0.1:8520/v/use", params: { msg: "this.msg" } }); } }

后端数据支持

package hc.cloud.controller; import lombok.extern.slf4j.Slf4j; import org.springframework.web.bind.annotation.*; import java.util.Map; /** * Created by Administrator on 2019/5/22 0022. */ @Slf4j @RestController @RequestMapping("use") public class goIp { @GetMapping public Map<String, String> user(@RequestParam Map<String, String> map) { log.info(map.get("msg").toString()); map.put("data","Welcome to king cloud!"); return map; } }

 

 

改良：加入接收及报错的方法

methods: { go() { this.$http({ method: "get", url: "/v/use", params: { msg: "this.msg to you!" } }) .then(response => { this.msg = response.data.data; console.log(response); }) .catch(error => { console.log(error) }) } }

then： 接收后端返回数据

response.data：即后端返回数据

response.data.data：返回数据的data属性

 

为了提高复用性，即多个地方使用同一个接口

api接口

import axios from 'axios' export function send(i) { return axios({ method: "delete", url: "/v/use", params: { msg: i } }) }

页面 

import { send } from "../api/use.js"; go() { this.msg = "this.msg to you!"; send(this.msg) .then(response => { this.msg = response.data.data; console.log(response); }) .catch(error => { console.log(error); }); },