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

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

news 2025/11/4 6:54:55

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

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

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

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/10/15 5:04:46

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/3 19:35:48

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...

编程新知 2025/9/17 19:16:20

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/2 12:41:43

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/8/4 22:42:24

中医有效性探讨

文章目录西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...

编程新知 2025/10/25 6:07:35

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/10/27 20:21:07

如何更改默认 Crontab 编辑器？

在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。编辑 Crontab 文件通常使用文本编…...

编程新知 2025/10/29 0:30:24

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。核心区别：不同层级的事件处理方…...

编程新知 2025/6/10 21:19:52

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/10/31 3:42:24