Springboot+MyBatist實(shí)現(xiàn)前后臺(tái)交互登陸功能方式

更新時(shí)間：2024年01月16日 16:51:48 作者：wilson_m

這篇文章主要介紹了Springboot+MyBatist實(shí)現(xiàn)前后臺(tái)交互登陸功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

整體實(shí)現(xiàn)的流程

如下：

1 用戶輸入用戶名密碼

2 獲取用戶輸入的用戶名以及密碼，傳遞到后臺(tái)數(shù)據(jù)庫(kù)，進(jìn)行信息查詢，如果用戶的用戶名和密碼在數(shù)據(jù)庫(kù)中存在，則登陸成功，跳轉(zhuǎn)至登陸成功的界面。反之登陸失敗，返回登陸界面，重新登陸

整個(gè)系統(tǒng)中功能實(shí)現(xiàn)的流程

如下：

前臺(tái)發(fā)送請(qǐng)求即要實(shí)現(xiàn)哪種功能，然后service層傳遞到mapper層，進(jìn)行數(shù)據(jù)庫(kù)的交互，然后將數(shù)據(jù)庫(kù)查詢的結(jié)果進(jìn)行一層一層的返回，最后在前臺(tái)頁(yè)面展示返回的結(jié)果

整個(gè)系統(tǒng)的項(xiàng)目結(jié)構(gòu)圖

如下：

項(xiàng)目結(jié)構(gòu)圖

第一步

在pom.xml文件中，添加相關(guān)依賴，代碼如下：

<?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>First</groupId>
    <artifactId>First</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

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

    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.1.1</version>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

添加相關(guān)依賴后，為放置啟動(dòng)類會(huì)報(bào)錯(cuò)，進(jìn)行以下操作：

右擊pom.xml文件pom.xml->Maven會(huì)出現(xiàn)以下頁(yè)面：

導(dǎo)入依賴

里面有Reimport和Download Sources and Documention選項(xiàng)，兩個(gè)都點(diǎn)擊下。

第二步

修改application.yml配置文件，進(jìn)行數(shù)據(jù)庫(kù)連接

配置文件如下：

spring: datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/sqltest?useUnicode=true&characterEncoding=UTF-8 username: root password: root thymeleaf:

注意：sqltest是數(shù)據(jù)庫(kù)名字，sqltest后面帶問(wèn)號(hào)的一串代碼，不要省去，該代碼是防止在前臺(tái)顯示數(shù)據(jù)時(shí)出現(xiàn)亂碼

第三步

書(shū)寫(xiě)啟動(dòng)類，在整個(gè)系統(tǒng)中只需要啟動(dòng)啟動(dòng)類，整個(gè)系統(tǒng)便能夠跑起來(lái)，啟動(dòng)類代碼如下：

package test;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("test.mapper")
@SpringBootApplication
public class TestApplication {
    public static void main(String[] args) {
        SpringApplication.run(TestApplication.class, args);

    }
}

@MapperScan進(jìn)行掃描，掃描的位置就是mapper包的路徑，因?yàn)樵摪旅娲娣诺亩际桥c數(shù)據(jù)庫(kù)交互的操作。

如果啟動(dòng)類中的代碼出現(xiàn)紅色情況，請(qǐng)回到第一步進(jìn)行Reimport和Download Sources and Documention，該問(wèn)題便會(huì)消失。

第四步

編寫(xiě)實(shí)體類，代碼如下：

在entity包里面建立實(shí)體類Stu，Stu類中的屬性和數(shù)據(jù)庫(kù)中stu表的屬性一樣。

（定義基本的幾個(gè)屬性后，可以通過(guò)鍵盤(pán)上的“alt+insert”鍵，來(lái)進(jìn)行自動(dòng)添加該類自帶的get和set方法，以及toString方法）

package test.entity;

public class Stu {
    public String sno;
    public String sname;
    public String password;
    public String tno;
    public String tname;
    public String tgrade;

    public String getSno() {
        return sno;
    }

