springmvc实现用户登录功能

最新推荐文章于 2024-05-31 18:48:10 发布

grandir

最新推荐文章于 2024-05-31 18:48:10 发布

阅读量8.1k

点赞数 19

分类专栏： springmvc 文章标签： mybatis spring java mvc

本文链接：https://blog.csdn.net/weixin_44738940/article/details/105255053

版权

springmvc 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

在这里插入图片描述
效果展示：

1.创建数据表。
在这里插入图片描述
sql语句创建：

 /*
 Navicat MySQL Data Transfer

 Source Server         : Mysql101
 Source Server Type    : MySQL
 Source Server Version : 50712
 Source Host           : localhost:3306
 Source Schema         : web

 Target Server Type    : MySQL
 Target Server Version : 50712
 File Encoding         : 65001

 Date: 02/04/2020 09:40:11
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `uid` int(11) NOT NULL,
  `uname` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `password` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `sex` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `email` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `photo` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT '/StudioProject_war/upload//ad50c0a6128c43818f3d5277f2093c59.jpg',
  `u_type` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  `u_status` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT '正常',
  PRIMARY KEY (`uid`, `uname`) USING BTREE,
  INDEX `uname`(`uname`) USING BTREE,
  INDEX `uid`(`uid`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (12, 'MN', '123456', '女', '1652013658@qq.com', 'http://111.229.25.156:7777/file/img/picture-3baa56b6-b88b-47c2-b00c-502ab7b6ae5c.jpg', 'user', '正常');
INSERT INTO `user` VALUES (111, 'tom', '123456', '男', '1275194573@qq.com', '/StudioProject_war/upload//ad50c0a6128c43818f3d5277f2093c59.jpg', 'user', '封号');
INSERT INTO `user` VALUES (123, 'm1', '123456', '女', '1552013305@qq.com', 'http://111.229.25.156:7777/file/img/picture-d5b3c6f9-702a-4073-8747-d4f690cbf8a9.jpg', 'admin', '正常');
INSERT INTO `user` VALUES (222, 'jam', '124563', '女', '956146133@qq.com', '/StudioProject_war/upload//ad50c0a6128c43818f3d5277f2093c59.jpg', 'user', '正常');
INSERT INTO `user` VALUES (1049, 'grandir', '123341341', '女', '524864369@qq.com', '/StudioProject_war/upload//ad50c0a6128c43818f3d5277f2093c59.jpg', 'user', '正常');
INSERT INTO `user` VALUES (1275, 'Mitchell', '12751131', '男', '1275194573@qq.com', 'http://111.229.25.156:7777/file/img/picture-4bdd5618-4b00-4491-bc5d-4b10b8d24d3c.png', 'admin', '正常');
INSERT INTO `user` VALUES (5456, 'kjhbj', '1413deadsd', '男', '12358878@qq.com', '/StudioProject_war/upload//ad50c0a6128c43818f3d5277f2093c59.jpg', 'user', '正常');

SET FOREIGN_KEY_CHECKS = 1;

2.创建一个maven工程。
结构如下：
在这里插入图片描述
3.向pom.xml文件中添加依赖。

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.song</groupId>
  <artifactId>spring03</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>spring03 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
    <spring.version>5.0.2.RELEASE</spring.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.6</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!--SpringMVC 1.添加依赖jar-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.2</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>spring03</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

4.在web.xml中，配置Spring MVC的前端控制器DispatcherServlet。

 <!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
  <display-name>Archetype Created Web Application</display-name>
<!--  配置Spring MVC的前端控制器DispatcherServlet。 -->
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <!--SpringMVC前端控制器-->
    <servlet-class>org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <!--配置加载spring*.xml文件-->
      <param-value>classpath:spring*.xml</param-value>
    </init-param>
<!--    表示在容器启动时立即加载servlet-->
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
<!--    拦截所有URL的请求，“/”表示默认映射地址-->
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>

5.配置资源文件
在这里插入图片描述
jdbc.properties文件：(这里以我自己的数据库web为例)

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/web?useUnicode=true&characterEncoding=UTF-8&useSSL=false
jdbc.username=root
jdbc.password=root
jdbc.maxTotal=30
jdbc.minTotal=10

mybatis-config.xml文件：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
		PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
		"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

</configuration>

spring-mybatis.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"
       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-4.3.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    <!-- 配置整合mybatis过程 -->
    <!-- 1.配置数据库相关参数properties的属性：${url} -->
    <context:property-placeholder location="classpath:jdbc.properties"/>

    <!-- 2.数据库连接池 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <!-- 配置连接池属性 -->
        <property name="driverClass" value="${jdbc.driver}" />
        <property name="jdbcUrl" value="${jdbc.url}" />
        <property name="user" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="${jdbc.maxTotal}" />
        <property name="minPoolSize" value="${jdbc.minTotal}" />
        <!-- 关闭连接后不自动commit -->
        <property name="autoCommitOnClose" value="false" />
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="10000" />
        <!-- 当获取连接失败重试次数 -->
        <property name="acquireRetryAttempts" value="2" />

    </bean>

    <!-- 3.配置SqlSessionFactory对象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource" />
        <!-- 配置MyBatis全局配置文件:mybatis-config.xml -->
        <property name="configLocation" value="classpath:mybatis-config.xml" />
        <!-- 扫描pojo包 使用别名 -->
        <property name="typeAliasesPackage" value="com.song.pojo" />
    </bean>

    <!-- 4.配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 注入sqlSessionFactory -->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
        <!-- 给出需要扫描Dao接口包 -->
        <property name="basePackage" value="com.song.dao" />
    </bean>
<!--扫描注解-->
<context:component-scan base-package="com.song.dao,com.song.service"></context:component-scan>
    <!-- 5.配置事务处理器 -->
    <bean id="transactionManager"
          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!-- 配置基于注解的声明式事务 -->
    <tx:annotation-driven transaction-manager="transactionManager" />

</beans>

springmvc-config.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    <!--开启注解的扫描-->
    <context:component-scan base-package="com.song.controller"/>
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
    <bean  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass" value="org.springframework.web.servlet.view.InternalResourceView"/>
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
    </bean>
<!--  也可以用下面代码代替上面三个bean-->
<!--    <mvc:annotation-driven/>-->
<!--    <mvc:view-resolvers>-->
<!--        <mvc:jsp prefix="/WEB-INF/jsp/" suffix=".jsp"/>-->
<!--        &lt;!&ndash;query_result   /WEB-INF/jsp/query_result.jsp&ndash;&gt;-->
<!--    </mvc:view-resolvers>-->
</beans>
<!--    过滤静态资源-->
    <mvc:resources mapping="/js/**" location="WEB-INF/js/"/>
    <mvc:resources mapping="/images/**" location="WEB-INF/images/"/>

7.编写各层代码。
pojo层（User类）：

package com.song.pojo;


import java.io.Serializable;

/**
 * 用户
 */
