1、后端编写

1.1 Controller控制层编写

  1. package com.gmw.musicserver.controller;
  3. import com.gmw.musicserver.commonutils.R;
  4. import com.gmw.musicserver.entity.Consumer;
  5. import com.gmw.musicserver.entity.Singer;
  6. import com.gmw.musicserver.entity.Song;
  7. import com.gmw.musicserver.entity.SongSheet;
  8. import com.gmw.musicserver.service.ConsumerService;
  9. import com.gmw.musicserver.service.SingerService;
  10. import com.gmw.musicserver.service.SongService;
  11. import com.gmw.musicserver.service.SongSheetService;
  12. import org.slf4j.Logger;
  13. import org.slf4j.LoggerFactory;
  14. import org.springframework.beans.factory.annotation.Autowired;
  15. import org.springframework.web.bind.annotation.GetMapping;
  16. import org.springframework.web.bind.annotation.RequestMapping;
  17. import org.springframework.web.bind.annotation.RestController;
  19. import java.util.List;
  21. /**
  22.  * <p>
  23.  * 首页接口模块
  24.  * </p>
  25.  *
  26.  * @author 未进化的程序猿
  27.  * @since 2022-01-26
  28.  */
  29. @RestController
  30. @RequestMapping("/musicserver/home")
  31. public class HomeController {
  32.     public static final Logger logger = LoggerFactory.getLogger(HomeController.class);
  34.     //用户service接口
  35.     @Autowired
  36.     public ConsumerService consumerService;
  37.     //歌曲service接口
  38.     @Autowired
  39.     public SongService songService;
  40.     //歌手service接口
  41.     @Autowired
  42.     public SingerService singerService;
  43.     //歌单service接口
  44.     @Autowired
  45.     public SongSheetService songSheetService;
  47.     /**
  48.      * 查询所有的用户
  49.      * @return
  50.      */
  51.     @GetMapping(value = "/allConsumer")
  52.     public R allConusmer(){
  53.         List<Consumer> consumerList = this.consumerService.allConsumer();
  54.         return R.ok().data("list",consumerList).data("count",consumerList.size());
  55.     }
  57.     /**
  58.      * 查询所有的歌曲
  59.      * @return
  60.      */
  61.     @GetMapping(value = "/allSong")
  62.     public R allSong(){
  63.         List<Song> songList = this.songService.allSong();
  64.         return R.ok().data("list",songList).data("count",songList.size());
  65.     }
  67.     /**
  68.      * 查询所有的歌手
  69.      * @return
  70.      */
  71.     @GetMapping(value = "/allSinger")
  72.     public R allSinger(){
  73.         List<Singer> singerList = this.singerService.allSinger();
  74.         return R.ok().data("list",singerList).data("count",singerList.size());
  75.     }
  77.     /**
  78.      * 查询所有的歌单
  79.      * @return
  80.      */
  81.     @GetMapping(value = "/allSongList")
  82.     public R allSongList(){
  83.         List<SongSheet> songSheetList = this.songSheetService.allSongList();
  84.         return R.ok().data("list",songSheetList).data("count",songSheetList.size());
  85.     }
  86. }

2、前端编写

