资讯详情

echarts实训4：Sring Boot框架

基本配置-toc" style="margin-left:0px;">一、Spring Boot基本配置

(一)入口类和@SpringBootApplication

1.项目入口类 - SpringBootDemoApplication

了解核心注释 - @SpringBootApplication

3、设置exclude属性值，关闭特定的自动配置

（二）创建SpringBoot项目报错

1、https://start.spring.io 初始化错误

2、连接失败 Request failed with status code 403

解决办法1 修改Http Proxy配置

解决办法2 修改项目URL地址

（三）启动项目，查看效果

(4)添加控制器和路由函数

(5)定制关闭Banner

1、在resources目录下创建banner.txt文件

2、通过http://patorjk.com/software/taag网站生成字符

3.将网站生成的字符复制到banner.txt文件里

4.启动应用程序

5、关闭Banner

（六）使用Spring Boot配置应用属性文件

1.修改服务器的端口号

2、启动应用

3.启动浏览器，访问http://localhost:8888/welcome

4、采用yaml格式的应用属性

(七)允许使用XML配置Spring

创建用户实体类 - User

2、在resources目录里创建spring-config配置文件

5.启动应用程序，检查结果

6.表格显示用户信息

二、Spring Boot项目访问静态资源

（一）在static里创建images目录，拷贝一张图片

（二）在入口类里访问图片资源

（三）启动应用，查看结果

三、Spring Boot整合Thymeleaf

（一）实现简单登录页面

1、在全局配置文件里配置Thymeleaf属性

2、创建登录控制器LoginController

3、创建模板文件，获取控制器传来的动态数据

4、启动项目，查看结果 

四、Spring Boot集成Bootstrap

（一）访问官网

（二）编写登录页面login.html

1、集成Bootstrap

2、编写登录页面

3、启动项目，访问http://localhost:8888/toLogin

4、用户名和密码非空校验

（三）控制器编写登录验证方法

（四）编写登录成功与失败的模板页面

1、编写登录成功页面success.html

 2、编写登录失败页面failure.html

（五）启动项目，测试效果

五、Thymeleaf访问模型里的数据

（一）页面访问Model里的实体数据

1、创建个人实体类 - User

2、在登录控制器里添加获取个人信息方法 

3、创建显示个人信息的模板页面

4、启动应用，测试效果

一、Spring Boot基本配置

（一）入口类与@SpringBootApplication

利用Spring Initializr创建Spring Boot项目

项目基本信息配置

 添加依赖 

全部依赖

设置项目名及保存位置

1、项目入口类 - SpringBootDemoApplication

  • 包含一个主方法作为入口类的入口方法
  • 利用SpringApplication类的静态方法run()启动入口类实例，可以接收命令行参数

2、了解核心注解 - @SpringBootApplication

  • @SpringBootApplication是Spring Boot的核心注解，是一个组合注解。

3、设置exclude属性值，关闭特定的自动配置

  • 关闭数据源自动配置

（二）创建SpringBoot项目报错

1、https://start.spring.io 初始化错误

2、连接失败 Request failed with status code 403

          解决办法1 修改Http Proxy配置

成功

          解决办法2 修改项目URL地址

将https://start.spring.io/ 改为 http://start.spring.io/

成功

（三）启动项目，查看效果

必须暂时关闭数据源自动配置（因为目前尚未配置数据源，不关闭数据源自动配置，运行程序要报错） 

运行时如果报错jdk发行版本无效，是因为jdk版本不一致导致的，可自行检查setting设置

（四）添加控制器与路由函数

  • 直接在入口类上面添加@Controller注解，然后定义路由函数index()

package net.ydl.boot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.sql.DataSource;

@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})// 不采用数据源自动配置
@Controller
public class SpringBootDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootDemoApplication.class, args);
    }

    @RequestMapping("/")
    @ResponseBody
    public String index() {
        return "<h3>Welcome to Spring Boot World~</h3>";
    }

}

 启动项目，访问http://localhost:8080

 如果出现无法访问的错误

 双击tomcat\bin目录下的startup.bat，关闭服务

解决办法选择一致的JDK版本

添加路由函数welcome()，通过model参数向前端模板页面传递数据

@GetMapping("/welcome")
    public String welcome(Model model) {
        //通过model向模板页面传递数据
        model.addAttribute("message","Dear Friends, Welcome to Spring Boot World~");
        return "welcome"; //逻辑视图名
    }

 在templates里创建welcome.html，跟路由函数welcome()里的逻辑视图名welcome相对应，其中<span>元素的内容是静态数据，客户端打开页面看到的数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <head>