public class User implements Serializable {

    private Integer uid;
    private String uname;
    private String password;
    private String sex;
    private String email;
    private String photo;
    private String u_type;
    private String u_status;

    public Integer getUid() {
        return uid;
    }

    public void setUid(Integer uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPassword() {
        return password;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhoto() {
        return photo;
    }

    public void setPhoto(String photo) {
        this.photo = photo;
    }

    public String getU_type() {
        return u_type;
    }

    public void setU_type(String u_type) {
        this.u_type = u_type;
    }

    public String getU_status() {
        return u_status;
    }

    public void setU_status(String u_status) {
        this.u_status = u_status;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid=" + uid +
                ", uname='" + uname + '\'' +
                ", password='" + password + '\'' +
                ", sex='" + sex + '\'' +
                ", email='" + email + '\'' +
                ", photo='" + photo + '\'' +
                ", u_type='" + u_type + '\'' +
                ", u_status='" + u_status + '\'' +
                '}';
    }
}

dao层（UserDao接口）：

package com.song.dao;

import com.song.pojo.User;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserDao {
    /**
     * 根据用户名查找普通用户
     * @param uname
     * @return
     */
    @Select("SELECT * FROM `user`\n" +
            "where uname=#{uname} and password=#{password}")
    public User findByName(@Param("uname") String uname,@Param("password") String password);
}

service层：
UserService接口：

package com.song.service;

import com.song.pojo.User;

import java.util.List;

public interface UserService {
    public User findByName(String uname,String password);
}

UserServiceImpl实现类：

package com.song.service.impl;

import com.song.dao.UserDao;
import com.song.pojo.User;
import com.song.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;

    @Override
    public User findByName(String uname, String password) {
        return userDao.findByName(uname,password);
    }

}

controller层（UserController类）

package com.song.controller;

import com.song.pojo.User;
import com.song.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;
import java.util.Map;

@Controller
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/login")
    public ModelAndView findByName(String userName,String password) {

        ModelAndView mv;
        mv = new ModelAndView();
        User user = userService.findByName(userName, password);
        if (user == null) {
            mv.addObject("message","用户名或密码错误！");
            mv.setViewName("../../index");
        } else {
            mv.addObject("user", user);
            mv.setViewName("success");
        }
        return mv;
    }
}

8.前端设计
结构：
在这里插入图片描述
前四张图片为背景轮播的四张图，icon.pong为头像。

jquery文件可自己到网上下载：

