SpringBoot获取前端请求参数所涉及到的三个注解

注解名称支持类型支持的请求类型支持的content-type请求示例
@PathVariableURLGET所有/test/{id}
@RequestParamURLGET所有/test?id=1
@RequestBodyBodyPOST/PUT/DELETEJSON{“id”:1}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在前端页面引入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块中的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值