使用springboot搭建一個簡易登錄程序

目的

該項(xiàng)目主要介紹了使用springboot框架搭建一個簡易的登錄程序的主要過程。本文的主要目的是介紹搭建一個可以運(yùn)行的、能夠接收用戶輸入的、可以訪問數(shù)據(jù)庫的springboot程序的完整流程，通過這個過程講解springboot如何接收用戶輸入的數(shù)據(jù)、如何訪問訪問數(shù)據(jù)庫等過程。本文主要面向只有core java基本知識，沒有java web開發(fā)經(jīng)驗(yàn)的初學(xué)者。

用到的主要工具

  • intellij idea 編輯器

  • mysql數(shù)據(jù)庫

  • chrome瀏覽器（可以使用其他瀏覽器代替）

  • Navicat for MySQL

    這是一個圖形化的mysql數(shù)據(jù)管理工具

本文不再講解springboot搭建jsp的過程，不會建立的讀者可前往在idea中使用spring boot創(chuàng)建jsp工程學(xué)習(xí)。

思路

首先在在idea中使用spring boot創(chuàng)建jsp工程建立的工程中創(chuàng)建一個controller，然后在controller中新建一個方法指引到一個jsp頁面，再在這個jsp頁面中使用bootstrap搭建一個登陸頁面，這個登陸頁面中將包含一個form，并用form的action制定到前面建立的controller中的另一個方法，這個方法將接受到form提交的數(shù)據(jù)，并使用接收到的數(shù)據(jù)與數(shù)據(jù)庫中的數(shù)據(jù)對比，然后通過對比結(jié)果返回登陸成功或登陸失敗。

bootstrap是一個前端框架，其實(shí)現(xiàn)了一些常用的web樣式，簡化了開發(fā)步驟，提高了開發(fā)效率，如按鈕、輸入框、輪播圖等。

實(shí)現(xiàn)過程

1、新建controller，接收\login路徑，并跳轉(zhuǎn)到login.jsp頁面

文件新建好以后的的結(jié)構(gòu)如圖所示

文件結(jié)構(gòu).png

在LoginController中新建login方法監(jiān)聽\login請求并跳轉(zhuǎn)到login.jsp頁面

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LoginController {

    @RequestMapping("/login")
    public String login(){
        return "login";
    }
}

在jsp頁面中填充簡單html代碼，并寫入登錄頁面用于測試。頁面中page標(biāo)簽是jsp的內(nèi)容，用于設(shè)置頁面屬性。其他標(biāo)簽是html的內(nèi)容。

<%@page contentType="text/html; charset=UTF-8" language="java" %>
<html>
<head>

</head>
<body>
登錄頁面

</body>
</html>

然后啟動程序測試正確性，在瀏覽器中輸入http://127.0.0.1:8080/login結(jié)果如下圖所示，說明該步驟正確

login頁面骨架建立步驟正確性驗(yàn)證.png
2、使用bootstrap建立基本登錄頁面

打開bootstrap網(wǎng)站點(diǎn)擊起步->基本模板，然后將基本模板頁面代碼復(fù)制到login.jsp文件中,并添加jsp標(biāo)簽page設(shè)置頁面為text/html頁面，編碼為UTF-8

bootstrap模板位置.png

模板內(nèi)容為：

<%@page contentType="text/html; charset=UTF-8" language="java" %>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link  rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

在body標(biāo)簽中增加html和css代碼，創(chuàng)建登錄頁面。此處參考boostrap自定義組件中的登錄頁模板進(jìn)行編寫

bootstrap登錄頁面模板路徑.png

點(diǎn)擊并打開登錄頁面，打開開發(fā)者工具并跳轉(zhuǎn)到Elements標(biāo)簽,復(fù)制其中的代碼至login.jsp文件的body標(biāo)簽當(dāng)中，刪除body標(biāo)簽中原來的代碼<h1>你好，世界！</h1>

打開瀏覽器的開發(fā)者工具.png
復(fù)制html和css代碼.png

然后重啟程序，此時的\login頁面效果如下圖所示

登錄頁效果.png

該頁面有三個地方需要修改

  1. 將其中的英文修改成漢語

  2. 給class=container的div設(shè)置寬度。修改方式是在該div上添加style屬性，并在sytle屬性內(nèi)添加width。修改后的div標(biāo)簽頭代碼如下<div class="container" style="width: 400px">

  3. 調(diào)整輸入框代碼高度，設(shè)置方法是給每個input標(biāo)簽添加style屬性，并在style屬性中添加height，為了讓input中的文字能夠上下居中顯示，還需增加line-height，且line-height的值和height的值一致。sytle中多個屬性要用分號隔開

調(diào)整后的代碼如下圖所示：

調(diào)整后的login.jsp文件代碼.png
3、提交登錄郵箱和密碼到controller中

前端代碼用html、css和JavaScript代碼建立好以后，怎么將用戶填寫的郵箱和密碼發(fā)送到controller中以備實(shí)現(xiàn)登錄驗(yàn)證呢？在前端代碼中，我們發(fā)現(xiàn)用戶輸入的兩個input標(biāo)簽和點(diǎn)擊的button標(biāo)簽都被form標(biāo)簽包裹著，在這個form標(biāo)簽中可以設(shè)置action屬性指定數(shù)據(jù)提交的地址，在這里我們將數(shù)據(jù)提交到服務(wù)器的\loginAction地址，修改后的form標(biāo)簽頭如下所示

<form class="form-signin" action="/loginAction">

