related movies sql modified

client/src/views/error/Error404.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
       <el-empty style="height: 100%; line-height: 100%; font-size: 20px" :image-size="400"
-                image="/src/assets/image/404.png">
+                :image="notFoundImg">
           <template #description>
               <p style="font-size: 32px;width: 100%;color: #a574b7;margin-bottom: 20px">你好像走错地方了哦!!!</p>
               <button @click="handleError('home')" >主页</button>
@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import {useRouter} from "vue-router";
+import notFoundImg from '../../assets/image/404.png'
 
 const router = useRouter()
 const handleError = (t:string) =>{

client/src/views/index/CategoryFilm.vue

@@ -3,10 +3,11 @@
         <div class="header">
             <p>{{ d.category.name }}</p>
             <div class="c_header">
-                <a :class="`nav ${d.list.length >0 && d.list[0].cid == c.id?'active':''}`" href="javascript:;"
-                   @click="changeCategory(c.id)"
+                <!--默认全部-->
+                <a :class="`nav ${d.cid == -1?'active':''}`" :href="`/categoryFilm?pid=${d.category.id}`">全部{{d.category.name}}</a>
+                <!--子分类-->
+                <a :class="`nav ${d.cid == c.id?'active':''}`" :href="`/categoryFilm?pid=${c.pid}&cid=${c.id}&current=1`"
                    v-for="c in d.category.children">{{ c.name }}</a>
-                <!--        <a :class="`nav `" href="javascript:;" @click="changeCategory">{{ d.category.name }}</a>-->
             </div>
         </div>
 
@@ -46,6 +47,7 @@ const d = reactive({
     page: {
         current: 0,
     },
+    cid: -1
 
 })
 // 获取路由参数查询对应数据
@@ -63,11 +65,10 @@ const changeCurrent = (currentVal: number) => {
 }
 
 // 点击分类事件
-const changeCategory = (cid?: any) => {
-    let params = new URLSearchParams(location.search)
-    // location.href = `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=${params.get('current')?params.get('current'):1}`
-    location.href = cid ? `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=1` : `/categoryFilm?pid=${params.get('pid')}`
-}
+// const changeCategory = (cid?: any) => {
+//     let params = new URLSearchParams(location.search)
+//     location.href = cid ? `/categoryFilm?pid=${params.get('pid')}&cid=${cid}&current=1` : `/categoryFilm?pid=${params.get('pid')}`
+// }
 
 
 const getFilmData = (param: any) => {
@@ -76,6 +77,8 @@ const getFilmData = (param: any) => {
             d.category = resp.data.category
             d.list = resp.data.list
             d.page = resp.page
+            // 设置当前请求的分类id
+            d.cid = param.cid? param.cid:-1
         } else {
             ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
         }

client/src/views/index/FilmDetails.vue

@@ -7,10 +7,13 @@
                 <div class="title_mt_right">
                     <h3>{{ data.detail.name }}</h3>
                     <ul class="tags">
-                        <li style="margin: 2px 0">{{ data.detail.descriptor.classTag?`${data.detail.descriptor.classTag}`.replaceAll(",", " | "):'未知' }}</li>
+                        <li style="margin: 2px 0">{{
+                            data.detail.descriptor.classTag ? `${data.detail.descriptor.classTag}`.replaceAll(",", " | ") : '未知'
+                            }}
+                        </li>
                     </ul>
-                    <p><span>导演:</span> {{data.detail.descriptor.director }}</p>
-                    <p><span>主演:</span> {{handleLongText(data.detail.descriptor.actor)}}</p>
+                    <p><span>导演:</span> {{ data.detail.descriptor.director }}</p>
+                    <p><span>主演:</span> {{ handleLongText(data.detail.descriptor.actor) }}</p>
                     <p><span>上映:</span> {{ data.detail.descriptor.releaseDate }}</p>
                     <p><span>地区:</span> {{ data.detail.descriptor.area }}</p>
                     <p v-if="data.detail.descriptor.remarks"><span>连载:</span>{{ data.detail.descriptor.remarks }}</p>
@@ -27,12 +30,16 @@
             <h2>{{ data.detail.name }}</h2>
             <ul class="tags">
                 <li class="t_c">
-                    <el-icon>
-                        <Promotion/>
-                    </el-icon>
-                    {{ data.detail.descriptor.cName }}
+                    <a :href="`/categoryFilm?pid=${data.detail.pid}`">
+                        <el-icon>
+                            <Promotion/>
+                        </el-icon>
+                        {{ data.detail.descriptor.cName }}
+                    </a>
+                </li>
+                <li v-if="data.detail.descriptor.classTag">
+                    {{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}
                 </li>
-                <li v-if="data.detail.descriptor.classTag">{{ `${data.detail.descriptor.classTag}`.replaceAll(",", "&emsp;") }}</li>
                 <li>{{ data.detail.descriptor.year }}</li>
                 <li>{{ data.detail.descriptor.area }}</li>
             </ul>
@@ -130,11 +137,11 @@ const data = reactive({
 })
 
 // 对部分信息过长进行处理
-const handleLongText = (t:string):string=>{
+const handleLongText = (t: string): string => {
     let res = ''
-    t.split(',').forEach((s,i)=>{
+    t.split(',').forEach((s, i) => {
         console.log(s)
-        if (i <3) {
+        if (i < 3) {
             res += `${s} `
         }
     })
@@ -398,10 +405,13 @@ const showContent = (flag: boolean) => {
 
 .tags > .t_c {
     background: rgba(155, 73, 231, 0.72);
-    color: #c4c2c2;
     margin-left: 0;
 }
 
+.t_c a {
+    color: #c4c2c2;
+}
+
 .title p {
     text-align: left;
     font-size: 14px;