文章目录
一、用户注册业务逻辑分析
“一个人了解的业务逻辑越多越细，他就是越好的需求分析师。”
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
因为采用的面向对象的类试图模式，所以子路由和主路由不用做任何改动。
三、用户注册前端逻辑
目的：使用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>
- 绑定csrf隐藏域，以便通过后端服务器的csrf验证，{{ csrf_input }}
<body>
<!-- Vue需要控制整个页面，id="app" -->
<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">
<!-- 前端需要用submit事件监听用户是否提交表单。v-cloak限定页面等待所有变量渲染成功再一起展示给用户，避免用户看到前端页面源码 -->
<form method="post" class="register_form" @submit="on_submit" v-cloak>
<!-- csrf隐藏域，用于通过后端服务器的csrf验证 -->
{{ csrf_input }}
<ul>
<li>
<label for="">用户名：</label>
<!-- v-model用于接收用户数据 @blur用于定义鼠标失去焦点事件 -->
<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
<!-- v-show布尔型，用于显示用户名是否合法的判断结果,{{ 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">
<!-- 复选框checkbox没有blur事件，状态改变使用change事件 -->
<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>
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
},
},
});
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
