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项目内容很多,所以只是截取了其中关于axios调用接口获取数据的内容,还请大家了解工作原理即可** 前端 添加axios和vue2链接 <script src"htt…...
12-bean创建流程3
文章目录 1 bean实例化前 2. bean实例化doCreateBean() 1 bean实例化前 createBean方法里面的resolveBeforeInstantiation方法,InstantiationAwareBeanPostProcessor接口创建一个代理对象返回 try {// Give BeanPostProcessors a chance to return a p…...
volatile关键字 和 i = i + 1过程
本文是复制粘贴,请直接看原文 原文链接:Java并发编程:volatile关键字解析 - Matrix海子 - 博客园 (cnblogs.com) ------------------------------------------------------------------------------------------------------------------- Java并发编程࿱…...
ubuntu20 安装 cmake 3.27
1. 下载cmake3.27 建议从cmake官网下载安装,虽然比较慢,但从清华镜像里下载的cmake文件不全。 我下载的是:cmake-3.27.7.tar.gz 博客 ubuntu安装cmake的三种方法(超方便!)-CSDN博客 里面提供了三种方法&am…...
faster lio 回环 加入GTSAM优化的记录
首先感谢这位博主的文章:https://blog.csdn.net/weixin_41281151/article/details/125371285,其中部分代码参考于改博主中的github: https://github.com/kahowang/FAST_LIO_SAM 不同的是,我使用的是faster lio进行更改,…...
深入剖析 深度学习中 __init()__函数和forward()函数
目录 前言1. __init()__函数2. forward()函数3. 两者关系 前言 再看代码时,发现init函数和forward函数都有参数,具体是怎么传参的呢? 为了更方便的讲解,会举简单的代码例子结合讲解。 forward() 和 __init__() 是神经网络模型类…...
BUUCTF学习(一):SQL注入,万能密码
1、场景 2、题目 3、解题 用户名:admin or 11# 密码:123456 4、解析SQL注入 “SQL注入是一种常见的Web应用程序漏洞,攻击者可以通过注入的SQL语句获取数据库的敏感信息,对网站用户的数据安全造成威胁。SQL注入的特点包括广泛性、隐…...
基于springboot实现心灵治愈心理健康平台系统项目【项目源码+论文说明】计算机毕业设计
基于springboot实现心灵心理健康平台系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个心灵治愈交流平台 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者将论…...
百度Apollo自动驾驶
百度从2013年开始布局自动驾驶领域,十年来一直坚持压强式的、马拉松式的研发投入,以技术创新驱动长期发展。百度Apollo L4级自动驾驶运营测试里程累计已超5000万公里,拥有自动驾驶专利族超4600件,其中高级别自动驾驶专利族数全球第…...
数据迁移库工具-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批量加载。ÿ…...
【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 节点,如果master节点挂掉了,会导致整个服务不可用,线上不宜使用,适合个人学习…...
论文笔记[156]PARAFAC. tutorial and applications
原文下载:https://www.sciencedirect.com/science/article/abs/pii/S0169743997000324 摘要 本文介绍了PARAFAC的多维分解方法及其在化学计量学中的应用。PARAFAC是PCA对高阶数组的推广,但该方法的一些特性与普通的二维情况截然不同。例如,…...
AKKA.Net 的使用 来自CHATGPT
请用C# 语言实现一个自动化设备 流水线调度模型,流水线各个环节需要并行执行: 下面是一个使用C#语言实现自动化设备流水线调度模型的简单示例。该示例使用并发编程库System.Threading.Tasks来实现流水线各个环节的并行执行。 csharp using System; usi…...
网络安全—小白学习笔记
1.网络安全是什么 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高; 二、则是发展相对成熟入…...
OpenRemote: Java 开源 IoT 物联网开发平台,匹配智慧城市、智能家居、能源管理
OpenRemote 是一个直观、用户友好的基于Java语言的开源 IoT 物联网设备管理平台,它包括从连接设备到构建应用程序和特定领域的智能应用程序的所有功能和特性。通过OpenRemote物联网平台,用户可以收集和处理来自不同设备的传感器数据,适用于智…...
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,主要是对Controller资源访问时进行拦截的基本操作的技术,当然拦截后可以进行权限控制,功能增强等都是可以的。拦截器类似于JavaWeb开发中的Filter,他们之间的区别如下图所示 Filter技术…...
【git】gitlab常用命令
gitlab官网 官网:官网 中文官网:中文官网 默认的gitlab安装目录 /opt/gitlab/bin 启动 gitlab-ctl start 查看状态 gitlab-ctl status 停止 gitlab-ctl stop 重启GitLab gitlab-ctl restart 查看gitlab的配置文件 配置的路径是:/…...
解读下SWD协议以及其应用
SWD协议原理 SWD(Serial Wire Debug)协议是一种用于ARM Cortex微控制器的调试接口协议。它定义了主机计算机与目标设备之间通过SWD线进行通信的格式和规范。 SWD协议使用两根线进行通信:SWDIO(Serial Wire Debug I/O)…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
安卓基础(Java 和 Gradle 版本)
1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
