准备工程
创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文件
准备html和html显示
在模板文件中创建一个axios.html,内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{ message }}</span> <br>
<a href="javascript:;">登录</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: \'#app\',
delimiters:["[[","]]"],
data: {
message: \'Hello Vue!\',
},
})
</script>
</html>
创建视图并加载模板的html
#url设置
from django.conf.urls import url
from users.views import ShowLoginView
urlpatterns = [
url(r\'^show/$\',ShowLoginView.as_view()),
]
#视图
class ShowLoginView(View):
def get(self,request):
return render(request,\'axios.html\')
导入axios,并发送GET/POST请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<span>{{ message }}</span> <br>
<span>[[ message ]]</span> <br>
<a @click="login" href="javascript:;">登录-GET</a> <br>
<a @click="login2" href="javascript:;">登录-GET2</a> <br>
<a @click="login3" href="javascript:;">登录-POST</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: \'#app\',
delimiters:["[[","]]"],
data: {
message: \'Hello Vue!\',
},
methods:{
login:function(){
let url = \'http://127.0.0.1:8000/login/?username=admin&password=123\';
axios.get(url).then(response=>{
if(response.data.code == \'200\'){
this.message=response.data.info.username;
}else if (response.data.code == \'400\') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
},
login2:function(){
let url = \'http://127.0.0.1:8000/login/\';
axios.get(url,{
params:{
"username":"admin",
"password":"123"
}
}).then(response=>{
if(response.data.code == \'200\'){
this.message=response.data.info.username;
}else if (response.data.code == \'400\') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
},
login3:function(){
let url = \'http://127.0.0.1:8000/login/\';
axios.post(url,{
"username":"admin",
"password":"123"
}).then(response=>{
if(response.data.code == \'200\'){
this.message=response.data.info.username;
}else if (response.data.code == \'400\') {
this.message=response.data.msg;
}
}).catch(error=>{
console.log(error)
})
}
}
})
</script>
</html>
1.因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符
delimiters:["[[","]]"]2.箭头函数解决这个指向的问题
后台代码
#定义路由
from django.conf.urls import url
from users.views import ShowLoginView, LoginView
urlpatterns = [
url(r\'^show/$\',ShowLoginView.as_view()),
url(r\'^login/$\',LoginView.as_view()),
]
#定义视图
class LoginView(View):
def get(self, request):
#获取参数
username = request.GET.get(\'username\')
password = request.GET.get(\'password\')
#验证参数并返回相应
if username == \'admin\' and password == \'123\':
return JsonResponse({\'code\': 200, \'msg\':\'ok\',\'info\': {\'username\': username, \'user_id\': \'666\'}})
else:
return JsonResponse({\'code\': 400,\'msg\':\'账号或密码错误\'})
def post(self, request):
# 获取参数
data = json.loads(request.body.decode())
username = data.get(\'username\')
password = data.get(\'password\')
# 验证参数并返回相应
if username == \'admin\' and password == \'123\':
return JsonResponse({\'code\': 200, \'msg\':\'ok\',\'info\': {\'username\': username, \'user_id\': \'666\'}})
else:
return JsonResponse({\'code\': 400,\'msg\':\'账号或密码错误\'})