    public void setSno(String sno) {
        this.sno = sno;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getPassword() {
        return password;
    }

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

    public String getTno() {
        return tno;
    }

    public void setTno(String tno) {
        this.tno = tno;
    }

    public String getTname() {
        return tname;
    }

    public void setTname(String tname) {
        this.tname = tname;
    }

    public String getTgrade() {
        return tgrade;
    }

    public void setTgrade(String tgrade) {
        this.tgrade = tgrade;
    }

    @Override
    public String toString() {
        return "Stu{" +
                "sno='" + sno + '\'' +
                ", sname='" + sname + '\'' +
                ", password='" + password + '\'' +
                ", tno='" + tno + '\'' +
                ", tname='" + tname + '\'' +
                ", tgrade='" + tgrade + '\'' +
                '}';
    }
}

書(shū)寫(xiě)mapper類，實(shí)現(xiàn)數(shù)據(jù)庫(kù)交互，操作數(shù)據(jù)庫(kù)（增刪改查）

代碼如下：

package test.mapper;

import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;

@Component
public interface Common {
    @Select("select sname from stu where sno=#{sno} and password=#{password}")
    public String login(@Param("sno") String sno,@Param("password") String password);
}

其中，#{sno}是用戶輸入的用戶名，通過(guò)@Param參數(shù)的的方式傳遞。

同過(guò)用戶在前臺(tái)輸入的用戶名和密碼與數(shù)據(jù)庫(kù)比較，返回查詢到的sname屬性。

引用@Select注解進(jìn)行查詢。

如果要進(jìn)行更新操作，則需要使用@Update注解，括號(hào)里面是相關(guān)的sql語(yǔ)句，通過(guò)調(diào)用注解下面的方法，便可以實(shí)現(xiàn)該sql語(yǔ)句的功能。

第五步

書(shū)寫(xiě)service，業(yè)務(wù)層，控制業(yè)務(wù)，主要負(fù)責(zé)業(yè)務(wù)邏輯模塊的邏輯應(yīng)用設(shè)計(jì)

package test.service;

import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import test.mapper.Common;

@Service
public class CommonService {
    @Autowired
    public Common commonmapper;
    public String login(String sno, String password){
        return commonmapper.login(sno, password);
    }
}

第六步

controller控制層，負(fù)責(zé)具體的業(yè)務(wù)模塊流程的控制，即頁(yè)面訪問(wèn)控制，調(diào)用service層里面的接口控制具體的業(yè)務(wù)流程

代碼如下：

package test.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import test.service.CommonService;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

/**
 * Created by MWL on 2017/11/25.
 */
@Controller
public class CommonController {
    @Autowired
    public CommonService commonservice;

    @RequestMapping(value = "/", method = {RequestMethod.POST, RequestMethod.GET})
    public String login() {
        return "/login/login";
    }

    @RequestMapping(value = "/loginPage", method = {RequestMethod.POST, RequestMethod.GET})
    public String login(HttpServletRequest request, HttpSession session) {
        String tno = request.getParameter("tno");
        String password = request.getParameter("password");
        System.out.println("你輸入的用戶名為：" + tno);
        System.out.println("你輸入的密碼為：" + password);
        String tname = commonservice.login(tno, password);
        session.setAttribute("tname", tname);
        if (tname == null) {
            return "redirect:/";
        } else {
            return "redirect:/index";
        }
    }

    @RequestMapping(value = "/index", method = {RequestMethod.POST, RequestMethod.GET})
    public String loginindex() {
        return "/login/test";

    }
}

代碼解釋：

1 @RequestMapping(value = “/”）

即在地址欄輸入localhost:8080/ 的時(shí)候會(huì)跳轉(zhuǎn)到login文件夾下面的login.html頁(yè)面

2 @RequestMapping(value = “/loginPage”, method = {RequestMethod.POST, RequestMethod.GET}) HttpServletRequest request

該value的值loginPage要與login.html頁(yè)面中form中的action值一樣，是通過(guò)form表單提交數(shù)據(jù)，即點(diǎn)擊登錄按鈕時(shí)，提交數(shù)據(jù)，發(fā)送請(qǐng)求

String tno = request.getParameter(“tno”);改代碼是獲取前臺(tái)頁(yè)面中用戶輸入的用戶名的值，getParameter后面的tno要與form表單中tno中的name值相同。

即獲取的值為用戶名后面輸入框中的值。假設(shè)name的是a，getParameter(“a”),獲取的就是該文本框的值。（不會(huì)擅長(zhǎng)表達(dá)，不過(guò)意思相信都能夠理解）

3 “redirect:/”

進(jìn)行重定向，redirect后面跟的是什么，就返回到哪一個(gè)requestmapping的value值，也就是說(shuō)"redirect:/"重新定向到了

@RequestMapping(value = “/”, method = {RequestMethod.POST, RequestMethod.GET})這串代碼的請(qǐng)求。

4 表單中的提交按鈕類型為submit

5 session進(jìn)行綁定，用于后面登陸成功的時(shí)候知道是哪個(gè)用戶登陸的，顯示更直觀。

前臺(tái)登陸頁(yè)面代碼如下：

<!DOCTYPE html>
<html>
<head>
    <div>
        <div>登錄系統(tǒng)</div>
        <form action="loginPage" method="post">
            <table>
                <tr>
                    <td>用戶名：</td>
                    <td><input type="text" name="tno" ></input></td>
                </tr>

                <tr>
                    <td>密碼：</td>
                    <td><input type="password" name="password" ></input></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="登陸"></input></td>
                </tr>
            </table>
        </form>
    </div>
</head>
</html>

登陸后主頁(yè)面代碼如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div>
        <h3 th:text="'歡迎您：：' + ${session.tname}"></h3>
        <p>
            你好！
        </p>
        <p>如果你看到這個(gè)頁(yè)面，代表你是登陸成功了</p>
    </div>
</head>
</html>

頁(yè)面自己寫(xiě)的丑，不過(guò)功能倒是實(shí)現(xiàn)了

最后，運(yùn)行啟動(dòng)類