用户注册业务逻辑、接口设计和实现、前端逻辑

一、用户注册业务逻辑分析

二、用户注册接口设计和定义

2.1. 设计接口基本思路

  • 对于接口的设计,我们要根据具体的业务逻辑,设计出适合业务逻辑的接口。
  • 设计接口的思路:
    • 分析要实现的业务逻辑:
      • 明确在这个业务中涉及到几个相关子业务。
      • 将每个子业务当做一个接口来设计。
    • 分析接口的功能任务,明确接口的访问方式与返回数据:
      • 请求方法:如GET(前端向后端获取数据,查)、POST(隐私数据、注册,增)、PUT(修改数据,改)、DELETE(删除数据,删)等
      • 请求地址
      • 请求参数:如路径参数、查询字符串、表单、JSON等
      • 响应数据:如HTML、JSON等

2.2 用户注册接口设计

1.请求方式

选项方案
请求方法POST
请求地址/register/

2.请求参数:表单参数

参数名类型是否必传说明
usernamestring用户名
passwordstring密码
password2string确认密码
mobilestring手机号
sms_codestring短信验证码
allowstring是否同意用户协议

3.响应结果:HTML

  • register.html
响应结果响应内容
注册失败响应错误提示
注册成功重定向到首页

2.3 用户注册接口定义

1.注册视图

class RegisterView(View):"""用户注册"""def get(self, request):"""提供注册界面:param request: 请求对象:return: 注册界面"""return render(request, 'register.html')def post(self, request):"""实现用户注册:param request: 请求对象:return: 注册结果"""pass

2.总路由

3.子路由

三、用户注册前端逻辑

为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果

3.1 用户注册页面绑定Vue数据

1.准备div盒子标签

<body><div id="app">......</div>
</body>

2.register.html

  • 绑定内容:变量、事件、错误提示等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>美多商城-注册</title><link rel="stylesheet" type="text/css" href="../static/css/reset.css"><link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<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"></a><div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div><div class="reg_banner"></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>{#   v-cloak:解决vue渲染页面时先出现变量名再出现文字的延迟效果#}{{ csrf_input }}<ul><li><label>用户名:</label><input type="text" v-model='username' @blur="check_username" name="username" id="user_name"><span class="error_tip" v-show="error_name">[[ error_name_message ]]</span></li>					<li><label>密码:</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>确认密码:</label><input type="password" v-model="password2" @blur="check_password2" name="password2" id="cpwd"><span class="error_tip" v-show="error_password2">两次输入的密码不一致</span></li><li><label>手机号:</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>图形验证码:</label><input type="text" name="image_code" id="pic_code" class="msg_input"><img src="../static/images/pic_code.jpg" alt="图形验证码" class="pic_code"><span class="error_tip">请填写图形验证码</span></li><li><label>短信验证码:</label><input type="text" name="sms_code" id="msg_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>同意”美多商城用户使用协议“</label><span class="error_tip" v-show="error_allow">请勾选用户协议</span></li><li class="reg_sub"><input type="submit" value="注 册"></li></ul>				</form></div></div></div><div class="footer no-mp"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a>		</div><p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p><p>电话:010-****888    京ICP备*******8号</p></div></div>
</body>
</html>

3.2 用户注册JS文件实现用户交互

1.导入Vue.js库和ajax请求的库

<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>

2.准备register.js文件 

<script type="text/javascript" src="{{ static('js/register.js') }}"></script>

 绑定内容:变量、事件、错误提示等 

// 创建vue对象vm
// 采用的是ES6语法
let vm = new Vue({el: '#app',  //通过id选择器找到绑定的html内容// 修改Vue读取变量的语法delimiters: ['[[', ']]'],data: {   // 数据对象// v-modelusername: '',password: '',password2: '',mobile: '',allow: '',// v-showerror_name: false,error_password: false,error_password2: false,error_mobile: false,error_allow: false,// error_messageerror_name_message: '',error_mobile_message: '',},methods: {  // 定义和实现事件方法// 校验用户名check_username(){},// 校验密码check_password(){},// 校验确认密码check_password2(){},// 校验手机号check_mobile(){},// 校验是否勾选协议check_allow(){},// 监听表单提交事件on_submit(){},}
});

3.用户交互事件实现

