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…...
MongoDB分片集群搭建
----前言 mongodb分片 一般用得比较少，需要较多的服务器，还有三种的角色 一般把mongodb的副本集应用得好就足够用了，可搭建多套mongodb复本集 mongodb分片技术 mongodb副本集可以解决数据备份、读性能的问题，但由于mongodb副本集是…...
modbus报文
MODBUS规约报文解析-CSDN博客...
flutter报错： library “libflutter.so“ not found
修改android/app/build.gradle defaultConfig { // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). applicationId "cn.rentsoft.flutter.openim.consumer" // You can update the …...
MR混合现实情景实训教学系统模拟历史情景
二、应用场景 1. 古代战争场景：通过MR混合现实情景实训教学系统，学生可以亲身体验古代战争的场景，如战场布置、战术运用等。这不仅有助于学生更好地理解古代战争的特点，还能够培养他们的团队协作和战略思维能力。 2. 历史文化古…...
计算机视觉的应用16-基于pytorch框架搭建的注意力机制，在汽车品牌与型号分类识别的应用
大家好，我是微学AI，今天给大家介绍一下计算机视觉的应用16-基于pytorch框架搭建的注意力机制，在汽车品牌与型号分类识别的应用，该项目主要引导大家使用pytorch深度学习框架，并熟悉注意力机制模型的搭建，这个…...
Flutter 实现 Android CollapsingToolbarLayout折叠布局效果
Flutter 是通过Tabbar TabbarView 来实现 类似Android Viewpager 页面切换的效果的。我个人觉得Flutter 的tab 切换实现过程要比Android的实现过程要简单容易不是一星半点，哈哈哈哈 ，因为她所用到的widget 都是google 官方封装好的，用起来代…...
数据库管理-第116期 Oracle Exadata 06-ESS-下（202301114）
数据库管理-第116期 Oracle Exadata 06-ESS-下（202301114） 距离上一次正儿八经的技术分享又过了整整一周了，距离上一期Exadata专题文章也过了11天了，今天一鼓作气把ESS写完，毕竟明天又要飞北京了。 1 Smart Scan 其…...
阿里云C++二面面经
1.智能指针 1、shared_ptr 原理：shared_ptr是基于引用计数的智能指针，用于管理动态分配的对象。无论 std::shared_ptr 存储在堆区还是栈区，它所指向的内存块始终存储在堆区。这是因为 std::shared_ptr 是用于管理动态分配的内存的智能指针，它需要存储在堆区，以便进行引用…...
Ubuntu 20.04编译Chrome浏览器
本文记录chrome浏览器编译过程，帮助大家避坑qaq 官网文档：https://chromium.googlesource.com/chromium/src//main/docs/linux/build_instructions.md 一.系统要求 一台64位的英特尔机器，至少需要8GB的RAM。强烈推荐超过16GB。至少需要100…...
大文件分片上传、断点续传、秒传
小文件上传 后端：SpringBootJDK17 前端：JavaScriptsparkmd5.min.js 一、依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.2</ve…...