Java入门系列14 -- 用户登录案例实现

2021-12-12 本文已影响0人 YanZi_33

案例用户登录

创建项目LoginProject；
项目的整体思路如下：
- 数据库创建用户表；
- 前台页面：包括登录页面，首页；
- 后台实现：登录的逻辑处理；
这里关于数据库的相关操作需要安装Navicat Premium工具软件，去这里下载，密码为：yu9e；
首先我们来创建数据库用户表tb_user，数据库使用MySQL，至于MySQL的安装与配置，见Mac上MySQL的安装与配置
打开Navicat Premium，点击左上角的连接，选择MySQL，弹框如下所示：

image.png

输入密码，然后点击高级，作如下配置；

image.png

点击SSL，作如下配置；

image.png

最后连接创建成功，如下所示：

image.png

然后选中连接localhost_3306，右击选择新建数据库，数据库命名为java_test，弹框如下：

image.png

打开数据库java_test 折叠选项，选中表，然后点击右侧的新建表，细节如下：

image.png

点击上面的保存按钮，弹框给表取名为tb_user；
然后双击表tb_user，往表中添加记录，如下所示：

image.png

点击查询，点击新增查询，如下所示：

image.png

创建登录页面，新建login.jsp文件，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<body>
    <div style="text-align: center">
        <form action="/login" method="post" id="loginFrom">
            姓名: <input type="text" name="name"> <br>
            密码: <input type="password" name="password"> <br>
            <span id="msg" style="font-size: 12px;color: red"></span> <br>
            <button type="button">登录</button>
            <button type="button">注册</button>
        </form>
    </div>
</body>
</html>

加入前台登录页面的JS校验，这里引入JQuery库，去官方网站下载最新的JQuery库，如下所示：

image.png

然后将下载的jquery-3.6.0.min.js文件，导入IDEA中，拷贝到在/web/js目录下，然后在login.jsp文件中，引入jquery-3.6.0.min.js，如下所示：

image.png

现在我们就可以写JS代码了，进行前台的相关校验，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<body>
    <div style="text-align: center">
        <form action="/login" method="post" id="loginFrom">
            姓名: <input type="text" name="name" id="name"> <br>
            密码: <input type="password" name="password" id="password"> <br>
            <span id="msg" style="font-size: 12px;color: red"></span> <br>
            <button type="button" id="loginBtn">登录</button>
            <button type="button">注册</button>
        </form>
    </div>
</body>

<!-- 引入JQuery文件 -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    $("#loginBtn").click(function () {
        var name = $("#name").val();
        var password = $("#password").val();
        if (isEmpty(name)) {
            $("#msg").html("用户姓名不可为空!")
            return;
        }
        if (isEmpty(password)) {
            $("#msg").html("用户密码不可为空!")
            return;
        }
        //提交表单
        $("#loginFrom").submit();
    })

    //判断字符串是否为空
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }
</script>
</html>

在项目中集成Mybatis，需要引入mybatis-xxx.jar与mysql-connector-java-xxx.jar这两个jar包；
首先去mybatis网站下载最新版本的jar包，如下所示：

image.png

然后去mysql-connector社区下载对应版本的jar包，如下所示：

Snip20211213_7.png

最后在IDEA中引入这两个jar包，新建目录/web/WEB-INF/lib，将这两个jar包拷贝到新建目录下，如下所示：

image.png

然后进入File->Project Structure，作如下配置：

image.png

创建关于mysql数据驱动的配置文件mysql.properties，内容如下：

driver=com.mysql.cj.jdbc.Driver
url= jdbc:mysql://127.0.0.1:3306/java_test?serverTimezone=UTC&useSSL=false&characterEncoding=UTF-8
username=root
password=asd123

创建mybatis的配置文件mybatis-config.xml文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <properties resource="mysql.properties" />
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">

                <property name="driver" value="${driver}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>

            </dataSource>
        </environment>
    </environments>

    <mappers>
        <package name="com.sf.mapper"/>
    </mappers>
