后端界面搭建
将 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: root
password: root
#url中database为对应的数据库名称,这里为class
url: jdbc:mysql://localhost:3306/class?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
driver-class-name: com.mysql.cj.jdbc.Driver
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: 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文件并添加代码。
代码如下:
@Controller
public 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")
@ResponseBody
public 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 点击登录,查看后台显示
成功前后台都可传递。