我们还是接着前面的内容，我把新增的功能代码贴出来，供大家学习参考。
bookController.java
package com.shrimpking.controller;
import cn.hutool.core.collection.CollectionUtil;
import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.shrimpking.annotation.AutoLog;
import com.shrimpking.pojo.Book;
import com.shrimpking.pojo.User;
import com.shrimpking.req.BookParams;
import com.shrimpking.req.QueryParams;
import com.shrimpking.res.Result;
import com.shrimpking.service.BookService;
import com.sun.javafx.collections.MappingChange;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
/**
* <p>
* 图书表 前端控制器
* </p>
*
* @author shrimpking
* @since 2023-11-12
*/
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private BookService bookService;
/**
* 有查询条件时，获取分页数据
* @param queryParams
* @return
*/
@GetMapping("/searchPage")
public Result findBySearchPage(BookParams bookParams){
IPage<Book> list = this.bookService.findBySearchPage(bookParams);
return Result.success(list);
}
@AutoLog("新增图书信息")
@PostMapping("/save")
public Result save(@RequestBody Book book){
//先查询有无同名图书
LambdaQueryWrapper<Book> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Book::getName,book.getName());
int count = this.bookService.count(queryWrapper);
if(count > 0) return Result.error("此图书已存在");
boolean save = this.bookService.save(book);
if(!save) return Result.error("保存失败");
return Result.success("保存成功");
}
@AutoLog("更新图书信息")
@PostMapping("/update")
public Result update(@RequestBody Book book){
//先查询有无同名图书
LambdaQueryWrapper<Book> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Book::getName,book.getName());
Book one = this.bookService.getOne(queryWrapper);
if(one != null && !one.getId().equals(book.getId())){
return Result.error("此图书已存在");
}
boolean save = this.bookService.updateById(book);
if(!save) return Result.error("更新失败");
return Result.success("更新成功");
}
@AutoLog("删除图书信息")
@DeleteMapping("/delete")
public Result delete(@RequestParam("id") Integer id){
boolean remove = this.bookService.removeById(id);
if(!remove) return Result.error("删除失败");
return Result.success("删除成功");
}
@GetMapping("/echarts/chartOne")
public Result chartOne(){
//获取全部图书
List<Book> books = this.bookService.findAll();
//
Map<String, Long> collects = books.stream()
//先从数据中过滤，不包含图书分类的坏数据
.filter(book -> ObjectUtil.isNotEmpty(book.getTypeName()))
//根据图书分类，分组统计
.collect(Collectors.groupingBy(Book::getTypeName, Collectors.counting()));
//返回前端的数据
List<Map<String,Object>> mapList = new ArrayList<>();
//统计的数据不为空时
if(CollectionUtil.isNotEmpty(collects)){
//循环
for (String key : collects.keySet())
{
Map<String,Object> map = new HashMap<>();
map.put("name",key);
map.put("value",collects.get(key));
mapList.add(map);
}
}
return Result.success(mapList);
}
@GetMapping("/echarts/chartTwo")
public Result chartTwo(){
//获取全部图书
List<Book> books = this.bookService.findAll();
//
Map<String, Long> collects = books.stream()
//先从数据中过滤，不包含图书分类的坏数据
.filter(book -> ObjectUtil.isNotEmpty(book.getTypeName()))
//根据图书分类，分组统计
.collect(Collectors.groupingBy(Book::getTypeName, Collectors.counting()));
//返回封装的数据
List<String> xAxis = new ArrayList<>();
List<Long> yAxis = new ArrayList<>();
if(CollectionUtil.isNotEmpty(collects)){
for (String key : collects.keySet())
{
xAxis.add(key);
yAxis.add(collects.get(key));
}
}
Map<String,Object> map = new HashMap<>();
map.put("xAxis",xAxis);
map.put("yAxis",yAxis);
return Result.success(map);
}
}
homeview.vue
<template>
<div>
<h2>系统公告</h2>
<el-row style="margin-top: 15px;">
<el-col :span="12">
<el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in noticeData"
:title="item.name"
:name="item.id">
<div style="padding:0 20px;"><strong>公告内容：</strong>{{ item.content }}</div>
<div style="padding:0 20px;"><strong>发布时间：</strong>{{ item.pubDate }}</div>
</el-collapse-item>
</el-collapse>
</el-col>
<el-col :span="12">
<div id="chartOne" style="width:100%;height: 345px;margin-left: 5px;"></div>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="12">
<div id="chartTwo" style="width:100%;height: 350px;"></div>
</el-col>
<el-col :span="12">
<div id="chartThree" style="width:100%;height: 350px;"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import request from "@/utils/request";
import * as echarts from 'echarts';
export default {
name: "HomeView",
data() {
return {
activeName: '',
noticeData:[]
};
},
methods:{
getData(){
request.get('/notice/findTop').then(res=>{
if(res.code === '200'){
this.noticeData = res.data.records;
//默认第一个新闻打开
this.activeName = res.data.records[0].id;
}
})
},
//获取图表一数据
getChartOneData(){
request.get('/book/echarts/chartOne').then(res=>{
if(res.code === '200'){
this.initChartOne(res.data);
}else {
this.$message.error(res.msg);
}
});
},
//渲染图表一
initChartOne(data){
let chartOne = document.getElementById('chartOne');
let myChart = echarts.init(chartOne);
let option;
option = {
title: {
text: '图书统计（饼图）',
subtext: '统计维度：按图书分类',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right'
},
series: [
{
name: '图书分类',
type: 'pie',
radius: '60%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
},
//method end
//获取图表二数据
getChartTwoData(){
request.get('/book/echarts/chartTwo').then(res=>{
if(res.code === '200'){
this.initChartTwo(res.data.xAxis,res.data.yAxis);
}else {
this.$message.error(res.msg);
}
});
},
initChartTwo(xAxis,yAxis){
let chartTwo = document.getElementById('chartTwo');
let myChart = echarts.init(chartTwo);
let option;
option = {
title: {
text: '图书统计（柱状图）',
subtext: '统计维度：按图书分类',
left: 'center'
},
xAxis: {
type: 'category',
data: xAxis
},
yAxis: {
type: 'value'
},
series: [
{
data: yAxis,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
emphasis: {
label: {
show: true,
fontWeight: 'bold',
fontSize: 16
}
}
}
]
};
option && myChart.setOption(option);
},
//method end
//获取图表三数据
getChartThreeData(){
request.get('/book/echarts/chartTwo').then(res=>{
if(res.code === '200'){
this.initChartThree(res.data.xAxis,res.data.yAxis);
}else {
this.$message.error(res.msg);
}
});
},
initChartThree(xAxis,yAxis){
let chartThree = document.getElementById('chartThree');
let myChart = echarts.init(chartThree);
let option;
option = {
title: {
text: '图书分类（折线图）',
subtext: '统计维度：按图书分类',
left: 'center'
},
xAxis: {
type: 'category',
data: xAxis
},
yAxis: {
type: 'value'
},
series: [
{
data: yAxis,
type: 'line',
emphasis:{
label:{
show:true,
fontSize:16,
}
}
}
]
};
option && myChart.setOption(option);
}
//method end
},
mounted(){
//获取数据
this.getData();
//获取图表一
this.getChartOneData();
this.getChartTwoData();
this.getChartThreeData();
}
}
</script>
<style lang="scss" scoped>
</style>package.json
{
"name": "vueweb",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.6.1",
"core-js": "^3.8.3",
"echarts": "^5.1.2",
"element-ui": "^2.15.14",
"mockjs": "^1.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.0",
"@vue/cli-service": "^5.0.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import * as echarts from 'echarts'
import '@/assets/global.css'
Vue.prototype.$echarts = echarts;
axios.defaults.baseURL='http://localhost:8089';
Vue.prototype.$http = axios;
Vue.use(ElementUI,{size:'small'});
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store,
router
}).$mount('#app');
测试
首页
图书分类
图书管理
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