<body>
<h3><span th:text="${message}">亲爱的朋友，欢迎访问Spring Boot世界~</span></h3>
</body>
</html>

运行welcome.html文件

启动welcome.html项目 ，看到后端控制器通过model传递过来的数据

（五）定制关闭Banner

1、在resources目录下创建banner.txt文件

2、通过http://patorjk.com/software/taag网站生成字符

3、将网站生成的字符复制到banner.txt文件里

 4、启动应用程序

5、关闭Banner

  • 修改入口程序代码

启动应用，项目启动图案消失

注释掉设置旗帜模式语句，恢复启动图案 

（六）使用Spring Boot的应用属性文件进行配置

1、修改服务器的端口号

在application.properties文件里修改端口号为8888

2、启动应用

服务器端口已改为四个8

3、启动浏览器，访问http://localhost:8888/welcome

 4、采用yaml格式的应用属性

将application.properties重命名为application.yaml

（七）允许使用XML配置Spring

1、创建用户实体类 - User

创建net.ydl.boot.bean包，并创建User类

package net.ydl.boot.bean;
import java.util.Date;
public class User {
    private int id;
    private String username;
    private String password;
    private String telephone;
    private Date registerTime;
    private int popedom;

    public int getId() {
        return id;
    }

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

    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 getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    public Date getRegisterTime() {
        return registerTime;
    }

    public void setRegisterTime(Date registerTime) {
        this.registerTime = registerTime;
    }

    public int getPopedom() {
        return popedom;
    }

    public void setPopedom(int popedom) {
        this.popedom = popedom;
    }

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

2、在resources目录里创建spring-config配置文件

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

    <bean id="sdf" class="java.text.SimpleDateFormat">
        <constructor-arg value="yyyy-MM-dd hh:mm:ss"/>
    </bean>
    <bean id="date" factory-bean="sdf" factory-method="parse">
        <constructor-arg value="2021-12-25 09:30:30"/>
    </bean>

    <bean id="user" class="net.ydl.boot.bean.User">
        <property name="id" value="2022001"/>
        <property name="username" value="Mike"/>
        <property name="password" value="903213"/>
        <property name="telephone" value="18934563800"/>
        <property name="registerTime" ref="date"/>
        <property name="popedom" value="1" />
    </bean>
</beans>

在SpringBootDemoApplication.java文件中添加   @ImportResource("classpath:spring-config.xml")

 4、使用Spring配置文件里创建的Bean

5、启动应用，查看结果

  • 访问http://localhost:8888

6、表格形式显示用户信息

在welcome.html页面以表格形式显示用户信息

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <head>
<body>
<table border="1" align="center" cellpadding="20" cellspacing="0">
    <tr th:bgcolor="grey">
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>手机</th>
        <th>注册时间</th>
        <th>权限</th>
    </tr>
    <tr>
        <td>2022001</td>
        <td>Mike</td>
        <td>903213</td>
        <td>18934563800</td>
        <td>2021-12-25 09:30:30</td>
        <td align="center">1</td>
    </tr>
</table>
</body>
</html>

二、Spring Boot项目访问静态资源

  • 静态资源（css、images、scripts）都放在resources\static目录里。下面以访问图片为例说明静态资源的访问。

（一）在static里创建images目录，拷贝一张图片

（二）在入口类里访问图片资源

  • 修改路由函数index()，访问图片资源
@ResponseBody
    public String index() {
        return "<h3>Dear " + user.getUsername() + ",Welcome to Spring Boot World~</h3>" + user
                + "<br><img src='images/bear.png'>";
    }

（三）启动应用，查看结果

  • 访问http://localhost:8888

三、Spring Boot整合Thymeleaf

（一）实现简单登录页面

1、在全局配置文件里配置Thymeleaf属性

thymeleaf: #配置百里香叶模板
    cache: false #默认的是true，开发阶段设置为false
    edcoding: utf-8 #避免中文乱码
    mode: HTML5 #可以使用HTML4.0.1
    prefix: classpath:/templates/ #模板位置可以修改的
    suffix: .html #扩展名可修改

2、创建登录控制器LoginController

  • 在net.ydl.boot包里创建controller子包,在controller子包里创建LoginController控制器
package net.ydl.boot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

@Controller
public class LoginController {
    @GetMapping("/toLogin")
    public String toLogin(Model model) {
        //通过model像前端传送逻辑数据
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return  "login";
    }
}

3、创建模板文件，获取控制器传来的动态数据

