custom request loading anime

client/components.d.ts

@@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
     FilmList: typeof import('./src/components/FilmList.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
+    Loading: typeof import('./src/components/Loading/Loading.vue')['default']
     RelateList: typeof import('./src/components/RelateList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

client/src/components/Loading/Loading.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="loader"  v-show="msg.show">
+        <div class="loader-container">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    msg:{
+    },
+})
+</script>
+
+<style scoped>
+/*body {*/
+/*    margin: 0;*/
+/*}*/
+.loader {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 50%;
+    left: 40%;
+    margin-left: 10%;
+    transform: translate3d(-50%, -50%, 0);
+    background: rgba(0,0,0, 0.65);
+    z-index: 2002;
+    overflow-y: hidden;
+}
+.loader-container {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    justify-content: center;
+}
+.dot {
+    width: 24px;
+    height: 24px;
+    background: #3ac;
+    border-radius: 100%;
+    display: inline-block;
+    animation: slide 1s infinite;
+}
+.dot:nth-child(1) {
+    animation-delay: 0.1s;
+    background: #32aacc;
+}
+.dot:nth-child(2) {
+    animation-delay: 0.2s;
+    background: #64aacc;
+}
+.dot:nth-child(3) {
+    animation-delay: 0.3s;
+    background: #96aacc;
+}
+.dot:nth-child(4) {
+    animation-delay: 0.4s;
+    background: #c8aacc;
+}
+.dot:nth-child(5) {
+    animation-delay: 0.5s;
+    background: #faaacc;
+}
+@-moz-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@-webkit-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@-o-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+</style>

client/src/components/Loading/index.ts

@@ -0,0 +1,25 @@
+import { createApp, reactive } from 'vue'
+
+import customLoading from './Loading.vue'
+
+const msg = reactive({
+    show: false,
+    title: '拼命加载中...'
+})
+
+const $loading = createApp(customLoading, {msg}).mount(document.createElement('div'))
+const load = {
+    start(title:string) { // 控制显示loading的方法
+        msg.show = true
+        msg.title = title
+        document.body.appendChild($loading.$el)
+        document.body.style.overflow = 'hidden'
+    },
+    close() { // 控制loading隐藏的方法
+        msg.show = false
+        document.body.style.overflow = 'auto'
+    }
+}
+export  { load }
+
+

client/src/main.ts

@@ -5,7 +5,7 @@ import { router} from "./router/router";
 // 引入elementPlus
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-
+// 使用自定义loading
 
 
 const app = createApp(App)
@@ -17,7 +17,8 @@ app.use(router)
 
 
 
-
 app.mount('#app')
 
+export default app
+
 

client/src/style.css

@@ -78,3 +78,5 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+

client/src/utils/request.ts

@@ -1,25 +1,18 @@
 import axios from "axios";
-import {ElMessage, ElLoading } from "element-plus";
+import {ElMessage } from "element-plus";
+
+// 自定义loading加载动画
+import {load} from "../components/Loading";
 
