Django—用户注册登录功能实现

1.django 的app文件介绍

（1）app各文件介绍

一个刚建好的app文件大概都是这是这样的，如果缺少文件的话，自己加上去就好了

（2）各文件功能介绍

baseinfo

       migrations            #数据库迁移产生的文件，后面会详细介绍

       _init_.py         #数据迁移的起始文件，迁移成功之后还会产生其它文件，等下演示

       _init_.py         #app的起始文件，基本不需修改

       admin.py       #基本不用改

       apps.py         #基本不用改

       models.py      #模型文件，数据库建表代码写在这里

       tests.py          #测试文件，基本不用动

       urls.py           #路由文件，分配接口

       views.py        #views.py里面是具体的逻辑函数

2.django原理介绍

（1）简单介绍

django采用MTV模式：视图层是模板和模型的“桥梁”。

模型层（model）

对于web应用中的数据进行构建和操作。

视图层（view）

封装处理用户的请求与返回的响应逻辑。

模板层（template）

提供设计友好的语法来展示信息给用户。

（2）具体数据流动如下图：

3.注册功能后台编写

（1）建立数据库user表单

在baseinfo中的models.py中建立User模型，并将数据表单命名为user_info

from django.db import models

# 定义用户模型类 User


class User(models.Model):
    rank_list = (
        (0, '普通会员'),
        (1, '白银会员'),
        (2, '黄金会员'),
        (3, '钻石会员')
    )
    id = models.IntegerField(primary_key=True)
    name = models.CharField(
        max_length=20, verbose_name='姓名', null=False, default="")
    tel = models.CharField(
        max_length=11, verbose_name='联系电话', null=False, default="")
    address = models.CharField(
        max_length=60, verbose_name='联系地址', blank=False, default="")
    password = models.CharField(
        max_length=60, verbose_name='密码', blank=False, default="")
    grade = models.IntegerField(default=0)
    rank = models.SmallIntegerField(default=0, choices=rank_list)

    class Meta:
        db_table = 'user_info'  # 指明数据库表名
        verbose_name = '用户信息'  # 在admin站点中显示的名称

然后迁移数据库

在terminal里面输入python manage.py makemigrations

然后输入python manage.py migrate

控制台截图

然后可以发现migration多了一个0001_initial.py

内容如下图

数据库多了一个user_info

表结构如下：

（2）新建url

修改express的urls.py

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    # path('admin/', admin.site.urls),

    path('baseinfo/', include('baseinfo.urls'))   # 添加
]

（3）在baseinfo的views.py中添加add函数

from django.shortcuts import render

# Create your views here.
import json  # 添加
from django.http import JsonResponse  # 添加
from django.views.decorators.csrf import csrf_exempt  # 解决前端post请求 csrf问题
from baseinfo.models import User


@csrf_exempt
def add(request):
    # 判断发送请求方法是否是POST方法
    if request.method == "POST":
        # 获取发送内容
        id = '1'
        data = json.loads(request.body)
        print(data, 'data')
        name = data.get('name')
        password = data.get('pwd')
        tel = data.get('tel')
        address = data.get('address')
        print(name, type(tel))
        # 进行数据库操作
        # 从models文件中获取User对象
        user = User()
        # 给对象赋值
        user.tel = tel
        user.name = name
        user.id = id
        user.password = password
        user.address = address
        # 插入数据
        user.save()
        return JsonResponse({'code': '200'})

（4）在baseinfo中的urls.py添加url

from django.urls import path

from . import views

urlpatterns = [
    path('add/', views.add, name='add'),
]

这样的话，后台基本就配置好了，

不过如果前端编辑时依旧使用npm run dev ，这时请求Django接口可能会出现跨域问题

（5）解决跨域问题

①安装django-cors-headers

pip install django-cors-headers

②修改express的settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 添加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True   # 添加

4.注册功能前端编写

（1）vue项目各文件介绍

这个是别人写的，我感觉很好，就直接拿过来用了，需要修改一点的是src下的components文件夹我们是绝对不能删除的，我们的系统功能比较复杂，所有功能都写在App.vue里面的话，会搞死人的

（2）vue文件各部分作用介绍(以App.vue为例)

vue可以分为三个部分

