当前位置：首页 > news >正文

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

news 2025/9/17 0:04:18

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

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

2.1. 设计接口基本思路

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

2.2 用户注册接口设计

1.请求方式

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

2.请求参数：表单参数

参数名	类型	是否必传	说明
username	string	是	用户名
password	string	是	密码
password2	string	是	确认密码
mobile	string	是	手机号
sms_code	string	是	短信验证码
allow	string	是	是否同意用户协议

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 知识要点

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

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

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

一、用户注册业务逻辑分析二、用户注册接口设计和定义 2.1. 设计接口基本思路对于接口的设计，我们要根据具体的业务逻辑，设计出适合业务逻辑的接口。设计接口的思路： 分析要实现的业务逻辑： 明确在这个业务中涉及到几个相关子…...

编程日记 2024/7/18 11:02:24

ubuntu搭建harbor私仓

1、环境准备链接: https://pan.baidu.com/s/1q4XBWPd8WdyEn4l253mpUw 提取码: 7ekx --来自百度网盘超级会员v2的分享准备一台Ubuntu 机器：192.168.124.165 将上面两个文件考入Ubuntu上面 2、安装harbor 安装Docker Harbor仓库以容器方式运行，需要先安装好docker，参考：…...

编程日记 2024/7/18 11:01:22

深层神经网络示例

维度说明： A[L]、Z[L]：（本层神经元个数、样本数） W[L]：（本层神经元个数、上层神经元个数） b[L]：（本层神经元个数、1） dZ[L]：dA[L] * g’A&#xf…...

编程日记 2024/7/18 11:00:21

vue中获取剪切板中的内容

目录 1.说明 2.示例 3.总结 1.说明在系统中的画面或者时外部文件中进行拷贝处理后，在页面中可以获取剪切板的内容。 2.示例方式①(直接获取) // 异步函数获取剪切板内容 async function getClipboardContent(ev: any) {try {ev.preventDefault()const clip…...

编程日记 2024/7/18 10:58:19

十五、【机器学习】【监督学习】- 神经网络回归

系列文章目录第一章【机器学习】初识机器学习第二章【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…...

编程日记 2024/7/18 10:57:18

知识图谱和 LLM：利用Neo4j驾驭大型语言模型（探索真实用例）

这是关于 Neo4j 的 NaLLM 项目的一篇博客文章。这个项目是为了探索、开发和展示这些 LLM 与 Neo4j 结合的实际用途。 2023 年，ChatGPT 等大型语言模型 (LLM) 因其理解和生成类似人类的文本的能力而风靡全球。它们能够适应不同的对话环境、回答各种主题的问题，甚至模拟创意写…...

编程日记 2024/7/18 10:56:17

目标检测入门：4.目标检测中的一阶段模型和两阶段模型

在前面几章里，都只做了目标检测中的目标定位任务，并未做目标分类任务。目标检测作为计算机视觉领域的核心人物之一，旨在从图像中识别出所有感兴趣的目标，并确定它们的类别和位置。现在目标检测以一阶段模型和两阶段模型为代表的。…...

编程日记 2024/7/18 10:54:15

zookeeper+kafka消息队列群集部署

kafka拓扑架构 zookeeper拓扑架构...

编程日记 2024/7/18 10:51:11

Kubernetes | Apache Flink 先编辑好这5个配置文件，然后再直接执行 kubectl create -f ./ kubectl get all kubectl get nodes kubectl get pods kubectl get pod -o wide kubectl get cm -- 获取所有的configmap 配置文件 kubectl logs pod_name -- 查看…...

编程日记 2024/7/18 10:50:10

系统架构设计师教程第3章信息系统基础知识-3.1 信息系统概述

系统架构设计师教程第3章信息系统基础知识-3.1 信息系统概述 3.1.1　信息系统的定义3.1.1.1　信息系统3.1.1.2　信息化3.1.2　信息系统的发展3.1.2.1 初始阶段3.1.2.2 传播阶段3.1.2.3 控制阶段3.1.2.4 集成阶段3.1.2.5 数据管理阶段3.1.2.6 成熟阶段3.1.3　信息系统的分类3.…...

编程日记 2024/7/18 10:49:08

Gemma的简单理解；Vertex AI的简单理解，与chatGpt区别

