spring整合JDBC 实现拦截器用户的登录和注册的案例源代码及解析

最新推荐文章于 2024-04-30 07:45:00 发布

置顶加油，进大厂！！！

最新推荐文章于 2024-04-30 07:45:00 发布

阅读量1k

点赞数

分类专栏： spring javaWeb servlet 文章标签： javabean java spring

本文链接：https://blog.csdn.net/weixin_43311650/article/details/104719980

版权

spring 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

javaWeb

11 篇文章 0 订阅

订阅专栏

servlet

6 篇文章 0 订阅

订阅专栏

前言：为了大家学习的方便，我自己完成了一个登录注册的小案例供大家参考，如有疑问？请私信博主，小主辛苦总结，望大家转载请标明出处。

**项目介绍：**本项目使用的是spring整合jdbc实现用户的登录和注册，带前端页面以及验证码的功能实现登录使用maven管理jar包，使用mysql数据库，验证码使用的是拖动滑块实现的当前比较流行的验证码实现方式，在登录页面会显示当前访问页面的事件显示，当用户没有登录时登录界面会显示请先登录的提示，用户名和密码输错会进行提示的功能，前端页面使用的当前流行的前端框架Bootstrap框架实现的。
项目完成后最终界面如图：
在这里插入图片描述
点击登录后出现验证码如图(验证码使用的是当下流行的验证码拖动滑块)：

登陆成功如图显示：

登录失败如图显示：

项目准备：
一：代码结构如图

二：maven管理jar导入下面的依赖如下：

      <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
             <version>2.3.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
        <dependency>
            <groupId>javax.servlet.jsp.jstl</groupId>
            <artifactId>jstl</artifactId>
             <version>1.2</version>
        </dependency>
        <!--ioc01-core-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--ioc01-bean-->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--ioc01-context-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--ioc01-expression-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-expression</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--Aop依赖-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
       
        <!--cglib技术-->
        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
        </dependency>
        <!--spring-web-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--spring整合jdbc-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
             <version>5.1.5.RELEASE</version>
        </dependency>
        <!--spring连接mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
             <version>5.1.37</version>
        </dependency>
        <!--DataSource数据源-->
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
             <version>1.4</version>
        </dependency>
        <!--DataSource数据源 c3p0-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
             <version>1.1.10</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
             <version>1.2.12</version>
        </dependency>

三：使用到的表代码sql:
1：首先创建spring的数据库

 create database spring;

2:在spring数据库下创建user表

