1,项目结构
![](https://i-blog.csdnimg.cn/blog_migrate/46a2d58771426918b075f6ed7bef2490.png)
2,yml文件配置
spring:
# 配置thymeleaf以访问templates文件夹下资源(注:需导入thymeleaf的依赖)
thymeleaf:
# classpath不能省略
prefix: classpath:/templates/html/
suffix: .html
# 数据库的四个配置
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql:///db_comment
username: root
password: root
3,html文件引入css及js及axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- 静态资源默认放在static文件夹下-->
<!-- 所以此处不用写../static来定位文件夹-->
<!-- 注意导入js文件的顺序-->
<script src="js/jquery.js"></script>
<script src="js/axios.js"></script>
<script src="js/request.js"></script>
<script src="js/login.js"></script>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="login_div">
<div>
<h1>登录模块</h1>
<form>
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input id="login" type="button" value="登录"><input type="reset" value="重置">
</form>
</div>
</div>
</body>
</html>
4,request.js 原生js封装axios四个请求方法
// 创建axios对象
var $axios =axios.create
// 在对象的原型上添加四个重写后的方法
$axios.__proto__.doGet=function (url,param) {
return axios({
url: url,
method:"GET",
params: param
})
}
$axios.__proto__.doPost=function (url,param) {
return axios({
url: url,
method:"POST",
data: param
})
}
$axios.__proto__.doPut=function (url,param) {
return axios({
url: url,
method:"PUT",
data: param
})
}
$axios.__proto__.doDelete=function (url,param) {
return axios({
url: url,
method:"DElETE",
data: param
})
}
5,HomeController
//同步跳转,异步获取资源
@Controller
public class HomeController {
// 默认 localhost:8080 请求访问login页
@GetMapping("/")
public String loginHome(){
return "login";
}
}
6,项目成功跑起来的页面与控制台输出截图
![](https://i-blog.csdnimg.cn/blog_migrate/0811e55d38db8acabe234348f4cd95fc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/125833f8a833413b52c74bbc28b90c57.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1fdc28b462fd65d2f3768d254da6d118.png)
7,附:(项目所需依赖)
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- springboot结合jdbc-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- mysql驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 动态资源访问-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>