javaWeb-实现简易的登录注册功能

没有梦想的java菜鸟

已于 2023-04-12 09:47:29 修改

阅读量1.3w

点赞数 25

分类专栏： java-web 文章标签： java html mybatis servlet

于 2022-09-27 19:46:40 首次发布

本文链接：https://blog.csdn.net/A_Fierce/article/details/127077068

版权

java-web 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

今天真的是太兴奋了，自己终于可以实现一个Web页面的后端功能，想想自己从大二下开始学习后端，到现在终于差不多摸清后端的一点点套路了。

先来说一下今天要实现的功能吧，非常的简单，就登录功能。

1.实现的功能–登录

这里有一个登录的表单，点击登录之后。
在这里插入图片描述
就会进入到登入成功的界面。

密码不正确

用户不存在

密码不能为空

用户名不能为空

a)首先在数据库上创建对应的用户表

在这里插入图片描述
这里面的字段有userId(序号)、userName(姓名)、userPwd(密码)、userAge(年龄)

b）前台页面

步骤与流程：
1.给登录按钮绑定点击事件
2.获取用户姓名和密码的值
3.判断姓名是否为空
如果姓名为空，提示用户（span标签赋值），并且return
4.判断密码是否为空
如果密码为空，提示用户（span标签赋值），并且return
5.如果都不为空，则手动提交表单
在这里插入图片描述

<%--
  Created by IntelliJ IDEA.
  User: 412的爸爸
  Date: 2022/9/24
  Time: 11:38
  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="loginForm">
            姓名：<input type="text" name="uname" id="uname" value="${messageModel.object.userName}"> <br>
            密码：<input type="password" name="upwd" id="upwd" value="${messageModel.object.userPwd}"> <br>
            <span id="msg" style="font-size: 12px;color: red;">${messageModel.msg}</span>
            <button type="button" id="loginBtn">登录</button>
            <button type="button">注册</button>
        </form>
    </div>
</body>

<%--引入Jquery的js文件--%>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script>
    /**
     用户登录表单验证
     1.给登录按钮绑定点击事件
     2.获取用户姓名和密码的值
     3.判断姓名是否为空
     如果姓名为空，提示用户（span标签赋值），并且return
     4.判断密码是否为空
     如果密码为空，提示用户（span标签赋值），并且return
     5.如果都不为空，则手动提交表单
     **/

    $("#loginBtn").click(function (){
        //获取用户姓名和密码的值
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        //判断姓名是否为空
        if(isEmpty(uname)){
            //如果姓名为空，提示用户（span标签赋值），并且return
            $("#msg").html("用户姓名不可为空");
            return;
        }
        //判断密码是否为空
        if(isEmpty(upwd)){
            //如果密码为空，提示用户（span标签赋值），并且return
            $("#msg").html("密码不可为空");
            return;
        }
        //如果都不为空，则手动提交表单
        $("#loginForm").submit();
                                    });

        function isEmpty(str){
            if(str==null ||str.trim()==""){
                return true;
            }
            return false;
        }
</script>
</html>

c）后台实现

Web项目即成Mybatis

我们进行用户登录的时候，我们肯定是要对数据库进行一个匹配，如果用户名和密码在数据库上存在在，则用户登录成功，否则失败。我们这里使用的是java一个对数据库操作的框架叫《Mybais》。

我们首先来建立我们的User类，也就是根据数据库填写的字段来写我们的User类。

package com.pang.entity;

/**
* User实体类
*/
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;
    }
}

然后就是写我们的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">
<!--首先来解析namespace：命名空间，此属性用来映射Dao（mapper）层接口-->
<mapper namespace="com.pang.mapper.UserMapper" >
  <!--    id：对应Dao层接口方法名 parameterType ：指定输入的参数类型-->
  <!--    -->
  <select id="queryUserByName" parameterType="String" resultType="com.pang.entity.User">
    select *from tb_user where userName= #{userName}
  </select>
</mapper>

UserMapper.java的接口类

package com.pang.mapper;

import com.pang.entity.User;

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

然后就是用Mybatis来连接我们的数据库

db_properties文件，用来储存数据库的一些配置、账号和密码。

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/java-test?useSSL=true&useUnicode=true&characterEncoding=UTF-8
username=root
passwork=123456

下面就是Mybatis配置了，标签下的是给数据库连接的，数据库的driver、url、root、pwd等等，然后就是设置我们的Mappers路径。

<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--configuration核心配置文件-->
<configuration>
  <!--    引入外部配置文件-->
  <properties resource="db.properties"/>
  <!--    可以给实体类起别名-->
  <!--    <typeAliases>-->
  <!--        <typeAlias type="com.kuang.pojo.User" alias="User"/>-->
  <!--    </typeAliases>-->
  <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="${passwork}"/>
      </dataSource>
    </environment>
  </environments>
  <!--    每一个Mapper.XML都需要在mybatis在配置核心文件-->
  <mappers>
    <mapper class="com.pang.mapper.UserMapper"/>
  </mappers>
</configuration>

最后我们还需要进行Mybatis的SqlSession对象进行一些操作，所以我们要进行写Mybatis工具类。

package com.pang.util;

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;

//sqlSessionFactory-->
public class MybatisUntils {

    private static SqlSessionFactory sqlSessionFactory;