/*
Navicat MySQL Data Transfer

Source Server         : mysql
Source Server Version : 50727
Source Host           : localhost:3306
Source Database       : spring

Target Server Type    : MYSQL
Target Server Version : 50727
File Encoding         : 65001

Date: 2020-03-07 19:33:21
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=36 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'admin', 'admin');
INSERT INTO `user` VALUES ('22', 'root', 'root');

三：在resources目录下创建数据库连接信息文件jdbc.properties文件：

jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/spring?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456

四：在resources目录下创建日志文件log4j.properties文件：

# Set root category priority to INFO and its only appender to CONSOLE.
#log4j.rootCategory=INFO, CONSOLE            debug   info   warn error fatal
log4j.rootCategory=debug, CONSOLE, LOGFILE

# Set the enterprise logger category to FATAL and its only appender to CONSOLE.
log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE

# CONSOLE is set to be a ConsoleAppender using a PatternLayout.
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n

# LOGFILE is set to be a File appender using a PatternLayout.
log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=d:\\springjdbc日志\\mybatis黑马.log
log4j.appender.LOGFILE.Append=true
log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n

五：在resources目录下spring.xml文件文件：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx https://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">

    <!--扫包-->
    <context:component-scan base-package="com.mybatis.dao.impl"/>
    <context:component-scan base-package="com.mybatis.service.impl"/>

    <!--ioc容器工具类-->
    <bean class="com.mybatis.util.SpringBeanUtil"/>

    <!--读取属性文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--配置DataSource spring提供的默认数据源没有连接池效率低-->
    <bean id="dataSource1" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
    <!--dbcp连接池-->
    <bean id="dataSource2" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
   <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
       <property name="driverClassName" value="${jdbc.driverClassName}"/>
       <property name="url" value="${jdbc.url}"/>
       <property name="username" value="${jdbc.username}"/>
       <property name="password" value="${jdbc.password}"/>
   </bean>
    <!--配置jdbcTemplate-->
    <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!--配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!--方式二基于注解-->
    <!--配置注解驱动-->
    <tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

开始创建项目：

**一：在entity包下创建实体类User，代码如下：**

package com.mybatis.entity;

/**
 * package_name:com.mybatis.entity
 *
 * @author:徐亚远 Date:2020/2/21 15:30
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/

public class User {
    private Integer id;

    public Integer getId() {
        return id;
    }

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

    private String username;
    private String password;


    public User() {
    }

    public User(Integer id, String username, String password) {

        this.id = id;
        this.username = username;
        this.password = password;
    }

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

    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;
    }
}

**在vo包下创建实体类UserVO，代码如下：**

package com.mybatis.vo;

/**
 * package_name:com.mybatis.vo
 *
 * @author:徐亚远 Date:2020/2/22 17:13
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/

public class UserVo {
    private String username;
    private String password;
    private String driving;

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

    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;
    }

    public String getDriving() {
        return driving;
    }

    public void setDriving(String driving) {
        this.driving = driving;
    }

    public UserVo() {

    }

    public UserVo(String username, String password, String driving) {

        this.username = username;
        this.password = password;
        this.driving = driving;
    }
}

****二：在dao包下创建接口UserDao，代码如下：****

package com.mybatis.dao;

import com.mybatis.entity.User;

/**
 * package_name:com.mybatis.dao
 *
 * @author:徐亚远 Date:2020/2/21 15:28
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/
public interface UserDao {
    User login(String username, String password);

    Integer insert(User user);
}

三：在dao报下创建名为impl的包（如不明白结构如图)，在impl包下创建UserDaoImpl类和UserMapper类，代码如下：
在这里插入图片描述
UserDaoImpl类如下：

package com.mybatis.dao.impl;

import com.mybatis.dao.UserDao;
import com.mybatis.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.PreparedStatementCreator;
import org.springframework.jdbc.support.GeneratedKeyHolder;
import org.springframework.jdbc.support.KeyHolder;
import org.springframework.stereotype.Repository;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.List;

/**
 * package_name:com.mybatis.dao.impl
 *
 * @author:徐亚远 Date:2020/2/21 15:28
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/
@Repository("userDao")
public class UserDaoImpl implements UserDao {
    @Autowired
    private JdbcTemplate jdbcTemplate;
    @Override
    public User login(String username, String password) {
         String sql = "select id,username,password from user where username=?";
        List<User> users = jdbcTemplate.query(sql, new Object[]{username},new UserMapper());
        if (users !=null && users.size()>0){
            return users.get(0);
        }
        return null;
    }

    @Override
    public Integer insert(final User user) {
        KeyHolder keyHolder = new GeneratedKeyHolder();
       jdbcTemplate.update(new PreparedStatementCreator() {
           @Override
           public PreparedStatement createPreparedStatement(Connection connection) throws SQLException {
               String sql = "insert into user(username,password)values(?,?)";
               PreparedStatement ps = connection.prepareStatement(sql,PreparedStatement.RETURN_GENERATED_KEYS );
               ps.setString(1,user.getUsername() );
               ps.setString(2,user.getPassword() );
               return ps;
           }
       }, keyHolder);
        return keyHolder.getKey().intValue();
    }
}

UserMapper类代码如下：

package com.mybatis.dao.impl;

import com.mybatis.entity.User;
import org.springframework.jdbc.core.RowMapper;

import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * package_name:com.mybatis.dao.impl
 *
 * @author:徐亚远 Date:2020/2/22 15:41
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/

public class UserMapper implements RowMapper {
    @Override
    public Object mapRow(ResultSet resultSet, int i) throws SQLException {
        return new User(resultSet.getInt("id"),resultSet.getString("username"),resultSet.getString("password"));
    }
}

四：在service包下创建UserService接口代码如下：

package com.mybatis.service;

import com.mybatis.entity.User;
import com.mybatis.vo.UserVo;

/**
 * package_name:com.mybatis.service
 *
 * @author:徐亚远 Date:2020/2/21 15:27
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/
public interface UserService {

    User login(String username,String password);

    void regist(UserVo userVo);
}

在service包下创建impl包，在impl包下创建UserServiceImpl类代码如下：

package com.mybatis.service.impl;

import com.mybatis.dao.UserDao;
import com.mybatis.entity.User;
import com.mybatis.service.UserService;
import com.mybatis.vo.UserVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

/**
 * package_name:com.mybatis.service.impl
 *
 * @author:徐亚远 Date:2020/2/21 15:33
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/
@Service("userService")
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;

    /**
     * @Transactional基于注解的配置事务 也可以用于类上面
     */
    @Override
    @Transactional(propagation = Propagation.SUPPORTS, isolation = Isolation.READ_COMMITTED, readOnly = true)
    public User login(String username, String password) {
        User user = userDao.login(username, password);
        if (user != null && user.getUsername().equals(username) && user.getPassword().equals(password)) {
            return user;
        }
        return null;
    }

    @Override
    @Transactional(propagation = Propagation.REQUIRED,isolation = Isolation.READ_COMMITTED,rollbackFor = Exception
            .class,timeout = 5000)
    public void regist(UserVo userVo) {
        //把传递过来的userVo,转换为entity可能涉及多张表
        User user = new User();
        user.setUsername(userVo.getUsername());
        user.setPassword(userVo.getPassword());
        Integer id = userDao.insert(user);
        //int i = 9 / 0;
    }
}