methods: {// 校验用户名check_username(){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(){let re = /^[0-9A-Za-z]{8,20}$/;if (re.test(this.password)) {this.error_password = false;} else {this.error_password = true;}},// 校验确认密码check_password2(){if(this.password != this.password2) {this.error_password2 = true;} else {this.error_password2 = false;}},// 校验手机号check_mobile(){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(){if(!this.allow) {this.error_allow = true;} else {this.error_allow = false;}},// 监听表单提交事件on_submit(){this.check_username();this.check_password();this.check_password2();this.check_mobile();this.check_allow();if(this.error_name == true || this.error_password == true || this.error_password2 == true|| this.error_mobile == true || this.error_allow == true) {// 禁用表单的提交window.event.returnValue = false;}},
}

3.3 知识要点

  1. Vue绑定页面的套路
    • 导入Vue.js库和ajax请求的库
    • 准备div盒子标签
    • 准备js文件
    • html页面绑定变量、事件等
    • js文件定义变量、事件等
  2. 错误提示
    • 如果错误提示信息是固定的,可以把错误提示信息写死,再通过v-show控制是否展示
    • 如果错误提示信息不是固定的,可以使用绑定的变量动态的展示错误提示信息,再通过v-show控制是否展示
  3. 修改Vue变量的读取语法,避免和Django模板语法冲突:delimiters: ['[[', ']]']
  4. 后续的页面中如果有类似的交互和刷新效果,也可按照此套路实现

学习导航:http://www.xqnav.top  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何通过企业微信会话存档保护企业利益?

赵总: 张经理&#xff0c;最近行业内频发数据泄露事件&#xff0c;我们的客户资料和内部沟通记录安全吗&#xff1f; 张经理: 赵总&#xff0c;我们已经采取了一系列措施来加强数据安全。特别是针对企业微信的沟通记录&#xff0c;我们最近引入了安企神软件&#xff0c;它能很…

打印室预约小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;附近打印店管理&#xff0c;文件打印管理&#xff0c;当前预约管理&#xff0c;预约历史管理&#xff0c;打印记录管理 开发系统&#xff1a;Windows 架构模式&#xff1a;SSM JD…

神经网络构造

目录 一、神经网络骨架&#xff1a;二、卷积操作&#xff1a;三、卷积层&#xff1a;四、池化层&#xff1a;五、激活函数&#xff08;以ReLU为例&#xff09;&#xff1a; 一、神经网络骨架&#xff1a; import torch from torch import nn#神经网络 class CLH(nn.Module):de…

华为的热机备份和流量限制

要求&#xff1a; 12&#xff0c;对现有网络进行改造升级&#xff0c;将当个防火墙组网改成双机热备的组网形式&#xff0c;做负载分担模式&#xff0c;游客区和DMZ区走FW4&#xff0c;生产区和办公区的流量走FW5 13&#xff0c;办公区上网用户限制流量不超过100M&#xff0c;…

Redis实战—附近商铺、用户签到、UV统计

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P88 - P95 目录 附近商铺 数据导入 功能实现 用户签到 签到功能 连续签到统计 UV统计 附近商铺 利用Redis中的GEO数据结构实现附近商铺功能&#xff0c;常见命令如下图所示。…

vue3前端开发-如何让自己的网站适合SEO排名规则

vue3前端开发-如何让自己的网站适合SEO排名规则&#xff01;我们大家都知道&#xff0c;原始出生的vue3项目&#xff0c;原始代码层面&#xff0c;是没有meta标签的&#xff0c;也就是说&#xff0c;不适合SEO排名规则。那么我们能不能自己增加呢&#xff1f;答案是&#xff1a…

Photoneo 3D 网格划分

Photoneo 3D 网格划分是一种多功能软件解决方案&#xff0c;专为快速、精确的 3D 模型而设计 从多个 3D 扫描或来自 Photoneo 3D 传感器的连续 3D 数据流创建。它 旨在实现适用于各种应用的高级 3D 数据采集&#xff0c;例如 机器人引导、质量检查和逆向工程。 它以两个单独的库…

本地部署,edge-tts文本转语音解决方案

目录 什么是 edge-tts&#xff1f; 主要特点 应用场景 优势 开始使用 edge-tts 命令行安装 edge-tts 库&#xff1a; docker安装 未来展望 总结 https://github.com/rany2/edge-ttshttps://github.com/rany2/edge-tts 随着科技的进步&#xff0c;文本转语音&#xff…

leetcode145. 二叉树的后序遍历,递归法+迭代法,全过程图解+步步解析,一点点教会你迭代法后序遍历

leetcode145. 二叉树的后序遍历&#xff0c;递归法迭代法 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[3,2,1] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#…

服务器系统盘存储不够,添加数据盘并挂载(阿里云)

