前提 : 一个基本的Vue模板
在main.js添加以下代码:
... import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios); axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 接口ip:端口号 ...vue代码:
<template> <div> <div @click="btnClick()">点击</div> <div @click="btnClick2()">POST点击</div> </div> </template> <script> export default { name: 'HelloWorld', data () { return {} }, methods:{ btnClick:function(){ this.axios.get('/api/user/list-user/').then((response)=>{ console.log(response.data) }).catch((error)=>{ console.log(error) }) }, btnClick2:function(){ this.axios.post( '/api/user/create-user/', { "username" : "cox2", "password" : "cox123456", } ).then((response)=>{ console.log(response.data) }).catch((error)=>{ console.log(error.response.status) }) }, }, } </script>后端接口:
使用:
axios简单使用结束 !!!
为了更方便的管理前端项目代码请求后端的接口,需要将所有的后端api封装到一个文件中,具体操作如下:
在src下新建utils目录,在该目录下新建axios.js文件,文件内容如下:
import axios from 'axios' // 导入node_modules里的axios import qs from 'qs' axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口 ip:port axios.interceptors.request.use((request) => { //在发送请求之前做某件事 console.log("axios"); if(request.method === 'post'){ request.data = qs.stringify(request.data); } return request; },(error) =>{ console.log('错误的传参'); return Promise.reject(error); }); export default axios // 导出axios在src下新建api目录,在该目录下新建index.js和api.js文件,文件内容如下: index.js
import api_all from './api' export default { api_all }api.js
import axios from '@/utils/axios' const api_all = { // 获取所有用户列表 get_test_list() { return axios({ url: '/api/test/list/', method: 'GET', }) }, create_test(dog) { return axios({ url: '/api/test/create/', method: 'POST', data: { dog: dog }, }) }, }; export default api_all修改main.js
... import axios from "./api/"; Vue.prototype.$api = axios; // import axios from 'axios' // import VueAxios from 'vue-axios' // Vue.use(VueAxios,axios); // axios.defaults.baseURL = "http://127.0.0.1:8000/"; ...在vue代码使用如下:
<template> <div> <div @click="btnClick()">点击</div> <div @click="btnClick2()">POST点击</div> <div @click="btnClick3()">GET点击</div> <div @click="btnClick4()">POST点击</div> </div> </template> <script> export default { name: 'HelloWorld', data () { return {} }, methods:{ // btnClick:function(){ // this.axios.get('/api/user/list-user/').then((response)=>{ // console.log(response.data) // }).catch((error)=>{ // console.log(error) // }) // }, // btnClick2:function(){ // this.axios.post( // '/api/user/create-user/', // { // "username" : "cox2", // "password" : "cox123456", // } // ).then((response)=>{ // console.log(response.data) // }).catch((error)=>{ // console.log(error.response.status) // }) // }, btnClick3:function(){ this.$api.api_all.get_test_list().then((response)=>{ console.log(response.data) }).catch((error)=>{ console.log(error.response.status) }) }, btnClick4:function(){ this.$api.api_all.create_test( "小肥柴" ).then((response)=>{ console.log(response.data) }).catch((error)=>{ console.log(error.response.status) }) }, }, } </script>后端接口:
使用:
将所有后端api接口放到一个文件夹中,方便管理