目录 Gemma的简单理解 Vertex AI的简单理解 Gemma Vertex AI Gemma Vertex AI和chatcpt区别一、定义与功能二、技术特点三、应用场景四、获取与部署 Gemma的简单理解定义与功能： Gemma是谷歌开源的一款大语言模型，它采用了Gemini架构，并提供了20亿（2B）和7…...

编程日记 2024/7/18 10:48:07

Lua 数组

Lua 数组 Lua 是一种轻量级的编程语言，广泛用于游戏开发、脚本编写和其他应用程序。在 Lua 中，数组是一种非常基础和重要的数据结构。本文将详细介绍 Lua 数组的概念、用法和操作方法。数组的概念在 Lua 中，数组实际上是一个列表&#x…...

编程日记 2024/7/18 10:47:06

游戏中的敏感词算法初探

在游戏中起名和聊天需要服务器判断是否含有敏感词，从而拒绝或屏蔽敏感词显示，这里枚举一些常用的算法和实际效果。 1.字符串匹配算法常用的有KMP，核心就是预处理出next数组，也就是失配信息，时间复杂度在O(mn) 。还有个…...

编程日记 2024/7/18 10:44:02

使用Java和Apache Kafka Streams实现实时流处理应用

使用Java和Apache Kafka Streams实现实时流处理应用大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！ 引言实时流处理已经成为现代应用开发中不可或缺的一部分。Apache Kafka Streams是一个强大的库…...

编程日记 2024/7/18 10:43:00

分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法

前言树形结构是一种很常见的数据结构，类似于现实生活中的树的结构，具有根节点、父子关系和层级结构。所谓根节点，就是整个树的起始节点。节点则是树中的元素，每个节点可以有零个或多个子节点，节点按照层级排列&a…...

编程日记 2024/7/18 10:41:59

【柴油机故障诊断】基于斑马优化算法ZOA优化柴油机故障诊断附Matlab代码

% 柴油机故障诊断 - 基于斑马优化算法（Zebra Optimization Algorithm，ZOA）优化Transformer模型 % 代码示例仅为演示用途，实际应用中可能需要根据具体情况进行适当修改 % 初始化参数 maxIterations = 100; % 最大迭代次数 populationSize = 50; % 种群大小 % 斑马优化算法…...

编程日记 2024/7/18 10:40:58

C1W4.Assignment.Naive Machine Translation and LSH

理论课：C1W4.Machine Translation and Document Search 文章目录 1. The word embeddings data for English and French words1.1The dataThe subset of dataLoad two dictionaries 1.2 Generate embedding and transform matricesExercise 1: Translating English…...

编程日记 2024/7/18 10:39:56

智能听诊器：宠物健康监测的革新者

宠物健康护理领域迎来了一项激动人心的技术革新——智能听诊器。这款创新设备以其卓越的精确度和用户友好的操作，为宠物主人提供了一种全新的健康监测方法。使用智能听诊器时，只需将其放置在宠物身上，它便能立即捕捉到宠物胸腔的微小振动。…...

编程日记 2024/7/18 10:36:53

001、Mac系统上Stable Diffusion WebUI环境搭建

一、目标如标题所述，在苹果电脑（Mac）上搭建一套Stable Diffusion本地服务，以实现本地AI生图目的。二、安装步骤 1、准备源码【等价于准备软件】 # 安装一系列工具库，包括cmake,protobuf,rust,python3.10,git,wge…...

编程日记 2024/7/18 10:34:50

k8s一些名词解释

潮汐计算是一种根据负载变化动态调整资源分配的计算模式。其核心思想是利用峰值和非峰值时段的资源需求差异，动态地扩展或缩减计算资源。在 Kubernetes 环境中，可以通过自动扩展（auto-scaling）机制，根据工作负载的变化自动调整计算资源，最大化资源利用率并减少不必要的…...

编程日记 2024/7/18 10:31:47

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...

编程新知 2025/9/9 14:55:19

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/8/5 9:30:07

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系坐标体系-介绍坐标原点位于左上角，以像素为单位。在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/12 23:21:56

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/9/9 22:47:25

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...

编程新知 2025/9/11 17:53:57

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲竞赛背景与意义竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响竞赛环境需求分析常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景随着水产养殖行业的快速发展，养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下，而且难以实现精准监控和管理。为了提升尾水处理的效果和效率，同时降低人力成本，某大型水产养殖企业决定…...

编程新知 2025/9/4 16:30:43