html5登陆注册页面代码 html 登录注册

用户登录

• 一. 用户登录

• 1. 流程与思路

• 基本流程：
• 详细过程：

• 2. 准备环境

• 建库建表
• Pojo实体类User：
• Maven坐标：
• mybatis核心配置文件：
• 代理接口：

• 3. 编写

• 目录：
• HTML：
• Serlvet：

• 4. 效果

• 二. 用户注册

• 1. 基本流程与思路
• 2. 编写

• 代理接口：
• HTML：
• Servlet：

• 3. 效果

一. 用户登录

1. 流程与思路

基本流程：

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

详细过程：

• 浏览器的请求信息通过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代理接口；

建库建表

Pojo实体类User：

Maven坐标：

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"/>
                <!-- 关闭SSL安全协议 -->
                <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目录：

注意mapper代理接口文件和映射文件在同名目录下；sql比较简单，这里直接用注释的方法写；

多条件查询，使用@Param注解参数的方式；

3. 编写

目录：

HTML：

注意在表单的action中输入Servlet的地址！

Serlvet：

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

结果直接在浏览器中显示中文！

4. 效果

二. 用户注册

1. 基本流程与思路

2. 编写

代理接口：

方法1 判断username是否重复；

方法2 添加用户名密码到数据库；

添加用户时，注意这里用的省略添加字段的写法，values() 中需要所有字段，而id是自增的主键，所以填 null 即可！

HTML：

注意action=servlet的访问路径，和method=”post”；

Servlet：

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

由Request对象获取用户名密码，

然后将用户名密码封装到User对象；

MyBatis套路；

注意提交事务；

将封装的user对象传入add方法；

如果返回的为null就添加到数据库，

如果返回的不为null就用Response输出提示；

3. 效果

数据已添加到数据库：