image.png

  1. <template>
  2.     <div>
  3.         <el-row :gutter="20" class="mgb20">
  4.             <el-col :span="6">
  5.                 <el-card>
  6.                     <div class="grid-content">
  7.                         <div class="grid-cont-center">
  8.                             <div class="grid-num">{{consumerCount}}</div>
  9.                             <div>用户总数</div>
  10.                         </div>
  11.                     </div>
  12.                 </el-card>
  13.             </el-col>
  14.             <el-col :span="6">
  15.                 <el-card>
  16.                     <div class="grid-content">
  17.                         <div class="grid-cont-center">
  18.                             <div class="grid-num">{{songCount}}</div>
  19.                             <div>歌曲总数</div>
  20.                         </div>
  21.                     </div>
  22.                 </el-card>
  23.             </el-col>
  24.             <el-col :span="6">
  25.                 <el-card>
  26.                     <div class="grid-content">
  27.                         <div class="grid-cont-center">
  28.                             <div class="grid-num">{{singerCount}}</div>
  29.                             <div>歌手数量</div>
  30.                         </div>
  31.                     </div>
  32.                 </el-card>
  33.             </el-col>
  34.             <el-col :span="6">
  35.                 <el-card>
  36.                     <div class="grid-content">
  37.                         <div class="grid-cont-center">
  38.                             <div class="grid-num">{{songListCount}}</div>
  39.                             <div>歌单数量</div>
  40.                         </div>
  41.                     </div>
  42.                 </el-card>
  43.             </el-col>
  44.         </el-row>
  45.         <el-row :gutter="20" class="mgb20">
  46.             <el-col :span="12">
  47.                 <h3 class="mgb20">用户性别比例</h3>
  48.                 <div style="background-color:white">
  49.                     <ve-pie :data="consumerSex" :theme="options"></ve-pie>
  50.                 </div>
  51.             </el-col>
  52.             <el-col :span="12">
  53.                 <h3 class="mgb20">歌曲类型分布</h3>
  54.                 <div style="background-color:white">
  55.                     <ve-histogram :data="songStyle"></ve-histogram>
  56.                 </div>
  57.             </el-col>
  58.         </el-row>
  59.         <el-row :gutter="20" class="mgb20">
  60.             <el-col :span="12">
  61.                 <h3 class="mgb20">歌手性别比例</h3>
  62.                 <div style="background-color:white">
  63.                     <ve-pie :data="singerSex"></ve-pie>
  64.                 </div>
  65.             </el-col>
  66.             <el-col :span="12">
  67.                 <h3 class="mgb20">歌手国籍分布</h3>
  68.                 <div style="background-color:white">
  69.                     <ve-histogram :data="country"></ve-histogram>
  70.                 </div>
  71.             </el-col>
  72.         </el-row>
  73.     </div>
  74. </template>
  75. <script>
  76. import {getAllSinger,getAllConusmer,getAllSong,getAllSongList} from '../api/home/index';
  77. export default {
  78.     data(){
  79.         return {
  80.             consumerCount: 0,       //用户总数
  81.             songCount: 0,           //歌曲总数
  82.             singerCount: 0,         //歌手数量
  83.             songListCount: 0,        //歌单数量
  84.             consumer: [],            //所有用户
  85.             consumerSex:{           //按性别分类的用户数
  86.                 columns: ['性别','总数'],
  87.                 rows: [
  88.                     {'性别': '男','总数': 0},
  89.                     {'性别': '女','总数': 0}
  90.                 ]
  91.             },
  92.             options: {
  93.                 color: ['#87cefa','#ffc0cb']
  94.             },
  95.             // options1: {
  96.             //     color: ['yellow']
  97.             // },
  98.             songStyle:{           //按歌单风格分类
  99.                 columns: ['风格','总数'],
  100.                 rows: [
  101.                     {'风格': '华语','总数': 0},
  102.                     {'风格': '粤语','总数': 0},
  103.                     {'风格': '欧美','总数': 0},
  104.                     {'风格': '日韩','总数': 0},
  105.                     {'风格': 'BGM','总数': 0},
  106.                     {'风格': '轻音乐','总数': 0},
  107.                     {'风格': '乐器','总数': 0}
  108.                 ]
  109.             },
  110.             singerSex:{           //按性别分类的歌手数
  111.                 columns: ['性别','总数'],
  112.                 rows: [                    
  113.                     {'性别': '女','总数': 0},
  114.                     {'性别': '男','总数': 0},
  115.                     {'性别': '组合','总数': 0},
  116.                     {'性别': '不明','总数': 0}
  117.                 ]
  118.             },
  119.             country:{
  120.                 columns: ['国籍','总数'],
  121.                 rows: [
  122.                     {'国籍': '中国','总数': 0},
  123.                     {'国籍': '韩国','总数': 0},
  124.                     {'国籍': '日本','总数': 0},
  125.                     {'国籍': '美国','总数': 0},
  126.                     {'国籍': '新加坡','总数': 0},
  127.                     {'国籍': '意大利','总数': 0},
  128.                     {'国籍': '马来西亚','总数': 0},
  129.                     {'国籍': '西班牙','总数': 0}                    
  130.                 ]
  131.             }
  132.         }
  133.     },
  134.     created() {
  136.     },
  137.     mounted() {
  138.         this.getConsumer();
  139.         this.getSong();
  140.         this.getSinger();
  141.         this.getSongList();
  142.     },
  143.     methods: {
  144.         getConsumer() {                     //用户总数
  145.             getAllConusmer().then(res => {
  146.                 this.consumer = res.data.list;
  147.                 this.consumerCount = res.data.count;
  148.                 this.consumerSex.rows[0]['总数'] = this.setSex(1,this.consumer);
  149.                 this.consumerSex.rows[1]['总数'] = this.setSex(0,this.consumer);
  150.             })
  151.         },  
  152.         setSex(sex,val) {              //根据性别获取用户数
  153.             let count = 0;
  154.             for(let item of val){
  155.                 if(sex == item.sex){
  156.                     count++;
  157.                 }
  158.             }
  159.             return count;
  160.         },
  161.         getSong() {                      //歌曲总数
  162.             getAllSong().then(res => {
  163.                 this.songCount = res.data.count;
  164.             })
  165.         },
  166.         getSinger() {                      //歌手数量
  167.             getAllSinger().then(res => {
  168.                 this.singerCount = res.data.count;
  169.                 this.singerSex.rows[0]['总数'] = this.setSex(0,res.data.list);
  170.                 this.singerSex.rows[1]['总数'] = this.setSex(1,res.data.list);
  171.                 this.singerSex.rows[2]['总数'] = this.setSex(2,res.data.list);
  172.                 this.singerSex.rows[3]['总数'] = this.setSex(3,res.data.list);
  173.                 for(let item of res.data.list){
  174.                     this.getByCountry(item.location);
  175.                 }
  176.             })
  177.         },
  179.         getSongList() {                    //歌单数量
  180.             getAllSongList().then(res => {
  181.                 this.songListCount = res.data.count;
  182.                 for(let item of res.data.list){
  183.                     this.getByStyle(item.style);
  184.                 }
  185.             })
  186.         },  
  187.         getByStyle(style) {              //根据歌单风格获取数量
  188.             for(let item of this.songStyle.rows){
  189.                 if(style.includes(item['风格'])){
  190.                     item['总数']++;
  191.                 }
  192.             }
  193.         },
  194.         getByCountry(location) {              //根据国籍获取数量
  195.             for(let item of this.country.rows){
  196.                 if(location.includes(item['国籍'])){
  197.                     item['总数']++;
  198.                 }
  199.             }
  200.         }
  201.     }
  202. }
  204. </script>
  206. <style scoped>
  207. .grid-content {
  208.     display: flex;
  209.     align-items: center;
  210.     height: 50px;
  211. }
  213. .grid-cont-center {
  214.     flex: 1;
  215.     text-align: center;
  216.     font-size: 14px;
  217.     color: darkgray;
  218. }
  220. .grid-num {
  221.     font-size: 30px;
  222.     font-weight: bold;
  223. }
  224. </style>

2.1 用户/歌曲/歌手/歌单数量显示

image.png
image.png
定义临时变量
image.png
image.png

2.2 用户性别比例饼状图显示

image.png
image.png
image.png
动态更新性别比例数据
image.png

2.3 歌曲类型柱状图显示

image.png
image.png
image.png
动态更新歌曲比例数据
image.png

…..