vue2-django 实现登录注册

sunny candy

已于 2023-04-27 19:34:55 修改

阅读量4.0k

点赞数 27

文章标签： vue.js 前端 javascript

于 2023-01-28 22:19:41 首次发布

本文链接：https://blog.csdn.net/m0_72582234/article/details/128780008

版权

前端vue：

后端django处理请求

前端vue：

cd到目标文件夹，输入：vue init webpack 文件名

前四个一路回车，后几个选no

接着cd到建好的文件夹，执行npm install ，然后就可以npm run dev 查看初始页面了

接下来我们通过vue组件来搭建一个前端页面

首先把默认样式清除，删除helloword.vue后将app.vue清除成如下内容。

然后在components文件夹中新建vue文件，写入我们需要的内容

我构建了三个文件，分别用来登录、注册、登录成功后显示

我们要做的是注册与登录功能，那么我们需要账号与密码

我们先做注册功能，也就是进入signup.vue中

因此我们在data里构建一个对象loginForm存储输入的账号与密码

data(){
            return{
                loginForm:{
                username:'',
                password:''  
            }
            }  
        },

data写在<script>中，如

而后构建一个form表单，输入框绑定username与password

<template>
    <div id="sign">
        <div style="text-align: center; font-family: 华文琥珀; font-size: larger;">
        <div>欢迎注册</div>
        <div>请输入您的信息</div>
        </div>
        <div style="height: 50px;"></div>
        <div>
      <form v-bind:model="loginForm">
        <input v-model="loginForm.username" type="text" placeholder="请输入用户名"/>
        <input v-model="loginForm.password" type="password" placeholder="请输入密码"/>
    </form>
    <button v-on:click="summiti()">注册</button>
    </div>
    </div>
</template>

写好之后，我们要怎么查看写出来的页面是什么样子呢？

这需要用到vue-router

在项目的根目录的终端执行npm install --legacy-peer-deps vue-router@3.5.2

然后在如图位置新建一个routers文件夹，其中新建一个index.js文件

其中写入

然后在main.js中引入

最后在app.vue中如图位置加一句<router-view/>

我们就可以在终端中输入npm run dev，在浏览器中输入指定地址，就可以看到页面了(ctrl+c 停止服务器)

这篇文章主要讲解登录与注册的实现，美观度可以自己调节

前端的最后一步就是对用户名和密码的提交了，我们需要用到axios对请求进行处理

首先安装：npm install axios

然后在main.js中引入

import axios from 'axios'

axios.defaults.withCredentials = true// 请求携带cookie
axios.defaults.headers.post['X-CSRFToken']='';//设置请求头的跨域密匙

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.transformRequest = [function (data) {  //将发送的post参数封装成FROM-DATA，使后端接收
  let ret = ''
  for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }];

Vue.prototype.$axios = axios

插入到如图位置

接下来就在signup.vue中编写提交函数

methods:{
            summiti(){
                this.$axios
              .post(
                '/regester/', //后端执行注册的url
                {'user':this.loginForm.username, //用户名
                'password':this.loginForm.password, //密码
            }
              ).then((res)=>{
                alert("注册成功")
                this.$router.push({  //前往登录界面
                    path: './',
                    });
              }).catch((err)=>{
                alert("注册失败，请更换用户名")
              })
            }
        }

写在如图位置

后端django处理请求

首先，下载django ：pip3 install django

然后，cd到一个心仪的文件夹，创建django项目：django-admin startproject djan (djan是项目名称，可以换成一个心仪的名字)

系统就为我们创建了一个框架

接着，cd到第一个djan文件夹，创建APP ： python manage.py startapp eapp（eapp是app名称），然后可以看到系统又为我们创建了一个文件夹

我们可以开始写后端程序了

为了保存注册了的用户，我们需要连接数据库

我们首先需要引入app，不然数据库不知道为什么样的对象建表

在setting.py的INSTALLED_APPS中引入app

然后在setting的DATABASES中配置数据库

之后进入eapp的models.py文件，写入

class User(models.Model):
    object = models.Manager()
    name = models.CharField(max_length=15, unique=True)
    password = models.CharField(max_length=20)

name为用户名，password为密码，系统构造的数据库的结构将依赖这个User对象

在django项目的根目录下输入命令python manage.py makemigrations

这会在eapp目录中的migrations目录中生成一个0001_initial.py迁移记录文件

然后还是根目录中输入python manage.py migrate

系统将为我们建表（下图是通过navicat查看建好的表）

数据库连接完成

进入eapp中的view.py文件夹，我们接下来构建响应路径，将内容改为

from django.shortcuts import render
from eapp.models import User
from django.http import JsonResponse
# Create your views here.

def regester(request):
    user = request.POST.get("user")
    password = request.POST.get("password")
    userinfo = User(name=user,password=password)
    userinfo.save() #保存至数据库
    return JsonResponse({'codestatus':1},safe=False)

若在import处报错，则使用pycharm右键根目录，如图调整为源代码根目录

再将view导入url,进入url.py中

那么注册路径就写好了。

到目前，我们为注册的执行部署了接口，但对注册的网页还没部署接口

因此我们接下来对网页的显示进行部署，但一个网站最开始一般是登录而不是注册，因此我打算以登录界面为基页面

先写好登录页面的vue文件

