刨析Django----综合练习(登录+注册+前后端分离)

laufing

已于 2024-04-07 21:45:30 修改

阅读量2.6k

点赞数

分类专栏： python web 后端框架文章标签： django redis nginx uwsgi docker

于 2022-03-03 22:19:26 首次发布

本文链接：https://blog.csdn.net/weixin_45228198/article/details/123265265

版权

python web 后端框架专栏收录该内容

62 篇文章 3 订阅

订阅专栏

本文详细指导如何创建Vue前端项目，并配置代理访问Django后端，同时介绍如何部署uwsgi和nginx进行反向代理，实现项目容器化。涵盖了从Vue CLI创建、路由设置、图形验证码到Django的跨域、API接口、用户认证，再到后端部署策略的全过程。

摘要由CSDN通过智能技术生成

创建Vue项目（前端）

创建一个vue前端项目，并配置请求代理，代理到django服务。

安装nodejs环境（js运行环境），安装vue-cli脚手架

# 下载并安装 node-v20.12.1-x64
node -v # 查看版本
npm -v  # 查看包管理器的版本 
npm config set registry https://registry.npm.taobao.org/ # 配置源
# npm config set registry https://registry.npmjs.org/ 官方源
npm install -g @vue/cli # 安装vue脚手架

在这里插入图片描述
报错问题：证书过期

删除家目录下的.vuerc重新安装vue-cli，若仍报错，则配置官方源，再次安装vue-cli 。

2. 创建vue项目

vue create front # front为前端框架名称

在这里插入图片描述

查看并运行项目：
cd front;
npm run serve

安装其他插件

cd front # 在项目目录下
# 网络请求
npm install --save axios
#路由
npm install vue-router@3
#集中式管理
npm install vuex@3
# ui  https://element.eleme.cn/#/zh-CN/component/installation
npm install --save element-ui  

# 在main.js入口文件中引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI)

配置代理，解决跨域问题
项目根目录下，创建vue.config.js

module.exports = {
    devServer: {
      proxy: {
        '^/api': { // 以/api开头的请求，代理到xxx
          target: 'http://localhost:8000', // 代理到后端服务器 url 拼接host
          changeOrigin: true, // 跨域
          pathRewrite: { // 路径重写
            '/api': ''  // 将/api 省去
          }
        }
      }
    }
  }

实现登录、注册功能（图形验证码）

<template>
  <div class="register">
    <!-- 注册页面内容 -->
    <h3 style="margin-bottom: 10px;">欢迎注册XXX</h3>
    <el-form 
      ref="form" 
      v-bind:model="form"
      label-width="0">
      <el-form-item>
        <el-input v-model="form.name" placeholder="用户名">
          <!-- 插槽方式 -->
          <template slot="prepend">
            <!-- i 表示图表 -->
            <i class="el-icon-user-solid"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <!-- 属性方式 -->
        <el-input v-model="form.password" placeholder="密码">
          <template slot="prepend">
            <!-- i 表示图表 -->
            <i class="el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.confirmPw" placeholder="确认密码">
          <template slot="prepend">
            <!-- i 表示图表 -->
            <i class="el-icon-lock"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <!-- 输入框 -->
        <el-input v-model="form.captcha" placeholder="输入验证码">
          <template slot="prepend">
            <i class="el-icon-picture"></i>
          </template>
          <template slot="append">
            <!-- 验证码  插入input的后面 -->
            <el-image
              class="captcha"
              alt="加载失败"
              :lazy="true"
              :src="captcha_url"
              fit="full"
              @click="load_captcha"></el-image>
          </template>
        </el-input>
        
        
      </el-form-item>
      <el-form-item>
        <el-button type="primary">注册</el-button>
        <a href="javascript:;" class="linkToLogin" @click="toLogin">已有账号？登录</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  // props: {
  //   msg: String
  // }
  data() {
    // 模板使用的数据
    return {
      form: {
        name: "",
        password: "",
      },
      captcha_url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" 
    };
  },

  methods: {
    // 所有的方法
    onSubmit() {
      console.log("submit!");
    },
    load_captcha(){
      console.log("加载验证码")
    },
    toLogin(){
      this.$router.push("/login")
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.register{
  margin: 0 auto;
  padding: 8% 15%;
  width: 40%;
  border: 1px solid rgba(233, 199, 181, 0.5);
  border-radius: 3%;
  background-image: url("../assets/register.webp");
  background-size: 100% 100%;
}
.captcha{
  margin-top: 4px;
  padding: 0;
  border: none;
  width: 100px;
  height: 30px;   
  line-height: 30px; 
}
.linkToLogin{
  margin-left: 3%;
  color: blue;
}
</style>

配置路由vue-router
- 创建router/index.js
- 在index.js中创建VueRouter对象及routes数组
- 在main.js入口文件导入VueRouter、router对象，router放入Vue配置对象中
- App.vue模板中加入router-view，用于展示组件
  配置路由参考
实现注册页面的接口
图形验证码:, 给一个url接口，让img标签或者el-image 通过src 自己加载验证码图片；

// 图形验证码
<el-image
   class="captcha"
   alt="加载失败"
   :lazy="true"
   :src="captcha_url"
   fit="full"
   @click="load_captcha"></el-image>

// 方法
load_captcha(){
     let uid = uuid4(); // 唯一区分
     this.captcha_url = "/api/users/captcha/" + uid + "/"
   }

用户名校验：

略

密码校验：

略

注意跨站伪造请求的攻击，csrf中间件，已经注释，但还会出现403 CSRF token fail;
注意发送post请求时，cookie中不能有csrf token，否则虽然注释，但仍会验证。

创建Django项目(后端)

创建一个Django项目back01，配置跨域、drf。

# 在python3环境中安装django2.2+
pip install django==2.2.2
pip install django-cors-headers # 跨域
pip install django-rest-framework # restful 接口
# 创建后端项目
$ django-admin startproject back01

使用pycharm打开项目，并配置

import pymysql
pymysql.install_as_MySQLdb()

# 禁用csrf中间件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# 配置关系数据库
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "HOST": "localhost",
        "PORT": 3306,
        "USER": "xxx",
        "PASSWORD": "xxx",
        "NAME": "db01",
        "CHARSET": "utf8"
    }
}

