基于Vue项目+django写一个登录的页面

基于Vue项目+django写一个登录的页面

前端

借用了一下vue项目模板的AboutView.vue 页面组件
<template>
  <div class="about">
    <h1>登录功能</h1>

    <p>输入用户名<input type="text" v-model="username"></p>
    <p>输入密码<input type="text" v-model="password"></p>
    <button @click="handleClick">登录</button>
  </div>
</template>


<script>
import axios from 'axios'
export default {
  name:'AboutView',
  data(){
    return{username:'',password:''}
  },
  methods:{
    handleClick(){
      console.log(this.username,this.password)
      axios.post('http://127.0.0.1:8000/login/',{username:this.username,password:this.password})
          .then(res=>{alert(res.data.msg)})
    }
  },
  components:{

  }


}

</script>

django后端

路由层就不说了，记得/的匹配问题，前端写了/就一定要/
视图层
import json

from django.shortcuts import render
from django.http import JsonResponse




def loginfunc(request):
    if request.method == 'POST':
        request.data = json.loads(request.body)
        username = request.data.get('username')
        password = request.data.get('password')
        if username == 'jack' and password == '123':

            return JsonResponse({'msg': '登录成功'})
        else:

            return JsonResponse({'msg': '登录失败'})
    return JsonResponse({'msg': '登录失败'})

解决跨域

https://www.cnblogs.com/liuqingzheng/articles/17132395.html
    
第六点，复制着来就行