后端界面搭建
将 https://start.spring.io/ 替换https://start.aliyun.com/
报错
打开设置
修改如下在这里插入代码片
按此方法无果 翻阅治疗后得知 IDEA2019无法按照网上教程修改此问题因此更新最新idea2024或利用插件Alibaba Clouod Toolkit
换用IDEA2024创建项目
下一步后进入如下界面
添加相关依赖
创建后maven项目如下
添加相关配置yml
项目默认的配置文件为application.properties ,properties配置文件属于早期,也是目前创建 Spring Boot(2.x)项目时默认的配置文件格式。目前普遍流行使用.yml进行配置文件设置。
yml 可以看做是对 properties 配置文件的升级,属于 Spring Boot 的“新版”配置文件。它具有语法更简洁、可读性更高、更好配置多种数据类型、跨语言、通用性强等优点。
在更换IDEA2024后发现注释乱码因此需要进行配置修改
本项目修改
创建项目前修改
修改后
server:port: 8080
spring:datasource:username: rootpassword: root#url中database为对应的数据库名称,这里为classurl: jdbc:mysql://localhost:3306/class?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTCdriver-class-name: com.mysql.cj.jdbc.Driverthymeleaf:prefix: classpath:/templates/suffix: .htmlcache: false
mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
注意:#url中database为对应的数据库名称,这里为class,大家可以根据自己实际的数据库名称进行修改即可。
添加后端测试依赖thymeleaf依赖
基于VUE和Springboot做开发前后端分离管理系统的时候就不要hymeleaf做html页面,目前因为我们还在内测后端环境,所以在项目中创建html页面。故添加thymeleaf依赖。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
修改IDEA仓库位置
因为一般情况下要修改仓位置因此本文使用博主安装的仓库
设置完如图所示
测试
在如图所示文件夹下建立文件包和UserController.java文件并添加代码。
代码如下:
@Controllerpublic class UserContrller {@RequestMapping("/test")public String login(){return "main.html";}}
在resource文件夹下建立如图所示文件夹以及文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><h1>测试</h1>
</body>
</html>
运行
测试发现与yml配置端口号不一致
原因仅运行html文件,应运行springboot启动项
端口对但报错
仔细检查发现是代码中有写了个重复userController修改后为:
@Controller
public class UserController {@RequestMapping("/test")@ResponseBodypublic String login(){return "main.html";}}
代码成功但是页面未引入,因此检查发现依赖下载位置不对应在<dependencyManagement>
上方加粗样式
加粗样式
去掉responsbody
@Controller
public class UserController {@RequestMapping("/test")public String login(){return "main.html";}}
自此基本框架搭建完毕
测试前后端传值
后端向前端传值
代码内添加
后端:
@GetMapping("/")/*Map方式public String index(Map<String, Object> map){map.put("msg", "Hello, Spring Boot!");return "login.html";}*//*Model 方式*/public String index(Model model){model.addAttribute("msg", "Hello 同学"); //向前端传递return "login.html";}
前端
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>登录</title>
</head>
<body>
<h1>登录</h1>
<span th:text="${msg}"></span> <!-- 后端传递过来的值-->
</body>
</html>
地址栏输入:http://localhost:8080/
,回车。
前端向后端传值
修改login.html代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>欢迎登录</title><link rel="shortcut icon" href="#">
</head>
<body>
<form action="login" method="post"><table><span th:text="${msg}"></span><tr><td>用户名: </td><td><input type="text" name="username"/></td></tr><tr><td>密码: </td><td><input type="password" name="password"/></td></tr><tr><td><input type="submit" value="登录"/></td></tr></table>
</form>
</body>
</html>
后端添加
@PostMapping("/login")public String login(String username, String password) {System.out.println("用户名是:"+username+"密码是:"+password);return "main.html";}
运行程序
地址栏输入:http://localhost:8080/,回车。
用户名输入222 密码输入222 点击登录,查看后台显示
成功前后台都可传递。