基于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

第六点，复制着来就行

巴特西

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

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

前端

解决跨域

最新文章

热门文章