手把手教你实现前后台交互登录案例

198 阅读6分钟

初学者对于前后台是怎样实现交互的,刚开始感觉很迷茫,那么看了这篇文章,你就有所启发了,是不是要感谢作者呢???那么咱们就直接开始吧!!!

首先,要实现前后端交互,那么就从最基本的开始吧!

一定要理清思路

    1、设计数据库
    2、编写前端登录页面
    3、编写实体类
    4、创建对数据库操作的dao层
    5、定义连接数据库的配置文件,并编写功能为使用连接池连接数据库,封装为JDBCUtils的工具类
    6、检查并测试操作数据库是否成功(可有可无)
    7、编写核心控制器
    8、测试运行

具体目录如下:

驱动jar包如下:

1、首先创建一张用于登录的数据表

user表

2、简单编写前端登录页面

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
</head>
<body>
    <form action="/login/loginServlet" method="get">
        用户名 <input type="text" name="username" placeholder="请输入用户名"><br>
        密码 <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="登陆">
    </form>
</body>
</html>

3、编写实体类

UserDao.java

package com.baoji.entity;

public class User {
    private int id;
    private String username;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

4、创建对数据库操作的dao层

UserDao.java

package com.baoji.dao;

import com.baoji.entity.User;
import com.baoji.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

/**
 *操作数据库user表的类
 */
public class UserDao {
    //定义JdbcTemplate对象,将得到的资源交给数据库操作对象
    private JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource());
    /**
     *登陆方法
     * @param loginUser 用户的用户名和密码
     * @return 用户的所有信息
     */
    public User login(User loginUser){
        try {
            //1、编写sql
            String sql = "select * from user where username = ? and password = ?";
            //调用queryForObject方法
            User user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<>(User.class),
                    loginUser.getUsername(), loginUser.getPassword());
            return user;
        } catch (DataAccessException e) {
//            e.printStackTrace();
                return null;
        }
    }
}

5、定义连接数据库的配置文件,编写功能为使用连接池连接数据库,封装为JDBCUtils的工具类,本文使用druid连接池和基于spring对原始jdbc封装的JDBCTemplate对象操作数据库,使用类加载器获取配置文件

druid.properties配置文件

JDBCUtils.java

package com.baoji.util;


import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

public class JDBCUtils {
    //定义数据源变量
    private static DataSource ds;

    static{
        try {
            //1、加载配置文件
            Properties properties = new Properties();
            //使用ClassLoade加载,获取字节码输入流
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            //加载数据源
            properties.load(is);
            //2、使用工厂初始化连接池对象
            try {
                ds = DruidDataSourceFactory.createDataSource(properties);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    /**
     * 获取连接池对象
     */
    public static DataSource getDataSource(){
        return ds;
    }

    /**
     * 获取连接Connection对象
     */
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }
}

6、检查并测试操作数据库是否成功(可有可无)

package com.baoji.test;

import com.baoji.dao.UserDao;
import com.baoji.entity.User;
import org.junit.Test;

public class UserDaoTest {
    @Test
    public void test(){
        User loginUser = new User();
        loginUser.setUsername("admin");
        loginUser.setPassword("123");
        UserDao userDao = new UserDao();
        User user = userDao.login(loginUser);
        System.out.println(user);
    }
}

7、前面六步都已经执行成功时,说明操作数据库已经完成,下来开始编写核心控制器。实现和前端页面胡交互过程(非常重要)

下面先来看看具体实现的流程

package com.baoji.web;

import com.baoji.dao.UserDao;
import com.baoji.entity.User;
import org.apache.commons.beanutils.BeanUtils;

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.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、设置编码
        req.setCharacterEncoding("utf-8");
        //2、获取username和password请求参数
//        String username = req.getParameter("username");
//        String password = req.getParameter("password");
        //知识延申:
        // 2.1获取所有请求对象
        Map<String, String[]> map = req.getParameterMap();
        //3、将username和password的值封装在user对象中
//        User loginUser = new User();
//        loginUser.setUsername(username);
//        loginUser.setPassword(password);
        //延伸:
        //3.1创建user对象
        User loginUser = new User();
        //3.2使用BeanUtils工具类将map封装在user中(需要导入commons-beanutils-1.8.0.jar包)
        try {
            BeanUtils.populate(loginUser,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //4、调用Userdao的login方法查询,获取返回值为User对象
        UserDao userDao = new UserDao();
        User user = userDao.login(loginUser);
        //5、判断user是否为空,若是,跳转错误页面,若不是,跳转成功页面
        if(user == null){
            //登陆失败
            //请求转发到错误页面
            req.getRequestDispatcher("/failServlet").forward(req,resp);
        }else{
            //登陆成功
            //存储数据
            req.setAttribute("user",user);
            //请求转发到成功页面
            req.getRequestDispatcher("/successServlet").forward(req,resp);
        }
    }

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

延伸内容:为了一步获取所有请求参数,我们常常将请求参数封装在map集合中。

Map<String, String[]> map = req.getParameterMap();

接下来我们将集合中的请求参数,使用BeanUtils工具类将map封装在user对象中

 //延伸:
        //3.1创建user对象
        User loginUser = new User();
        //3.2使用BeanUtils工具类将map封装在user中(需要导入commons-beanutils-1.8.0.jar包)
        try {
            BeanUtils.populate(loginUser,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

成功页面
SucessServlet.java

package com.baoji.web;

import com.baoji.entity.User;

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("/successServlet")
public class SuccessServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取request域中共享的user对象
        User user = (User) req.getAttribute("user");
        if(user != null) {
            //设置编码
            resp.setContentType("text/html;charset=utf-8");
            //输出
            resp.getWriter().write("登陆成功!" + user.getUsername() + ",欢迎您");
        }
    }

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

错误页面
FailServlet.java

package com.baoji.web;

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("/failServlet")
public class FailServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        resp.setContentType("text/html;charset=utf-8");
        //输出错误信息
        resp.getWriter().write("登陆失败,用户名或密码错误");
    }

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

下面我们来介绍下BeanUtils工具类吧!!!

BeanUtils工具类,简化数据封装
			* 用于封装JavaBean的
			1. JavaBean:标准的Java类
				1. 要求:
					1. 类必须被public修饰
					2. 必须提供空参的构造器
					3. 成员变量必须使用private修饰
					4. 提供公共setter和getter方法
				2. 功能:封装数据


			2. 概念:
				成员变量:
				属性:setter和getter方法截取后的产物
					例如:getUsername() --> Username--> username


			3. 方法:
				1. setProperty()
				2. getProperty()
				3. populate(Object obj , Map map):将map集合的键值对信息,封装到对应的JavaBean对象中

据听说现在很多老手还分不清成员变量和属性到底一样不???你知道吗???

成员变量:在类内属性外用修饰符定义的变量称为成员变量

属性:在get或者set方法名去掉get或set后,把剩余的部分首字母改为小写后,即为这个类的属性。

虽然这个案例就简单的实现了前后端的登录,里面的业务逻辑不太复杂,但这篇文章是带领读者刚开始前后端交互的案例,主要讲究思路,以后的大型项目基本流程类似。整理思路最重要。望读者更加努力。


写在最后 推荐自己的Github地址:github.com/Lmobject

欢迎读者前来访问,您的点赞与留言是对作者最大的支持与鼓励。谢谢!