用户登录、注册的简单案例： html+css+MyBatis+Servlet

桃扇骨 2024-03-29 15:42 72阅读 0赞

#### 用户登录 ####

*  一. 用户登录
 *   *  1. 流程与思路
     *   *  基本流程：
         *  详细过程：
     *  2. 准备环境
     *   *  建库建表
         *  Pojo实体类User：
         *  Maven坐标：
         *  mybatis核心配置文件：
         *  代理接口：
     *  3. 编写
     *   *  目录：
         *  HTML：
         *  Serlvet：
     *  4. 效果
 *  二. 用户注册
 *   *  1. 基本流程与思路
     *  2. 编写
     *   *  代理接口：
         *  HTML：
         *  Servlet：
     *  3. 效果

## 一. 用户登录 ##

### 1. 流程与思路 ###

#### 基本流程： ####

1.  用户填写用户名密码，提交到Servlet
2.  在Servlet使用MyBatis查询数据库，验证用户名密码
3.  如果正确，响应”登录成功“，反之响应”登录失败“

![在这里插入图片描述][4e2632eedaf5403f882e560aa0a04ae5.png]

#### 详细过程： ####

*  浏览器的请求信息通过HTML中的表单（表单的action有servlet地址）以HTTP请求报文的形式提交到**Tomcat**服务器；
 *  由**Tomcat**解析HTTP请求报文，而后交给Servlet中的**Request对象**，（一般使用POST方式将用户名密码放在请求体中）；
 *  提取Request对象中的用户名密码信息；
 *  通过MyBatis查询数据库并返回user对象，判断User对象是否为null，不是则成功反之失败；
 *  查询结果通过Response对象输出响应数据；
 *  数据通过Tomcat拼接并返回给浏览器；

### 2. 准备环境 ###

1.  将前端静态页面（html、css、js）拷贝到webapp目录；
2.  创建数据库，建表，在MyBatis创建User实体类（src-main-java-com.abc-User）；
3.  在Maven中导入MyBatis和数据库Driver的坐标；
4.  创建Mybatis的核心配置文件 mybatis-config.xml, UserMapper.xml映射文件，UserMapper代理接口；

#### 建库建表 ####

![在这里插入图片描述][fe7e7c275b8143de83b4c6975b7fc1b4.png]

#### Pojo实体类User： ####

![在这里插入图片描述][78bba0302b29475ab6c1f2423134fb94.png]

#### Maven坐标： ####

![在这里插入图片描述][6492206d6d6c4782b709b9906f1c36ba.png]

#### mybatis核心配置文件： ####

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE configuration
            PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-config.dtd">
    <configuration>
        <environments default="development">
            <environment id="development">
                <transactionManager type="JDBC"/>
                <dataSource type="POOLED">
                    
                    <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                    
                    <property name="url" value="jdbc:mysql://localhost/bjpowernode?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8&useSSL=false"/>
                    <property name="username" value="root"/>
                    <property name="password" value="123456"/>
                </dataSource>
            </environment>

**注意**： &后面的amp; 是转义字符；

#### 代理接口： ####

创建src-main-java-com.abc-mapper目录：  
![在这里插入图片描述][4213bf3a6d3e459db55044d2e1d66d36.png]  
注意mapper代理接口文件和映射文件在同名目录下；

sql比较简单，这里直接用注释的方法写；  
多条件查询，使用`@Param`注解参数的方式；  
![在这里插入图片描述][cf0873eb55c34641add7a2c45a6f5a46.png]

### 3. 编写 ###

#### 目录： ####

![在这里插入图片描述][3bda649f72b04cdcb114e266dc7d5d0c.png]

#### HTML： ####

注意在表单的`action`中输入Servlet的地址！  
![在这里插入图片描述][a8d81cc1a60c47a0bb846b6bbb800bb3.png]

#### Serlvet： ####

用Request对象获取接收到的用户名密码；  
在doGet中查询mybatis，返回查询结果user，不为null则正确，反之错误；  
用Response返回字符数据，先设置setContentType()避免中文乱码吗，然后获取字符输出流writer，最后write输出信息；

![在这里插入图片描述][75cd5581ae2c4becabb75a98e1258ac5.png]  
![在这里插入图片描述][ca16118274ab4f0ea1e61a473432d089.png]  
结果直接在浏览器中显示中文！

### 4. 效果 ###

![在这里插入图片描述][55bda87ee15d433c8f77e773ba7bba1a.png]

