用户登录与注册操作_登录与注册流程:包括外部实体(如:学生、导师、管理员)如何输入数据(例如:用户名、-CSDN博客

本文链接：https://blog.csdn.net/boke00_7/article/details/130545196

1.采用骨架创建项目

2.补全项目结构

3.配置pom.xml文件

需要配置servlet依赖坐标、mybatis依赖坐标、MySQL依赖坐标、tomcat插件（记得放在pluginManagement外面）

4.前端页面

在webapp文件下编写页面代码（css、html）和保存相关图片材料（imgs）

（1）文件结构：

（2）css代码

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url(../imgs/Desert.jpg) no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}

p {
    margin-top: 30px;
    margin-left: 20px;
    color: azure;
}

input {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}
#username{
    width: 200px;
}
#password{
    width: 202px;
}
.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

#subDiv {
    text-align: center;
    margin-top: 30px;
}
#loginMsg{
    text-align: center;color: aliceblue;
}

（3）HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="/web-dome/loginServlet" method="post" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

其中：action里书写路径，表示最终表单提交的数据按照这个路径提交

5.创建数据库及其连接

（1）结构

（2）创建表语句

-- 创建用户表
CREATE TABLE tb_user(
	id int primary key auto_increment,
	username varchar(20) unique,
	password varchar(32)
);

-- 添加数据
INSERT INTO tb_user(username,password) values('小小修士','123123'),('lisi','234');

SELECT * FROM tb_user;

（3）创建User实体类

在java里面创建包，在com.xiulian.pojo包中创建一个User实体类，用来封装声明数据库表属性。

结构：

（4）编写mybatis核心配置文件和建立映射文件与映射接口

结构：

注意：

因为映射文件跟接口要在同一目录下，但是maven的配置文件必须写在resources文件下，所以可以通过在resources创建跟接口一样的目录来达成目标（创建包时中间要用“ / ”，用“ . ”会出错）

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>
    <!--起别名-->
    <typeAliases>
        <package name="com.xiulian.pojo"/>
    </typeAliases>

    <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:///db1?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value=""/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.xiulian.mapper"/>
    </mappers>
</configuration>

映射文件代码：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xiulian.mapper.UserMapper">

</mapper>

映射接口代码：

package com.xiulian.mapper;

import com.xiulian.pojo.User;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

public interface UserMapper {

    /*
     *根据用户名和密码查询用户对象
     * @param username
     * @param password
     * @return
     */
    @Select("select * from tb_user where username = #{username} and password = #{password}")
    User select(@Param("username") String username, @Param("password") String password);
}

6.在web文件下创建一个loginServlet类

1、 loginServlet类的目的是：

（1）接收浏览器的请求数据（用户名和密码）【如果登录界面要输入中文，那么tomcat接收解析的请求数据会乱码，此时应该将解码后的字符转换为字节数据，然后再将字节数据转换成utg-8的字符】；

（2）调用mybatis完成查询，把接收的请求数据作为参数，通过mybatis去完成数据库操作，这个时候会返回一个对象结果。

（3）将（2）返回的结果作为判断依据，有个结果不为空，则登录成功，相反则登录失败（因为我们反馈的相应数据“登录成功”“登录失败”是中文，在HTTP协议中不支持导致乱码，此时我们应该在此之前设置其字符格式并设置响应字符数据输出流的响应头【content type】）

2、 loginServlet类的代码：

package com.xiulian.web;

import com.xiulian.mapper.UserMapper;
import com.xiulian.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;

@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        
        // 1.接收用户名和密码
        // 使用request对象 获取请求数据
        String use = req.getParameter("username");
        String pass = req.getParameter("password");
        // 将URL解码后的【ISO-8859-1】转换为字节数据
        byte[] bytes = use.getBytes("ISO-8859-1");
        byte[] bytes1 = pass.getBytes("ISO-8859-1");
        // 再将字节数组转换为字符串
        String username = new String(bytes, "utf-8");
        String password = new String(bytes1, "utf-8");

        // 2.调用mybatis完成查询
        // 2.1 获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        // 2.2 获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        // 2.3 获取Mapper
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        // 2.4 调用方法
        User user = userMapper.select(username,password);
        // 2.5 释放资源
        sqlSession.close();

        // 3.获取对应的响应字符数据的字符输出流,并设置content type
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        // 4.判断user是否为null
        if(user != null){
            writer.write("登录成功");
        }else{
            writer.write("登录失败");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}