五：在util包下创建SpringBean类代码如下：

package com.mybatis.util;

import org.springframework.beans.BeansException;
import org.springframework.beans.factory.BeanInitializationException;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.context.*;

/**
 * package_name:com.mybatis.util
 *
 * @author:徐亚远 Date:2020/2/21 17:44
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/

public class SpringBeanUtil implements ApplicationContextAware {
    private static ApplicationContext ac;
    /**
     * Set the ApplicationContext that this object runs in.
     * Normally this call will be used to initialize the object.
     * <p>Invoked after population of normal bean properties but before an init callback such
     * as {@link InitializingBean#afterPropertiesSet()}
     * or a custom init-method. Invoked after {@link ResourceLoaderAware#setResourceLoader},
     * {@link ApplicationEventPublisherAware#setApplicationEventPublisher} and
     * {@link MessageSourceAware}, if applicable.
     *
     * @param applicationContext the ApplicationContext object to be used by this object
     * @throws ApplicationContextException in case of context initialization errors
     * @throws BeansException              if thrown by application context methods
     * @see BeanInitializationException
     */
    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
         ac = applicationContext;
    }
    public static Object getBean(String beanName){
        return ac.getBean(beanName);
    }

    public static Class getBean(Class clazz){
        return (Class) ac.getBean(clazz);
    }

}

六：在servlet包下创建UserServlet类代码如下：

package com.mybatis.servlet;

import com.mybatis.entity.User;
import com.mybatis.service.UserService;
import com.mybatis.util.SpringBeanUtil;
import com.mybatis.vo.UserVo;

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;

/**
 * package_name:com.mybatis.servlet
 *
 * @author:徐亚远 Date:2020/2/21 15:39
 * 项目名:springDemo01
 * Description: servlet是web容器管理的,不能交友spring容器管理
 * Version: 1.0
 **/
@WebServlet("*.user")
public class UserServlet extends HttpServlet {

    private UserService userService;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String path = req.getServletPath();
        if ("/login.user".equals(path)){
            req.getRequestDispatcher("WEB-INF/login.jsp").forward(req, resp);
        } else if ("/regist.user".equals(path)){
            req.getRequestDispatcher("WEB-INF/regist.jsp").forward(req,resp );
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //req.setCharacterEncoding("utf-8");
        String path = req.getServletPath();
        if ("/login.user".equals(path)){
           login(req,resp );
        } else if ("/regist.user".equals(path)){
            regist(req,resp );
        }
    }
    public void login(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        userService = (UserService) SpringBeanUtil.getBean("userService");
        User user = userService.login(username,password );

        req.getSession().setAttribute("user",user );

        if (user !=null){
            req.getSession().setAttribute("username",user.getUsername() );
            req.getRequestDispatcher("/WEB-INF/success.jsp").forward(req,resp );
        } else {
            req.setAttribute("error","用户名或密码错误" );
            req.getRequestDispatcher("/WEB-INF/login.jsp").forward(req,resp );
        }
    }

