Spring框架学习(11)基于Maven的SSM框架实现简单登录验证

前言

记录学习过程
前面已经完成了SSM框架的搭建
现在来实现一个登录验证功能

步骤

  • 在数据库建一个login表
    在这里插入图片描述
    输入几个用户数据:
    在这里插入图片描述
  • 根据数据库属性创建实体类loginUser;
    在这里插入图片描述
package com.ssm.entity;

public class loginUser {
    private int id;
    private String loginName;
    private String loginPwd;

    public loginUser(){};
    public loginUser(int id, String loginName, String loginPwd) {
        this.id = id;
        this.loginName = loginName;
        this.loginPwd = loginPwd;
    }

    public int getId() {
        return id;
    }

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

    public String getLoginName() {
        return loginName;
    }

    public void setLoginName(String loginName) {
        this.loginName = loginName;
    }

    public String getLoginPwd() {
        return loginPwd;
    }

    public void setLoginPwd(String loginPwd) {
        this.loginPwd = loginPwd;
    }
     @Override
    public String toString() {
        return "LoginUser{" +
                "id=" + id +
                ", loginName='" + loginName + '\'' +
                ", loginPwd='" + loginPwd + '\'' +
                '}';
    }
}

  • 在pom.xml里配置运行需要的包
<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/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>com.ssm</groupId>
  <artifactId>ssm</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>ChatRobot Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <properties>
    <!-- 设置项目编码编码 -->
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <!-- spring版本号 -->
    <spring.version>4.3.5.RELEASE</spring.version>
    <!-- mybatis版本号 -->
    <mybatis.version>3.4.1</mybatis.version>
  </properties>

  <dependencies>

    <!-- java ee -->
    <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-api</artifactId>
      <version>7.0</version>
    </dependency>

    <!-- 单元测试 -->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
    </dependency>

    <!-- 实现slf4j接口并整合 -->
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>1.2.2</version>
    </dependency>

    <!-- JSON -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.8.7</version>
    </dependency>


    <!-- 数据库 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.41</version>
      <scope>runtime</scope>
    </dependency>

    <!-- 数据库连接池 -->
    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.2</version>
    </dependency>

    <!-- MyBatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>

    <!-- mybatis/spring整合包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>

    <!-- Spring -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</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-jdbc</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-web</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-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils</artifactId>
      <version>1.9.4</version>
    </dependency>
    <dependency>
      <groupId>commons-collections</groupId>
      <artifactId>commons-collections</artifactId>
      <version>3.2</version>
    </dependency>
    <dependency>
      <groupId>commons-lang</groupId>
      <artifactId>commons-lang</artifactId>
      <version>2.5</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
        <version>1.2</version>
    </dependency>


  </dependencies>

  <build>
    <finalName>ChatRobot</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <!-- 设置JDK版本 -->
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>

  </build>

</project>

Maven会自动帮我们装配好,等待下载

  • 写好了实体类,再完成持久层Dao
    创建持久层的接口LoginUserDao:
    @Param注解声明参数,与mapper属性对应
    在这里插入图片描述
package com.ssm.dao;

import com.ssm.entity.LoginUser;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

@Repository
public interface LoginUserDao {
    public LoginUser login(@Param("loginName") String loginName,
                           @Param("loginPwd") String loginPwd);
}

在mapper包下创建LoginDao.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">


<mapper namespace="com.ssm.dao.LoginUserDao">

    <!-- 设置为loginUserDao接口方法提供sql语句配置 -->
    <select id="login" resultType="LoginUser" parameterType="String">
        select * FROM login where loginName=#{loginName} and loginPwd=#{loginPwd}
    </select>

</mapper>

到这里对数据库的操作已经完成,接下来就是运用数据库取出的数据

  • 业务层Servcie
    在这里插入图片描述
    创建接口LoginService
package com.ssm.service;

import com.ssm.entity.LoginUser;

public interface LoginService {
    public LoginUser login(String loginName, String loginPwd);
}

以及它的实现类:LoginServiceImpl

package com.ssm.service.impl;

import com.ssm.dao.LoginUserDao;
import com.ssm.entity.LoginUser;
import com.ssm.service.LoginService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
@Service("loginService")
public class LoginServiceImpl implements LoginService {
    //注入loginUserDao的bean
    @Resource
    private LoginUserDao loginUserDao;
    @Override
    public LoginUser login(String loginName, String loginPwd) {
        return loginUserDao.login(loginName,loginPwd);
    }
}

业务层的意思是将输入的LoginName和LoginPwd注入持久层

  • 测试类测试底层逻辑
    在这里插入图片描述
   @Autowired
    private LoginUserDao loginUserDao;
    @Test
    public void testLogin(){
        String loginName="zhangsan";
        String loginPwd="111";
        LoginUser loginUser=loginUserDao.login(loginName,loginPwd);
        System.out.print(loginUser.toString());
    }

测试:
在这里插入图片描述
结果可知业务层、持久层逻辑正确,根据LoginName、LoginPwd可以得到一个LoginUser对象

  • 编写控制层UserController
    通过控制层接收前端发来的请求,并响应给前端
    在这里插入图片描述
    @RequestMapping(value = "/login",produces = {"text/plain;charset=utf-8", "text/html;charset=utf-8"})
    @ResponseBody
    public String login(@RequestParam("loginName") String loginName,
                        @RequestParam("loginPwd") String loginPwd, HttpServletResponse response) throws IOException{
        //根据请求中的数据得到LoginUser对象
        LoginUser result=this.loginService.login(loginName,loginPwd);
        //响应编码UTF-8
        response.setCharacterEncoding("UTF-8");
        //如果得到的对象不为空,发出true
        if (result!=null){
            return "true";
        }
        else return "false";
    }

控制层完成,它向前端发送了true或false

  • 前端-表现层
    在这里插入图片描述
    index,jsp实现前后端结合
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>test</title>
</head>
<script>
    function selectUser() {
        //ajax实现前后端结合
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("test").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "user/showUser", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("id=1");
    }
   
</script>
<body>
<p id="test">Welcome</p>
<button type="button" onclick="selectUser()">onclick test</button><br>

<form>
    loginName:<input type="text" id="loginName"><br>
    loginPwd:<input type="text" id="loginPwd"><br>
    <input type="button" onclick="login()" value="提交">
    
</form>
<script>
    function login() {
        var loginName=document.getElementById("loginName").value;
        var loginPwd=document.getElementById("loginPwd").value;
        //ajax实现前后端结合
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", "/user/login", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.onreadystatechange = function () {
        	//如果响应成功
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {			
            	//得到响应数据
                var data=xmlhttp.responseText;
                var obj=JSON.parse(data);
                if(obj==true)
                    alert("登录成功")
                else
                    alert("登录失败")
            }
        }
        xmlhttp.send("loginName="+loginName+"&loginPwd="+loginPwd);
    }
</script>
</body>
</html>

  • 测试
    在这里插入图片描述
    在这里插入图片描述
    成功!!
发布了49 篇原创文章 · 获赞 0 · 访问量 1249

猜你喜欢

转载自blog.csdn.net/key_768/article/details/104041751