springboot+jQuery+axios配置一个简单网页（前后不分离）
以下是一个简单的示例，展示如何使用Spring Boot后端、jQuery和axios创建一个前后端不分离的简单网页。
后端（Spring Boot）:
- 创建一个Spring Boot项目，并添加
spring-boot-starter-web依赖。 - 创建一个简单的REST控制器返回静态数据。
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/hello")
public String hello() {
return "Hello, World!";
}
}前端（HTML + jQuery + axios）:
- 创建一个HTML文件，并通过script标签引入jQuery和axios。
- 使用jQuery编写事件处理函数，通过axios发送GET请求到后端服务，并更新页面内容。
<!DOCTYPE html>
<html>
<head>
<title>Simple Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="greeting">Loading...</div>
<script>
$(document).ready(function() {
axios.get('http://localhost:8080/hello')
.then(function (response) {
$('#greeting').text(response.data);
})
.catch(function (error) {
console.log(error);
});
});
</script>
</body>
</html>配置和运行:
- 确保Spring Boot应用程序正在运行，监听8080端口。
- 将上述HTML文件部署到静态资源服务器，或者运行一个本地服务器来提供HTML文件。
- 打开浏览器，访问HTML页面，查看结果。
请注意，这个例子假设后端运行在同一台机器上的8080端口。如果后端部署在不同的服务器或端口，需要相应地更改axios请求的URL。
评论已关闭