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

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

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";}

结语

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

相关文章:

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

axios调用接口获取数据 可以查看简述化的此文 点击 此文简述化文章 PS**由于我自己的本次springboot项目内容很多&#xff0c;所以只是截取了其中关于axios调用接口获取数据的内容&#xff0c;还请大家了解工作原理即可** 前端 添加axios和vue2链接 <script src"htt…...

12-bean创建流程3

文章目录 1 bean实例化前 2. bean实例化doCreateBean&#xff08;&#xff09; 1 bean实例化前 createBean方法里面的resolveBeforeInstantiation方法,InstantiationAwareBeanPostProcessor接口创建一个代理对象返回 try {// Give BeanPostProcessors a chance to return a p…...

volatile关键字 和 i = i + 1过程

本文是复制粘贴,请直接看原文 原文链接:Java并发编程&#xff1a;volatile关键字解析 - Matrix海子 - 博客园 (cnblogs.com) ------------------------------------------------------------------------------------------------------------------- Java并发编程&#xff1…...

ubuntu20 安装 cmake 3.27

1. 下载cmake3.27 建议从cmake官网下载安装&#xff0c;虽然比较慢&#xff0c;但从清华镜像里下载的cmake文件不全。 我下载的是&#xff1a;cmake-3.27.7.tar.gz 博客 ubuntu安装cmake的三种方法&#xff08;超方便&#xff01;&#xff09;-CSDN博客 里面提供了三种方法&am…...

faster lio 回环 加入GTSAM优化的记录

首先感谢这位博主的文章&#xff1a;https://blog.csdn.net/weixin_41281151/article/details/125371285&#xff0c;其中部分代码参考于改博主中的github&#xff1a; https://github.com/kahowang/FAST_LIO_SAM 不同的是&#xff0c;我使用的是faster lio进行更改&#xff0c…...

深入剖析 深度学习中 __init()__函数和forward()函数

目录 前言1. __init()__函数2. forward()函数3. 两者关系 前言 再看代码时&#xff0c;发现init函数和forward函数都有参数&#xff0c;具体是怎么传参的呢&#xff1f; 为了更方便的讲解&#xff0c;会举简单的代码例子结合讲解。 forward() 和 __init__() 是神经网络模型类…...

BUUCTF学习(一):SQL注入,万能密码

1、场景 2、题目 3、解题 用户名&#xff1a;admin or 11# 密码&#xff1a;123456 4、解析SQL注入 “SQL注入是一种常见的Web应用程序漏洞&#xff0c;攻击者可以通过注入的SQL语句获取数据库的敏感信息&#xff0c;对网站用户的数据安全造成威胁。SQL注入的特点包括广泛性、隐…...

基于springboot实现心灵治愈心理健康平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现心灵心理健康平台系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个心灵治愈交流平台 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论…...

百度Apollo自动驾驶

百度从2013年开始布局自动驾驶领域&#xff0c;十年来一直坚持压强式的、马拉松式的研发投入&#xff0c;以技术创新驱动长期发展。百度Apollo L4级自动驾驶运营测试里程累计已超5000万公里&#xff0c;拥有自动驾驶专利族超4600件&#xff0c;其中高级别自动驾驶专利族数全球第…...

数据迁移库工具-C版-01-HappySunshineV1.0-(支持Gbase8a)

一、测试环境信息 名称值CPUIntel(R) Core(TM) i5-1035G1 CPU 1.00GHz操作系统CentOS Linux release 7.9.2009 (Core)内存3G逻辑核数2Gbase8a版本8.6.2-R43.34.27468a27HappySunshine版本V1.0 二、支持功能 序号功能1GBASE8a到GBASE8a的库级数据迁移。2批量加载。&#xff…...

【sv】 pack/unpack stream

https://www.amiq.com/consulting/2017/05/29/how-to-pack-data-using-systemverilog-streaming-operators/ https://www.amiq.com/consulting/2017/06/23/how-to-unpack-data-using-the-systemverilog-streaming-operators/...

二、使用DockerCompose部署RocketMQ

使用DockerCompose进行部署 docker-compose的版本为 Docker Compose version v2.2.3 RocketMQ的部署方式以及各自的特点 单master模式 只有一个 master 节点&#xff0c;如果master节点挂掉了&#xff0c;会导致整个服务不可用&#xff0c;线上不宜使用&#xff0c;适合个人学习…...