    static {

        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory  = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static SqlSession getSqlSession() {
        return sqlSessionFactory.openSession();
    }

    public static void main(String[] args) {
        System.out.println(MybatisUntils.getSqlSession());
    }
}

到这里我们Mybatis就配置完成了。

用户登录实现

登录功能
思路：
1.接收客户端的请求（接收参数：姓名、密码）
2.参数的非空判断
如果参数为空，
通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
将消息模型对象设置到request作用域中
请求转发到登录页面
return
3、通过用户姓名查询用户对象
4、判断用户对象是否为空
如果参数为空，
通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
将消息模型对象设置到request作用域中
请求转发到登录页面
return
5、将数据库中查询到的用户木马与前台传递的密码作比较
如果不相等
通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
将消息模型对象设置到request作用域中
请求转发到登录页面
return
如果相等，表示登录成功
将用户信息设置到session作用域中
重定向跳转到首页
我们这里还需要一个分层，分别是controller层、service层、mapper（dao）层。

controller层

1.接收客户端的请求（接收参数：姓名、密码）
2.调用service层的方法，返回消息模型
3.判断消息模型的状态码
如果状态码失败
将消息模型对象设置到request作用域中，请求转发到login.jsp
如果状态码成功
将消息模型对象设置到session作用域中，重定向到index.jsp

package com.pang.controller;

import com.pang.entity.vo.MessageModel;
import com.pang.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class UserServlet extends HttpServlet {
    //实例化UserService对象
    private UserService userService=new UserService();
    @Override
    public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        //1.接收客户端的请求（接收参数：姓名、密码）
        String uname=req.getParameter("uname");
        String upwd=req.getParameter("upwd");
        //2.调用service层的方法，返回消息模型
        MessageModel messageModel=userService.userLogin(uname,upwd);
       // 3.判断消息模型的状态码
        if(messageModel.getCode()==1) {//成功
            //将消息模型对象设置到session作用域中，重定向到index.jsp
            req.getSession().setAttribute("user",messageModel.getObject());
            res.sendRedirect("index.jsp");
        }else {//失败
            //将消息模型对象设置到request作用域中，请求转发到login.jsp
            req.setAttribute("messageModel",messageModel);
            req.getRequestDispatcher("login.jsp").forward(req,res);
        }
    }
}

service层
1.参数的非空判断
如果参数为空，
通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
2.调用dao层的查询方法，通过用户名查询用户对象
3.判读用户对象是否为空
通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
4.判断数据库中查询到的用户密码与前台传递过来的密码作比较
如果不成功，通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
5.登录成功，成功状态、提示信息、用户对象设置成消息模型对象，并return

package com.pang.service;

import com.pang.entity.User;
import com.pang.entity.vo.MessageModel;
import com.pang.mapper.UserMapper;
import com.pang.util.MybatisUntils;
import com.pang.util.StringUntils;
import org.apache.ibatis.session.SqlSession;

/**
 * 业务逻辑
 */
public class UserService {
    public MessageModel userLogin(String uname,String upwd){
        MessageModel messageModel=new MessageModel();

        //回显数据
        User u= new User();
        u.setUserName(uname);
        u.setUserPwd(upwd);
        messageModel.setObject(u);

        //1.参数的非空判断
            if(StringUntils.isEmpty(uname)||StringUntils.isEmpty(upwd)) {
                //通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
                messageModel.setCode(0);
                messageModel.setMsg("用户姓名和密码不能为空！");
                return messageModel;
            }

        //2.调用dao层的查询方法，通过用户名查询用户对象
        SqlSession session= MybatisUntils.getSqlSession();
        UserMapper userMapper=session.getMapper(UserMapper.class);
        User user=userMapper.queryUserByName(uname);

        //3.判读用户对象是否为空
        if(user ==null){
            //通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
            messageModel.setCode(0);
            messageModel.setMsg("用户不存在！");
            System.out.println(messageModel.getMsg());
            return messageModel;
        }
        // 4.判断数据库中查询到的用户密码与前台传递过来的密码作比较
        if(!upwd.equals(user.getUserPwd())){
            //通过消息模型对象返回结果（设置状态、设置提示信息，回显数据）
            messageModel.setCode(0);
            messageModel.setMsg("用户密码不正确！");
            return messageModel;
        }

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

Mapper层

定义对应的接口
也就是前面配置Mybatis的mapper层。

其他工具类

消息模型对象（数据响应）

package com.pang.entity.vo;

/**
 * 消息模型对象（数据响应）
 *      状态码
 *          1=成功，0=失败
 *      提示信息
 *          字符串
 *      回显数据
 *          object对象
 *
 */
public class MessageModel {
    private Integer code=1;//状态码 （1=成功，0=失败）
    private String msg="成功";//提示信息
    private Object object;//回显对象

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getObject() {
        return object;
    }

    public void setObject(Object object) {
        this.object = object;
    }
}

字符串工具类

package com.pang.util;

/**
 * 字符串工具类
 */
public class StringUntils {
    public static boolean isEmpty(String str){
        if(str==null||"".equals(str.trim())){
            return true;
        }else {
            return false;
        }
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0">
  <servlet>
    <servlet-name>UserServlet</servlet-name>
    <servlet-class> com.pang.controller.UserServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UserServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>
</web-app>