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

前后端数据交互

一、后端部分

        1.创建Spring Boot项目:在IDEA中创建一个Spring Boot项目,引入必要的依赖。

        2.编写Controller层:在Spring Boot项目中创建Controller,用于处理前端的请求和响应数据。

@RestController
@RequestMapping("/demo/staff")
public class DemoStaffController extends AbstractController {@Resourceprivate DemoStaffService demoStaffService;@SysLog("保存/新增")@PostMapping("/save")@RequiresPermissions("demo:staff:save")public R saveStaff(@RequestBody DemoStaff staff){ValidatorUtils.validateEntity(staff);staff.setCreateBy(getUser().getUserId());demoStaffService.saveStaff(staff);return R.ok();}
}

        3.Service层:编写Service层处理业务逻辑,如从数据库中获取数据。

//接口
public interface DemoStaffService extends IService<DemoStaff> {void saveStaff(DemoStaff staff);
}//实现类
@Service
public class DemoStaffServiceImpl extends ServiceImpl<DemoStaffDao, DemoStaff> implements DemoStaffService {@Resourceprivate DemoStaffDao demoStaffDao;@Overridepublic void saveStaff(DemoStaff staff){this.save(staff);}
}

        4.编写Dao层:

@Mapper
public interface DemoStaffDao extends BaseMapper<DemoStaff> {
}

        5.entity层:创建实体类来表示数据对象。

二、前端部分

1.创建Vue项目

2.编写组件:创建Vue组件来渲染页面和处理用户交互,例如:

<template><div class="mod-config"><!-- 表单区域 --><el-form :inline="true" :model="dataForm" @keyup.enter.native="search()"><el-form-item><el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input></el-form-item><el-form-item><el-button @click="search()">查询</el-button></el-form-item></el-form></div>
</template><script>export default {data () {return {dataForm: {paramKey: ''}}},components: {},activated () {},methods: {search() {this.pageIndex = 1 this.getDataList() },getDataList () {this.dataListLoading = true this.$http({url: this.$http.adornUrl('/sys/config/list'),method: 'get',params: this.$http.adornParams({'page': this.pageIndex,'limit': this.pageSize,'paramKey': this.dataForm.paramKey})}).then(({data}) => {if (data && data.code === 0) {console.log(data);} else {console.log(data);}})}}}
</script>

        3.样式:使用CSS.

三、前后端交互

        1.跨域问题:在前后端分离开发中,会遇到跨域问题。后端可以通过配置跨域资源共享来解决。在 Spring Boot 中,可以添加如下配置类:

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").maxAge(3600);}
}

        2.前端调用后端接口:在Vue组件中调用后端提供的API接口。

        3.后端处理请求:Spring Boot中的Controller接收前端的请求,处理业务逻辑并返回数据。

        4.前端处理响应:Vue组件中通过异步请求获取后端数据,然后更新页面。

相关文章:

前后端数据交互

一、后端部分 1.创建Spring Boot项目&#xff1a;在IDEA中创建一个Spring Boot项目&#xff0c;引入必要的依赖。 2.编写Controller层&#xff1a;在Spring Boot项目中创建Controller&#xff0c;用于处理前端的请求和响应数据。 RestController RequestMapping("/demo/s…...

将现有Web 网页封装为macOS应用

文章目录 方式一&#xff1a;Unite for macOS方式二&#xff1a;Web2Desk方式三&#xff1a;Nativefier方式四&#xff1a;Flutter Flutter WebView Plugin总结 方式一&#xff1a;Unite for macOS Unite 是一款专为 macOS 设计的工具&#xff0c;可以将任意 Web 页面快速封装…...

代码随想录Day52 101. 孤岛的总面积,102. 沉没孤岛,103. 水流问题,104.建造最大岛屿。

1.孤岛的总面积 卡码网&#xff1a;101. 孤岛的总面积(opens new window) 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;岛屿指的是由水平或垂直方向上相邻的陆地单元格组成的区域&#xff0c;且完全被水域单元格…...

Python毕业设计选题:基于Python的社区爱心养老管理系统设计与实现_django

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 身体健康界面 公共书籍界面 借阅信息界面 归还…...

逆袭之路(11)——python网络爬虫:原理、应用、风险与应对策略

