一、引入vue文件，引入axios文件

{# 引入vue，开发版#}

{# 引入axios #}

二、创建vue实例

1、axios发送ajax请求的步骤

1.1 get请求：axios.get(url).then(请求成功的回调函数).catch(请求失败的回调函数)

注意：① url--->就是ajax请求需要指向的url

② 回调函数建议使用箭头函数，最大的优点是：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

转载：https://www.cnblogs.com/yjw1/p/10079715.html

③ 其实后面还可以再加个finally(),即不管请求成功与否，都要执行的回调函数

1.2 post请求：axios.post(url,{post请求的参数}).then(请求成功的回调函数).catch(请求失败的回调函数

var vm = newVue({

el:'#app',

delimiters: ["[[","]]"],

data: {

message:'luyizhou',

username:'',

password:'',

homeland:'',

addr:'',

},

methods: {

login:function() {

url= 'http://127.0.0.1:8000/getdata/?username=luyizhou&password=123';

axios.get(url).then((response)=>{

console.log(response);this.username =response.data.info.username;this.password =response.data.info.password;

}).catch((error)=>{

console.log(error);

})

},

login2:function() {

url= 'http://127.0.0.1:8000/getdata/';

axios.post(url,{

homeland:'wuhu',

addr:'vankpark'}).then((response)=>{

console.log(response);this.homeland =response.data.info.homeland;this.addr =response.data.info.addr;

}).catch((error)=>{

console.log(error)

})

}

}

})

二、整个请求流程详解

1、初始页面触发事件

登录

2、调用绑定的函数，此例子中即为vue实例中定义的login方法

login: function () {

url = 'http://127.0.0.1:8000/getdata/?username=luyizhou&password=123';

axios.get(url).then((response)=>{

console.log(response);

this.username = response.data.info.username;

this.password = response.data.info.password;

}).catch((error)=>{

console.log(error);

})

}

3、此函数执行，通过axios发送ajax请求，请求的地址即为上述url

请求的目的即获取响应数据，填充当前的html页面，实现局部刷新的效果。

4、访问此url，触发路由，调用对应的视图函数

urlpatterns =[

path('login/',LoginView.as_view(),name='book'),

path('getdata/',GetDataView.as_view()),

]

5、视图函数组织响应数据，返回response

实际开发过程中，数据应该是从数据库中拉出来，组织后返回response，后台返回前端的数据，一般使用json格式

classGetDataView(View):defget(self,request):

data=request.GET

username= data.get('username')

password= data.get('password')return JsonResponse({'info':{'username':username,'password':password}})defpost(self,request):

data=json.loads(request.body.decode())

homeland= data.get('homeland')

addr= data.get('addr')return JsonResponse({'info':{'homeland':homeland,'addr':addr}})

6、axios中对response中的响应数据，双向绑定到vue实例的data数据中

axios.get(url).then((response)=>{

console.log(response);this.username =response.data.info.username;this.password =response.data.info.password;

}).catch((error)=>{

console.log(error);

})

data: {

message:'luyizhou',

username:'',

password:'',

homeland:'',

addr:'',

}

7、vue实例中的data变量绑定到html页面上

[[ username ]]

---

[[ password ]]