</configuration>

我们的最终目标是连接访问到本地数据库java_test中的t_user表，目前表中的数据如下：

image.png

我们为表中的数据创建Java bean对象User，代码如下：

package com.sf.bean;

/**
 * 用户实体模型类
 */
public class User {
    private Integer userId;
    private String userName;
    private String userPwd;
    private Integer userAge;

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserPwd() {
        return userPwd;
    }

    public void setUserPwd(String userPwd) {
        this.userPwd = userPwd;
    }

    public Integer getUserAge() {
        return userAge;
    }

    public void setUserAge(Integer userAge) {
        this.userAge = userAge;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", userName='" + userName + '\'' +
                ", userPwd='" + userPwd + '\'' +
                ", userAge=" + userAge +
                '}';
    }
}

使用Mybatis连接数据库，必须要创建一个xml文件，即创建UserMapper.xml，内容如下：

<?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.sf.mapper.UserMapper">

    <select id="queryUserByName" parameterType="String" resultType="com.sf.bean.User">
        select * from t_user where userName = #{userName}
    </select>

</mapper>

创建接口类UserMapper，用来定义操作表t_user的sql语句，内容如下：

package com.sf.mapper;

import com.sf.bean.User;

/**
 * 用户接口类
 */
public interface UserMapper {
    public User queryUserByName(String userName);
}

提供一个工具类GetSqlSession，用来获取sql会话的，内容如下：

package com.sf.utils;

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 java.io.IOException;
import java.io.InputStream;

public class GetSqlSession {

