首页个人信息组件以及搜索框

src/components/Home/SearchInput.vue

@@ -7,40 +7,28 @@
                 trigger="focus"
                 :visible-arrow="false"
                 style="padding-top: 0"
-                v-model="visible">
-            <div class="search-content">
-                <div class="search-his" v-show="historySearch.length > 0">
+                v-model="visible"
+                >
+            <div class="search-content" v-show="this.$cookie.get('username')!=null">
+                <div class="search-his" v-show="historySearch.length!=null">
                     <div>
                         <span class="title">搜索历史</span>
                         <span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
                     </div>
                     <el-tag
-                            v-for="tag in historySearch"
-                            :key="tag.name"
+                            v-for="(tag,index) in historySearch"
+                            :key="index"
                             size="small"
                             closable
+                            @close="handleClose(tag)"
                             style="margin-right: 10px; margin-top: 10px; cursor: pointer"
-                            @click="handleSearch(tag.name)"
-                            :type="tag.type">
-                        {{ tag.name }}
+                            @click="handleSearch(tag)"
+                            >
+                        {{ tag }}
                     </el-tag>
                 </div>
-
-                <div :class="'search-hot ' + (historySearch.length > 0 ? 'mt' : '') ">
-                    <span class="title">热门搜索</span>
-                    <ul class="hot-list">
-                        <li v-for="(item, index) in items" :key="index" class="hot-item">
-              <span v-if="index < 3" class="top">
-                <i class="iconvs vs-hot"></i>
-              </span>
-                            <span v-else>
-                {{ index + 1 }}
-              </span>
-                            <span @click="handleSearch(item)">{{ item }}</span>
-                        </li>
-                    </ul>
-                </div>
             </div>
+
         </el-popover>
         <el-input
                 size="medium"
@@ -57,34 +45,19 @@
 
 
 <script>
+import axios from "axios";
+import Vue from "vue";
+
 export default {
     data() {
         return {
+
             visible: false,
             isMouseOver: false,
             search: '',
             tipsWord: '',
-            historySearch: [
-                {name: '标签一66666', type: 'info'},
-                {name: '标签二无敌无敌', type: 'info'},
-                {name: '标签三66', type: 'info'},
-                {name: '标签四1', type: 'info'},
-                {name: '标签四2', type: 'info'},
-                {name: '标签四3', type: 'info'},
-                {name: '标签四4', type: 'info'},
-                {name: '标签五', type: 'danger'}
-            ],
+            historySearch: [],
             items: [
-                '重生之我是都市霸主',
-                '热搜',
-                '热搜重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主',
-                '热搜',
-                '热搜',
-                '热搜',
-                '热搜',
-                '热搜',
-                '热搜',
-                '热搜'
             ]
         }
     },
@@ -94,7 +67,29 @@ export default {
             this.searchRequest()
         },
         clearHistory() {
-            this.historySearch = []
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then((res)=>{
+                if (res.data.code === 200) {
+                    Vue.prototype.$notify({
+                        title: '成功',
+                        message: ('i', {style: 'color: teal'}, res.data.msg),
+                        type: 'success',
+                        offset: 50
+                    });
+                } else {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+                }
+            });
         },
         searchRequest() {
             const params = {
@@ -103,10 +98,51 @@ export default {
             const queryString = new URLSearchParams(params).toString();
             const url = `${window.location.origin}/video/search?${queryString}`;
             window.open(url, '_blank');
+        },
+        gethistorySearch(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then((res)=>{
+                // console.log(res.data);
+                that.historySearch=res.data;
+            });
+        },
+        handleClose(tag){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
+                // URL 中的查询参数
+                params: {
+                    tag:tag+';'
+                }
+            }).then((res)=>{
+                if(res.date.code===200){
+                    that.$message({
+                        showClose: true,
+                        message: res.date.msg,
+                        type: 'success'
+                    });
+                }else{
+                    that.$message({
+                        showClose: true,
+                        message: res.date.msg,
+                        type: 'error'
+                    });
+                }
+            });
         }
     },
     mounted() {
-        this.tipsWord = this.items[0]
+        this.tipsWord = "helloGithub";
+        this.gethistorySearch();
     }
 };
 </script>