长春商城网站制作,网站主机推荐,WordPress小程序官网,湛江怎样建设自己的网站axios调用接口获取数据
可以查看简述化的此文 点击 此文简述化文章 PS**由于我自己的本次springboot项目内容很多#xff0c;所以只是截取了其中关于axios调用接口获取数据的内容#xff0c;还请大家了解工作原理即可**
前端
添加axios和vue2链接 script srchtt…axios调用接口获取数据
可以查看简述化的此文 点击 此文简述化文章 PS**由于我自己的本次springboot项目内容很多所以只是截取了其中关于axios调用接口获取数据的内容还请大家了解工作原理即可**
前端
添加axios和vue2链接 script srchttps://cdn.staticfile.org/axios/0.18.0/axios.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js/scriptdiv
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 classtable-responsive idZjwtable classtable table-striped table-smtheadtrth学号/thth姓名/thth年龄/thth照片/th/tr/theadtbodytr v-foritem in alltd{{item.cno}}/tdtd{{item.name}}/tdtd{{item.age}}/tdtdimg :srcitem.picUrl styleheight: 130px;width: 130px/td/tr/tbody/table/divscript
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
ResponseBodyGetMapping(getAll)public ListStudent stu(Model model) {ListStudent students stuService.getAll();return students;}如果说是要进入页面的话 GetMapping(/student)public String student(Model model){ListStudent studentsstuService.getAll();model.addAttribute(stu,students);return students;}结语
那么到这里基本上运行项目后可以正常的获取数据库数据并显示到页面上了。当然这里所展示的仅仅是关于axios调用接口部分其余的内容真的还差很多总之完成一个项目还是任务艰难的。