但Controller是用java實(shí)現(xiàn)的，java中每個數(shù)據(jù)都需要用一個變量保存。所以還需要在login.jsp頁面中指定登錄郵箱和密碼提交到服務(wù)器后變量名。指定的方法是給每個input標(biāo)簽添加name屬性，并在name屬性中指定變量名。這里給第一個input指定為email，給第二個input指定為password。

分別給兩個input指定名字.png

在loginController中添加loginAction方法并用@RequestMapping("loginAction")注解指定該方法接收\loginAction的請求，并在在形式參數(shù)列表中指定String類型的email和password這里的形式參數(shù)名字必須和input中指定的名字相同才可接收到參數(shù)值。然后在方法中打印email的值和password的值用于測試。最后在返回到login.jsp頁面

    @RequestMapping("loginAction")
    public String loginAction(String email,String password){
        System.out.println(email);
        System.out.println(password);
        return "login";
    }

重啟程序并在刷新/login頁面，填寫用戶名123@qq.com和密碼123456后點(diǎn)擊登錄按鈕，若在控制臺打印出提交的用戶名和密碼的值說明該步驟正確。

提交數(shù)據(jù)正常.png
4、連接數(shù)據(jù)庫

該步驟需要你提前按照好mysql數(shù)據(jù)庫和Navicat管理工具，若無navicate管理工具，在控制臺操作數(shù)據(jù)庫也可實(shí)現(xiàn)，前提是你必須熟悉mysql的操作。

在pom.xml中添加jdbc和mysql的依賴，讓springboot具有連接數(shù)據(jù)庫的能力

        <!--jdbc-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- mysql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>

在項(xiàng)目配置文件application.properties中配置數(shù)據(jù)庫連接熟悉

spring.datasource.url=jdbc:mysql://localhost:3306/springtest?serverTimezone=GMT%2B8&useSSL=false
spring.datasource.username=root
spring.datasource.password=1234
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

在配置文件中配置的是連接springtest數(shù)據(jù)庫所以我們在navicat中建立該數(shù)據(jù)庫

新建數(shù)據(jù)庫.png
數(shù)據(jù)庫參數(shù).png

在數(shù)據(jù)庫中新建user表

新建表.png

user表結(jié)構(gòu)如下所示，其中id為bigint類型、主鍵、自增；email為varchar類型、長度為64位；password為varchar類型、為64位。

user表結(jié)構(gòu).png

然后在表中添加一條數(shù)據(jù)用于測試

user表中添加一條測試數(shù)據(jù).png

至此，就可以在springboot程序中使用JdbcTempl操作數(shù)據(jù)庫了。為了驗(yàn)證這一步的有效性，我們在loginAction中打印user表中的測試數(shù)據(jù)

    @RequestMapping("loginAction")
    public String loginAction(String email,String password){
        //sql字符串
        String sql = "select email,password from user";
        //創(chuàng)建一個map用于動態(tài)添加sql查詢中的參數(shù)，此處不需要添加
        Map<String, Object> param = new HashMap<>();
        //查詢結(jié)果
        SqlRowSet result = jdbcTemplate.queryForRowSet(sql,param);
        //循環(huán)輸出結(jié)果
        while (result.next()){
            //打印email字段的值
            System.out.println(result.getString("email"));
        }
        return "login";
    }

在該代碼中使用了jdbcTemplate變量，該變量是用是spring自動注入進(jìn)來的，所以我們還需要在LoginController中創(chuàng)建jdbcTemplate類屬性，并使用@Autowired自動注入值。

    @Autowired
    private NamedParameterJdbcTemplate jdbcTemplate;

若能打印出測試數(shù)據(jù)的值則說明這一步配置正確

測試連接數(shù)據(jù)庫步驟的正確性.png
5、修改loginAction中的代碼，使其能夠根據(jù)請求的email和password值返回不同的頁面

新建一個index.jsp頁面，并寫入"網(wǎng)站首頁"，以后后期繼續(xù)完善。若用戶名和密碼正確，返回到index.jsp頁面，若用戶名和密碼錯誤則返回登陸頁面。

根據(jù)上面的使用邏輯，我們修改loginAction代碼如下所示

@RequestMapping("loginAction")
    public String loginAction(String email,String password){
        //sql字符串,添加where語句用于驗(yàn)證email和password
        String sql = "select email,password from user where email=:email and password=:password";
        //創(chuàng)建一個map用于動態(tài)添加sql查詢中的參數(shù)，此處不需要添加
        Map<String, Object> param = new HashMap<>();
        param.put("email",email);
        param.put("password",password);
        //查詢結(jié)果
        SqlRowSet result = jdbcTemplate.queryForRowSet(sql,param);
        //循環(huán)輸出結(jié)果
        if (result.next()){
            //說明查詢結(jié)果中有數(shù)據(jù)，則返回到index.jsp頁面
            return "index";
        }
        return "login";
    }

在sql字符串中增加email和password的驗(yàn)證，其中以冒號開頭的單詞將被queryForRowSet方法作為鍵，然后從param中查找出對應(yīng)的值并替換進(jìn)sql語句當(dāng)中，

這一步較為簡單請自行測試。

總結(jié)

本文通過搭建一個簡陋的登錄頁面和邏輯處理講解了springboot搭建頁面、處理頁面，并連接mysql的一般流程，即controller中添加處理路徑的方法并返回到一個jsp頁面，然后在jsp頁面中編寫html代碼和css代碼并將用戶輸入提交到另一個路徑，最后在編寫一個接受提交數(shù)據(jù)路徑的controller方法處理提交的數(shù)據(jù)。希望你能從中領(lǐng)悟到springboot框架中使用其它依賴的一般方法，即使用組件的時候先在pom.xml中添加依賴，然后在配置文件中配置該依賴的參數(shù)，最后使用依賴注入使用該依賴提供的功能。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容