目录 1.获取数据盘设备名称 2.为数据盘创建分区 3.为分区创建文件系统 4.配置开机自动挂载分区 阿里云数据盘挂载说明链接&#xff1a;在Linux系统中初始化小于等于2 TiB的数据盘_云服务器 ECS(ECS)-阿里云帮助中心 1.获取数据盘设备名称 sudo fdisk -lu 运行结果如下所示…

Preceptron感知机

前言 在上一章中&#xff0c;我们讨论了回归问题&#xff0c;主要的任务就是拟合出数据集分布的解析式。而这一次的学习中&#xff0c;我们将关注分类问题。 Classification classification分类有两种&#xff1a;二元分类和多类分类。 二元分类&#xff1a;预测二值目标&am…

k8s核心操作_存储抽象_K8S中使用ConfigMap抽取配置_实现配置热更新---分布式云原生部署架构搭建032

现在有个问题,是上面我们利用pv和pvc 就是持久卷 以及 持久卷申请,实现了对存储的,pod删除以后,对其使用的存储空间也进行了删除,那么还有个问题,对于redis这种我们希望,他的配置也管理起来. 比如这个redis的配置文件. 以后其他的配置文件也是这样. 使用配置文件的存储在k8s中…

Spring Boot 中使用 Resilience4j 实现弹性微服务的简单了解

1. 引言 在微服务架构中&#xff0c;服务的弹性是非常重要的。Resilience4j 是一个轻量级的容错库&#xff0c;专为函数式编程设计&#xff0c;提供了断路器、重试、舱壁、限流器和限时器等功能。 这里不做过多演示&#xff0c;只是查看一下官方案例并换成maven构建相关展示&…

Hadoop3:RPC通信原理及简单案例实现

一、场景介绍 我们知道&#xff0c;Hadoop中存在多种服务&#xff0c;那么&#xff0c;服务之间是如何通信的了&#xff1f; 比如&#xff0c;DN和NN之间如何通信&#xff1f; 这里&#xff0c;实际上是通过RPC实现进程间通信的了。 RPC属于Java网络编程范畴 需要编写客户端和…

AAD Connect自定义同步用户上云

使用场景&#xff1a;我想同步本地AD域的那些用户信息、账号上云端做SSO登录和权限管控&#xff0c;但是不希望使用快速上传一股脑传上去&#xff0c;所以使用自定义同步功能上传&#xff0c;这是一篇对AAD CONNECT这个应用的详解和配置步骤推荐 AD Connect如何自定义配置&…

隐性行为克隆——机器人的复杂行为模仿学习的新表述

介绍 论文地址&#xff1a;https://arxiv.org/pdf/2109.00137.pdf 源码地址&#xff1a;https://github.com/opendilab/DI-engine.git 近年来&#xff0c;人们对机器人学习进行了大量研究&#xff0c;并取得了许多成果。其中&#xff0c;模仿学习法尤其受到关注。这是一种从人…

iOS ------ 消息传递和消息转发

一&#xff0c;消息传递 在OC中&#xff0c;传递消息就是在对象上调用方法。 相对于C语言的方法就“静态绑定”的函数&#xff0c;在编译器就决定了运行时所要调用的函数。在OC中&#xff0c;如果向某对象传递消息&#xff0c;就会使用动态绑定机制来决定需要调用那个方法。调…

全球风味:红酒中的地域风情与特色

在红酒的世界里&#xff0c;每一滴琼浆玉液都承载着地域的风情与特色。它们不仅仅是葡萄酒&#xff0c;更是大自然的恩赐&#xff0c;是时间的馈赠&#xff0c;是人类智慧的结晶。今天&#xff0c;就让我们一起走进红酒的世界&#xff0c;感受那些来自不同地域的风情与魅力。 …

ROS2入门到精通—— 2-6 ROS2实战:可调节纯跟踪算法(局部规划)

1 Regulated Pure Pursuit 纯追踪算法变体&#xff1a;调节纯追踪算法 将自适应纯追踪&#xff08;Adaptive Pure Pursuit&#xff09;算法的特性与围绕线性速度的规则相结合&#xff0c;重点关注消费类、工业和服务型机器人的需求。我们还实现了几种常识性的安全机制&#xf…

业务终端动态分配IP-DHCP技术、DHCP中继技术

一、为什么需要DHCP? 1、许多设备(主机、无线WiFi终端等)需要动态地址的分配; 2、人工手工配置任务繁琐、容易出错,比如:IP地址冲突; 3、网络规模扩大、复杂度提高,网络配置越来越复杂,计算机的位置变化和数量超过可分配IP地址的数量,造成IP地址变法频繁以及IP地址…