首页给出spring boot中的前端代码

给出spring boot中的前端代码

时间: 2024-11-20 19:39:58 浏览: 13

在Spring Boot项目中，前端通常是使用React、Vue或Angular这样的现代前端框架构建的。这里以HTML5 + JavaScript为基础，配合Spring Boot的RESTful API进行简单说明。如果你选择使用Thymeleaf模板引擎作为后端视图技术，那么前端代码可能会这样组织： **1. HTML页面（index.html）:** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <form id="loginForm" action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <br> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <br> <button type="submit">Login</button> </form>  <script src="app.js"></script> </body> </html> ``` **2. JavaScript文件（app.js）:** ```javascript document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 const formData = new FormData(this); fetch('/login', { method: 'POST', body: formData, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // 根据实际API调整 }) .then(response => response.json()) .then(data => console.log(data)) // 显示响应 .catch(error => console.error(error)); }); ``` 在这个例子中，当用户点击登录按钮时，前端发起一个POST请求到`/login`路径，携带用户名和密码数据。Spring Boot的后端`LoginController`接收到请求后，处理并返回相应的响应。

阅读全文