关于springboot完整创建一个简单的前后端交互项目_springboot 快速开发一个前后台一体的项目

作者：二进制舞者2 | 2024-02-03 18:22:17

踩

springboot 快速开发一个前后台一体的项目

1、首先创建一个springboot项目

2、项目创建完成

1、项目初始目录

在这里插入图片描述

2、尽量设置为自己的maven配置

在这里插入图片描述

3、添加依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.5.0</version>
        </dependency>
1
2
3
4
5

4、在项目中创建了这两个文件

static目录

IndexController

package com.wei.demo.controller;

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

/**
 * @Author wei
 * @Date 2022/6/1 21:02
 * @Version 1.0
 */
@Controller
@RequestMapping("/")
public class IndexController {

    @GetMapping
    public String index(){

        return "index.html";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello,World!</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

3、启动项目

打开浏览器访问地址：
1、 http://localhost:8080/
2、http://localhost:8080/index.html 直接访问
上面两个地址都可以访问访问
在这里插入图片描述

templates目录（动态）

1、添加依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.6.4</version>
        </dependency>
1
2
3
4
5

2、在resources建立目录

在这里插入图片描述
hello.html

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1> hello,wei!</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

3、修改indexController文件

package com.wei.demo.controller;

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

/**
 * @Author wei
 * @Date 2022/6/1 21:02
 * @Version 1.0
 */
@Controller
@RequestMapping
public class IndexController {

    @GetMapping("/")
    public String index(){

        return "index.html";
    }
    
    @GetMapping("/hellodemo")
    public String hello(){
        return "hello";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

访问地位为：http://localhost:8080/hellodemo
动态页面不能直接访问

总结

静态页面的return默认是跳转到/static/目录下，当在pom.xml中引入了thymeleaf组件，动态跳转会覆盖默认的静态跳转，默认就会跳转到/templates/下，注意看两者return代码也有区别，动态没有html后缀。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/57546