怎么把html放到spring boot里
时间: 2023-11-30 07:04:47 浏览: 29
将HTML文件放入Spring Boot项目中的步骤如下:
1. 在项目的src/main/resources/static目录下创建一个新的文件夹,例如“static_html”。
2. 将HTML文件复制到该文件夹中。
3. 创建一个Controller类,用于处理HTTP请求并返回HTML文件。例如:
```java
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HtmlController {
@GetMapping("/html")
public String html() {
return "static_html/index.html";
}
}
```
4. 访问“http://localhost:8080/html”即可在浏览器中查看HTML文件。
注意:如果HTML文件中包含其他资源文件(例如CSS、JavaScript等),需要将这些文件一并复制到static目录下,并在HTML文件中使用相对路径引用。
相关问题
springboot项目中html怎么取spring boot数据
在Spring Boot项目中,可以使用Thymeleaf模板引擎来将后端的数据渲染到前端页面中。Thymeleaf是一种模板引擎,可以轻松地将后端的数据绑定到前端的HTML页面中。
首先,需要在pom.xml文件中添加Thymeleaf的依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
然后,在Controller中将需要传递给前端页面的数据放入Model中:
```java
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "Hello World!");
return "hello";
}
```
最后,在HTML页面中使用Thymeleaf的语法来获取后端数据:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1 th:text="${message}"></h1>
</body>
</html>
```
在以上示例中,Thymeleaf的语法`${message}`用来获取后端传递到前端的数据,将其显示在HTML页面的`h1`标签中。
希望能对您有所帮助!
spring boot整合mybatis和vue的案例
好的,以下是一个简单的Spring Boot整合MyBatis和Vue的案例:
1. 前端Vue部分
首先,我们创建一个Vue项目。在命令行中输入以下命令:
```
vue create vue-mybatis-demo
```
接着,在`vue-mybatis-demo`目录下执行以下命令:
```
npm install axios --save
```
这将安装`axios`,一个用于发送HTTP请求的JavaScript库。
接下来,我们在`src`目录下创建一个`components`目录,并在其中创建一个`UserList.vue`组件。在该组件中,我们将使用`axios`从后端获取用户列表。以下是`UserList.vue`组件的代码:
```html
<template>
<div>
<h2>User List</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
}
},
mounted() {
axios.get('/api/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>
```
2. 后端Spring Boot部分
我们使用Spring Boot创建一个RESTful API,用于从数据库中获取用户列表。首先,在`pom.xml`文件中添加以下依赖项:
```xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
```
然后,在`application.properties`文件中添加以下配置:
```
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
mybatis.mapper-locations=classpath:mapper/*.xml
```
接下来,我们创建一个`User`实体类:
```java
public class User {
private Long id;
private String name;
private Integer age;
// getters and setters
}
```
然后,我们创建一个`UserMapper`接口和对应的XML文件,用于从数据库中获取用户列表:
```java
@Mapper
public interface UserMapper {
@Select("SELECT * FROM user")
List<User> findAll();
}
```
```xml
<mapper namespace="com.example.demo.mapper.UserMapper">
<select id="findAll" resultType="com.example.demo.entity.User">
SELECT * FROM user
</select>
</mapper>
```
最后,我们创建一个`UserController`类,用于处理从前端发送的请求:
```java
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserMapper userMapper;
@GetMapping("/users")
public List<User> findAllUsers() {
return userMapper.findAll();
}
}
```
3. 整合前后端
现在,我们需要将前端Vue项目打包并将其静态文件放入Spring Boot项目的`resources/static`目录下。在`vue-mybatis-demo`目录下执行以下命令:
```
npm run build
```
这将生成一个`dist`目录,其中包含前端Vue项目的静态文件。将该目录下的所有文件复制到Spring Boot项目的`resources/static`目录下。
最后,我们启动Spring Boot应用程序,并在浏览器中访问`http://localhost:8080`,即可看到从数据库中获取的用户列表。