困厄铸剑心&#xff0c;逆袭展锋芒。 寒苦凝壮志&#xff0c;腾跃绘华章。 我要逆袭。 目录 一、引言 二、网络爬虫的基本原理 &#xff08;一&#xff09;网络请求与响应 &#xff08;二&#xff09;网页解析 &#xff08;三&#xff09;爬行策略 三、网络爬虫的应用领…...

【Rust自学】7.3. 路径(Path)Pt.2:访问父级模块、pub关键字在结构体和枚举类型上的使用

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 7.3.1. super 我们可以通过在路径开头使用super来访问父级模块路径中的内容&#xff0c;就像使用..语法启动文件系统路径。例如&#xff…...

wangEditor富文本插件在vue项目中使用和媒体上传的实现

wangEditor是前端一个比较流行的简洁易用&#xff0c;功能强大的前端富文本编辑器&#xff0c;支持 JS Vue React&#xff0c;提供了很多丰富的功能&#xff0c;下面手把手教你实现wangWditor富文本插件在vue项目中配置&#xff0c;保存、图片上传等功能。无脑ctrlc即可 基本功…...

FFmpeg 的常用API

FFmpeg 的常用API 附录&#xff1a;FFmpeg库介绍 库介绍libavcodec音视频编解码核心库编码 (avcodec_send_frame, avcodec_receive_packet)。解码 (avcodec_send_packet, avcodec_receive_frame)。libavformat提供了音视频流的解析和封装功能&#xff0c;多种多媒体封装格式&…...

【软件】教务系统成绩提交工具使用步骤

【软件】教务系统成绩提交工具使用步骤 零、快速开始 安装 与大多数软件一样&#xff0c;安装步骤很简单&#xff0c;一直点击“下一步”即可快速完成安装&#xff0c;安装完成后&#xff0c;在桌面会有一个软件图标&#xff0c;双击即可打开软件主界面。 导入成绩到Excel中…...

es快速扫描

介绍 Elasticsearch简称es&#xff0c;一款开源的分布式全文检索引擎 可组建一套上百台的服务器集群&#xff0c;处理PB级别数据 可满足近实时的存储和检索 倒排索引 跟正排索引相对&#xff0c;正排索引是根据id进行索引&#xff0c;所以查询效率非常高&#xff0c;但是模糊…...

埃斯顿机器人程序模版案例,欢迎指点

埃斯顿机器人程序模版案例&#xff0c;欢迎指点...

解锁成长密码:探寻刻意练习之道

刻意练习&#xff0c;真有那么神&#xff1f; 在生活中&#xff0c;你是否有过这样的困惑&#xff1a;每天苦练英语口语&#xff0c;可一到交流时还是支支吾吾&#xff1b;埋头苦学吉他&#xff0c;却总是卡在几个和弦转换上&#xff1b;工作多年&#xff0c;业务能力却似乎陷入…...

对外发PDF设置打开次数

在线 Host PDF 文件并对链接进行限制——保障文件安全的最佳解决方案 在数字化办公和远程协作日益普及的今天&#xff0c;如何安全高效地分享 PDF 文件成为许多用户关注的重点。MaiPDF 作为一款功能强大的在线工具&#xff0c;不仅支持在线 host PDF 文件&#xff0c;还提供多…...

【Linux命令】su、sudo、sudo su、sudo -i、sudo -l的用法和区别

su 命令 su (Switch User 切换用户)&#xff0c;允许用户切换到另一个用户的身份&#xff0c;默认情况下是切换到 root 用户。 默认行为&#xff1a;如果只运行 su&#xff0c;则系统会要求输入 root 用户的密码来切换到 root 用户&#xff0c;获取管理员权限。 切换到其他用…...

leetcode hot 100搜索回溯

39. 组合总和 已解答 中等 相关标签 相关企业 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candi…...

记录-->为2025添砖java的第二天

如何在java中创建自己的方法呢&#xff0c;我认为它和在C语言c里面写函数就没啥区别&#xff0c;(⊙﹏⊙)&#xff0c;可能有一点点就是说public static int add(int a,int b){}就是得和main方法里面的状态一致。 import java.util.Scanner; public class Math3 {public stati…...

uniapp小程序实现弹幕不重叠

