当前位置：首页 > news >正文

Vue axios调用springboot接口获取数据库数据并显示到网页

news 2025/6/30 23:25:12

axios调用接口获取数据

可以查看简述化的此文点击 此文简述化文章
PS**由于我自己的本次springboot项目内容很多，所以只是截取了其中关于axios调用接口获取数据的内容，还请大家了解工作原理即可**

前端

添加axios和vue2链接

 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>

div

div中使用vue语法v-for来循环列表数据item in list
当然关于数据有很多种类嘛，如果不需要图片数据的读者可以掠过下面关于图片的内容
PS关于图片的细节很多，可以学习springboot相关内容，也可以参考我之前的帖子，请点击：springboot图片的上传与显示
不过经过了这么长时间，还是有所修改，尤其是关于存储在数据库的数值可以加入前缀http://localhost:8081/当然端口号是自定义的。
控制器中修改upload的绝对路径以及添加前缀这样才方便显示图片
img.transferTo(new File("D:\\大二上\\SpringBoot\\springboot01_10\\src\\main\\resources\\upload\\" + newFilename)); student.setPicUrl("http://localhost:8081/upload/"+newFilename
这里要将upload文件夹放在resources下，并记得配置config防止被禁止访问404发生
div代码参考

 <div class="table-responsive " id="Zjw"><table class="table table-striped table-sm"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>照片</th></tr></thead><tbody><tr v-for="item in all"><td>{{item.cno}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><img :src="item.picUrl" style="height: 130px;width: 130px"></td></tr></tbody></table></div>

script

getAll为springboot我们编写的后端接口

 new Vue({el: "#Zjw",data:{all: []},mounted() {this.getAl()//回调//Cqnu-zjw},methods: {getAl(){//使用axios请求后台数据axios.get("http://localhost:8081/getAll").//getAll后端接口then(res => {this.all = res.data}).catch(err => {console.log("获取不正常")})}},})

后端

对于后端来说在这里就只需要有一个获取数据库的数据接口。yaml中自行配置端口，当然对于一个springboot项目来说配置是很多的，可以自行研究。

controller

getAll接口既然是获取数据接口就要加上@ResponseBody

@ResponseBody@GetMapping("getAll")public List<Student> stu(Model model) {List<Student> students = stuService.getAll();return students;}

如果说是要进入页面的话

 @GetMapping("/student")public String student(Model model){List<Student> students=stuService.getAll();model.addAttribute("stu",students);return "students";}