JavaWeb-仿小米商城(2) 用户注册
目录
1、业务描述
2 业务分析
2.1 业务流程抽象
2.2 可能的技术难点与解决策略
3 代码实现
3.1 信息验证与提交
3.1.1 用户名校验的前端代码
3.1.2 用户名校验的Servlet代码
3.1.3 Service
3.1.4 Dao
3.2 邮件激活
3.2.1 Servlet
3.2.2 Service
3.2.3 Dao
1、业务描述
注册业务旨在收集和管理用户的个人信息，是未来提供个性化服务的基础。相应的前端页面如下方静态H5页面图所示：
网页中提供多个输入框,并给出对应的提示信息,逐步引导用户根据提示想输入框中填写信息,最终点击下方的注册按钮完成用户注册
1.前端Ajax验证 用户名在输入后焦点丢失请求发送到Servlet检测用户在数据库中存在,不存在可以注册,存在给出信息
2.前端Ajax验证 邮箱在输入后鼠标焦点丢失请求发送到Serclet检测邮箱是否存在,不存在可以注册,存在给出提示
注册成功,跳转到提示页面
进一步地，为了验证联系方式的有效性，在完成注册功能后，前端还会提示用户执行 激活 操作：通过向用户注册时填写的邮箱发送验证邮件。在邮件正文中引导用户点击相应的超链接完成账户激活，并在激活页面提供登录链接，引导用户登录网站。整个注册业务流程完毕。
2 业务分析
2.1 业务流程抽象
在本案例中，注册业务分为两阶段：
注册阶段：用户根据前端页面的提示信息填写相应内容，进而提交至后台处理，最终将信息保存至数据库。 激活阶段：系统后台自动向用户填写的邮件地址发送一封 激活邮件，邮件中包含一个激活链接。用户通过点击激活链接向服务器发送一个请求，服务器在接收到该请求后，再向用户浏览器回写激活成功信息。
2.2 可能的技术难点与解决策略
1.避免机器人批量注册
添加验证码，优先核对，不满足直接跳出方法。（后续单独写一篇博客分析此功能）
2.如何保证激活用户的唯一性？
在 tab_user 表中添加字段：active_code 。它是一种保证唯一性的序列码，本案例中调用 Java 中的工具类 UUID 生成序列并作为用户的激活码。在用户注册时生成并与用户信息一并写入数据库，同时向用户提交的邮件地址发送一封带有激活码链接的邮件。只有用户在邮件中点击了这个链接，使用带有激活码的URL向服务器发出请求，服务器才能收到用户“发来的”激活码，并在后端完成校验并向用户端浏览器回写响应信息。
3.如何定义和处理激活状态？
在 tab_user 表中添加两个字段：status 。status 用于标注用户是否激活，它只有两种可能的取值：Y（已激活）和 N（未激活）。在用户刚刚提交注册表单时，后端在数据库中添加用户信息时对该字段设为 N，当用户在激活邮件中点击激活链接向服务器发送激活请求时，服务器在核对通过的前提下将该字段修改为 Y。
前端校验用户填写的表单信息：
非空 ：.+ 字符集 ：^\w{6,20}$ 手机号 ：1(3|4|5|7|8)\d{9} 邮箱 ：^\w+(.\w+)*@\w+(.\w+)+$
3 代码实现
3.1 信息验证与提交
3.1.1 用户名校验的前端代码
通过Ajax异步校验用户名是否存在通过
$(function(){$("#username").change(function(){//使用ajax 做username 的异步验证 checkUsername?username=xxxx$.get("user.do?action=checkUserName","username="+this.value,function(data){if(data==1){$("#usernameMsg").html("用户名已经存在").css("color","red");$("#registerBtn").attr("disabled",true);}else{$("#usernameMsg").html("用户名可用").css("color","green");$("#registerBtn").removeAttr("disabled");}})});})Ajax异步校验用户邮箱是否存在
$(function(){$("#email").change(function(){//使用ajax 做email 的异步验证 checkUsername?username=xxxx$.get("user.do?action=checkUserEmail","username="+this.value,function(data){if(data==1){$("#usernameMsg").html("用户名已经存在").css("color","red");$("#registerBtn").attr("disabled",true);}else{$("#usernameMsg").html("用户名可用").css("color","green");$("#registerBtn").removeAttr("disabled");}})});})3.1.2 用户名校验的Servlet代码
/*** @author 无忧* 2022/5/10 15:41*/
@WebServlet(urlPatterns = {"/user.do"})
public class UserServlet extends BaseServlet{/*** 验证用户名* @param req* @param resp*/public String checkUserName(HttpServletRequest req, HttpServletResponse resp)throws IOException, ServletException {IUserService userService=new UserServiceImpl();User user=new User();String username=req.getParameter("username");user.setUsername(username);boolean falg=userService.queryDateByUser(user);return falg==false?"0":"1";}/*** 验证邮箱* @param req* @param resp*/public String checkUserEmail(HttpServletRequest req, HttpServletResponse resp)throws IOException, ServletException {IUserService userService=new UserServiceImpl();User user=new User();String email=req.getParameter("email");user.setEmail(email);boolean falg=userService.queryDateByUser(user);return falg==false?"0":"1";}}3.1.3 Service
/*** @author 无忧* 2022/5/10 14:46*/
public class UserServiceImpl implements IUserService {//...private IUserDao userDao=new UserDaoImpl();/*** 用户注册逻辑* @param user* @return*/@Overridepublic boolean saveData(User user) {boolean flag=false;//这里需要二次验证 用户名 邮箱User u1=new User();User u2=new User();u1.setUsername(user.getUsername());u2.setEmail(user.getEmail());if(!this.queryDateByUser(u1)&&!this.queryDateByUser(u2)){//密码MD5加密String md5= MD5Utils.md5(user.getPassword());user.setPassword(md5);//生成激活码String activeCode= RandomUtils.createActive();user.setCode(activeCode);if (userDao.addData(user)>=1) {//发激活提示邮件EmailUtils.sendEmail(user);flag=true;}}return false;}//...
}3.1.4 Dao
/*** @author 无忧* 2022/5/10 14:34*/
public class UserDaoImpl implements IUserDao {private QueryRunner queryRunner=null;public UserDaoImpl(){queryRunner=new QueryRunner();}//.../*** 用户注册* @param user* @return*/@Overridepublic int addData(User user) {int n=-1;String sql="insert into tb_user(username,password,email,gender,flag,role,code)values(?,?,?,?,?,?,?)";try {n = queryRunner.update(JdbcUtils.getConn(),sql,user.getUsername(),user.getPassword(),user.getEmail(),user.getGender(),user.getFlag(),user.getRole(),user.getCode());} catch (SQLException e) {e.printStackTrace();}return n;}/*** 查找用户email和username是否存在* @param user* @return*/@Overridepublic int findDataByUser(User user) {int n=-1;String sql="select *from tb_user where 1=1";String parms="";if(user.getEmail()!=null && !user.getEmail().equals("")){sql+=" and email=?";parms=user.getEmail();}else if(user.getUsername()!=null&&!user.getUsername().equals("")){sql+=" and username=?";parms=user.getUsername();}else {return 100;}try {User u= queryRunner.query(JdbcUtils.getConn(),sql,parms,new BeanHandler<>(User.class));if(u!=null){n=10;}} catch (SQLException e) {e.printStackTrace();}return n;}//...
}表单数据验证与提交主函数
/*如果此方法：无返回或返回true，则表单提交返回false，则表单不提交*/
$(function () {// 当表单提交时调用所有的校验方法$("#registerForm").submit(function () {// 1.发送数据到服务器if (checkUsername() && // 用户名校验checkPassword() && // 密码校验checkEmail() && // 邮箱校验checkCode() // 验证码校验) { // 校验成功// 发送AJAX请求，提交表单数据 username=Alex&password=123 ...$.post("user/register", $(this).serialize(), function (data) {// 处理响应数据 data {flag:true/false, errorMsg:"..."}if (data["flag"]) { // 注册成功// 跳转成功页面location.href = "register_ok.html";} else { // 注册失败// 在注册页面添加提示信息$("#errorMsg").html(data["errorMsg"]);}});} else { // 校验失败}// 2.跳转页面return false;});// 当某一个组件失去焦点时，调用对应的校验方法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);$("#check").blur(checkCode);
})3.2 邮件激活
3.2.1 Servlet
@WebServlet(urlPatterns = {"/user.do"})
public class UserServlet extends BaseServlet{/*** 邮箱激活* @param req* @param resp* @return*/public String activate(HttpServletRequest req, HttpServletResponse resp) {String mesg="用户激活失败,请重试";String emailB64=req.getParameter("e");String email= Base64Utils.decode(emailB64);String codeB64=req.getParameter("c");String code=Base64Utils.decode(codeB64);IUserService userService=new UserServiceImpl();User user=new User();user.setEmail(email);user.setCode(code);//如果有html链接内容输出要设置响应resp.setContentType("text/html;charset=utf-8");user.setFlag(1);if (userService.activate(user)){mesg="用户激活成功,请<a href='login.html'>登录</a>";//mesg= Constants.FORWARD+"message.html";}return mesg;}}
}3.2.2 Service
public class UserServiceImpl implements IUserService {//...private IUserDao userDao=new UserDaoImpl(); @Overridepublic boolean activate(User user) {int n=userDao.updateData(user);return n>=1?true:false;//...}
}3.2.3 Dao
public class UserDaoImpl implements IUserDao {private QueryRunner queryRunner=null;public UserDaoImpl(){queryRunner=new QueryRunner();}/*** 修改用户状态* @param user* @return*/@Overridepublic int updateData(User user) {int n=-1;String sql="update tb_user set flag=1 where code=? and email=?";try {n = queryRunner.update(JdbcUtils.getConn(),sql,user.getCode() ,user.getEmail());} catch (SQLException e) {e.printStackTrace();}return n;}
}代码不全,需要的私我
JavaWeb-仿小米商城(2) 用户注册相关推荐
- JavaWeb - 仿小米商城网(2) 用户注册
JavaWeb - 仿小米商城网(2): 用户注册 1.业务描述 注册业务旨在收集和管理用户的个人信息,是未来提供个性化服务的基础.相应的前端页面如下方静态H5页面图所示: 网页中提供多个输入框, 并 ...
- JavaWeb - 仿小米商城网(3) 登录与退出
JavaWeb - 仿小米商城网(3) :登录与退出 1 业务描述 接上篇仿小米商城网(2):用户注册,本篇博客将分析和实现用户登录与退出.登录是后台获取当前访客身份的方式,也是提供个性化服务的基础. ...
- JavaWeb - 仿小米商城（5）：商品详情展示
JavaWeb - 仿小米商城(5):商品详情展示 1 功能描述 接上篇 JavaWeb - 仿小米商城(4):商品列表形式 本篇博客将分析和实现小米商城商品详情内容的查 询和展示.如下所示: 2 功 ...
- Java项目:仿小米商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述 本系统功能包括: 基于vue + Springboot前后端分离项目精简版仿小米商城 系统,注册登录,首页展示,商品展示,商品 ...
- HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
- 小程序之仿小米商城Lite
前言 关于小程序,在这里有一句话送给正准备阅读的你-世界上本没有坑,路走的多了就有了:世界上本没有路,坑填的多了就有了.嗯~~~这句话就是作为第一次做仿小程序项目的我,历经'磨难'得出来的肺腑之言.好 ...
- 基于PHP的仿小米商城系统(完整前后台)
基于PHP的仿小米商城系统 一 项目介绍 此商城系统清爽,简约,用户界面友好,分前后台. 技术栈 原生php+mysql+echarts+phpstudy+vscode 二 主要功能 前台(用户) 1 ...
- Javaweb 实现简单的用户注册登录（含数据库访问功能）
Javaweb 实现简单的用户注册登录(含数据库访问功能) 实现效果图: 登录界面: 登陆成功: 登陆失败: 注册界面: 注册成功: 1.登录界面login.jsp <%@ page langu ...
- package.json 封装 vue模块_vue仿小米商城 -- 我知道的都在这里了
vue仿小米商城 -- 小作坊实战记录 这是一个仿小米商城的vue全家桶项目,点击预览 项目环境介绍: 系统:macos 包管理工具: yarn Node: v12.4.0 项目会完成的页面和功能: ...
- ecshopcron.php,ecshop商业模板 高仿小米商城源码,小米手机商城源代码模板价值百元...
[实例简介] 程序介绍: ECSHOP精仿小米商城网站模板,程序基于ECSHOP 2.7.3最新版仿制.虽然是以前的老模板,但对于一些做手机类,数码类商城的朋友还是挺适用的. 安装方法: 第一种安装方 ...
最新文章
- Node.js webpack中导入vue的三种方法
- 【c++】48.g++编译opencv、多线程
- 这份程序员的简历刷爆了九月的朋友圈
- 【建议】如何优雅的提问？
- Zabbix最佳实践一：Zabbix4.0.2的安装与配置
- WebAPi的可视化输出模式(RabbitMQ、消息补偿相关）——所有webapi似乎都缺失的一个功能...
- mysql dba 试题_mysql dba面试题及答案.docx
- iOS扩大按钮的点击范围
- Blazor VS React / Angular / Vue.js
- leetcode1290. 二进制链表转整数 刷新认知，最简单算法题
- 吴恩达：机器学习应以数据为中心
- 5G精华问答：5G的速度到底有多快？| 技术头条
- ntr模式_ntr什么意思？
- 设计模式之单例模式-C++
- [数据分析工具] Pandas 不可不知的功能（一）
- Java的“ for each”循环如何工作？
- python 去除txt文本内容重复值
- 如何在uniapp中使用百度云实现OCR身份证识别功能
- 360浏览器保存网页html5,360浏览器怎么保存整个网页为图片？
- UE4 云渲染环境搭建