springboot 使用JavaScript利用axios向MySQL数据库获得多条信息返回前端渲染输出到多个div块中

首先，需要在前端页面引入axios库，并在后端使用SpringBoot框架搭建RESTful API提供数据接口。

1. 前端页面

在前端页面中，我们需要使用JavaScript代码调用axios库向后端发送请求，并将返回的数据渲染到页面上。

首先，我们需要在HTML文件中定义多个div块，用于展示不同的信息。例如：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

然后，在JavaScript中编写如下代码：

axios.get('/api/getData').then(function (response) {
  // 获取到数据后，将数据渲染到对应的div块中
  document.getElementById('div1').innerHTML = response.data[0];
  document.getElementById('div2').innerHTML = response.data[1];
  document.getElementById('div3').innerHTML = response.data[2];
}).catch(function (error) {
  console.log(error);
});

在上述代码中，我们首先使用axios库向后端发送GET请求，请求对应的数据接口。接口的URL为“/api/getData”。在获取到数据后，我们将数据渲染到对应的div块中。这里假设返回的数据是一个数组，包含三个元素，分别对应三个div块中的内容。

2. 后端代码

在后端代码中，我们需要使用SpringBoot框架搭建RESTful API，提供数据接口给前端页面调用。在本例中，我们需要提供一个接口，返回多条信息供前端渲染。代码如下：

@RestController
@RequestMapping("/api")
public class ApiController {

  @Autowired
  private DataService dataService;

  @GetMapping("/getData")
  public List<String> getData() {
    // 调用DataService中的方法获取数据
    return dataService.getData();
  }
}

在上述代码中，我们首先使用@RestController注解标记该类为RESTful API控制器，使用@RequestMapping注解指定路由前缀为“/api”。然后，我们定义了一个名为getData的接口，使用@GetMapping注解指定请求方法为GET，请求URL为“/getData”。在接口实现中，我们调用了一个名为dataService的服务，获取数据并返回给前端。

3. 数据库操作

在上述代码中，我们调用了一个名为dataService的服务，用于获取数据。在服务的实现中，我们需要使用JdbcTemplate或MyBatis等库进行数据库操作，获取需要的数据。这里以JdbcTemplate为例，代码如下：

@Service
public class DataService {

  @Autowired
  private JdbcTemplate jdbcTemplate;

  public List<String> getData() {
    // 查询数据库，获取需要的数据
    List<String> data = jdbcTemplate.queryForList("SELECT field1, field2, field3 FROM table", String.class);
    return data;
  }
}

在上述代码中，我们首先使用@Service注解标记该类为服务类，使用@Autowired注解注入JdbcTemplate对象。然后，在getData方法中，我们使用JdbcTemplate进行数据库查询，获取需要的数据，并返回给调用方。

以上就是使用JavaScript利用axios向MySQL数据库获得多条信息返回前端渲染输出到多个div块中的方法。