-// 创建loading加载动画对象
-const startLoading = ()=>{
-    return  ElLoading.service({
-        lock: true,
-        text: `加载中...`,
-        background: `rgba(0,0,0,0.5)`,
-        // target: document.querySelector(`.content`)
-    })
-}
 
 const http = (options: any) => {
     // 开启loading动画
-    let loading:any = startLoading()
+    load.start('')
     return new Promise((resolve, reject) => {
         // create an axios instance
         const service = axios.create({
             // baseURL: import.meta.env.VITE_URL_BASE, // api 的 base_url 注意 vue3
-            baseURL: `/api`, // api 的 base_url 注意 vue3
-            //   baseURL: 'https://www.baidu.com/api',  // 固定api
+            baseURL: `/api`, // api 的 base_url 注意 vue3 // 固定api
             timeout: 80000, // request timeout
         });
 
@@ -45,7 +38,7 @@ const http = (options: any) => {
         // response interceptor
         service.interceptors.response.use(
             (response) => {
-                loading.close()
+                load.close()
                 return response.data;
             },
             (error) => {

client/src/views/index/Home.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="container">
-
         <div class="content_item" v-for="item in data.info.content">
             <template v-if="item.nav.name !='综艺' & item.nav.name !='综艺片'">
                 <el-row class="row-bg  cus_nav" justify="space-between">

film/data/nginx/html/index.html

@@ -11,8 +11,8 @@
     <meta charset="UTF-8"/>
     <title>(╥﹏╥)</title>
     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_aj8j1lxiqyw.css">
-  <script type="module" crossorigin src="/assets/index-d8b9e3a3.js"></script>
-  <link rel="stylesheet" href="/assets/index-9cc0aebd.css">
+  <script type="module" crossorigin src="/assets/index-b073fe3a.js"></script>
+  <link rel="stylesheet" href="/assets/index-36468467.css">
 </head>
 <body>
     <div id="app"></div>

film/server/main.go

@@ -5,12 +5,11 @@ import (
 	"server/plugin/db"
 	"server/plugin/spider"
 	"server/router"
-	"time"
 )
 
 func init() {
 	// 执行初始化前等待20s , 让mysql服务完成初始化指令
-	time.Sleep(time.Second * 20)
+	//time.Sleep(time.Second * 20)
 	//初始化redis客户端
 	err := db.InitRedisConn()
 	if err != nil {

film/server/model/Search.go

@@ -6,6 +6,7 @@ import (
 	"github.com/redis/go-redis/v9"
 	"gorm.io/gorm"
 	"log"
+	"math"
 	"reflect"
 	"regexp"
 	"server/config"
@@ -276,18 +277,22 @@ func GetRelateMovieBasicInfo(search SearchInfo, page *Page) []MovieBasicInfo {
 		4. area 地区
 		5. 语言 Language
 	*/
-
 	// sql 拼接查询条件
 	sql := ""
+
 	// 优先进行名称相似匹配
 	//search.Name = regexp.MustCompile("第.{1,3}季").ReplaceAllString(search.Name, "")
-	search.Name = regexp.MustCompile(`[第.{1,3}季\s~!@#$%^&*()+={}\[\]|\\:;"'<,>·.?/\-_].*`).ReplaceAllString(search.Name, "")
-	regexp.MustCompile(`[\s~!@#$%^&*()+={}\[\]|\\:;"'<,>.?/\-_]+`)
-	sql = fmt.Sprintf(`select * from %s where (name LIKE "%%%s%%" or sub_title LIKE "%%%[2]s%%") AND cid=%d union`, search.TableName(), search.Name, search.Cid)
+	name := regexp.MustCompile(`(第.{1,3}季.*)|([0-9]{1,3})|(剧场版)|(\s\S*$)|(之.*)|([\p{P}\p{S}].*)`).ReplaceAllString(search.Name, "")
+	// 如果处理后的影片名称依旧没有改变 且具有一定长度 则截取部分内容作为搜索条件
+	if len(name) == len(search.Name) && len(name) > 10 {
+		// 中文字符需截取3的倍数,否则可能乱码
+		name = name[:int(math.Ceil(float64(len(name)/5))*3)]
+	}
+	sql = fmt.Sprintf(`select * from %s where (name LIKE "%%%s%%" or sub_title LIKE "%%%[2]s%%") AND cid=%d union`, search.TableName(), name, search.Cid)
 	// 执行后续匹配内容, 匹配结果过少,减少过滤条件
 	//sql = fmt.Sprintf(`%s select * from %s where cid=%d AND area="%s" AND language="%s" AND`, sql, search.TableName(), search.Cid, search.Area, search.Language)
 
-	// 根据当前影片的分类查找相似影片
+	// 添加其他相似匹配规则
 	sql = fmt.Sprintf(`%s (select * from %s where cid=%d AND `, sql, search.TableName(), search.Cid)
 	// 根据剧情标签查找相似影片, classTag 使用的分隔符为 , | /
 	// 首先去除 classTag 中包含的所有空格

server/plugin/db/mysql.go

@@ -3,7 +3,6 @@ package db
 import (
 	"gorm.io/driver/mysql"
 	"gorm.io/gorm"
-	"gorm.io/gorm/logger"
 	"gorm.io/gorm/schema"
 	"server/config"
 )
@@ -25,7 +24,7 @@ func InitMysql() (err error) {
 			SingularTable: true, //是否使用 结构体名称作为表名 (关闭自动变复数)
 			//NameReplacer:  strings.NewReplacer("spider_", ""), // 替表名和字段中的 Me 为 空
 		},
-		Logger: logger.Default.LogMode(logger.Info), //设置日志级别为Info
+		//Logger: logger.Default.LogMode(logger.Info), //设置日志级别为Info
 	})
 	return
 }