feat: 使用Controller返回网页文件

This commit is contained in:
Bunny 2025-01-22 17:59:41 +08:00
parent 6aa044b16e
commit 9a7349d93d
14 changed files with 403 additions and 8 deletions

129
mvc/SpringMVC笔记.md Normal file
View File

@ -0,0 +1,129 @@
# SpringMVC笔记
## 访问控制
请求地址时返回对应的网页文件
- `@RestController`用于返回对象格式的内容,在后面会使用`ModelAndView`可以返回网页文件
- `@Controller`用于返回网页文件
### 环境要求
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- devtools -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.36</version>
</dependency>
```
### 错误页面设置
在这个路径下可以配置错误码要访问的页面,也就是可以自定义页面内容
![image-20250122171536808](./images/SpringMVC笔记/image-20250122171536808.png)
### 使用`@Controller`
返回需要访问的HTML内容页面最后返回的字符串就是页面这个页面位于`templates`目录下
```java
@RequestMapping("/use")
@Controller
public class UseController {
// 带参数访问
@RequestMapping(value = "hello", method = RequestMethod.GET, params = {"name"})
public String hello() {
return "hello";
}
@GetMapping("jumpPage")
public String jumpPage() {
return "jumpPage";
}
@GetMapping("index")
public String quick() {
return "user";
}
// 跳转的页面
@GetMapping("toJump")
public String toJump() {
return "redirect:jumpPage";
}
}
```
如果在使用`@Controller`需要返回JSON内容需要在控制器方法上加上`@ResponseBody`
```java
@GetMapping("getJson")
@ResponseBody
public List<String> getJson() {
ArrayList<String> list = new ArrayList<>();
list.add("a");
list.add("b");
list.add("c");
return list;
}
```
### 使用`@RestController`
如果使用`@RestController`那么返回的就是JSON对象但是这时候要想返回网页文件需要使用`ModelAndView`
```java
@RequestMapping("userRest")
@RestController
public class UseRestController {
@GetMapping("page/test")
public ModelAndView test() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("page/test");
modelAndView.addObject("message", "这是消息内容");
return modelAndView;
}
}
```
我们引入了`thymeleaf`所以有以下内容`<h4 th:text="'消息:'+ ${message}"></h4>`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用RestController返回页面信息</title>
</head>
<body>
<h3>使用RestController返回页面信息</h3>
<h4 th:text="'消息:'+ ${message}"></h4>
</body>
</html>
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -32,23 +32,36 @@
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- devtools -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.36</version>
</dependency>
<!-- knife4j -->
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId>
<version>4.5.0</version>
</dependency>
</dependencies>

View File

@ -5,9 +5,7 @@ import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class MvcApplication {
public static void main(String[] args) {
SpringApplication.run(MvcApplication.class, args);
}
}

View File

@ -0,0 +1,33 @@
package cn.bunny.mvc.configuration;
import io.swagger.v3.oas.models.ExternalDocumentation;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Contact;
import io.swagger.v3.oas.models.info.Info;
import io.swagger.v3.oas.models.info.License;
import lombok.extern.slf4j.Slf4j;
import org.springdoc.core.models.GroupedOpenApi;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
@Slf4j
public class Knife4jConfig {
@Bean
public OpenAPI openAPI() {
// 作者等信息
Contact contact = new Contact().name("Bunny").email("1319900154@qq.com").url("http://bunny-web.site");
// 使用协议
License license = new License().name("MIT").url("https://MUT.com");
// 相关信息
Info info = new Info().title("家庭理财管理系统").description("家庭理财管理系统").version("v1.0.0").contact(contact).license(license).termsOfService("MIT");
return new OpenAPI().info(info).externalDocs(new ExternalDocumentation());
}
// 管理员相关分类接口
@Bean
public GroupedOpenApi groupedOpenAdminApi() {
return GroupedOpenApi.builder().group("后台管理").pathsToMatch("/user/**").build();
}
}

View File

@ -0,0 +1,48 @@
package cn.bunny.mvc.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
@RequestMapping("/use")
@Controller
public class UseController {
// 带参数访问
@RequestMapping(value = "hello", method = RequestMethod.GET, params = {"name"})
public String hello() {
return "hello";
}
@GetMapping("jumpPage")
public String jumpPage() {
return "jumpPage";
}
@GetMapping("index")
public String quick() {
return "user";
}
// 跳转的页面
@GetMapping("toJump")
public String toJump() {
return "redirect:jumpPage";
}
@GetMapping("getJson")
@ResponseBody
public List<String> getJson() {
ArrayList<String> list = new ArrayList<>();
list.add("a");
list.add("b");
list.add("c");
return list;
}
}

View File

@ -0,0 +1,19 @@
package cn.bunny.mvc.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
@RequestMapping("userRest")
@RestController
public class UseRestController {
@GetMapping("page/test")
public ModelAndView test() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("page/test");
modelAndView.addObject("message", "这是消息内容");
return modelAndView;
}
}

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>400</title>
</head>
<body>
<h1>400</h1>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<h1>404</h1>
</body>
</html>

View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>500 - 服务器错误</title>
<meta content="width=device-width, maximum-scale=1, initial-scale=1" name="viewport"/>
<style>
html, body {
height: 100%;
}
body {
color: #333;
margin: auto;
padding: 1em;
display: table;
user-select: none;
box-sizing: border-box;
font: lighter 20px "微软雅黑";
}
a {
color: #3498db;
text-decoration: none;
}
h1 {
margin-top: 0;
font-size: 3.5em;
}
main {
margin: 0 auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.btn {
color: #fff;
padding: .75em 1em;
background: #3498db;
border-radius: 1.5em;
display: inline-block;
transition: opacity .3s, transform .3s;
}
.btn:hover {
transform: scale(1.1);
}
.btn:active {
opacity: .7;
}
</style>
</head>
<body>
<main>
<h1>:'(</h1>
<p>服务器开小差啦!管理员正在修理中...</p>
<p>还请阁下静候站点恢复~</p>
</main>
</body>
</html>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h1>Hello</h1>
<div id="app">
带参数显示
<h3>{{ message }}</h3>
<h4>{{count}}</h4>
<label>
<input v-model="count"/>
</label>
<button @click="add()">+1</button>
</div>
</body>
<script>
const {createApp, ref} = Vue
createApp({
setup() {
const message = ref('Hello vue!')
const count = ref(1)
function add() {
count.value++
}
return {message, count, add}
},
mounted() {
console.log(111)
},
}).mount('#app')
</script>
</html>

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jumpPage</title>
</head>
<body>
跳转的页面
</body>
</html>

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用RestController返回页面信息</title>
</head>
<body>
<h3>使用RestController返回页面信息</h3>
<h4 th:text="'消息:'+ ${message}"></h4>
</body>
</html>

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试用户界面</title>
</head>
<body>
<h1>哈哈哈1ss</h1>
</body>
</html>