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

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

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

1.实现的功能–登录

这里有一个登录的表单,点击登录之后。
javaWeb-实现简易的登录注册功能_第1张图片
就会进入到登入成功的界面。
javaWeb-实现简易的登录注册功能_第2张图片
密码不正确
javaWeb-实现简易的登录注册功能_第3张图片
用户不存在
javaWeb-实现简易的登录注册功能_第4张图片
密码不能为空
javaWeb-实现简易的登录注册功能_第5张图片
用户名不能为空
javaWeb-实现简易的登录注册功能_第6张图片

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

javaWeb-实现简易的登录注册功能_第7张图片
这里面的字段有userId(序号)、userName(姓名)、userPwd(密码)、userAge(年龄)

b)前台页面

步骤与流程:
1.给登录按钮绑定点击事件
2.获取用户姓名和密码的值
3.判断姓名是否为空
如果姓名为空,提示用户(span标签赋值),并且return
4.判断密码是否为空
如果密码为空,提示用户(span标签赋值),并且return
5.如果都不为空,则手动提交表单
javaWeb-实现简易的登录注册功能_第8张图片

<%--
  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配置




<mapper namespace="com.pang.mapper.UserMapper" >
  
  
  <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路径。




<configuration>
  
  <properties resource="db.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="${passwork}"/>
      dataSource>
    environment>
  environments>
  
  <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


<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>UserServletservlet-name>
    <servlet-class> com.pang.controller.UserServletservlet-class>
  servlet>
  <servlet-mapping>
    <servlet-name>UserServletservlet-name>
    <url-pattern>/loginurl-pattern>
  servlet-mapping>
web-app>

lib包

在这里插入图片描述

类名说明

javaWeb-实现简易的登录注册功能_第9张图片
项目有不懂的地方,qq2947086075。需要可以找我

你可能感兴趣的:(java-web,java,html,mybatis,servlet)