-
【Python百日进阶-WEB开发】Day173 - Django案例：05用户注册业务逻辑
一、用户注册业务逻辑分析
“一个人了解的业务逻辑越多越细，他就是越好的需求分析师。”
1.1 什么是业务逻辑？
- 业务是指一个实体单元向另一个实体单元提供的服务。
- 逻辑是指根据已有的信息推出合理的结论的规律。
- 业务逻辑是指一个实体单元为了向另一个实体单元提供服务，应该具备的规则与流程。
1.2 软件层次
在软件系统架构中，软件一般分为三个层次：表示层、业务逻辑层和数据访问层：
- 表示层：负责界面和交互；
- 业务逻辑层：负责定义业务逻辑（规则、工作流、数据完整性等），接收来自表示层的数据请求，逻辑判断后，向数据访问层提交请求，并传递数据访问结果，业务逻辑层实际上是一个中间件，起着承上启下的重要作用；
- 数据访问层：负责数据读取。
1.3 业务逻辑
业务逻辑的内容包括四个部分：
- 领域实体：定义了业务中的对象，对象有属性和行为；
- 业务规则：定义了需要完成一个动作，必须满足的条件；
- 数据完整性：某些数据不可少；
- 工作流：定义了领域实体之间的交互关系。
1.4 注册前后端业务逻辑实现流程
二、用户注册接口设计和定义
2.1设计接口基本思路
- 对于接口的设计,我们要根据具体的业务逻辑,设计出适合业务逻辑的接口。
- 设计接口的思路:
① 分析要实现的业务逻辑:
- 明确在这个业务中涉及到几个相关子业务。
- 将每个子业务当做一个接口来设计。
② 分析接口的功能任务,明确接口的访问方式与返回数据: - 请求方法(如GET-查、POST-增、PUT-改、 DELETE-删 等)
- 请求地址。
- 请求参数(如路径参数、查询字符串、表单、JSON等)。
- 响应数据(如HTML、JSON等)
2.2 用户注册接口设计
2.3 用户注册接口定义
view.py
from django.shortcuts import render from django.views import View # Create your views here. class ResgisterView(View): """ 用户注册 """ def get(self, request): """ 用于提供数据--用户注册页面 """ return render(request, 'register.html') def post(self, request): """ 实现用户注册业务逻辑 """ pass- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
因为采用的面向对象的类试图模式，所以子路由和主路由不用做任何改动。
三、用户注册前端逻辑
目的：使用Vue.js的双向绑定实现用户交互和页面局部刷新的效果
3.1 用户注册页面绑定Vue数据
- 绑定用于接收用户输入数据的变量，v-model=“var_name”
- 绑定input的text和password输入框失去焦点事件, @blur=“check_varname”
- 绑定显示错误信息，v-show=“error_varname”
- 绑定input的checkbox复选框的状态改变事件, @change=“check_allow”
- 绑定表单form的提交事件，@submit=“on_submit”
- 绑定表单的遮罩事件，以便等待所有变量全部渲染完成一起显示给用户，避免用户看到前端页面源码，v-cloak。
- 为了避免css加载速度慢于js加载速度致使v-cloak失效的问题，可以把v-cload的css写在html的head中。
- css中[v-cloak]代表v-cload属性。
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商城-注册</title> <link rel="stylesheet" type='text/css' href="../static/css/reset.css"> <link rel="stylesheet" type='text/css' href="../static/css/main.css"> <style> [v-cloak] { display: none; } </style> </head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 绑定csrf隐藏域，以便通过后端服务器的csrf验证，{{ csrf_input }}
<body> <div id="app"> <div class="register_con"> <div class="l_con fl"> <a href="index.html" class="reg_logo"><img src="../static/images/logo.png" alt="">a> <div class="reg_slogan">人美货全div> <div class="reg_banner">div> div> div> <div class="r_con fr"> <div class="reg_title clearfix"> <h1>用户注册h1> <a href="login.html">登录a> div> <div class="reg_form clearfix"> <form method="post" class="register_form" @submit="on_submit" v-cloak> {{ csrf_input }} <ul> <li> <label for="">用户名：label> <input type="text" v-model="username" @blur="check_username" name="username" id="user_name"> { error_name_message }}用于显示不同类型的错误信息 --> <span class="error_tip" v-show="error_name">[[ error_name_message ]]span> li> <li> <label for="">密码：label> <input type="password" v-model="password" @blur="check_password" name="password" id="pwd"> <span class="error_tip" v-show="error_password">请输入8-20位密码span> li> <li> <label for="">确认密码：label> <input type="password" v-model="password2" @blur="check_password2" name="password2" id="pwd2"> <span class="error_tip" v-show="error_password2">两次输入的密码不一样span> li> <li> <label for="">手机号：label> <input type="text" v-model="mobile" @blur="check_mobile" name="mobile" id="phone"> <span class="error_tip" v-show="error_mobile">[[ error_mobile_message ]]span> li> <li> <label for="">图形验证码：label> <input type="text" name="image_code" id="msg_input"> <img src="../static/images/pic_code.jpg" alt="图形验证码" class="pic_code"> <span class="error_tip" >请填写图形验证码span> li> <li> <label for="">短信验证码label> <input type="text" name="sms_code" id="sms_code" class="msg_input"> <a href="javascript:;" class="get_msg_code">获取短信验证码a> <span class="error_tip" >请输入正确的手机短信验证码span> li> <li class="agreement"> <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow"> <label for="">同意“商城用户使用协议”label> <span class="error_tip" v-show="error_allow">请勾选用户协议span> li> ul> form> div> div> div> <script type="text/javascript" src="../static/js/register.js">script> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
3.2 用户注册JS文件实现用户交互
3.3 Vue绑定页面的套路
- 准备dv盒子标签
- HTML页面中绑定变量、事件、错误提示等
- 导入vue.js库和ajax请求的库
- 准备js文件
- js文件中实现用户交互和局部刷新
- 如果错误提示信息是固定的,可以把错误提示信息写死,再通过v-show控制是否展示
- 如果错误提示信息不是固定的,可以使用绑定的变量动态的展示错误提示信息,再通过vshow控制是否展示
var vm = new Vue({ // 创建Vue对象 // 通过id选择器找到绑定的HTML内容 el: '#app', delimiters: ['[[', ']]'], // 修改Vue读取变量的语法 data: { // 绑定数据 // v-model username: '', password: '', password2: '', mobile: '', allow: '', // v-show error_name: false, error_password: false, error_password2: false, error_mobile: false, error_allow: false, // error_message error_name_message: '', error_mobile_message: '', message: '', }, methods: { // 定义和实现事件方法 // 校验用户名 check_username: function() { // 用户名是5-20个字符，[a-z A-Z 0-9]，正则校验 let re = /^[a-zA-Z0-9_-]{5,20}$/; // 定义正则规则 if (re.test(this.username)){ // 正则匹配 this.error_name = false; // 成功，不显示错误 } else { // 失败，显示错误 this.error_name_message = '请输入5-20个字符的用户名'; this.error_name = true; } }, // 校验密码 check_password: function() { let re = /^[0-9a-zA-Z]{8,20}$/; if (re.test(this.password)) { this.error_password = false; } else { this.error_password = true; } }, // 校验确认密码 check_password2: function() { if (this.password != this.password2) { this.error_password2 = true; } else { this.error_password2 = false; } }, // 校验手机 check_mobile: function() { let re = /^1[3-9]\d{9}$/; if (re.test(this.mobile)) { this.error_mobile = false; } else { this.error_mobile_message = '您输入的手机号格式不正确'; this.error_mobile = true; } }, // 校验是否勾选协议 check_allow: function() { if (!this.allow) { this.error_allow = true; } else { this.error_allow = false; } }, // 监听表单提交事件 on_submit: function() { pass }, }, });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
-
相关阅读:
要么干要么滚！推特开始裁员了；深度学习产品应用·随书代码；可分离各种乐器音源的工具包；Transformer教程；前沿论文 | ShowMeAI资讯日报
logging的基本使用教程
java开发四年之旅
Knowledge Graph Prompting for Multi-Document Question Answering
学习记忆——方法篇——连锁拍照、情景故事和逻辑故事法
MyBatis系统学习（三）——动态SQL
后流量时代的跨境风口：Facebook广告
CPDA|优秀大数据分析师有哪些必备技能？
opencv入门四
Rnn Lstm Gru 的 h 和 s 究竟需要 默认 随机 连续
- 原文地址：https://blog.csdn.net/yuetaope/article/details/123003805