• 【JavaWeb】简单的登录注册案例

     ✨✨个人主页:沫洺的主页

    📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                               📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                               📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

    💖💖如果文章对你有所帮助请留下三连✨✨

    🌈登录注册案例

    🎨案例展示

    🎨涉及技术

    📌JavaWeb---Servlet

    📌MyBatis

    🎨环境搭建

    📌使用IDEA创建maven-web项目,配置pom文件添加坐标依赖及tomcat配置

    📌创建目录,包文件夹,在webapp目录下编写静态页面login.html和register.html

    📌创建db5数据库，创建 tb_user表，在pojo包下创建 User实体类

    📌创建mybatis-config.xml核心配置文件，UserMapper.xml映射文件，UserMapper接口

    📌编写LoginServlet和RegisterServlet,及对应的UserMapper映射文件，UserMapper接口

    🎨目录展示

    🎨环境搭建源码配置

    🔎pom.xml

    1. "1.0" encoding="UTF-8"?>
    2.  
    3. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
    4.   <modelVersion>4.0.0modelVersion>  
    5.   <groupId>com.mominggroupId>  
    6.   <artifactId>web-login-registerartifactId>  
    7.   <version>1.0-SNAPSHOTversion>  
    8.   <packaging>warpackaging>
    9.   <properties> 
    10.     <maven.compiler.source>8maven.compiler.source>  
    11.     <maven.compiler.target>8maven.compiler.target> 
    12.   properties>
    13.   <dependencies>
    14.     
    15.     <dependency>
    16.       <groupId>org.mybatisgroupId>
    17.       <artifactId>mybatisartifactId>
    18.       <version>3.5.5version>
    19.     dependency>
    20.     
    21.     <dependency>
    22.       <groupId>mysqlgroupId>
    23.       <artifactId>mysql-connector-javaartifactId>
    24.       <version>5.1.49version>
    25.     dependency>
    26.     
    27.     <dependency>
    28.       <groupId>com.github.pagehelpergroupId>
    29.       <artifactId>pagehelperartifactId>
    30.       <version>5.1.2version>
    31.     dependency>
    32.     
    33.     <dependency>
    34.       <groupId>javax.servletgroupId>
    35.       <artifactId>javax.servlet-apiartifactId>
    36.       <version>3.1.0version>
    37.       <scope>providedscope>
    38.     dependency>
    39.     
    40.     <dependency>
    41.       <groupId>junitgroupId>
    42.       <artifactId>junitartifactId>
    43.       <version>4.13version>
    44.     dependency>
    45.     
    46.     <dependency>
    47.       <groupId>cn.hutoolgroupId>
    48.       <artifactId>hutool-allartifactId>
    49.       <version>5.8.5version>
    50.     dependency>
    51.     
    52.     
    53.     <dependency>
    54.       <groupId>ch.qos.logbackgroupId>
    55.       <artifactId>logback-classicartifactId>
    56.       <version>1.2.3version>
    57.     dependency>
    58.     
    59.     <dependency>
    60.       <groupId>ch.qos.logbackgroupId>
    61.       <artifactId>logback-coreartifactId>
    62.       <version>1.2.3version>
    63.     dependency>
    64.     
    65.     <dependency>
    66.       <groupId>org.projectlombokgroupId>
    67.       <artifactId>lombokartifactId>
    68.       <version>1.18.24version>
    69.       <scope>compilescope>
    70.     dependency>
    71.     
    72.     <dependency>
    73.       <groupId>javax.servlet.jspgroupId>
    74.       <artifactId>jsp-apiartifactId>
    75.       <version>2.2version>
    76.       <scope>providedscope>
    77.     dependency>
    78.     
    79.     <dependency>
    80.       <groupId>jstlgroupId>
    81.       <artifactId>jstlartifactId>
    82.       <version>1.2version>
    83.     dependency>
    84.     <dependency>
    85.       <groupId>taglibsgroupId>
    86.       <artifactId>standardartifactId>
    87.       <version>1.1.2version>
    88.     dependency>
    89.     
    90.     <dependency>
    91.       <groupId>org.springframeworkgroupId>
    92.       <artifactId>spring-webmvcartifactId>
    93.       <version>5.3.2version>
    94.     dependency>
    95.   dependencies>
    96.   <build>
    97.     <plugins>
    98.       <plugin>
    99.         <groupId>org.apache.tomcat.mavengroupId>
    100.         <artifactId>tomcat7-maven-pluginartifactId>
    101.         <version>2.2version>
    102.         <configuration>
    103.           
    104.           <port>8080port>
    105.           
    106.           <path>/momingpath>
    107.           
    108.           <uriEncoding>utf-8uriEncoding>
    109.         configuration>
    110.       plugin>
    111.     plugins>
    112.   build>
    113. project>

    🔎mybatis-config.xml(数据库账号密码是自己的)

    1. "1.0" encoding="UTF-8" ?>
    2. configuration
    3.         PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-config.dtd">
    5. <configuration>
    6.     
    7.     <typeAliases>
    8.         <package name="com.moming.pojo"/>
    9.     typeAliases>
    10.  
    11.     <environments default="development">
    12.         <environment id="development">
    13.             <transactionManager type="JDBC"/>
    14.             <dataSource type="POOLED">
    15.                 <property name="driver" value="com.mysql.jdbc.Driver"/>
    16.                 <property name="url" value="jdbc:mysql:///db5?useSSL=false&useServerPrepStmts=true&allowPublicKeyRetrieval=true"/>
    17.                 <property name="username" value="root"/>
    18.                 <property name="password" value="123456"/>
    19.             dataSource>
    20.         environment>
    21.     environments>
    22.     <mappers>
    23.         
    24.         <package name="com.moming.mapper"/>
    25.     mappers>
    26. configuration>

     🎨数据库源码

    1. drop table if EXISTS tb_user;
    2. -- 创建用户表
    3. CREATE TABLE tb_user(
    4. 	id int primary key auto_increment,
    5. 	username varchar(20) unique,
    6. 	password varchar(32)
    7. );
    8.  
    9. -- 添加数据
    10. INSERT INTO tb_user(username,password) values('zhangsan','123'),('lisi','123');
    11.  
    12. SELECT * FROM tb_user;

    🎨静态页面源码

    🔎login.css

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5.  
    6. html {
    7.     height: 100%;
    8.     width: 100%;
    9.     overflow: hidden;
    10.     margin: 0;
    11.     padding: 0;
    12.     background: url(../imgs/img.png) no-repeat 0px 0px;
    13.     background-repeat: no-repeat;
    14.     background-size: 100% 100%;
    15.     -moz-background-size: 100% 100%;
    16. }
    17.  
    18. body {
    19.     display: flex;
    20.     align-items: center;
    21.     justify-content: center;
    22.     height: 100%;
    23. }
    24.  
    25. #loginDiv {
    26.     width: 37%;
    27.     display: flex;
    28.     justify-content: center;
    29.     align-items: center;
    30.     height: 300px;
    31.     background-color: rgba(255, 255, 255, 0.27);
    32.     box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    33.     border-radius: 5px;
    34. }
    35.  
    36. p {
    37.     margin-top: 30px;
    38.     margin-left: 20px;
    39. }
    40.  
    41. input {
    42.     margin-left: 15px;
    43.     border-radius: 5px;
    44.     border-style: hidden;
    45.     height: 30px;
    46.     width: 140px;
    47.     outline: none;
    48.     padding-left: 10px;
    49. }
    50. #username{
    51.     width: 200px;
    52. }
    53. #password{
    54.     width: 202px;
    55. }
    56. .button {
    57.     border-color: cornsilk;
    58.     background-color: #5a88c8;
    59.     color: aliceblue;
    60.     border-style: hidden;
    61.     border-radius: 5px;
    62.     width: 100px;
    63.     height: 31px;
    64.     font-size: 16px;
    65. }
    66.  
    67. #subDiv {
    68.     text-align: center;
    69.     margin-top: 30px;
    70. }
    71. #loginMsg{
    72.     text-align: center;
    73.     color: black;
    74. }

    🔎register.css

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     list-style-type: none;
    5. }
    6. .reg-content{
    7.     padding: 20px;
    8.     margin: 3px;
    9. }
    10. a, img {
    11.     border: 0;
    12. }
    13.  
    14. body {
    15.     background-image: url("../imgs/img.png") ;
    16.     text-align: center;
    17. }
    18.  
    19. table {
    20.     border-collapse: collapse;
    21.     border-spacing: 0;
    22. }
    23.  
    24. td, th {
    25.     padding: 0;
    26.     height: 50px;
    27.  
    28. }
    29. .inputs{
    30.     vertical-align: top;
    31. }
    32.  
    33. .clear {
    34.     clear: both;
    35. }
    36.  
    37. .clear:before, .clear:after {
    38.     content: "";
    39.     display: table;
    40. }
    41.  
    42. .clear:after {
    43.     clear: both;
    44. }
    45.  
    46. .form-div {
    47.     background-color: rgba(255, 255, 255, 0.27);
    48.     border-radius: 10px;
    49.     border: 1px solid #aaa;
    50.     width: 424px;
    51.     margin-top: 100px;
    52.     margin-left:400px;
    53.     padding: 30px 0 20px 0px;
    54.     font-size: 16px;
    55.     box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
    56.     text-align: left;
    57. }
    58.  
    59. .form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
    60.     width: 268px;
    61.     margin: 10px;
    62.     line-height: 20px;
    63.     font-size: 16px;
    64. }
    65.  
    66. .form-div input[type="checkbox"] {
    67.     margin: 20px 0 20px 10px;
    68. }
    69.  
    70. .form-div input[type="button"], .form-div input[type="submit"] {
    71.     margin: 10px 20px 0 0;
    72. }
    73.  
    74. .form-div table {
    75.     margin: 0 auto;
    76.     text-align: right;
    77.     color: rgba(64, 64, 64, 1.00);
    78. }
    79.  
    80. .form-div table img {
    81.     vertical-align: middle;
    82.     margin: 0 0 5px 0;
    83. }
    84.  
    85. .footer {
    86.     color: rgba(64, 64, 64, 1.00);
    87.     font-size: 12px;
    88.     margin-top: 30px;
    89. }
    90.  
    91. .form-div .buttons {
    92.     float: right;
    93. }
    94.  
    95. input[type="text"], input[type="password"], input[type="email"] {
    96.     border-radius: 8px;
    97.     box-shadow: inset 0 2px 5px #eee;
    98.     padding: 10px;
    99.     border: 1px solid #D4D4D4;
    100.     color: #333333;
    101.     margin-top: 5px;
    102. }
    103.  
    104. input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
    105.     border: 1px solid #50afeb;
    106.     outline: none;
    107. }
    108.  
    109. input[type="button"], input[type="submit"] {
    110.     padding: 7px 15px;
    111.     background-color: #3c6db0;
    112.     text-align: center;
    113.     border-radius: 5px;
    114.     overflow: hidden;
    115.     min-width: 80px;
    116.     border: none;
    117.     color: #FFF;
    118.     box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
    119. }
    120.  
    121. input[type="button"]:hover, input[type="submit"]:hover {
    122.     background-color: #5a88c8;
    123. }
    124.  
    125. input[type="button"]:active, input[type="submit"]:active {
    126.     background-color: #5a88c8;
    127. }
    128. .err_msg{
    129.     color: red;
    130.     padding-right: 170px;
    131. }
    132. #password_err,#tel_err{
    133.     padding-right: 195px;
    134. }
    135.  
    136. #reg_btn{
    137.     margin-right:50px; width: 285px; height: 45px; margin-top:20px;
    138.     font-size: 16px;
    139. }
    140. h1{
    141.     text-align: center;
    142. }

    🔎img.png

    • 随便替换一个自己的图片就行

    🔎login.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>登录title>
    7.     <link href="css/login.css" rel="stylesheet">
    8. head>
    9.  
    10. <body>
    11. <div id="loginDiv">
    12.     <form action="/moming/loginServlet" method="post" id="form">
    13.         <h1 id="loginMsg">登录页面h1>
    14.         <p>账号:<input id="username" name="username" type="text">p>
    15.         <p>密码:<input id="password" name="password" type="password">p>
    16.         <div id="subDiv">
    17.             <input type="submit" class="button" value="登录">
    18.             <a href="register.html">没有账号？点击注册a>
    19.         div>
    20.     form>
    21. div>
    22.  
    23. body>
    24. html>

    🔎register.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>注册title>
    6.     <link href="css/register.css" rel="stylesheet">
    7. head>
    8. <body>
    9. <div class="form-div">
    10.     <div class="reg-content">
    11.         <h1>注册页面h1>
    12.         <span>已有帐号点击:span> <a href="login.html">登录a>
    13.     div>
    14.     <form id="reg-form" action="/moming/registerServlet" method="post">
    15.         <table>
    16.             <tr>
    17.                 <td>账号:td>
    18.                 <td class="inputs">
    19.                     <input name="username" type="text" id="username">
    20.                     <br>
    21.                     <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎span>
    22.                 td>
    23.             tr>
    24.             <tr>
    25.                 <td>密码:td>
    26.                 <td class="inputs">
    27.                     <input name="password" type="password" id="password">
    28.                     <br>
    29.                     <span id="password_err" class="err_msg" style="display: none">密码格式有误span>
    30.                 td>
    31.             tr>
    32.         table>
    33.         <div class="buttons">
    34.             <input value="注 册" type="submit" id="reg_btn">
    35.         div>
    36.         <br class="clear">
    37.     form>
    38. div>
    39. body>
    40. html>

    🎨案例源码

    🔎UserMapper接口

    1. package com.moming.mapper;
    2.  
    3. import com.moming.pojo.User;
    4. import org.apache.ibatis.annotations.Insert;
    5. import org.apache.ibatis.annotations.Param;
    6. import org.apache.ibatis.annotations.Select;
    7.  
    8. import java.util.List;
    9.  
    10. public interface UserMapper {
    11.     //用户登录查询用户
    12.     //@Select("select * from tb_user where username=#{username} and password=#{password}")
    13.     User selectUser(@Param("username") String username, @Param("password") String password);
    14.  
    15.     //数据库添加用户
    16.     //@Insert("insert into tb_user value(null,#{username},#{password}")
    17.      void insertUser(User user);
    18.  
    19.      //根据用户名查询用户
    20.     //@Select("select * from tb_user where username=#{username}")
    21.     User selectUserName(@Param("username") String username);
    22. }

    🔎User实体类

    1. package com.moming.pojo;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @NoArgsConstructor
    9. @AllArgsConstructor
    10. public class User {
    11.     private Integer id;
    12.     private String username;
    13.     private String password;
    14. }

    🔎LoginServlet

    1. package com.moming.web;
    2.  
    3. import cn.hutool.json.ObjectMapper;
    4. import com.moming.mapper.UserMapper;
    5. import com.moming.pojo.User;
    6. import org.apache.ibatis.io.Resources;
    7. import org.apache.ibatis.session.SqlSession;
    8. import org.apache.ibatis.session.SqlSessionFactory;
    9. import org.apache.ibatis.session.SqlSessionFactoryBuilder;
    10.  
    11. import javax.servlet.*;
    12. import javax.servlet.http.*;
    13. import javax.servlet.annotation.*;
    14. import java.io.IOException;
    15. import java.io.InputStream;
    16. import java.util.List;
    17.  
    18. @WebServlet("/loginServlet")
    19. public class LoginServlet extends HttpServlet {
    20.     @Override
    21.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    22.         //1.接收用户信息
    23.         String username = request.getParameter("username");
    24.         String password = request.getParameter("password");
    25.         //2.调用MyBatis完成查询
    26.         //1.加载mybatis的核心配置文件,获取SqlSessionFactory
    27.         //定义配置文件的路径
    28.         String resource = "mybatis-config.xml";
    29.         //资源加载返回字节输入流
    30.         InputStream inputStream = Resources.getResourceAsStream(resource);
    31.         //获取工厂
    32.         SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    33.  
    34.         //2.获取SqlSession对象,用它来执行sql
    35.         SqlSession sqlSession = sqlSessionFactory.openSession();
    36.  
    37.         //3.执行sql
    38.         //参数就是sql语句的唯一标识
    39.         //自动封装结果集
    40.         //3.1使用代理接口,先拿对象,再调方法
    41.         UserMapper mapper = sqlSession.getMapper(UserMapper.class);
    42.         User user = mapper.selectUser(username, password);
    43.  
    44.         //4.释放资源
    45.         sqlSession.close();
    46.         response.setContentType("text/html;charset=utf-8");
    47.         if(user!=null){
    48.             //存在,登录成功
    49.             response.getWriter().print("登录成功");
    50.         }else {
    51.             //不存在,登录失败
    52.             response.getWriter().print("登录失败");
    53.         }
    54.     }
    55.  
    56.     @Override
    57.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    58.         doGet(request, response);
    59.     }
    60. }

    🔎RegisterServlet

    1. package com.moming.web;
    2.  
    3. import com.moming.mapper.UserMapper;
    4. import com.moming.pojo.User;
    5. import org.apache.ibatis.io.Resources;
    6. import org.apache.ibatis.session.SqlSession;
    7. import org.apache.ibatis.session.SqlSessionFactory;
    8. import org.apache.ibatis.session.SqlSessionFactoryBuilder;
    9.  
    10. import javax.servlet.*;
    11. import javax.servlet.http.*;
    12. import javax.servlet.annotation.*;
    13. import java.io.IOException;
    14. import java.io.InputStream;
    15.  
    16. @WebServlet("/registerServlet")
    17. public class RegisterServlet extends HttpServlet {
    18.     @Override
    19.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws  IOException {
    20.         //获取数据
    21.         String username = request.getParameter("username");
    22.         String password = request.getParameter("password");
    23.         //封装数据
    24.         User user = new User();
    25.         user.setUsername(username);
    26.         user.setPassword(password);
    27.         //调用mapper根据用户名查询用户对象
    28.         //1.加载mybatis的核心配置文件,获取SqlSessionFactory
    29.         //定义配置文件的路径
    30.         String resource = "mybatis-config.xml";
    31.         //资源加载返回字节输入流
    32.         InputStream inputStream = Resources.getResourceAsStream(resource);
    33.         //获取工厂
    34.         SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    35.         //2.获取SqlSession对象,用它来执行sql
    36.         SqlSession sqlSession = sqlSessionFactory.openSession();
    37.         //3.执行sql
    38.         //参数就是sql语句的唯一标识
    39.         //自动封装结果集
    40.         //3.1使用代理接口,先拿对象,再调方法
    41.         UserMapper mapper = sqlSession.getMapper(UserMapper.class);
    42.         User user1 = mapper.selectUserName(username);
    43.         //判断用户对象是否为null
    44.         response.setContentType("text/html;charset=utf-8");
    45.         if(user1==null){
    46.             //用户不存在,可以添加新用户
    47.             mapper.insertUser(user);
    48.             response.getWriter().print("用户创建成功");
    49.             //提交事务
    50.             sqlSession.commit();
    51.             //4.释放资源
    52.             sqlSession.close();
    53.         }else {
    54.             //用户名存在,不能添加
    55.             response.getWriter().print("用户名已存在");
    56.         }
    57.     }
    58.  
    59.     @Override
    60.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    61.         doGet(request, response);
    62.     }
    63. }

    🔎UserMapper接口

    1. "1.0" encoding="UTF-8" ?>
    2. mapper
    3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    5. <mapper namespace="com.moming.mapper.UserMapper">
    6.     
    7.     
    8.     
    9.     
    10.     
    11.     
    12.     <select id="selectUser" resultType="User">
    13.         select *
    14.         from tb_user
    15.         where username=#{username} and password=#{password}
    16.     select>
    17.     <insert id="insertUser" >
    18.         insert into tb_user (id,username,password)
    19.         values (null, #{username},#{password});
    20.     insert>
    21.     <select id="selectUserName" resultType="User">
    22.         select *
    23.         from tb_user
    24.         where username=#{username};
    25.     select>
    26.  
    27. mapper>

    💦 总结说明

    此案例比较简单,登录或注册成功及失败后只是在页面同步响应了简单的提示信息,练习的侧重点主要是Servlet、MyBatis的使用,后续会进一步完善其他业务

    🧡另外如果需要整个项目源码的在评论区说明🧡

  • 相关阅读:
    基于人工水母优化的BP神经网络（分类应用） - 附代码
    [ITIL]-ITIL的发展进程
    前端Vue入门-day08-vant组件库
    解决编译中遇到的问题：Please port gnulib freadahead.c to your platform
    【C++】setjmp,longjmp的详细使用说明
    第一章《初学者问题大集合》第1节：我能学会编程吗
    GD32测量pwm波频率以及占空比
    大众点评字体反爬解析
    C# OpenCvSharp 环形文字处理 直角坐标与极坐标转换
    ElementUI的基本使用
  • 原文地址：https://blog.csdn.net/HeyVIrBbox/article/details/126789072