index.xml:

 <%@page language="java" pageEncoding="UTF-8"  contentType="text/html;utf-8" isELIgnored="false"%>
<html>
<script src="js/jquery-1.8.3.min.js"></script>

<style>
    body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        overflow: hidden;
    }
    #bg1{
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("images/1.jpg");
    }
    #bg2{
        position: absolute;
        height: 100%;
        width: 100%;
        background: url("images/2.jpg");
    }
    #container{
        position: absolute;
        background: #fff;
        height: 300px;
        width: 100%;
        top: 50%;
        margin-top: -150px;
        opacity: 0.4;
    }
    #loginContainer{
        position: absolute;
        height: 400px;
        width: 300px;
        top: 50%;
        right: 10%;
        margin-top: -200px;
        background: #fff;
        opacity: 0.5;
        border-radius: 5px;
        z-index: 50;
    }
    #loginHeader{
        position: absolute;
        height: 50px;
        width: 300px;
        top: 50%;
        right: 10%;
        margin-top: -190px;
        z-index: 80;
    }
    #photo{
        position: absolute;
        top: 28%;
        right:19%;
        z-index:90;

    }
    #photo img{
        height: 90px;
        width: 90px;
    }
    #loginHeader span{
        margin-left: 20px;
        text-align: center;
        font-weight: bolder;
        color: #0e475a;
    }
    #loginHeader hr{
        margin: 3px 20px 3px;
    }
    #loginContent{
        position: absolute;
        width: 300px;
        height: 200px;
        top: 70%;
        right: 10%;
        margin-top: -150px;
        z-index: 80;
    }
    #loginContent form{
        margin-left: 20px;
    }
    .loginLabel{
        font-weight: bolder;
        font-size: 14px;
        color: #0e475a;
    }
    .loginInput{
        width: 260px;
        height: 15px;
        padding: 3px 0;
        font-size: 12px;
        color: #797979;
        border: 1px solid #797979;
        margin-bottom: 10px;

    }
    .loginInput:focus{
        outline: none;
        border: 1px solid #2ca8be;
    }
    #loginBtn{
        width: 260px;
        height: 25px;
        margin-top: 10px;
        border: 1px solid #2ca8be;
        background: #2ca8be;
        font-weight: bolder;
        color: #fff;
    }

</style>
<script type="text/javascript">
    function message () {
        var message="${message}"
        if( message !=""){
            alert(message);
        }
    }
</script>
<body onload="message()">
<div id='bg1'></div>
<div id='bg2'></div>
<div id='container'></div>
<div id='loginContainer'>
</div>
<div id='loginHeader'>
    <span>用户登录中心</span>
    <hr size="3px" color="#2ca8be" />
</div>
<div id='photo'>
    <img src="images/icon.png" style="border-radius: 50%">
</div>
<div id='loginContent'>

    <form action="login">
        <label for="username" class="loginLabel">用户名</label>
        <br/>
        <input id="username" class="loginInput" type="text" placeholder="请输入用户名" name="userName" />
        <br/>
        <label for="password" class="loginLabel">密码</label>
        <br/>
        <input id="password" class="loginInput" type="password" placeholder="请输入密码" name="password" />
        <br/>
        <input type="submit" value="进入系统" id="loginBtn" onclick="return checkForm()"/>
    </form>
</div>
<script>
    function checkForm(){
        //是否为空
        function ifnull(txt){
            if(txt.length==0){
                return true;
            }
            var $reg=/\s+/;
            return $reg.test(txt);
        }

        //验证用户名
        if(ifnull($("#username").val())){
            $("span").show().text("用户名不能为空");
            return false;
        }
        //验证密码
        if(ifnull($("#password").val())){
            $("span").show().text("密码不能为空");
            return false;
        }else{
            var $reg=/^\w{6,}$/;
            if(!$reg.test($("#password").val())){
                $("span").show().text("密码至少6位");
                return false;
            }
        }
        return true;
    }


    $(function(){
        // 图片自动切换
        // -4张图片  -自动定时器切换  -动画效果
        var page = 1;
        function changePage(){
            console.log(11);
            if (page!=4) {
                page ++;
            }else{
                page =1;
            }
            if (((page-1)%2)==0) {
                $("#bg1").css("background-image", "url(images/" + page + ".jpg)");
                $("#bg1").fadeIn(1500);
                $('#bg2').fadeOut(1500);
            }else{
                $("#bg2").css("background-image","url(images/"+page+".jpg)");
                $("#bg2").fadeIn(1500);
                $('#bg1').fadeOut(1500);
            }
        }
        // 自动定时器 调用切换图片的方法
        setInterval(changePage,5000);
    })
</script>
</body>
</html>

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<html>
<head>
    <title>Title</title>
</head>
<body>${user.uname}登录成功！
</body>
</html>