![在这里插入图片描述][5bf68dcbff8f4d31a27e544c1d75ed4a.png]

## 二. 用户注册 ##

### 1. 基本流程与思路 ###

![在这里插入图片描述][fdad0e83a24542e59bc7a60b3a48bdae.png]

![在这里插入图片描述][c07a7f29620b49999809ffa145d6e292.png]

### 2. 编写 ###

#### 代理接口： ####

方法1 判断username是否重复；  
方法2 添加用户名密码到数据库；  
![在这里插入图片描述][28bc5bbffa954e8894c86b7faf1cfdef.png]  
添加用户时，注意这里用的省略添加字段的写法，`values()` 中需要所有字段，而id是自增的主键，所以填 **null** 即可！

#### HTML： ####

注意action=servlet的访问路径，和method=”post”；  
![在这里插入图片描述][34c8bfbc7c9b451c8a3c7c7f7d837fc8.png]

#### Servlet： ####

**注意：**  
1.**MyBastis在进行添加操作时，接口中抽象方法add的参数是 `POJO类` ，需要将要添加的信息封装到POJO类中！**  
2.DML语句提交事务！ `sqlSession.commit()`

由Request对象获取用户名密码，  
然后将用户名密码封装到User对象；  
![在这里插入图片描述][4ad85a2777224cab8035c3cb0113e710.png]

MyBatis套路；  
![在这里插入图片描述][447dd75055434016b451626f8f3bd7c7.png]  
注意提交事务；  
将封装的user对象传入add方法；  
![在这里插入图片描述][03bb7fa2adab44fc8e7e3b10fbc10635.png]  
如果返回的为null就添加到数据库，  
如果返回的不为null就用Response输出提示；

### 3. 效果 ###

![在这里插入图片描述][882f3c16925545c997b1ded30b065a8c.png]

数据已添加到数据库：  
![在这里插入图片描述][6d0056e4366a48bb8407cd88b5072be6.png]

[4e2632eedaf5403f882e560aa0a04ae5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/19961929571941cfa2d6a506059e42c5.png
[fe7e7c275b8143de83b4c6975b7fc1b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/9a1d8404cf7f4506b83f42a70c3689ff.png
[78bba0302b29475ab6c1f2423134fb94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/990f8b7d0f1a42a5b5ae1ff7198a49a2.png
[6492206d6d6c4782b709b9906f1c36ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/c4bddf501adc46a5adf056a6b3023133.png
[4213bf3a6d3e459db55044d2e1d66d36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/fc938e139212434e91d54896992fd2bd.png
[cf0873eb55c34641add7a2c45a6f5a46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/21a4666d32bb4a9184b6a9e702ea0f9a.png
[3bda649f72b04cdcb114e266dc7d5d0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/eb53cdee49e74683bb3503f7285666db.png
[a8d81cc1a60c47a0bb846b6bbb800bb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/8f50921bc90243fa8f504271486a5c84.png
[75cd5581ae2c4becabb75a98e1258ac5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/15e2d355571546a08ea979e3f0b94221.png
[ca16118274ab4f0ea1e61a473432d089.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/48d63514bf67460d93c59710c7674ab6.png
[55bda87ee15d433c8f77e773ba7bba1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/7bf9405c918f48608cc2837596a5b316.png
[5bf68dcbff8f4d31a27e544c1d75ed4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/d25a1f0cf796471dbf0530025c56603d.png
[fdad0e83a24542e59bc7a60b3a48bdae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2e17f553a9d747b69242f04a17fdadef.png
[c07a7f29620b49999809ffa145d6e292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/4ad36db859bb4d3d805ab92b11c72483.png
[28bc5bbffa954e8894c86b7faf1cfdef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2cc3770a8f064454a0670ee964441d86.png
[34c8bfbc7c9b451c8a3c7c7f7d837fc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/36be3012e4cc4b7cb3dda787b001a569.png
[4ad85a2777224cab8035c3cb0113e710.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/938e7868858d4feb97edf39c5814d9d1.png
[447dd75055434016b451626f8f3bd7c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/8cb74b0a9fc54771be7bad279dc9956c.png
[03bb7fa2adab44fc8e7e3b10fbc10635.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/9640f9a4926f4ddabbd3f56062c3b9de.png
[882f3c16925545c997b1ded30b065a8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/503b9dbaf4764adc91e0d283ec60b319.png
[6d0056e4366a48bb8407cd88b5072be6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/35ad4b09ff3f414296e740961145df26.png