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…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...