springboot整合vue2实现简单的新增删除，整合ECharts实现图表渲染
先看效果图：
1.后端接口
// 查询所有商品信息
// @CrossOrigin(origins = "*")@RequestMapping("/list1")@ResponseBodypublic List<Goodsinfo> list1(){List<Goodsinfo> list = goodsService.list();return list;}// 删除
// @CrossOrigin(origins = "*")@RequestMapping("/del")@ResponseBodypublic String del(int id){try {goodsService.removeById(id);return "删除成功";}catch (Exception e){return "删除失败";}}// 根据条件查询@RequestMapping("/search")@ResponseBodypublic List<Goodsinfo> search(String goodsname,String goodsType){System.out.println(goodsname+","+goodsType);QueryWrapper<Goodsinfo> wrapper = new QueryWrapper<>();wrapper.like(StringUtils.isNotBlank(goodsname),"name",goodsname).like(StringUtils.isNotBlank(goodsType),"goods_type",goodsType);List<Goodsinfo> list = goodsService.list(wrapper);for (Goodsinfo goodsinfo : list) {System.out.println(goodsinfo);}return list;}// 添加数据@RequestMapping("/add")@ResponseBodypublic String add(@RequestBody Goodsinfo goodsinfo){System.out.println(goodsinfo);goodsService.save(goodsinfo);return "添加成功";}2.前端页面：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input type="text" v-model="goods.name" class="form-control" placeholder="名称" /><input type="text" v-model="goods.price" class="form-control" placeholder="价格" /><input type="text" v-model="goods.intro" class="form-control" placeholder="简介" /><input type="text" v-model="goods.amount" class="form-control" placeholder="库存" /><input type="text" v-model="goods.goodsType" class="form-control" placeholder="类别" /><input type="text" v-model="goods.remark" class="form-control" placeholder="备注" /><button type="button" class="btn btn-primary" @click="add()">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>名称</th><th>价格</th><th>简介</th><th>库存</th><th>类别</th><th>备注</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{index+1}}</td><<th>{{item.name}}</th><th :class="{red:item.price>1}">{{item.price}}</th><th>{{item.intro}}</th><th>{{item.amount}}</th><th>{{item.goodsType}}</th><th>{{item.remark}}</th><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{totalPrice}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="../echarts.min.js"></script><script src="../vue.js"></script><script src="../axios.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: '#app',data: {list:[],goods:{name:"",price:"",amount:"",intro:"",goodsType:"",remark:""}},computed: {totalPrice () {return this.list.reduce((sum, item) => sum + item.price, 0)}},created() {/* axios.get("http://localhost:8080/list1").then(res=>{console.log(res.data);this.list=res.data;}).catch(err=>{console.log(err)}) */this.getlist()},mounted() {this.myChart = echarts.init(document.getElementById("main"));this.myChart.setOption({title: {text: '价格结构图',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '单价',type: 'pie',radius: '50%',data: [/* { value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' } */],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},methods:{// 查询所有getlist(){axios.get("http://localhost:8080/list1").then(res=>{console.log(res.data);this.list=res.data;// 更新图表this.myChart.setOption({series: [{/* data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }] */data: this.list.map(item => ({ value: item.price, name: item.name}))}]})}).catch(err=>{console.log(err)});},// 新增add(){axios.post("http://localhost:8080/add",this.goods).then(res=>{console.log(this.goods);alert(res.data);this.getlist();this.goods={};/* for(var i in this.goods){this.goods[i] = ''} */})},// 删除del(id){if(confirm("确认删除数据？")){axios.get("http://localhost:8080/del?id="+id).then(res=>{this.getlist();})}}},})</script></body>
</html>
相关文章：
springboot整合vue2实现简单的新增删除，整合ECharts实现图表渲染
先看效果图： 1.后端接口 // 查询所有商品信息 // CrossOrigin(origins "*")RequestMapping("/list1")ResponseBodypublic List<Goodsinfo> list1(){List<Goodsinfo> list goodsService.list();return list;}// 删除 // …...
＜蓝桥杯软件赛＞零基础备赛20周--第5周--杂题-2
报名明年4月蓝桥杯软件赛的同学们，如果你是大一零基础，目前懵懂中，不知该怎么办，可以看看本博客系列：备赛20周合集 20周的完整安排请点击：20周计划 每周发1个博客，共20周（读者可以按…...
数据结构哈希表（散列）Hash，手写实现（图文推导）
目录 一、介绍 二、哈希数据结构 三、✍️实现哈希散列 1. 哈希碰撞💥 2. 拉链寻址⛓️ 3. 开放寻址⏩ 4. 合并散列 一、介绍 哈希表，也被称为散列表，是一种重要的数据结构。它通过将关键字映射到一个表中的位置来直接访问记录&#…...
【嵌入式设计】Main Memory：SPM 便签存储器 | 缓存锁定 | 读取 DRAM 内存 | DREM 猝发（Brust）
目录 0x00 便签存储器（Scratchpad memory） 0x01 缓存锁定（Cache lockdown） 0x02 读取 DRAM 内存 0x03 DREM Banking 0x04 DRAM 猝发（DRAM Burst） 0x00 便签存储器（Scratchpad memory&#…...
dameng数据库数据id decimal类型，精度丢失
问题处理 这一次也是精度丢失，但是问题呢还是不一样，这一次所有的id都被加一了，只有id字段被加一，还有的查询查出来封装成对象之后对象的id字段被减一了，数据库id字段使用的decimal（20,6）&…...
python图神经网络，注意力机制、Transformer模型、目标检测算法、强化学习等
近年来，伴随着以卷积神经网络（CNN）为代表的深度学习的快速发展，人工智能迈入了第三次发展浪潮，AI技术在各个领域中的应用越来越广泛 本文重点为：注意力机制、Transformer模型（BERT、GPT-1/2/3/…...
安装包 amd,amd64, arm,arm64 都有什么区别
现在的安装包也不省心，有各种版本都不知道怎么选。 根据你安装的环境配置。 amd： 32位X86 amd64： 64位X86 arm： 32位ARM arm64： 64位ARM amd64是X86架构的CPU，64位版。amd64又叫X86_64。主流的桌面PC&am…...
Ansible 企业实战详解
一、ansible简介1. ansible是什么2.ansible的特点ansible的架构图 二、ansible 任务执行1、ansible 任务执行模式2、ansible 执行流程3、ansible 命令执行过程 二 .Ansible安装部署1.yum安装2.ansible 程序结构3、ansible配置文件查找顺序4、ansible配置文件5.ansible自动化配置…...
云贝教育 |【技术文章】pg缓存插件介绍
一、pg_buffercache 主要作用是查看pg的共享池中缓存的对象信息 1.1 创建扩展 postgres# create extension pg_buffercache; CREATE EXTENSION 1.2 查看视图pg_buffercache postgres# \d pg_buffercacheView "public.pg_buffercache"Column | Type | Co…...
Kohana框架的安装及部署
Kohana框架的安装及部署 tipsKohana安装以及部署1、重要文件作用说明1.1 /index.php1.2 /application/bootstrap.php 2、项目结构3、路由配置3.1、隐藏项目入口的路由3.2、配置默认路由3.3、配置自定义的路由(Controller目录下的控制器)3.4、配置自定义的路由(Controller/direc…...
无重复字符的最长子串 Golang leecode_3
刚开始的思路，先不管效率，跑出来再说，然后再进行优化。然后就有了下面的暴力代码： func lengthOfLongestSubstring(s string) int {// count 用来记录当前最长子串长度var count int// flag 用来对下面两个 if 语句分流var flag …...
Vue项目的学习一
1、Vue项目里面的.js文件里面对象添加属性 例如：在对象：row，需要在对象row里面添加一个属性状态：type，使用里面的Vue.set函数 Vue.set(参数1,参数2,参数3) Vue.set(row,type,false)解析： 参数1࿱…...
k8s备份
cpu 磁盘io 往主的写，同步给备 rootk8s-etcd02:~# cat /etc/systemd/system/etcd.service [Unit] DescriptionEtcd Server Afternetwork.target Afternetwork-online.target Wantsnetwork-online.target Documentationhttps://github.com/coreos[Service] Typen…...
python自己造轮子使用
项目结构 首先，需要按照下列格式组织你的 package project （项目名称，随意，与package无关）|----package （这个才是包名）|----…...
Elastic stack8.10.4搭建、启用安全认证，启用https，TLS，SSL 安全配置详解
ELK大家应该很了解了，废话不多说开始部署 kafka在其中作为消息队列解耦和让logstash高可用 kafka和zk 的安装可以参考这篇文章 深入理解Kafka3.6.0的核心概念，搭建与使用-CSDN博客 第一步、官网下载安装包 需要 elasticsearch-8.10.4 logstash-8.…...
解决npm报错Error: error:0308010C:digital envelope routines::unsupported
解决npm报错Error: error:0308010C:digital envelope routines::unsupported。 解决办法；终端执行以下命令（windows）： set NODE_OPTIONS--openssl-legacy-provider然后再执行 npm命令成功：...
高防IP是什么？有什么优势？
一.高防IP的概念 高防IP是指高防机房所提供的IP段，一种付费增值服务，主要是针对网络中的DDoS攻击进行保护。用户可以通过配置高防IP，把域名解析到高防IP上，引流攻击流量，确保源站的稳定可靠。 二.高防IP的原理 高防I…...
php费尔康框架phalcon（费尔康）框架学习笔记
phalcon(费尔康)框架学习笔记 以实例程序invo为例(invo程序放在网站根目录下的invo文件夹里，推荐php版本>5.4) 环境不支持伪静态网址时的配置 第一步： 在app\config\config.ini文件中的[application]节点内修改baseUri参数值为/invo/index.php/或…...
StartUML的基本使用
文章目录 简介和安装创建包创建类视图时序图 简介和安装 最近在学习一个项目的时候用到了StartUML来构造项目的类图和时序图 虽然vs2019有类视图，但是也不是很清晰，并没有生成uml图，但是宇宙最智能的IDE IDEA有生成uml图的功能 下面就简单介…...
飞天使-django概念之urls
urls 容易搞混的概念，域名，主机名，路由 网站模块多主机应用 不同模块解析不同的服务器ip地址 网页模块多路径应用 urlpatterns [ path(‘admin/’, admin.site.urls), path(‘’, app01views.index), path(‘movie/’, app01views.movi…...
基于2D工程图几何特征与梯度提升模型的制造成本智能预测
1. 项目概述：从图纸到报价的智能革命在制造业，尤其是像汽车零部件这样的离散制造领域，报价速度直接决定了订单的生死。传统上，拿到一张新的2D工程图（DWG格式），成本工程师需要花上几天甚至几周时…...
第二周（第12周）
1.单电源供电的二阶低通滤波器2.功率放大电路...
基于声卡与电流互感器的安全交流功率测量系统设计与实践
1. 项目概述：用声卡安全测量交流功率我一直对各种测量技术抱有浓厚的兴趣，毕竟“测量即认知”这句老话在今天依然适用。对于电力消耗和产出，没有什么比直接测量更能说明问题了。交流功率的测量，核心在于同时获取电压和电流的瞬时值…...
基于USB ACA模式实现安卓手机边玩边充的游戏手柄设计
1. 项目缘起：当手机性能过剩，却败给了触摸屏几年前，我清理手机游戏时，发现一个挺无奈的现象：性能足以媲美掌机的智能手机里，只剩下一些慢节奏的平台解谜或者数独。那些曾经让我在掌机上废寝忘食的赛车、动作…...
工业云脑：06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例
06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例 今天第九篇06小节——现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例。新手照着做10分钟就能跑起来，老手一看就知道这玩意儿省了多少钱。以前想上AI检测，得花几万块买专业边缘盒子；现在？树莓派5（RPi 5）…...
MeloTTS实战指南：解决多语言TTS部署中的核心挑战
MeloTTS实战指南：解决多语言TTS部署中的核心挑战 【免费下载链接】MeloTTS High-quality multi-lingual text-to-speech library by MyShell.ai. Support English, Spanish, French, Chinese, Japanese and Korean. 项目地址: https://gitcode.com/GitHub_Trendin…...
原神私服新纪元：KCN-GenshinServer图形化服务端全功能解析
原神私服新纪元：KCN-GenshinServer图形化服务端全功能解析 【免费下载链接】KCN-GenshinServer 基于GC制作的原神一键GUI多功能服务端。 项目地址: https://gitcode.com/gh_mirrors/kc/KCN-GenshinServer 你是否曾想过拥有一个完全由自己掌控的提瓦特大陆&am…...
人工智能的伦理与安全：这3个问题，软件测试从业者必须重视
随着大语言模型、生成式AI的爆发式落地，人工智能已经从实验室走向千行百业的生产场景，深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说，我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...
AutoPentest：面向红队的渗透测试决策引擎架构解析
1. 这不是又一个“自动化扫描器”，而是一套能替你做决策的渗透测试工作流引擎AutoPentest这个名字，第一眼容易让人联想到Nmap加个for循环、或者Burp Suite里点几下Intruder——但实际用过的人很快会意识到：它根本不在同一个维度上。我第一次在…...
企业级Veo 2提示词治理框架（含合规校验/版本回溯/效果归因三模块）——仅限首批500名开发者开放》
更多请点击： https://intelliparadigm.com 第一章：Veo 2提示词治理框架的核心定位与演进逻辑 Veo 2提示词治理框架并非单纯的技术工具升级，而是面向AIGC生产环境规模化、合规化与可审计化需求的战略性基础设施重构。其核心定位在于将离散、经…...