idea搭建SpringBoot和AJAX前后端数据交互，含源码

最新推荐文章于 2023-04-03 20:56:06 发布

名字不重要21

最新推荐文章于 2023-04-03 20:56:06 发布

阅读量1.5w

点赞数 16

分类专栏： SSM 文章标签： spring boot ajax

本文链接：https://blog.youkuaiyun.com/qq_35993946/article/details/86298439

版权

SSM 专栏收录该内容

4 篇文章

订阅专栏

写这个东西的目的，是为了记录学习过程，增强记忆和理解。

使用SpringBoot这个微框架，能够更加快速的构建web程序，相比于之前的SpringMVC，Struts2等框架，不需要
写各种各样繁琐的配置文件，只需要在pom文件中依赖parent POM，就能够大大的简化xml配置。

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

spring-boot-starter-parent是一个特殊的starter，它用来提供相关的Maven默认依赖。使用它之后，常用的包依赖可以省去version标签。

Maven的用户可以通过继承spring-boot-starter-parent项目来获得一些合理的默认配置。这个parent提供了以下特性：

1.默认使用Java8，可添加以下配置修改版本：

<properties>
  <java.version>1.8</java.version>
</properties>

2.使用UTF-8编码，可添加以下配置修改编码：

<properties>
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>

3.一个引用管理的功能，在dependencies里的部分配置可以不用填写version信息，这些version信息会从spring-boot-dependencies里得到继承。

正常来说项目应该添加了以下带版本的依赖：

<groupId>com.alibaba</groupId>

  <artifactId>fastjson</artifactId>
  <version>1.2.35</version>
</dependency>

但是使用spring-boot-starter-parent的话，可以这样，继承默认版本：

<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>

</dependency>

4.识别过来资源过滤

例如，打包的时候把src/main/resources下所有文件都打包到包中。

<directory>src/main/resources</directory>
<includes>
<include>**/*.*</include>
</includes>
<filtering>true</filtering>
</resource>

5.识别插件的配置

比如exec plugin, surefire, Git commit ID, shade

能够识别application.properties和application.yml类型的文件，同时也能支持profile-specific类型的文件（如： application-foo.properties and application-foo.yml，这个功能可以更好的配置不同生产环境下的配置文件)。

更多的不做介绍，可以参考spring官网，或者优快云上其他博客。

2. 编码

项目总体结构

2.1 Pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.springboot</groupId>
    <artifactId>springbootajax</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>SpringBootAjax</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-test</artifactId>
            <version>2.1.1.RELEASE</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.2 Entity

User实体类，不涉及数据库访问

package org.springboot.entity;

public class User {
    private Integer id;

    private String name;

    private String sex;

    private Integer age;

    private String role;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }
}

2.3 Controller

package org.springboot.web;

import org.springboot.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String index(ModelMap modelMap) {
        modelMap.put("msg", "SpringBoot Ajax 示例");

        return "index";
    }

    @RequestMapping(value = "/home", method = RequestMethod.GET)
    @ResponseBody
    public String home() {

        return "home";
    }

    @RequestMapping(value = "/data", method = RequestMethod.POST)
    @ResponseBody
    public List<User> data() {
        List<User> list = new ArrayList<User>();

        for (int i = 0; i < 10; i++) {
            User user = new User();
            user.setId(i + 1);
            user.setName("springboot" + i);
            user.setSex("male");
            user.setAge(i + 1);
            user.setRole("developer");

            list.add(user);
        }

        return list;
    }
}

controller中data方法用于向前台的ajax返回请求的json数据。

2.4 前端页面+js
前台的视图模版我使用的是thymeleaf，它是SpringBoot官方推荐的一个html5模版引擎，SpringBoot官方不推荐使用jsp，SpringBoot官网也是使用这个模版引擎做的。
通过jQuery的ajax向Controller发送请求，在js回调函数中处理返回的数据，页面我用bootstrap快速的做了一个表格，渲染列表使用了一个叫做avalonjs的迷你mvvm框架，生成虚拟dom，关于avalonjs也不做过多的介绍，可以参考官网。
前端页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
</head>
<body ms-controller="viewmodel">
<h1 th:text="${msg}">Hello World</h1>
<button type="button" class="btn btn-primary" style="margin: 10px;" ms-click="@request">{{@text}}</button>
<table class="table table-striped">
    <thead>
    <tr>
        <td class="active">id</td>
        <td class="success">姓名</td>
        <td class="warning">性别</td>
        <td class="danger">年龄</td>
        <td class="info">角色</td>
    </tr>
    </thead>
    <tbody>
    <tr ms-for="el in @datalist">
        <td >{{el.id}}</td>
        <td >{{el.name}}</td>
        <td>{{el.sex}}</td>
        <td >{{el.age}}</td>
        <td >{{el.role}}</td>
    </tr>
    </tbody>
</table>
</body>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/avalon.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/myscript.js}"></script>
</html>

ajax部分：

/**
 * @Comment js文件，用于页面发送ajax请求
 */

//定义一个avalonjs的控制器
var viewmodel = avalon.define({
    //id必须和页面上定义的ms-controller名字相同，否则无法控制页面
    $id: "ajaxTestController",
    datalist: {},
    text: "请求数据",
    request: function () {
        $.ajax({
            type: "post",
            url: "/hello/data",    //向springboot请求数据的url
            data: {},
            success: function (data) {
                $('button').removeClass("btn-danger").addClass("btn-success").attr('disabled', true);

                viewmodel.datalist = data;

                viewmodel.text = "数据请求成功，已渲染";
            }
        });
    }
});

最后直接运行main方法。