    public void regist(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {
       String username = req.getParameter("username");
       String password = req.getParameter("password");
       String driving = req.getParameter("driving");
       //把数据封装成userVo,因为数据可能对应多张表
       UserVo userVo = new UserVo(username,password,driving);

      userService = (UserService) SpringBeanUtil.getBean("userService");
      userService.regist(userVo);
      req.getRequestDispatcher("WEB-INF/login.jsp").forward(req,resp );

    }
}

七：在filter包下创建LoginFilter类如下：

package com.mybatis.filter;

import com.mybatis.entity.User;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * package_name:com.mybatis.filter
 *
 * @author:徐亚远 Date:2020/3/7 16:44
 * 项目名:springDemo01
 * Description:TODO
 * Version: 1.0
 **/
@WebFilter("/*")
public class LoginFilter implements Filter {
    /**
     * @param filterConfig
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    /**
     * @param request
     * @param response
     * @param chain
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,
            ServletException {
        System.out.println("拦截器");
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;
        String uri = req.getRequestURI();
        System.out.println("uri:" + uri);
        boolean flag = uri.contains("*.user");
        System.out.println("flag:" + flag);
        if (uri.contains("/login.user") || uri.contains("/regist.user") || uri.contains("/css/") ||
                uri.contains("/js/") || uri.contains("/image/")) {
            chain.doFilter(request, response);
        } else {
            User user = (User) req.getSession().getAttribute("user");
            if (user != null) {
                chain.doFilter(request, response);
            } else {
                System.out.println("请先登录");
                req.getSession().setAttribute("error_login_msg","你还没有登录,请先登录!" );
                req.getRequestDispatcher("WEB-INF/login.jsp").forward(req, resp);
            }
        }

    }

    @Override
    public void destroy() {

    }
}

八：在web-inf目录下的web.xml文件中配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

  <!--初始化spring容器-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!--解决中文乱码-->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

在image目录下的17.gif图片如下：
在这里插入图片描述

在css目录下的index.css文件代码如下：

/* 通用 */

* {
    margin: 0;
    padding: 0;
}

body,
html {
    height: 100%;
    width: 100%;
}

p {
    font-family: 'weir雅黑';
}

.clear {
    clear: both;
}

a {
    color: #000;
}

a:hover {
    color: #000;
    text-decoration: none;
}


/* login界面 */

.login_body {
    overflow: hidden;
    background: url("../image/17.gif") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.my-container {
    position: relative;
    width: 400px;
    height: auto;
    left: 50%;
    margin-left: -200px;
    margin-top: 10%;
}

.head-photo {
    width: auto;
    height: auto;
    text-align: center;
    margin: 10px auto;
    font-size: 30px;
}

.head-main {
    margin-top: 20px;
}

.my-ver {
    width: 100%;
}

.cover {
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.head-register {
    position: fixed;
    height: 440px;
    width: 400px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -240px;
    background: #66CCCC;
}

.head-register .reg-container {
    width: 350px;
    height: auto;
    margin: 20px auto;
}

.alert-warningmy {
    margin-top: 5px;
    margin-left: 118px;
    height: auto;
    color: red;
}


/* index界面 */

.logo {
    float: left;
    height: 80px;
    width: auto;
    margin: 0 auto;
    margin-left: 100px;
}

.navbar-nav li {
    float: right;
}

.nav-left {
    height: 100%;
}

.fun {
    width: 80%;
    margin: 20px auto;
    height: 60px;
    border-bottom: 1px solid rgb(187, 212, 158);
}
.fun_duo {
    width: 80%;
    margin: 20px auto;
    height: 60px;
}

.fun p {
    font-size: 20px;
    line-height: 80px;
    font-weight: bold;
}

.fun:hover {
    cursor: pointer;
    border-right: 6px solid rgb(78, 199, 125)
}

.main {
    /* box-shadow: 2px 2px 2px 2px; */
    width: 100%;
    height: 80%;
    background: rgb(255, 254, 254);
}

.new .my-btn {
    width: auto;
    height: auto;
    margin-top: 40px;
    float: right;
}

在web-inf目录下创建login.jsp页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <title>用户信息管理系统</title>
    <!--修改模态框 出现的位置-->
    <style type="text/css">
        .modal.fade {
            top: 50px;
        }
        #rightheader{
            color: burlywood;
        }
    </style>
</head>
<body class="login_body">
<div id="rightheader">
    <body>
    <script type="text/javascript">
        function open() {
            var clock1 = document.getElementById("rightheader");
            var date = new Date();
            var datetime = date.toLocaleString();
            clock1.innerHTML = datetime;
        }

        setInterval("open()", "1000");

        //验证码的实现
        function vali() {
            // 2088556198
            //1300085971
            var valicode = new TencentCaptcha('2088556198', function (res) {
                if (res.ret == 0) {
                    var form = document.getElementById("loginForm");
                    form.submit();
                }
                else {
                    alert("验证出错！");
                }
            });
            valicode.show();
        }
    </script>
    </body>
</div>
<div class="my-container">
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="background-color:rgb(202, 225, 235);">
                <!-- 头像 -->
                <div class="head-photo">
                    登录
                </div>
                <!-- form表单 -->
                <div class="head-main">
                    <form id="loginForm" action="${pageContext.request.contextPath}/login.user" method="post">
                        <div class="input-group mb-3 input-group-lg">
                            <div class="input-group-prepend">
                                <span class="input-group-text">账号:</span>
                            </div>
                            <input type="text" class="form-control" placeholder="username" id="user"
                                   name="username">
                        </div>
                        <div class="input-group mb-3 input-group-lg">
                            <div class="input-group-prepend">
                                <span class="input-group-text">密码:</span>
                            </div>
                            <input type="password" class="form-control" placeholder="password" id="password"
                                   name="password" autocomplete="off">
                        </div>
                        <!-- 错误信息提示 -->
                        <div class="clear"></div>
                        <div class=" alert-warningmy">
                            <strong>${error}</strong>
                        </div>
                        <div class="head-button" style="margin-top:5px;margin-bottom: 20px">
                            <%--id="login_form"--%>
                            <input id="btnOK" onclick="vali()" type="button" class="btn btn-primary btn-block"
                                   value="登录"></input>

                            <button type="button" class="btn btn-success btn-block" data-toggle="modal"
                                    data-target="#myModal">注册&nbsp;
                            </button>
                        </div>
                        <div class=" alert-warningmy">
                            <strong>${error_login_msg}</strong>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 注册框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">注册用户信息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <form action="${pageContext.request.contextPath}/regist.user" method="post">
                    <div class="input-group mb-3 input-group-lg">
                        <div class="input-group-prepend">
                            <span class="input-group-text">username:</span>
                        </div>
                        <%--id=usr--%>
                        <input type="text" class="form-control" placeholder="username" id="username" name="username"
                               autocomplete="off">
                    </div>
                    <div class="input-group mb-3 input-group-lg">
                        <div class="input-group-prepend">
                            <span class="input-group-text">password:</span>
                        </div>
                        <input type="text" class="form-control" placeholder="password" id="pas" name="password"
                               autocomplete="off">
                    </div>
                    <input type="submit" class="btn btn-primary btn-block" style="margin-top:10px" value="确认"/>
                    <button type="reset" class="btn btn-success btn-block">重置</button>
                </form>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在web-inf目录下创建success.jsp页面代码如下：

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/2/21
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
  <h2>登录成功 欢迎您:${username}</h2>
</body>
</html>

加油，进大厂！！！

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
spring整合JDBC 实现拦截器用户的登录和注册的案例源代码及解析

前言：为了大家学习的方便，我自己完成了一个登录注册的小案例供大家参考，如有疑问？请私信博主，小主辛苦总结，望大家转载请标明出处。**项目介绍：**本项目使用的是spring整合jdbc实现用户的登录和注册，带前端页面以及验证码的功能实现登录使用maven管理jar包，使用mysql数据库，验证码使用的是拖动滑块实现的当前比较流行的验证码实现方式，在登录页面会显示当前访问页面的事件显示，当用户没有...
复制链接

扫一扫

专栏目录