今天来写一个小案例——完善注册功能

最新推荐文章于 2022-05-22 17:54:44 发布

suxue_java

最新推荐文章于 2022-05-22 17:54:44 发布

阅读量284

点赞数 1

分类专栏：程序员互联网学习 java 编程 IT 文章标签： Java 程序员编程

本文链接：https://blog.csdn.net/suxue_java/article/details/88421461

版权

程序员同时被 3 个专栏收录

87 篇文章 0 订阅

订阅专栏

java

85 篇文章 0 订阅

订阅专栏

互联网

82 篇文章 0 订阅

订阅专栏

知识点学的再多，也不如一次实战的经验

从今天开始咱们玩点不一样的，写一个小的项目案例。相信很多小伙伴都有这样的感觉：

看别人的代码行云流水，自己动手的时候无从下手。今天我们就一起动手从零来写一个小项目吧！

那我们直接开始吧~

首先来搭一下环境

（把我们需要的工具类和第三方jar包放进去）

在这里插入图片描述

下面就开始动手写代码了

用户注册功能

先来创建数据库表

在这里插入图片描述

然后是JavaBean

在这里插入图片描述

接下来是逻辑代码

RegisterServlet获取前端页面传过来的数据，并把UUID封装进来
在这里插入图片描述

下面就不一样了

RegisterServlet 把数据传到 Service 层，Service 层调用 DAO 层，DAO 层操作数据库（完成数据的插入操作），把结果向上一层一层反馈~然后RegisterSerevle t根据返回的结果进行判断，成功就跳转到成功的页面，失败就跳转到失败的页面~

在这里插入图片描述

测试一下

在这里插入图片描述

用户注册成功~

下面我们来给页面添加一个

表单验证

我们上次用的是 js 写的表单验证这次我们用一个 validate 插件来做表单验证

首先引入文件
在这里插入图片描述
编写页面代码

截图的效果不好咱们直接上页面的源码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<!-- 引入表单校验插件 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<style type="text/css">
.error{
 color:red
}

</style>
<script type="text/javascript">
 $(function(){
   $("#myform").validate({
     rules:{
       "username":{
         "required":true
       },
       "password" : {
         "required" : true,
         "rangelength" : [ 6, 12 ]
       },
       "rpassword" : {
         "required" : true,
         "rangelength" : [ 6, 12 ],
         "equalTo" : "#password"
       },
       "email" : {
         "required" : true,
         "email" : true
       },
       "sex" : {
         "required" : true
       }
     },
     
     messages:{
       "username":{
         "required":"用户名不能为空！"
       },
       "password" : {
         "required" : "密码不能为空",
         "rangelength" : "密码长度6-12位"
       },
       "rpassword" : {
         "required" : "密码不能为空",
         "rangelength" : "密码长度6-12位",
         "equalTo" : "两次密码不一致"
       },
       "email" : {
         "required" : "邮箱不能为空",
         "email" : "邮箱格式不正确"
       }
     }
   });
 });
</script>

</head>

<body>
 <form id="myform" action="${pageContext.request.contextPath}/register"
   method="post">
   <table border="1px" width="600px" height="400px" align="center"
     cellpadding="0px" cellspacing="0px">
     <tr height="40px">
       <td colspan="2"><font size="4"><b>用户注册&nbsp;USER
             REGISTER</b></font></td>
     </tr>
     <tr>
       <td align="center"><b>用户名</b></td>
       <td><input type="text" name="username" /></td>
     </tr>
     <tr>
       <td align="center"><b>密码</b></td>
       <td><input id="password" type="password" name="password" /></td>
     </tr>
     <tr>
       <td align="center"><b>确认密码</b></td>
       <td><input type="password" name="rpassword" /></td>
     </tr>
     <tr>
       <td align="center"><b>Email</b></td>
       <td><input type="text" name="email" /></td>
     </tr>
     <tr>
       <td align="center"><b>姓名</b></td>
       <td><input type="text" name="name" /></td>
     </tr>
     <tr>
       <td align="center"><b>性别</b></td>
       <td>
       <input type="radio" name="sex" value="male" />男 
       <input type="radio" name="sex" value="female" />女
       
       <label class="error" for="sex" style="display:none ">请选择性别！</label>
       </td>
     </tr>
     <tr>
       <td align="center"><b>出生日期</b></td>
       <td><input type="text" name="birthday" size="30px" /></td>
     </tr>
     <tr>
       <td align="center"><b>验证码</b></td>
       <td><input type="text" name="yzm" /> <img src="img/yzm.png"
         width="60" height="30" /></td>
     </tr>
     <tr>
       <td colspan="2" align="center">
         <input type="submit" value="注册"  name="submit"/>
         <input type="reset" value="重置" /></td>
     </tr>
   </table>
 </form>
</body>
</html>

页面效果：

在这里插入图片描述

你学会了吗？

suxue_java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天来写一个小案例——完善注册功能

知识点学的再多，也不如一次实战的经验从今天开始咱们玩点不一样的，写一个小的项目案例。相信很多小伙伴都有这样的感觉：看别人的代码行云流水，自己动手的时候无从下手。今天我们就一起动手从零来写一个小项目吧！那我们直接开始吧~首先来搭一下环境（把我们需要的工具类和第三方jar包放进去）下面就开始动手写代码了用户注册功能先来创建数据库表然后是JavaBean接下来是逻辑代码Re...
复制链接

扫一扫