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

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

news 2026/1/1 2:50:06

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

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

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

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/12/23 18:59:01

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/12/20 15:01:20

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/12/10 5:18:09

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2025/12/31 11:29:23

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式静态ip设置： 我用的ubuntu24桌…...

编程新知 2025/12/31 16:10:38

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/12/31 21:09:55

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。一、负载模块基本结构一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39

自然语言处理——文本分类

文本分类传统机器学习方法文本表示向量空间模型特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数文本分类性能评估P-R曲线ROC曲线将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...

编程新知 2025/12/31 10:15:22