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

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

news 2025/7/5 6:05:02

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

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

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  

相关文章：

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

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

编程日记 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

深层神经网络示例

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

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

vue中获取剪切板中的内容

目录 1.说明 2.示例 3.总结 1.说明 在系统中的画面或者时外部文件中进行拷贝处理后&#xff0c;在页面中可以获取剪切板的内容。 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.目标检测中的一阶段模型和两阶段模型

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

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

zookeeper+kafka消息队列群集部署

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

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

[K8S]一、Flink on K8S

Kubernetes | Apache Flink 先编辑好这5个配置文件&#xff0c;然后再直接执行 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 是一种轻量级的编程语言&#xff0c;广泛用于游戏开发、脚本编写和其他应用程序。在 Lua 中&#xff0c;数组是一种非常基础和重要的数据结构。本文将详细介绍 Lua 数组的概念、用法和操作方法。 数组的概念 在 Lua 中&#xff0c;数组实际上是一个列表&#x…...

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

游戏中的敏感词算法初探

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

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

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

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

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

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

前言 树形结构是一种很常见的数据结构&#xff0c;类似于现实生活中的树的结构&#xff0c;具有根节点、父子关系和层级结构。 所谓根节点&#xff0c;就是整个树的起始节点。 节点则是树中的元素&#xff0c;每个节点可以有零个或多个子节点&#xff0c;节点按照层级排列&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

理论课&#xff1a;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

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

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

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

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

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

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

k8s一些名词解释

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

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

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/7/4 12:58:57

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/7/4 1:18:16

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/7/4 18:38:25

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/6/24 5:38:28

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/6/21 13:00:47

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/6/26 1:18:42

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/6/27 10:36:03

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/7/4 22:25:35

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/7/4 13:42:39