springboot+jQuery+axios配置一个简单网页（前后不分离）

超级代码人1998

已于 2023-12-26 15:59:02 修改

阅读量475

点赞数 10

于 2023-12-26 11:32:40 首次发布

本文链接：https://blog.csdn.net/2301_79173093/article/details/135217709

版权

1，项目结构

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，项目成功跑起来的页面与控制台输出截图

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>

超级代码人1998

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
springboot+jQuery+axios配置一个简单网页（前后不分离）

spring:# 配置thymeleaf以访问templates文件夹下资源(注：需导入thymeleaf的依赖)thymeleaf:# classpath不能省略。
复制链接

扫一扫