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

axios调用接口获取数据

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

前端

添加axios和vue2链接

html 复制代码
 <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代码参考

html 复制代码
 <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我们编写的后端接口

html 复制代码
 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

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

如果说是要进入页面的话

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

结语

那么到这里基本上运行项目后可以正常的获取数据库数据并显示到页面上了。当然这里所展示的仅仅是关于axios调用接口部分,其余的内容真的还差很多,总之完成一个项目还是任务艰难的。

相关推荐
星辰离彬18 分钟前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
java·服务器·数据库·后端·mysql·性能优化
nightunderblackcat28 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好30 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
超级小忍32 分钟前
Spring Boot 与 Docker 的完美结合:容器化你的应用
spring boot·后端·docker
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
麦兜*2 小时前
Spring Boot 企业级动态权限全栈深度解决方案,设计思路,代码分析
java·spring boot·后端·spring·spring cloud·性能优化·springcloud
张璐月3 小时前
mysql join语句、全表扫描 执行优化与访问冷数据对内存命中率的影响
数据库·mysql
全干engineer4 小时前
ClickHouse 入门详解:它到底是什么、优缺点、和主流数据库对比、适合哪些场景?
数据库·clickhouse
Hellyc6 小时前
基于模板设计模式开发优惠券推送功能以及对过期优惠卷进行定时清理
java·数据库·设计模式·rocketmq
lifallen7 小时前
Paimon LSM Tree Compaction 策略
java·大数据·数据结构·数据库·算法·lsm-tree