• springboot整合vue2实现简单的新增删除，整合ECharts实现图表渲染

    先看效果图：

    1.后端接口

    1.  //    查询所有商品信息
    2. //    @CrossOrigin(origins = "*")
    3.     @RequestMapping("/list1")
    4.     @ResponseBody
    5.     public List list1(){
    6.         List list = goodsService.list();
    7.         return list;
    8.     }
    9.  
    10.  
    11. //    删除
    12. //    @CrossOrigin(origins = "*")
    13.     @RequestMapping("/del")
    14.     @ResponseBody
    15.     public String del(int id){
    16.         try {
    17.             goodsService.removeById(id);
    18.             return "删除成功";
    19.         }catch (Exception e){
    20.             return "删除失败";
    21.         }
    22.     }
    23.  
    24. //    根据条件查询
    25.     @RequestMapping("/search")
    26.     @ResponseBody
    27.     public List search(String goodsname,String goodsType){
    28.         System.out.println(goodsname+","+goodsType);
    29.         QueryWrapper wrapper = new QueryWrapper<>();
    30.         wrapper.like(StringUtils.isNotBlank(goodsname),"name",goodsname).like(StringUtils.isNotBlank(goodsType),"goods_type",goodsType);
    31.         List list = goodsService.list(wrapper);
    32.         for (Goodsinfo goodsinfo : list) {
    33.             System.out.println(goodsinfo);
    34.         }
    35.         return list;
    36.     }
    37.  
    38. // 添加数据
    39.     @RequestMapping("/add")
    40.     @ResponseBody
    41.     public String add(@RequestBody Goodsinfo goodsinfo){
    42.         System.out.println(goodsinfo);
    43.         goodsService.save(goodsinfo);
    44.         return "添加成功";
    45.     }

    2.前端页面：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.     
    8.     <link
    9.       rel="stylesheet"
    10.       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    11.     />
    12.     <style>
    13.       .red {
    14.         color: red!important;
    15.       }
    16.       .search {
    17.         width: 300px;
    18.         margin: 20px 0;
    19.       }
    20.       .my-form {
    21.         display: flex;
    22.         margin: 20px 0;
    23.       }
    24.       .my-form input {
    25.         flex: 1;
    26.         margin-right: 20px;
    27.       }
    28.       .table > :not(:first-child) {
    29.         border-top: none;
    30.       }
    31.       .contain {
    32.         display: flex;
    33.         padding: 10px;
    34.       }
    35.       .list-box {
    36.         flex: 1;
    37.         padding: 0 30px;
    38.       }
    39.       .list-box  a {
    40.         text-decoration: none;
    41.       }
    42.       .echarts-box {
    43.         width: 600px;
    44.         height: 400px;
    45.         padding: 30px;
    46.         margin: 0 auto;
    47.         border: 1px solid #ccc;
    48.       }
    49.       tfoot {
    50.         font-weight: bold;
    51.       }
    52.       @media screen and (max-width: 1000px) {
    53.         .contain {
    54.           flex-wrap: wrap;
    55.         }
    56.         .list-box {
    57.           width: 100%;
    58.         }
    59.         .echarts-box {
    60.           margin-top: 30px;
    61.         }
    62.       }
    63.     style>
    64.   head>
    65.   <body>
    66.     <div id="app">
    67.       <div class="contain">
    68.         
    69.         <div class="list-box">
    70.  
    71.           
    72.           <form class="my-form">
    73.             <input type="text" v-model="goods.name" class="form-control" placeholder="名称" />
    74.             <input type="text" v-model="goods.price" class="form-control" placeholder="价格" />
    75. 			<input type="text" v-model="goods.intro" class="form-control" placeholder="简介" />
    76. 			<input type="text" v-model="goods.amount" class="form-control" placeholder="库存" />
    77. 			<input type="text" v-model="goods.goodsType" class="form-control" placeholder="类别" />
    78. 			<input type="text" v-model="goods.remark" class="form-control" placeholder="备注" />
    79.             <button type="button" class="btn btn-primary" @click="add()">添加账单button>
    80.           form>
    81.  
    82.           <table class="table table-hover">
    83.             <thead>
    84.               <tr>
    85.                 <th>编号th>
    86.                 <th>名称th>
    87.                 <th>价格th>
    88.                 <th>简介th>
    89. 				<th>库存th>
    90. 				<th>类别th>
    91. 				<th>备注th>
    92. 				<th>操作th>
    93.               tr>
    94.             thead>
    95.             <tbody>
    96.               <tr v-for="(item,index) in list" :key="item.id">
    97.                 <td>{{index+1}}td>
    98.                 <<th>{{item.name}}th>
    99.                 <th :class="{red:item.price>1}">{{item.price}}th>
    100. 				<th>{{item.intro}}th>
    101. 				<th>{{item.amount}}th>
    102. 				<th>{{item.goodsType}}th>
    103. 				<th>{{item.remark}}th>
    104.                 <td><a href="javascript:;" @click="del(item.id)">删除a>td>
    105.               tr>
    106.              
    107.             tbody>
    108.             <tfoot>
    109.               <tr>
    110.                 <td colspan="4">消费总计： {{totalPrice}}td>
    111.               tr>
    112.             tfoot>
    113.           table>
    114.         div>
    115.         
    116.         
    117.         <div class="echarts-box" id="main">div>
    118.       div>
    119.     div>
    120.     <script src="../echarts.min.js">script>
    121.     <script src="../vue.js">script>
    122.     <script src="../axios.js">script>
    123.     <script>
    124.       /**
    125.        * 接口文档地址：
    126.        * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
    127.        * 
    128.        * 功能需求：
    129.        * 1. 基本渲染
    130.        * 2. 添加功能
    131.        * 3. 删除功能
    132.        * 4. 饼图渲染
    133.        */
    134.       const app = new Vue({
    135.         el: '#app',
    136.         data: {
    137.           list:[],
    138. 		  goods:{
    139. 			  name:"",
    140. 			  price:"",
    141. 			  amount:"",
    142. 			  intro:"",
    143. 			  goodsType:"",
    144. 			  remark:""
    145. 		  }
    146. 		  
    147.         },
    148. 		computed: {
    149. 		  totalPrice () {
    150. 		    return this.list.reduce((sum, item) => sum + item.price, 0)
    151. 		  }
    152. 		},
    153. 		 created() {
    154. 			 /* axios.get("http://localhost:8080/list1")
    155. 			.then(res=>{
    156. 				console.log(res.data);
    157. 				this.list=res.data;
    158. 			})
    159. 			.catch(err=>{
    160. 				console.log(err)
    161. 			}) */
    162. 			this.getlist()
    163. 		},
    164. 		mounted() {
    165. 			this.myChart = echarts.init(document.getElementById("main"));
    166. 			this.myChart.setOption(
    167. 			{
    168. 			  title: {
    169. 			    text: '价格结构图',
    170. 			    
    171. 			    left: 'center'
    172. 			  },
    173. 			  tooltip: {
    174. 			    trigger: 'item'
    175. 			  },
    176. 			  legend: {
    177. 			    orient: 'vertical',
    178. 			    left: 'left'
    179. 			  },
    180. 			  series: [
    181. 			    {
    182. 			      name: '单价',
    183. 			      type: 'pie',
    184. 			      radius: '50%',
    185. 			      data: [
    186. 			        /* { value: 1048, name: 'Search Engine' },
    187. 			        { value: 735, name: 'Direct' },
    188. 			        { value: 580, name: 'Email' },
    189. 			        { value: 484, name: 'Union Ads' },
    190. 			        { value: 300, name: 'Video Ads' } */
    191. 			      ],
    192. 			      emphasis: {
    193. 			        itemStyle: {
    194. 			          shadowBlur: 10,
    195. 			          shadowOffsetX: 0,
    196. 			          shadowColor: 'rgba(0, 0, 0, 0.5)'
    197. 			        }
    198. 			      }
    199. 			    }
    200. 			  ]
    201. 			}
    202. 			)
    203. 			
    204. 		},
    205. 		methods:{
    206. 			// 查询所有
    207. 			getlist(){
    208. 				axios.get("http://localhost:8080/list1")
    209. 				.then(res=>{
    210. 					console.log(res.data);
    211. 					this.list=res.data;
    212. 					// 更新图表
    213. 					this.myChart.setOption({
    214. 						series: [
    215. 							{
    216. 						   /* data: [
    217. 						      { value: 1048, name: 'Search Engine' },
    218. 						      { value: 735, name: 'Direct' },
    219. 						      { value: 580, name: 'Email' },
    220. 						      { value: 484, name: 'Union Ads' },
    221. 						      { value: 300, name: 'Video Ads' }
    222. 						    ] */
    223. 							data: this.list.map(item => ({ value: item.price, name: item.name}))
    224. 						  }
    225. 						  ]
    226. 					})
    227. 				})
    228. 				.catch(err=>{
    229. 					console.log(err)
    230. 				});
    231. 				
    232. 				
    233. 				
    234. 			},
    235. 			// 新增
    236. 			add(){
    237. 				axios.post("http://localhost:8080/add",this.goods)
    238. 				.then(res=>{
    239. 					console.log(this.goods);
    240. 					alert(res.data);
    241. 					this.getlist();
    242. 					this.goods={};
    243. 					/* for(var i in this.goods){
    244. 						this.goods[i] = ''
    245. 					} */
    246. 				})
    247. 			},
    248. 			// 删除
    249. 			del(id){
    250. 				if(confirm("确认删除数据？")){
    251. 					axios.get("http://localhost:8080/del?id="+id)
    252. 					.then(res=>{
    253. 						this.getlist();
    254. 					})
    255. 				}
    256. 				
    257. 			}
    258. 			
    259. 		},
    260. 		
    261. 		
    262.       })
    263.     script>
    264.   body>
    265. html>

  • 相关阅读:
    优雅的实现EasyPoi动态导出列的两种方式
    【软考软件评测师】基于规则说明的测试技术下篇
    回溯-数组总和II
    Mysql主从复制
    JADE（自适应差分进化优化算法）在C++中的完整实现与深度解析
    使用Oracle VM VirtualBox安装Unbuntu虚拟机并安装增强功能（实现双向复制粘贴）
    C#FreeSql分库分表
    #redis 远程链接01#
    Python在字典中获取带权重的随机值
    创建HTML动态数据报告；论文投稿技巧大全(中文版)；『高效Pandas指南』随书代码；oneDNN深度神经网络库；前沿论文 | ShowMeAI资讯日报
  • 原文地址：https://blog.csdn.net/adingyb/article/details/134424413