# 配置跨域  restful接口
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "corsheaders", # 跨域的应用
    "rest_framework" # restful接口应用
]

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_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
	"http://localhost:8080", # vue的地址
]

创建一个users应用，并定义User模型类(django.contrib.auth基于内建的用户认证类) ，迁移并注册到管理后台。

# 命令行  创建应用
python manage.py startapp users

settings.py 中安装应用


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "corsheaders", # 跨域的应用
    "rest_framework", # restful接口应用
    'users' # 安装应用
]

# 最后在配置用户的认证类
AUTH_USER_MODEL = "users.User" # 自定义的User

在users/models.py 编辑模型类

from django.db import models
from django.contrib.auth.models import AbstractUser


# Create your models here.
class User(AbstractUser):
    """ User """
    phone = models.CharField("手机号", max_length=11, unique=True, null=False)

    def __str__(self):
        return self.username

    class Meta:
        db_table = "user_t"
        verbose_name_plural = "用户" # 防止后台显示为复数

生成迁移文件，并执行迁移

# 命令行
python manage.py makemigrations
python manage.py migrate

# 迁移完成后，可以到数据库中查询，已经生成所有的表

django shell下测试模型类

python manage.py shell

>> from users.models import User
>> user = User(username="lauf", password="lauf123", phone="xxxxxxxx")
>> user.save()

将User模型类注册到管理后台

# users/admin.py
from django.contrib import admin
from .models import User
# Register your models here.


admin.site.register(User)

创建超级管理员账户：

python manage.py createsuperuser

# 访问 /admin 登录

配置users应用的路由，并编写对应的视图
在主应用下的urls.py 配置如下：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path("users/", include("users.urls"))
]

# 编辑 users/urls.py  ， 匹配 /users/captcha
from django.urls import path
from .views import CaptchaView


urlpatterns = [
	# 动态路由匹配
    path("captcha/<uuid:uid>", CaptchaView.as_view()),
]

在 users/views.py 下编写CaptchaView视图：

import random
import string
from captcha.image import ImageCaptcha
from django.views import View
from django.http import HttpResponse


# Create your views here.
class CaptchaView(View):
    """ CaptchaView """
    def get(self, request, uid):
        data = string.digits + string.ascii_letters
        # 随机选择四个字符
        captcha_content = "".join(random.choices(data, k=4))
        # 验证码对象
        captcha = ImageCaptcha()
        img = captcha.generate(captcha_content)
        print("img value:", img.getvalue())
        return HttpResponse(img.getvalue(), content_type="image/png")

启动服务，并查看验证码效果
在这里插入图片描述
此时可以到注册页面中，加载图形验证码。

注册时，需要邮箱激活，（耗时操作Celery）；登录时，使用jwt token 进行会话保持

# 用户注册时，就不能是激活的
is_staff = False  # 职员状态， 是否可以登录到admin管理后台
is_active = False # 是否活跃的用户，用于账号伪删除
is_superuser = False # 是否超级用户，具有最高权限

is_staff：职员状态，有效的职员才允许登录到管理后台；
is_staff & is_active 才可以登录到管理后台;
is_superuser超级用户可以管理所有
4. 请求主页时，通过token进行验证用户是否登录，使用中间件处理。

刨析Django----综合练习(登录+注册+前后端分离)

综合案例

创建Vue项目（前端）

创建Django项目(后端)

uwsgi项目部署

nginx的反向代理

容器化部署