uniapp小程序实现弹幕不重叠 1、在父组件中引入弹幕组件 <template><!-- 弹幕 --><barrage ref"barrage" class"barrage-content" reloadDanmu"reloadDanmu"></barrage> </template> <script>import barr…...

拼多多纠偏,能否实现买卖平权?

科技新知 原创作者丨江蓠 编辑丨蕨影 当曾将仅退款、运费险作为标配的电商平台们开始听到商家诉求&#xff0c;有意优化营商环境&#xff0c;作为“仅退款”服务发起者的拼多多也坐不住了。 在推出一揽子减免计划讨好中小商家之后&#xff0c;拼多多近期被传正在内测精选用户…...

【Leetcode】3159. 查询数组中元素的出现位置

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个整数数组 nums &#xff0c;一个整数数组 queries 和一个整数 x 。 对于每个查询 q u e r i e s [ i ] queries[i] queries[i] &#xff0c;你需要找到 n u m s nums nu…...

PHP语言laravel框架中基于Redis的异步队列使用实践与原理

在 Laravel 中&#xff0c;基于 Redis 的异步队列是通过 Laravel 的队列系统与 Redis 服务结合来实现的。这种队列机制允许你将任务推送到队列中&#xff0c;并由后台工作进程异步处理这些任务。这样&#xff0c;你就可以将耗时的操作&#xff08;如发送邮件、处理视频、数据同…...

Element-plus自动导入

安装 npm i element-plus 自动引入 1. 安装两个插件 npm install -D unplugin-vue-components unplugin-auto-import2. 配置插件 vue3项目修改vite.config.js&#xff0c;把两个插件添加入即可&#xff0c;注意:不是覆盖原有配置 Vite // vite.config.js import { define…...

贪心算法(常见贪心模型)