    public static SqlSession createSqlSession() {

        SqlSessionFactory sqlSessionFactory = null;
        InputStream input = null;
        SqlSession sqlSession = null;

        String resource = "mybatis-config.xml";
        try {
            input = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(input);
            sqlSession = sqlSessionFactory.openSession();
            return sqlSession;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
    //测试
    public static void main(String[] args) {
        System.out.println(createSqlSession());
    }
}

至此所有的准备工作完成，新建一个测试类Test，代码如下：

package com.sf.test;

import com.sf.bean.User;
import com.sf.mapper.UserMapper;
import com.sf.utils.GetSqlSession;
import org.apache.ibatis.session.SqlSession;

public class Test {
    public static void main(String[] args) {
        SqlSession session = GetSqlSession.createSqlSession();
        UserMapper userMapper = session.getMapper(UserMapper.class);
        User user = userMapper.queryUserByName("lisi");
        System.out.println(user);
    }
}

然后运行Test类中Main方法，控制台打印如下：

image.png

说明，现在我们可以通过Mybatis来操作数据库了；
现在我们来实现服务器的登录逻辑，主要分为Controller层，Service层与Dao层三层架构模式；
Controller层，创建UserServlet文件，代码如下：

package com.sf.controller;

import com.sf.bean.vo.MessageModel;
import com.sf.service.UserService;

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;

@WebServlet("/login")
public class UserServlet extends HttpServlet {
    //实例化UserService对象
    private UserService userService = new UserService();

    /**
     * 用户登录
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.接收客户端请求参数
        String name = req.getParameter("name");
        String password = req.getParameter("password");
        //2.调用service层的方法，返回消息模型对象
        MessageModel messageModel = userService.userLogin(name,password);
        //3.判断消息模型的状态码
        if (messageModel.getCode() == 1) {
            //将消息模型设置到session作用域中，重定向到首页index.jsp
            req.getSession().setAttribute("user",messageModel.getObject());
            resp.sendRedirect("index.jsp");
        } else {
            //将消息模型设置到request作用域中，请求转发到login.jsp
            req.setAttribute("messageModel",messageModel);
            req.getRequestDispatcher("login.jsp").forward(req,resp);
        }
    }
}

Service层，主要用来处理业务逻辑的，创建UserService文件，内容如下：

package com.sf.service;

import com.sf.bean.User;
import com.sf.bean.vo.MessageModel;
import com.sf.mapper.UserMapper;
import com.sf.utils.GetSqlSession;
import com.sf.utils.StringUtil;
import org.apache.ibatis.session.SqlSession;

/**
 * 业务逻辑
 */
public class UserService {
    public MessageModel userLogin(String name,String password) {
        //消息模型对象
        MessageModel messageModel = new MessageModel();
        //回显数据
        User user = new User();
        user.setUserName(name);
        user.setUserPwd(password);
        messageModel.setObject(user);

        //1.参数的非空判断
        if (StringUtil.isEmpty(name) || StringUtil.isEmpty(password)) {
            //状态码，提示信息，回显数据 设置到消息模型对象中
            messageModel.setCode(0);
            messageModel.setMsg("用户名和密码不能为空!!!");
            return messageModel;
        }

        //2.调用Dao层的查询方法，通过用户名查询用户对象
        SqlSession session = GetSqlSession.createSqlSession();
        UserMapper userMapper = session.getMapper(UserMapper.class);
        User user_dao= userMapper.queryUserByName(name);

        //3.判断用户对象是否为空
        if (user_dao == null) {
            messageModel.setCode(0);
            messageModel.setMsg("用户不存在!!!");
            return messageModel;
        }

        //4.判断数据库中查询到的用户密码与前台传递过来的密码是否相等
        if (!password.equals(user_dao.getUserPwd())) {
            messageModel.setCode(0);
            messageModel.setMsg("用户密码不正确");
            return messageModel;
        }

        //5.登录成功，将用户信息设置到消息模型中
        messageModel.setObject(user_dao);

        return messageModel;
    }
}

Dao层，主要操作数据库获取来源数据的，创建UserMapper与UserMapper.xml文件，UserMapper内容如下：

package com.sf.mapper;

import com.sf.bean.User;

/**
 * 用户接口类
 */
public interface UserMapper {
    //通过用户姓名 查询数据库
    public User queryUserByName(String userName);
}

UserMapper.xml文件内容如下：

<?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.sf.mapper.UserMapper">

    <select id="queryUserByName" parameterType="String" resultType="com.sf.bean.User">
        select * from t_user where userName = #{userName}
    </select>

</mapper>

login.jsp登录页面，改造后的代码入下：

<%--
  Created by IntelliJ IDEA.
  User: liyanyan33
  Date: 2021/12/13
  Time: 上午9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<body>
    <div style="text-align: center">
        <form action="login" method="post" id="loginFrom">
            姓名: <input type="text" name="name" id="name" value="${messageModel.object.userName}"> <br>
            密码: <input type="password" name="password" id="password" value="${messageModel.object.userPwd}"> <br>
            <span id="msg" style="font-size: 12px;color: red">${messageModel.msg}</span> <br>
            <button type="button" id="loginBtn">登录</button>
            <button type="button">注册</button>
        </form>
    </div>
</body>

<!-- 引入JQuery文件 -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    $("#loginBtn").click(function () {
        var name = $("#name").val();
        var password = $("#password").val();
        if (isEmpty(name)) {
            $("#msg").html("用户姓名不可为空!")
            return;
        }
        if (isEmpty(password)) {
            $("#msg").html("用户密码不可为空!")
            return;
        }
        //提交表单
        $("#loginFrom").submit();
    })

    //判断字符串是否为空
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }
</script>
</html>

运行项目，然后启动浏览器，输入http://localhost:8080/LoginProject_war_exploded/login.jsp，运行结果如下：
image.png
输入账号登录账号密码，执行登录，首先进入前台的JS校验 -> controller层 -> service层 -> dao层 -> 结果返回，整个流程就打通了！

Java入门系列14 -- 用户登录案例实现

案例用户登录

猜你喜欢

热点阅读