第一个是<template></template>，这个里面主要写html标签，负责展示页面有哪些内容

第二个是<script></script>，里面主要是js语句，负责页面逻辑功能的实现

第三个是<style></style>，里面主要是css样式，负责页面样式展示

这里面的东西很多很杂，我一下也没办法全部讲清楚，具体用的时候，还请多多百度，或者在群里问。

（3）注册页面编写

注册页面要实现的功能：a.获取用户输入的信息，b.把信息发送给后台

①引入vue.js

我在新建rigister.vue文件的时候，发现没有.vue文件选项，所以引入了vue.js，如果可以直接新建的话，请跳过这步

安装之后可以发现App.vue变成这个样子了

②在components文件夹新建rigister.vue

③获取输入框值的代码编写

获取输入框的方法有很多种，这里只介绍一种，想详细了解的，可以看这个链接https://blog.csdn.net/qq_39043923/article/details/88688420

<template>
  <div>
    <input class="login-input" type="text"v-model="username" placeholder="请输入账号">
    <input class="login-input" type="password"v-model="password" placeholder="请输入密码">
    <input class="login-input" type="text"v-model="tel" placeholder="请输入电话">
    <input class="login-input" type="text"v-model="address" placeholder="请输入地址">
    <div class="login-button" @click="register" type="submit">注册</div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      username: '',
      password: '',
      tel: '',
      address: ''
    }
  },
  methods: {
    register(){
      console.log(this.username)
      console.log(this.password)
      console.log(this.tel)
      console.log(this.address)
    }
  }
}
</script>

<style scoped>

</style>

④修改路由

目前只是写好了前端页面，还没有修改router文件，页面无法显示出来

修改router中的index.js文件，

将刚才页面的路径定义为/register

import Vue from 'vue'
import Router from 'vue-router'
import Register from '../components/register' //添加
Vue.use(Router)

export default new Router({
  routes: [
    //添加
    {
      path: '/register',
      name: 'register',
      component: Register
    },
  ]
})

修改App.vue文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
//添加
export default {
  name: 'Register'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

⑤关闭关闭Eslint

在新建vue项目不小心开了Eslint，导致代码书写格式经常报错，在这里把Eslint关闭

在你的项目中找到build----->webpack.base.conf.js文件

找到如下代码块，注释就OK了

⑥运行项目

在frontend路径下输入

npm run  dev

因为我们刚才写的页面的地址是register，所以在网址后面输入http://localhost:8080/#/register

看到结果是这样的

按F12打开控制台

输入内容，点击注册后可以看到获取到内容了

（4）发送数据给后台

①安装axios

输入

npm install axios

②重写register函数

之前的register函数只能输出输入框的内容，不能发送请求，这里采用post请求方式发送。

在这里解释一下这条url的访问过程http://127.0.0.1:8000/baseinfo/add/

http://127.0.0.1:8000/这一部分是你后台项目运行的地址，根据这一部分前端会发请求到后台，然后会从express的urls.py文件找出“baseinfo/”对应app的urls.py文件，在这里也就baseinfo/urls.py,然后根据add/找到对应的view里面的函数，在这里就是就是add函数，进行数据操作。

<script>
import axios from 'axios'//添加
export default {
  name: "register",
  data() {
    return {
      username: '',
      password: '',
      tel: '',
      address: ''
    }
  },
  methods: {
    register() {
      let url = 'http://127.0.0.1:8000/baseinfo/add/';
      console.log(typeof (this.password),typeof (this.username),typeof (this.tel))
      axios.post(url, {
        "name": this.username,
        "pwd": this.password,
        "tel": this.tel,
        "address": this.address
      }).then(response => {
        console.log(response.data)
        if (response.data.code === '200') {
          console.log('it is ok')
          this.message = response.data.info.username;
        } else if (response.data.code === '400') {
          this.message = response.data.msg;
        }
      }).catch(error => {
        console.log(error)
      })
      // console.log(this.username)
      // console.log(this.password)
      // console.log(this.tel)
      // console.log(this.address)
    }
  }
}
</script>

③查看结果

分别运行前端后台项目后，在浏览器里输入http://localhost:8080/#/register

然后输入信息，点击注册

可以看到前端返回成功