常见贪心模型 简单排序模型 最小化战斗力差距 题目分析&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 10;int n; int a[N];int main() {// 请在此输入您的代码cin >> n;for (int i 1;i < n;i) cin >> a[i];sort(a1,a1n);…...

碰一碰发视频后端源码技术开发详解,支持OEM

一、引言 碰一碰发视频作为一种新颖的交互方式&#xff0c;在前端为用户带来便捷体验的同时&#xff0c;后端技术起着至关重要的支撑作用。后端负责管理视频资源、处理 NFC 标签信息与视频的关联逻辑、用户数据的存储与分析以及与前端的高效通信&#xff0c;确保整个系统稳定、…...

Python vs PHP:哪种语言更适合网页抓取

本文将比较 Python 和 PHP&#xff0c;以帮助读者确定哪种语言更适合他们的需求。文章将探讨两种语言的优点和缺点&#xff0c;并根据读者的经验水平分析哪种语言可能更容易上手。接下来&#xff0c;文章将深入探讨哪种语言在抓取网页数据方面更胜一筹。 简而言之&#xff0c;…...

SpringBoot 新特性

优质博文&#xff1a;IT-BLOG-CN 2.1.0新特性最低支持jdk8,支持tomcat9 对响应式编程的支持&#xff0c;spring-boot-starter-webflux starter POM可以快速开始使用Spring WebFlux&#xff0c;它由嵌入式Netty服务器支持 1.5.8 2.1.0/2.7.0/3.0.0 Configuration propertie…...

NAT 技术如何解决 IP 地址短缺问题?

NAT 技术如何解决 IP 地址短缺问题&#xff1f; 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 随着互联网的普及和发展&#xff0c;IP 地址的需求量迅速增加。尤其是 IPv4 地址&…...

微积分复习(微分方程)

1,一阶微分方程 可分离的微分方程: 可以把x和y分列等号两边,然后求积分可以解决 齐次方程和准齐次方程 要求是 :yf(y/x),也就是没有单独的x项,我们可以通过设ty/x来统一变量方便我们运算 准齐次方程就是常数项不统一,我们可以将Xxa,Yyb来消灭常数项进而转化为齐次形式…...

动态规划子序列问题系列一>等差序列划分II

题目&#xff1a; 解析&#xff1a; 1.状态表示&#xff1a; 2.状态转移方程&#xff1a; 这里注意有个优化 3.初始化&#xff1a; 4.填表顺序&#xff1a; 5.返回值&#xff1a; 返回dp表总和 代码&#xff1a; public int numberOfArithmeticSlices(int[] nums) {in…...

【连续学习之SSL算法】2018年论文Selfless sequential learning

1 介绍 年份&#xff1a;2018 期刊&#xff1a; arXiv preprint Aljundi R, Rohrbach M, Tuytelaars T. Selfless sequential learning[J]. arXiv preprint arXiv:1806.05421, 2018. 本文提出了一种名为SLNID&#xff08;Sparse coding through Local Neural Inhibition and…...

【FastAPI】中间件

【FastAPI】中间件 一、概述二、作用2.1 日志记录与监控2.2 身份验证与授权2.3 CORS&#xff08;跨域资源共享&#xff09;2.4 Gzip压缩2.5 会话管理2.6 自定义功能2.7 执行顺序 三、 总结四、相关链接 一、概述 FastAPI的中间件提供了一种强大的机制&#xff0c;允许开发者在…...

文档大师:打造一站式 Word 报告解决方案1

前言 在政府、医院、银行、财务以及销售等领域&#xff0c;常常需要创建各种报告文件来展开工作汇报&#xff0c;譬如季度销售报告、年度总结报告、体检报告和保险合同等。在没有报表工具支持之前&#xff0c;这类报告主要通过 Word 制作&#xff0c;费时费力且难以维护&#…...

再谈c++线性关系求值

目的 线性关系是最简单的一种关系&#xff0c;在编程当中应用非常多&#xff0c;所以&#xff0c;再说一次线性关系。 线性关系的定义是这样的&#xff1a; 两个变量之间存在一次方函数关系&#xff0c;就称它们之间存在线性关系。正比例关系是线性关系中的特例&#xff0c;反…...

【ES6复习笔记】Class类(15)

介绍 ES6 提供了更接近传统语言的写法&#xff0c;引入了 Class&#xff08;类&#xff09;这个概念&#xff0c;作为对象的模板。通过 class 关键字&#xff0c;可以定义类。基本上&#xff0c;ES6 的 class 可以看作只是一个语法糖&#xff0c;它的绝大部分功能&#xff0c;…...

AppAgent 源码 (xml 解析)

1. 数据准备 adb shell uiautomator dump /sdcard/output.xml # 获取手机ui界面的xml文件 adb pull /sdcard/output.xml output.xml # 将手机上的xml文件拉取到电脑上具体的xml文件&#xff1a; <?xml version1.0 encodingUTF-8 standaloneyes ?> <hierarchy ro…...

Oracle 11G还有新BUG?ORACLE 表空间迷案!

前段时间遇到一个奇葩的问题&#xff0c;在开了SR和oracle support追踪两周以后才算是有了不算完美的结果&#xff0c;在这里整理出来给大家分享。 1.问题描述 12/13我司某基地MES全厂停线&#xff0c;系统卡死不可用&#xff0c;通知到我排查&#xff0c;查看alert log看到是…...

FreeSwitch中启用WebRTC

在FreeSwitch中启用WebRTC需要进行一系列配置。以下是详细的步骤&#xff1a; 1. 安装必要的依赖&#xff1a; 确保安装了支持WebRTC的依赖库&#xff0c;如libsrtp。 2. 配置SIP Profile&#xff1a; 编辑 conf/sip_profiles/internal.xml 文件&#xff0c;添加或修改以下内…...

力扣矩阵-算法模版总结

lc-73.矩阵置零-(时隔14天)-12.27 思路&#xff1a;(23min22s) 1.直接遍历遇0将行列设0肯定不行&#xff0c;会影响后续判断&#xff0c;题目又要求原地算法&#xff0c;那么进一步考虑是否可以将元素为0&#xff0c;其行列需要设为0的位置给存储下来&#xff0c;最后再遍历根据…...

服务端高并发分布式结构演进之路

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 服务端高并发分布式结构演进之路 收录于专栏[redis] 本专栏旨在分享学习Redis的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 概述 …...

虚拟机桥接模式

主机Win10,虚拟机xp 1.虚拟机设置中选择桥接模式 2.在虚拟机菜单&#xff1a;编辑>虚拟机网络编辑&#xff0c;点击“更改设置”&#xff0c;可以看到三个网卡&#xff0c;这三个网卡分别对应不同的网络共享模式。桥接模式须使用VMnet0&#xff0c;如果没看到这个网卡&…...

JVM调优实践篇

理论篇 1多功能养鱼塘&#xff0d;JVM内存 大鱼塘O&#xff08;可分配内存&#xff09;&#xff1a; JVM可以调度使用的总的内存数&#xff0c;这个数量受操作系统进程寻址范围、系统虚拟内存总数、系统物理内存总数、其他系统运行所占用的内存资源等因素的制约。 小池塘A&a…...

SpeedTree学习笔记总结

SpeedTree是一款业界领先的三维树木植被建模软件&#xff0c;特别适用于游戏开发和影视制作。 一、基础操作 旋转&#xff1a;鼠标左键 平移&#xff1a;鼠标中键 缩放&#xff1a;鼠标中键滚动 Trunks树干节点 Branches树枝 Cap给树干封口 Frond创建大树叶 Decorations…...

【MuJoCo和PhysX】

MuJoCo 与 Unity 的 PhysX 引擎的主要区别 应用领域&#xff1a; MuJoCo&#xff1a;主要用于机器人学、强化学习、生物力学等领域&#xff0c;擅长处理多自由度、复杂动力学问题&#xff0c;尤其适合进行高精度的物理仿真。 Unity PhysX&#xff1a;主要用于游戏开发、虚拟现…...

HTML制作一个普通的背景换肤案例2024版

一&#xff0c;完整的代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>换肤</t…...

python学opencv|读取图像(二十一)使用cv2.circle()绘制圆形进阶

【1】引言 前序已经掌握了使用cv2.circle()绘制圆形的基本操作&#xff0c;相关链接为&#xff1a; python学opencv|读取图像&#xff08;二十&#xff09;使用cv2.circle()绘制圆形-CSDN博客 由于圆形本身绘制起来比较简单&#xff0c;因此可以自由操作的空间也就大&#x…...

qt QZipReader详解

1、概述 QZipReader 是 Qt 中用于从 .zip 文件中读取和提取文件内容的类。它提供了便捷的方法来访问压缩包中的文件和目录&#xff0c;并允许你解压缩单个或多个文件。通过 QZipReader&#xff0c;你可以以编程方式读取 .zip 文件中的内容&#xff0c;并提取它们到目标目录中。…...

开发场景中Java 集合的最佳选择

在 Java 开发中&#xff0c;集合类是处理数据的核心工具。合理选择集合&#xff0c;不仅可以提高代码效率&#xff0c;还能让代码更简洁。本篇文章将重点探讨 List、Set 和 Map 的适用场景及优缺点&#xff0c;帮助你在实际开发中找到最佳解决方案。 一、List&#xff1a;有序存…...

顶顶通呼叫中心中间件mod_cti模块安全增强,预防盗打风险(mod_cti基于FreeSWITCH)

文章目录 前言联系我们mod_cti版本支持安全加强说明 前言 FreeSWITCH暴露在公网最大的风险就是被不法之人盗打 出现盗打的主要原因以下几点&#xff1a; 分机密码太简单或者密码泄露了拨号方案配置不合理sofia配置错误 所以我们给顶顶通呼叫中心中间件添加了安全加强功能&am…...

bash shell的条件语句

&#xff5e; script% touch if.sh &#xff5e; script% chmod 755 if.sh1.if-then-fi #!/usr/bin/env bashFOOD$1 if [ $FOOD"apple" ] thenecho The food is $FOOD fi exit 0~ script % ./if.sh apple The food is apple如果要将多条语句写在一行&#xff0c;可以…...

拦截器Interceptor与过滤器Filter

拦截器Interceptor 定义&#xff1a; SpringMVC内置拦截机制,允许在请求被目标方法处理的前后进行拦截&#xff0c;执行一些额外操作&#xff1b;比如&#xff1a;权限验证&#xff0c;日志记录&#xff0c;数据共享等。 实现步骤 1、自定义拦截器 Component public class …...

水电站视频智能监控系统方案设计与技术应用方案

一、背景需求 水电站作为国家重要的能源基地&#xff0c;其安全运行对于保障能源供应和社会稳定具有重要意义。然而&#xff0c;传统的人工监控方式存在着诸多问题&#xff0c;如人力成本高、监控范围有限、反应不及时等。因此&#xff0c;水电站急需引进一种先进的视频智能监控…...