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…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...