<template>
    <div id="login">
    <div style="text-align: center; font-size: larger;">
        <div>欢迎光临</div>
        <div>请输入您的账户</div>
    </div>
    <div>
      <form action="/index/" method="post">
        <input v-model="loginfo.username" type="text" placeholder="请输入用户名">
        <input v-model="loginfo.password" type="password" placeholder="请输入密码">
    </form>
        <input v-on:click="login()" value="登录" />
        <div style="height: 5px;"></div>
        <div>
          <div style="height: 9px;"></div>
          <a href="/#/signup" style="color:black ;text-decoration:none">注册</a>
        </div>
    </div>
</div>
</template>

<script>

export default {
    name:'login',
    data(){
            return {loginfo:{
                'username':'',
                'password':''
            }}
        },
        methods:{
            login(){
                this.$axios
              .post(
                '/loginn/',//向loginn发送请求，验证密码是否正确
                {'user':this.loginfo.username,
                'password':this.loginfo.password,
            }
              ).then(res=>{
                if(res.data.loginstatus==1) //loginstatus为后端返回的数据，
                {   
                    this.$router.push({ //页面跳转到登录成功界面
                        path: '/welcome',
                        params:{'username':this.loginfo.username}
                        });}
                else{
                    alert('账号或密码错误')
                }
              })
            }
        }
    
}
</script>

<style>

</style>

部署route

npm run dev查看

点击注册跳转到signup页面运行成功

在vue根目录终端输入npm run build,可以观察到多了一个dist文件夹

接下来来到django根目录，将整个vue项目的文件夹放入django根目录下

目录排列如图

然后进入setting.py中首先

import os.path

然后更改其TEMPLATES

而后在末尾更改（若不存在则引入）

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'myvue/dist/static')
]

如

进入urls.py,添加这两句，引入dist文件中的index.html，并将其设置为首页

到这一步可以调试注册功能了，但顺便先把登录功能实现

在urls.py中添加一登陆路径，每一个路径都必须与前端发送请求的url对应

path('loginn/',views.loginn),

然后进入views.py中实现登录功能

from eapp import models

然后

def loginn(request):
        username = request.POST.get('user')
        password = request.POST.get('password')
        if username and password:
            try:
                user = models.User.object.get(name=username)
            except:
                return JsonResponse({'loginstatus':2},safe=False) #未注册返回2
            if user.password == password:
                return JsonResponse({'loginstatus':1},safe=False) #登录成功返回1
        return JsonResponse({'loginstatus':3},safe=False)   #密码错误返回3

就放在import的后面

一切就ok了

接下来我们调试，看看结果

django根目录输入 python manage.py runserver 127.0.0.1:8000

然后进入 http://127.0.0.1:8000/

成功进入页面

但当我们点击登录时，会发现浏览器报错，显示CSRF token missing

这是因为django会检测请求头cookies中的csrftoken与请求头的X-CSRFToken，若二者一致则通过请求，二者不同则拒绝请求，因此我们需要设置我们的请求头

（此方法并不好，新方法已在文尾更新）

进入浏览器的开发者模式，切换到network，再点击一下页面的登录，就会出现一个东西，我们查看一下他的Headers里的Request Headers，复制其cookie中csrftoken的值

再来到vue项目的main.js,将值填入X-CSRFToken后的双引号中

保存之后，重新再vue项目的根目录下执行npm run build，就完成了

回到浏览器页面，刷新

随便输入账号与密码，发现不会报错了，我们查看后端返回返回结果

正如所设置的，返回结果是2，没有错误，

点击注册来到注册页

页面显示注册成功，我们看看数据库是否有记录

确实有记录，接着回到登录页试试看登录

status为1并且如同login.vue中定义的函数，跳转到了welcom页面。

完成！

更新

在处理跨域问题时我们处理的比较草率，只是获取了自己的一个cookie，属于是面向调试编程，经过不断的搜索，我找到了一个更好的办法

思路是发送一个get请求从后端获取csrftoken的值，而后把这个值设置为请求头，以下为步骤

1.在django项目的urls中新增一条路径

path('getcsrf/',views.getcsrf),

2.在views文件中构建这条路径

from django.http import JsonResponse, HttpResponse
from django.middleware.csrf import get_token

def getcsrf(request):
     return JsonResponse({'csrftoken': get_token(request) or 'NOTPROVIDED'})
//get_token(request) 的返回值即为csrftoken

3.来到vue项目的main.js

//在import axios后添加
axios.defaults.withCredentials = true// 允许请求携带cookie

4.修改vue文件中的函数，以我的login.vue为例，将原来的axios请求套在一个向新地址提交的axios请求中

login(){
                this.$axios.get('/getcsrf/').then(res=>{
                var csrftoken=res.data.csrftoken
                this.$axios.post(
                '/loginn/', //向loginn发送请求，验证密码是否正确
                {'user':this.loginfo.username,
                'password':this.loginfo.password,
            },{
              headers:{
                'X-CSRFToken':csrftoken
              }
            }
              ).then(res=>{
                if(res.data.loginstatus==1) //loginstatus为后端返回的数据，
                {   
                    this.$router.push({ //页面跳转到登录成功界面
                        path: '/welcome',
                        params:{'username':this.loginfo.username}
                        });}
                else{
                    alert('账号或密码错误')
                }
              })})
            }

然后重新npm run build，就完成了。