修复记录访问量问题

houtai/src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8005/', // 本地调试
-  baseURL: 'http://192.168.0.245:8005/', // 线上调试
+  baseURL: 'http://192.168.0.135:8005/', // 本地调试
+  // baseURL: 'http://192.168.0.245:8005/', // 线上调试
   // baseURL: '', // build
   timeout: 5000
 })

web/src/utils/api.js

@@ -53,4 +53,11 @@ export const musicList = (data) => {
     url: '/web/musicList',
     data
   })
+}
+
+// 保存访问量
+export const webVisit = (type,id) => {
+  return axios({
+    url: `/web/visit/${type}/${id}`,
+  })
 }

web/src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8012/', // 本地调试
-  baseURL: 'http://192.168.0.245:8005/', // 线上调试
+  baseURL: 'http://192.168.0.135:8005/', // 本地调试
+  // baseURL: 'http://192.168.0.245:8005/', // 线上调试
   // baseURL: '', // build
   timeout: 5000
 })

web/src/views/tab3/index.vue

@@ -85,7 +85,7 @@
 
 <script>
 import axios from "@/utils/request";
-import { goodList, goodDetail } from "@/utils/api";
+import { goodList, goodDetail,webVisit } from "@/utils/api";
 export default {
   name: "tab3",
   components: {},
@@ -243,6 +243,8 @@ export default {
         this.myVideoShow = true;
         this.myVideoSrc = this.baseURL + item.filePath;
       }
+      // 记录访问量
+    await webVisit('goods',item.id)
     },
     cutTab(val) {
       if (this.formData.type === val.type) return;

web/src/views/tab4/tab4-1.vue

@@ -1,36 +1,46 @@
 <!--  -->
 <template>
-<div class='tab4-1' v-if="videoList.length!==0">
-  <!-- 左侧列表 -->
-  <div class="one_left">
-    <div class="alone" v-for="item in videoList" :key="item.id" @click="videoChange(item.filePath)">
-      <div class="video_name" :title="item.name">{{item.name}}</div>
-      <img :src="baseURL + item.thumb" alt="">
+  <div class="tab4-1" v-if="videoList.length !== 0">
+    <!-- 左侧列表 -->
+    <div class="one_left">
+      <div
+        class="alone"
+        :class="{active:videoInd===index}"
+        v-for="(item,index) in videoList"
+        :key="item.id"
+        @click="videoChange(item,index)"
+      >
+        <div class="video_name" :title="item.name">{{ item.name }}</div>
+        <img :src="baseURL + item.thumb" alt="" />
+      </div>
+    </div>
+    <!-- 右侧视频 -->
+    <div class="one_right">
+      <video
+        v-if="videoSrc"
+        :src="baseURL + videoSrc"
+        autoplay
+        controls
+      ></video>
     </div>
   </div>
-  <!-- 右侧视频 -->
-  <div class="one_right">
-    <video v-if="videoSrc" :src="baseURL+videoSrc" autoplay controls></video>
-  </div>
-</div>
-<div class='tab4-1 conNull' v-else>
-  暂 无 数 据
-</div>
+  <div class="tab4-1 conNull" v-else>暂 无 数 据</div>
 </template>
 
 <script>
-import axios from '@/utils/request'
-import {videoList} from '@/utils/api'
+import axios from "@/utils/request";
+import { videoList, webVisit } from "@/utils/api";
 export default {
-  name: 'tab4-1',
+  name: "tab4-1",
   components: {},
-  data () {
+  data() {
     // 这里存放数据
     return {
-      videoSrc:'',
-      videoList:[],
-      baseURL:''
-    }
+      videoInd:0,
+      videoSrc: "",
+      videoList: [],
+      baseURL: "",
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -38,87 +48,99 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    videoChange(url){
-      this.videoSrc=url
-    }
+    async videoChange(val,ind) {
+      this.videoSrc = val.filePath;
+      this.videoInd=ind
+      // 记录访问量
+      await webVisit("video", val.id);
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  created() {
     // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
+    this.baseURL = axios.defaults.baseURL;
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
- async mounted () {
-  let res = await videoList({pageNum:1,pageSize:999})
-  this.videoList=res.data.records
-  this.videoSrc=this.videoList[0].filePath
-  // console.log(998,res);
+  async mounted() {
+    let res = await videoList({ pageNum: 1, pageSize: 999 });
+    this.videoList = res.data.records;
+    this.videoSrc = this.videoList[0].filePath;
+    // 进页面为第一个视频添加访问量
+    if(res.data.records[0]) await webVisit("video", res.data.records[0].id);
+    // console.log(998,res);
   },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
-   /deep/::-webkit-scrollbar-thumb{
-    background-color: #b9412e !important;
-    outline: 1px solid #b9412e !important;
-    outline-offset: 0;
-   }
-.conNull{
+/deep/::-webkit-scrollbar-thumb {
+  background-color: #b9412e !important;
+  outline: 1px solid #b9412e !important;
+  outline-offset: 0;
+}
+.conNull {
   font-size: 30px;
   align-items: center;
   justify-content: center;
-  color: #B9412E;
+  color: #b9412e;
 }
-.tab4-1{
+.tab4-1 {
   display: flex;
   width: 100%;
   height: 675px;
   min-width: 1500px;
-  .one_left{
+  .one_left {
+    padding-right: 5px;
     margin-right: 24px;
     width: 280px;
     height: 100%;
     overflow-y: auto;
-    .alone{
+    .alone {
       position: relative;
       cursor: pointer;
       width: 100%;
       height: 158px;
       margin-bottom: 10px;
+      // border: 2px solid #b9412e;
+      &:hover{
       border: 2px solid #b9412e;
-      &:last-child{
+      }
+      &:last-child {
         margin-bottom: 0;
       }
-      &>img{
+      & > img {
         object-fit: cover;
         width: 100%;
         height: 100%;
       }
-      .video_name{
+      .video_name {
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap; 
+        white-space: nowrap;
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
-        background-color: rgba(0,0,0,.8);
+        background-color: rgba(0, 0, 0, 0.8);
         height: 24px;
         line-height: 24px;
         color: #fff;
         text-align: center;
       }
     }
+    .active{
+      border: 2px solid #b9412e;
+    }
   }
-  .one_right{
+  .one_right {
     flex: 1;
-    &>video{
+    & > video {
       width: 100%;
       height: 100%;
     }

web/src/views/tab4/tab4-2.vue

@@ -15,7 +15,7 @@
     <div class="conten">
       <div class="row" v-for="(item, index) in myArr" :key="item.id">
         <el-image
-          @click="lookBigImg(item.name, index)"
+          @click="lookBigImg(item, index)"
           style="width: 260px; height: 280px"
           :src="baseURL + item.thumb"
           :preview-src-list="srcList"
@@ -43,7 +43,7 @@
 </template>
 <script>
 import axios from "@/utils/request";
-import { imgList } from "@/utils/api";
+import { imgList,webVisit } from "@/utils/api";
 export default {
   name: "tab4-2",
   components: {},
@@ -71,8 +71,8 @@ export default {
   // 方法集合
   methods: {
     //点击图片，查看大图
-    lookBigImg(name, index) {
-      this.imgBigTxt = name;
+   async lookBigImg(item, index) {
+      this.imgBigTxt = item.name;
       this.tempNum = index;
       this.$nextTick(() => {
         setTimeout(() => {
@@ -125,6 +125,8 @@ export default {
           });
         }, 100);
       });
+      // 记录访问量
+      await webVisit("img", item.id);
     },
     // 分页器方法
     currentChange(val) {

web/src/views/tab4/tab4-3.vue

@@ -3,17 +3,21 @@
     <div class="left">
       <div class="title">歌单列表</div>
       <div class="listCon">
-      <p
-        :title='item.name'
-        v-for="(item, index) in musicList"
-        :key="item.id"
-        :class="{ active: audioInd === index }"
-        @click="audioInd=index"
-      >
-        <img src="@/assets/images/tab4/11.png" alt="" v-if="audioInd === index">
-        <span v-else>{{ index + 1 }}</span>
-        &emsp;{{ item.name }}
-      </p>
+        <p
+          :title="item.name"
+          v-for="(item, index) in musicList"
+          :key="item.id"
+          :class="{ active: audioInd === index }"
+          @click="cutMusic(item.id, index)"
+        >
+          <img
+            src="@/assets/images/tab4/11.png"
+            alt=""
+            v-if="audioInd === index"
+          />
+          <span v-else>{{ index + 1 }}</span>
+          &emsp;{{ item.name }}
+        </p>
       </div>
     </div>
     <!-- <div class="right_top" :style="{'background':`url(${baseURL+myObj.thumb}) #f3ebdd no-repeat center center`}"> -->
@@ -25,7 +29,11 @@
         <div class="txt" v-html="myObj.description"></div>
       </div>
       <div class="right_bottom">
-        <Audio :audioSrc='baseURL+myObj.filePath' :title='myObj.name' @sonCutMu='sonCutMu'/>
+        <Audio
+          :audioSrc="baseURL + myObj.filePath"
+          :title="myObj.name"
+          @sonCutMu="sonCutMu"
+        />
       </div>
     </div>
   </div>
@@ -33,12 +41,12 @@
 </template>
 
 <script>
-import Audio from './audio.vue'
+import Audio from "./audio.vue";
 import axios from "@/utils/request";
-import { musicList } from "@/utils/api";
+import { musicList, webVisit } from "@/utils/api";
 export default {
   name: "tab4-3",
-  components: {Audio},
+  components: { Audio },
   data() {
     // 这里存放数据
     return {
@@ -49,29 +57,34 @@ export default {
     };
   },
   // 监听属性 类似于data概念
-  computed: {
-  },
+  computed: {},
   // 监控data中的数据变化
   watch: {
-    audioInd(index){
-      this.myObj=this.musicList[index]
+    audioInd(index) {
+      this.myObj = this.musicList[index];
       //控制被选中的音乐滚动在中间
-      const gundong = document.querySelector('.listCon')
-      gundong.scrollTo({ top: index * 40, behavior: 'smooth' })
- }
+      const gundong = document.querySelector(".listCon");
+      gundong.scrollTo({ top: index * 40, behavior: "smooth" });
+    },
   },
   // 方法集合
   methods: {
+    // 点击左侧音乐
+    async cutMusic(id, index) {
+      this.audioInd = index;
+      // 记录访问量
+      await webVisit("music", id);
+    },
     //子组件传过来的上一首下一首方法
-    sonCutMu(val){
-      if(val==='left'){
-        if(this.audioInd===0) this.audioInd=this.musicList.length-1
-        else this.audioInd--
-      }else {
-        if(this.audioInd===this.musicList.length-1) this.audioInd=0
-        else this.audioInd++
+    sonCutMu(val) {
+      if (val === "left") {
+        if (this.audioInd === 0) this.audioInd = this.musicList.length - 1;
+        else this.audioInd--;
+      } else {
+        if (this.audioInd === this.musicList.length - 1) this.audioInd = 0;
+        else this.audioInd++;
       }
-    }
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -83,6 +96,8 @@ export default {
     let res = await musicList({ pageNum: 1, pageSize: 999 });
     this.musicList = res.data.records;
     this.myObj = this.musicList[0];
+    // 进页面为第一个视频添加访问量
+    if (res.data.records[0]) await webVisit("music", res.data.records[0].id);
     // this.videoSrc=this.musicList[0].filePath
     // console.log(998, res);
   },
@@ -126,7 +141,7 @@ export default {
       font-size: 28px;
       margin-bottom: 10px;
     }
-    .listCon{
+    .listCon {
       height: 617px;
       overflow-y: auto;
     }
@@ -141,14 +156,14 @@ export default {
       height: 40px;
       line-height: 40px;
       margin: 10px 0;
-      &>img{
+      & > img {
         margin-top: -5px;
       }
       &:hover {
         background-color: #b9412e;
         color: #fff;
       }
-      &:first-child{
+      &:first-child {
         margin-top: 0px;
       }
     }
@@ -162,7 +177,8 @@ export default {
     .right_top {
       overflow-y: auto;
       padding: 15px 50px;
-      background: url('../../assets/images/tab4/bg.png') #f3ebdd center center no-repeat;
+      background: url("../../assets/images/tab4/bg.png") #f3ebdd center center
+        no-repeat;
       background-size: 750px 287px;
       width: 100%;
       height: 580px;

web/src/views/tab4/tab4-4.vue

@@ -61,7 +61,7 @@
 <script>
 import moment from "moment";
 import axios from "@/utils/request";
-import { leaderList } from "@/utils/api";
+import { leaderList, webVisit } from "@/utils/api";
 export default {
   name: "tab4-4",
   components: {},
@@ -88,7 +88,7 @@ export default {
   // 方法集合
   methods: {
     //点击图片，查看详情
-    lookBigImg(val) {
+    async lookBigImg(val) {
       this.details = true;
       this.txtObj = val;
       // 处理日期
@@ -96,6 +96,8 @@ export default {
         moment(this.txtObj.tenure.split(",")[0]).format("YYYY年MM月") +
         "-" +
         moment(this.txtObj.tenure.split(",")[1]).format("YYYY年MM月");
+      // 记录访问量
+      await webVisit("leader", val.id);
     },
     // 分页器方法
     currentChange(val) {

web/src/views/tab4/tab4-5.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 import axios from "@/utils/request";
-import { studentList } from "@/utils/api";
+import { studentList,webVisit } from "@/utils/api";
 export default {
   name: "tab4-5",
   components: {},
@@ -80,9 +80,11 @@ export default {
   // 方法集合
   methods: {
     //点击图片，查看详情
-    lookBigImg(val) {
+   async lookBigImg(val) {
       this.details = true;
       this.txtObj = val;
+      // 记录访问量
+      await webVisit("student", val.id);
     },
     mySearch() {
       // console.log("点击了搜索");