  • 在templates目录下创建模板文件login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<span th:text="${currentYear}">今年</span> -
<span th:text="${currentYear} + 1">明年</span>
</body>
</html>

 静态访问模板文件，将显示默认值

4、启动项目，查看结果 

访问http://localhost:8888/toLogin 

  • 登录页面显示用户信息，查看运行效果
package net.ydl.boot.controller;

import net.ydl.boot.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

@Controller
public class LoginController {
    @GetMapping("/toLogin")
    public String toLogin(Model model) {
        //通过model像前端传送逻辑数据
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        //创建用户对象
        User user = new User();
        //设置用户对象属性
        user.setId(2020122);
        user.setUsername("萌萌哒");
        user.setPassword("123456");
        user.setTelephone("18455524562");
        user.setRegisterTime(Calendar.getInstance().getTime());
        user.setPopedom(1);
        model.addAttribute("user",user);
        return "login";//逻辑视图名
    }
}

四、Spring Boot集成Bootstrap

（一）访问官网

下载 ·Bootstrap v5.2 (getbootstrap.com)

下载

解压

给文件夹重命名

将bootstrap-4.0.0目录拷贝项目的static目录

（二）编写登录页面login.html

1、集成Bootstrap

<javascript>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <link th:href="@{bootstrap-5.2.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{bootstrap-5.2.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{bootstrap-5.2.0/js/bootstrap.js}"></javascript>
    <javascript th:src="@{/scripts/jquery.min.js}"></javascript>
</javascript>

2、编写登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<javascript>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <link th:href="@{bootstrap-5.2.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{bootstrap-5.2.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{bootstrap-5.2.0/js/bootstrap.js}"></javascript>
    <javascript th:src="@{/scripts/jquery.min.js}"></javascript>
</javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
            </div>
            <div class="checkbox text-center" style="height: 50px;position: relative">
                <label style="position: absolute; top: 20%; button: 20%; margin-left: -10%">
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div class="d-grid">
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

3、启动项目，访问http://localhost:8888/toLogin

4、用户名和密码非空校验

 

（三）控制器编写登录验证方法

@PostMapping("/login")
    public String login(HttpServletRequest request, Model model) {
        // 获取表单提交的用户名与密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）
        if (username.equals("howard") && password.equals("903213")) {
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }

 

（四）编写登录成功与失败的模板页面

1、编写登录成功页面success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-info border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-success"></p>
</div>
</body>
</html>

 2、编写登录失败页面failure.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

（五）启动项目，测试效果

  • 启动项目后，在浏览器里访问http://localhost:8888/toLogin

  •  输入错误的用户信息

五、Thymeleaf访问模型里的数据

（一）页面访问Model里的实体数据

1、创建个人实体类 - User

package net.ydl.boot.bean;

import java.util.Date;

public class User {
    private int id;
    private String username;
    private String password;
    private String telephone;
    private Date registerTime;
    private int popedom;

    public int getId() {
        return id;
    }

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

    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 getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    public Date getRegisterTime() {
        return registerTime;
    }

    public void setRegisterTime(Date registerTime) {
        this.registerTime = registerTime;
    }

    public int getPopedom() {
        return popedom;
    }

    public void setPopedom(int popedom) {
        this.popedom = popedom;
    }

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

2、在登录控制器里添加获取个人信息方法 

@GetMapping("/toLogin")
    public String toLogin(Model model) {
        //通过model像前端传送逻辑数据
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        //创建用户对象
        User user = new User();
        //设置用户对象属性
        user.setId(2020122);
        user.setUsername("萌萌哒");
        user.setPassword("123456");
        user.setTelephone("18455524562");
        user.setRegisterTime(Calendar.getInstance().getTime());
        user.setPopedom(1);
        model.addAttribute("user",user);
        return "login";//逻辑视图名
    }

3、创建显示个人信息的模板页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <head>
<body>
<h3><span th:text="${message}">亲爱的朋友，欢迎访问Spring Boot世界~</span></h3>
<table border="1" align="center" cellpadding="20" cellspacing="0">
    <tr th:bgcolor="grey">
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>手机</th>
        <th>注册时间</th>
        <th>权限</th>
    </tr>
    <tr>
        <td>2022001</td>
        <td>Mike</td>
        <td>903213</td>
        <td>18934563800</td>
        <td>2021-12-25 09:30:30</td>
        <td align="center">1</td>
    </tr>
</table>
</body>
</html>

4、启动应用，测试效果

访问  http://localhost:8888/getPersonhttp://localhost:8080/getPerson 

标签： ydl连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台