论文笔记[156]PARAFAC. tutorial and applications

原文下载&#xff1a;https://www.sciencedirect.com/science/article/abs/pii/S0169743997000324 摘要 本文介绍了PARAFAC的多维分解方法及其在化学计量学中的应用。PARAFAC是PCA对高阶数组的推广&#xff0c;但该方法的一些特性与普通的二维情况截然不同。例如&#xff0c;…...

AKKA.Net 的使用 来自CHATGPT

请用C# 语言实现一个自动化设备 流水线调度模型&#xff0c;流水线各个环节需要并行执行&#xff1a; 下面是一个使用C#语言实现自动化设备流水线调度模型的简单示例。该示例使用并发编程库System.Threading.Tasks来实现流水线各个环节的并行执行。 csharp using System; usi…...

网络安全—小白学习笔记

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟入…...

OpenRemote: Java 开源 IoT 物联网开发平台,匹配智慧城市、智能家居、能源管理

OpenRemote 是一个直观、用户友好的基于Java语言的开源 IoT 物联网设备管理平台&#xff0c;它包括从连接设备到构建应用程序和特定领域的智能应用程序的所有功能和特性。通过OpenRemote物联网平台&#xff0c;用户可以收集和处理来自不同设备的传感器数据&#xff0c;适用于智…...

GO-unioffice实现word编辑

导包 import ("fmt""log""os""time""github.com/unidoc/unioffice/common/license""github.com/unidoc/unioffice/document" ) 创建word文件 func CreateFile(name string) {filename : name ".docx&quo…...

SpringMVC的拦截器(Interceptor)

拦截器简介 SpringMVC的拦截器Interceptor&#xff0c;主要是对Controller资源访问时进行拦截的基本操作的技术&#xff0c;当然拦截后可以进行权限控制&#xff0c;功能增强等都是可以的。拦截器类似于JavaWeb开发中的Filter&#xff0c;他们之间的区别如下图所示 Filter技术…...

【git】gitlab常用命令

gitlab官网 官网&#xff1a;官网 中文官网&#xff1a;中文官网 默认的gitlab安装目录 /opt/gitlab/bin 启动 gitlab-ctl start 查看状态 gitlab-ctl status 停止 gitlab-ctl stop 重启GitLab gitlab-ctl restart 查看gitlab的配置文件 配置的路径是&#xff1a;/…...

解读下SWD协议以及其应用

SWD协议原理 SWD&#xff08;Serial Wire Debug&#xff09;协议是一种用于ARM Cortex微控制器的调试接口协议。它定义了主机计算机与目标设备之间通过SWD线进行通信的格式和规范。 SWD协议使用两根线进行通信&#xff1a;SWDIO&#xff08;Serial Wire Debug I/O&#xff09…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...

【前端实战】如何让用户回到上次阅读的位置?

目录 【前端实战】如何让用户回到上次阅读的位置&#xff1f; 一、总体思路 1、核心目标 2、涉及到的技术 二、实现方案详解 1、基础方法&#xff1a;监听滚动&#xff0c;记录 scrollTop&#xff08;不推荐&#xff09; 2、Intersection Observer 插入探针元素 3、基…...

Android多媒体——音/视频数据播放(十八)

在媒体数据完成解码并准备好之后,播放流程便进入了最终的呈现阶段。为了确保音视频内容能够顺利输出,系统需要首先对相应的播放设备进行初始化。只有在设备初始化成功后,才能真正开始音视频的同步渲染与播放。这一过程不仅影响播放的启动速度,也直接关系到播放的稳定性和用…...

C++参数传递 a与a的区别

在 C 中&#xff0c;&a&#xff08;引用&#xff09;和 a&#xff08;值传递&#xff09; 的关键区别在于 参数如何传递给函数&#xff0c;以及由此引发的 性能、语义和安全问题。 最核心的在于你想不想传入的参数被改变&#xff0c;如果想&#xff0c;就用参数传递&#…...

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;计算机网络 &#x1f339;往期回顾&#x1f339;&#xff1a;【计算机网络】数据链路层——ARP协议 &#x1f516;流水不争&#xff0c;争的是滔滔不息 一、网络地址转…...