🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：个人记账分析系统 ，专门记录制作过程，每天进步一点点~

想看往期历史文章，可以浏览此博文： 历史文章目录，后续所有文章发布都会同步更新此博文~

前后端分离——实现登录注册功能

• 后端部分
• • 登录视图
  • 注册视图
  • 图形验证码视图
  • 邮件验证码视图
  • 服务器时间视图
  • 路由部分
• 前端部分
• • 定义的路由
  • 文件 App.vue
  • 文件 Home.vue
  • 文件 Login.vue
  • 文件 Register.vue
  • 效果
• 总结

后端部分

下文出现的 payment 是我创建的 app ，使用 django-admin startapp payment 创建，此项目设计为前后端完全分离，通过 {'code': 0, 'msg': 'str', 'data': object} 传递信息，data 可以省略。

登录视图

文件 payment\views.py 。

def login_(request):if request.method == 'POST':username = loads(request.body)['username']password = loads(request.body)['password']user = User.objects.filter(username=username) or User.objects.filter(email=username)if user:user = authenticate(username=user[0].username, password=password)if user:if user.is_active:login(request, user)Setting.objects.create(last_ip=request.META['REMOTE_ADDR'], owner=user)request.session['uname'] = user.usernamerequest.session['admin'] = user.is_superuserresponse = JsonResponse({'code': 0, 'msg': '登录成功！'})response.set_cookie('uname', user.username)return responsereturn JsonResponse({'code': -1, 'msg': '用户状态不可用！'})return JsonResponse({'code': -2, 'msg': '用户名密码错误！'})return JsonResponse({'code': -3, 'msg': '用户名不存在！'})return JsonResponse({'code': 1, 'msg': '请求方法只能是POST方法！'})

注册视图

文件 payment\views.py 。

def register(request):if request.method == 'POST':username = loads(request.body)['username']password = loads(request.body)['password']email = loads(request.body)['email']yzm = loads(request.body)['yzm']if User.objects.filter(username=username):return JsonResponse({'code': -1, 'msg': '用户名已存在！'})if request.session.get('email') != email or request.session.get('yzm') != yzm:return JsonResponse({'code': -2, 'msg': '邮箱验证码错误！'})user = User.objects.create_user(username=username, password=password, email=email)if user.username:return JsonResponse({'code': 0, 'msg': '注册成功！'})return JsonResponse({'code': -3, 'msg': '注册失败！请重新尝试注册！'})return JsonResponse({'code': 1, 'msg': '请求方法只能是POST方法！'})

图形验证码视图

文件 PersonalAccountWeb\views.py 。
图形验证码就由前端校验，简单通过 base64 加密验证码字符串。

def verification_code(request):image = ImageCaptcha()# 获得随机生成的验证码captcha = ''.join(sample(list('abcdefghijklmnopqrstuvwxyz'), 4))print("生成的验证码为：", captcha)response = HttpResponse(image.generate(captcha), content_type='image/png')# response['Access-Control-Allow-Origin'] = '*'# response['Access-Control-Allow-Credentials'] = 'true'response.set_cookie('yzm', b64encode(captcha.encode()).decode(), max_age=60 * 5)return response

邮件验证码视图

文件 PersonalAccountWeb\views.py 。
邮件验证码就由后端校验，通过 session 保存，后续会用作异地登录验证（现在还没设计）。

def send_email_(to_address, header, html):smtp_server = settings.EMAIL_HOSTmsg = MIMEText(html, 'html', 'utf-8')msg['From'] = Header(settings.EMAIL_HOST_USER)msg['To'] = Header(to_address)msg['Subject'] = Header(header)server = smtplib.SMTP_SSL(smtp_server)server.connect(smtp_server, settings.EMAIL_PORT)server.login(settings.EMAIL_HOST_USER, settings.EMAIL_HOST_PASSWORD)  # python_gjjserver.sendmail(settings.EMAIL_HOST_USER, to_address, msg.as_string())server.quit()def send_email(request):if request.method == 'POST':to_address = loads(request.body)['email']if User.objects.filter(email=to_address):response = JsonResponse({'code': -1, 'msg': '邮箱已被注册！'})else:captcha = ''.join(sample(list('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'), 6))print("生成的邮件验证码为：", captcha)send_email_(to_address=to_address, header='邮箱验证码', html=f"""
【个人记账分析系统】
您好，您正在注册我们的网站：settings.CSRF_TRUSTED_ORIGINS[0]}">个人记账分析系统
您本次注册的验证码是：{captcha}
如果您没有注册，请忽略并删除本邮件！
感谢您对本系统的信赖！
""")request.session['yzm'] = captcharequest.session['email'] = to_addressresponse = JsonResponse({'code': 0, 'msg': '邮箱验证码发送成功！请注意查收！'})else:response = JsonResponse({'code': 1, 'msg': '请求方法只能是POST方法！'})response.set_cookie('last', str(time()), max_age=60)return response

服务器时间视图

文件 PersonalAccountWeb\api.py 。
安装了 ninja 都没用过，只能在这里用了。

from time import time
from ninja import NinjaAPIapi = NinjaAPI()@api.get('/server_timestamp')
def hello(request):return time()

路由部分

文件 PersonalAccountWeb\urls.py 。

from django.contrib import admin
from django.urls import path, include
from .api import api
from .views import verification_code, send_emailurlpatterns = [path('admin/', admin.site.urls),path('api/', api.urls),path('yzm/', verification_code),path('email/', send_email),path('', include('payment.urls'))
]

文件 payment\urls.py 。

from django.urls import path
from .views import info, login_, logout_, register, check_onlineurlpatterns = [path('info/', info),path('login/', login_),path('logout/',logout_),path('register/', register),path('check_online/', check_online)
]

前端部分

登录注册的UI参考了一个前端登录模板，略做修改就用在了我的项目上，前端登录模板 （点击即可跳转到下载页面）。

定义的路由

暂时这么多，后续可能会添加。

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import C from './export_components.js'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: '跳转至首页',redirect: '/Home',},{path: '/Home',name: '首页',component: C.Home,children: [{path: 'Login',name: '登录',component: C.Login},{path: 'Register',name: '注册',component: C.Register}]},{path: '/Backstage',name: '后台',component: C.Backstage,children: [{path: 'Settings',name: '设置',component: C.Settings},{path: 'DataEntry',name: '数据录入',component: C.DataEntry},{path: 'DataShow',name: '数据展示',component: C.DataShow,children: [{path: ':username',name: '用户展示',component: C.DataShow}]},{path: 'InStationMail',name: '站内邮件',component: C.InStationMail}]},{path: '/:pathMatch(.*)*',name: '404',// redirect: '/404',component: C.NotFound},// {// 	path: '/404',// 	name: '404',// 	component: NotFound// }]
})createApp(App).use(router).mount('#app')

文件 App.vue

文件 Home.vue

主要保留了登录注册页的背景。

文件 Login.vue

文件 Register.vue

效果

总结

是不是看着登录注册界面简洁耐看呢~