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

package-lock.json

@@ -12,7 +12,9 @@
         "core-js": "^3.8.3",
         "element-ui": "^2.15.13",
         "vue": "^2.6.14",
-        "vue-router": "^3.5.1"
+        "vue-cookie": "^1.1.4",
+        "vue-router": "^3.5.1",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -20,6 +22,7 @@
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-plugin-router": "~5.0.0",
+        "@vue/cli-plugin-vuex": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
@@ -11532,6 +11535,11 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "node_modules/tiny-cookie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
+      "integrity": "sha512-4KJ21HYTNumxnHvCbLrtrrhSwtWXzpmaRJIUg4biBii5AiSe2izod5bauXiiQxVuf2Fta57U2DTW1Fa4/6Cmgw=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -11803,6 +11811,14 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-cookie": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/vue-cookie/-/vue-cookie-1.1.4.tgz",
+      "integrity": "sha512-lxWIzmUTCVra0H7YPbNpYx0wbTQThV+n7ueUOcqtK8dlckmfB8fcyf4OEiRuQUd7iiVub2T3IDlWiisEM5Ku0Q==",
+      "dependencies": {
+        "tiny-cookie": "^1.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -12031,6 +12047,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -21724,6 +21748,11 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "tiny-cookie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
+      "integrity": "sha512-4KJ21HYTNumxnHvCbLrtrrhSwtWXzpmaRJIUg4biBii5AiSe2izod5bauXiiQxVuf2Fta57U2DTW1Fa4/6Cmgw=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -21932,6 +21961,14 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-cookie": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/vue-cookie/-/vue-cookie-1.1.4.tgz",
+      "integrity": "sha512-lxWIzmUTCVra0H7YPbNpYx0wbTQThV+n7ueUOcqtK8dlckmfB8fcyf4OEiRuQUd7iiVub2T3IDlWiisEM5Ku0Q==",
+      "requires": {
+        "tiny-cookie": "^1.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -22113,6 +22150,12 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -12,7 +12,9 @@
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-cookie": "^1.1.4",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,6 +22,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

src/components/Home/Home.vue

@@ -43,8 +43,8 @@
                                     <el-divider></el-divider>
                                 </ol>
                             </ul>
-                            <p v-if="loading">加载中...</p>
+                            <p v-if="loading" style="color: #9ca3af">加载中...</p>
-                            <p v-if="noMore">没有更多了</p>
+                            <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                         </el-tab-pane>
                         <el-tab-pane v-model="activeName" label="最热" name="second">
                             <div class="lsm-container">
@@ -60,8 +60,8 @@
                                                 <el-divider></el-divider>
                                             </ol>
                                         </ul>
-                                        <p v-if="loading">加载中...</p>
+                                        <p v-if="loading" style="color: #9ca3af">加载中...</p>
-                                        <p v-if="noMore">没有更多了</p>
+                                        <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                                     </div>
                                 </el-scrollbar>
                             </div>
@@ -70,16 +70,35 @@
                 </div>
                 <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
                     <el-card class="box-card" style="width: 13vw">
-                        <el-button type="info" plain @click="openLogin()">登 录</el-button>
+                        <el-button type="info" plain @click="openLogin()" v-show="this.$cookie.get('username')==null">登 录</el-button>
+                        <UserInfo></UserInfo>
                     </el-card>
 
                     <el-card class="box-card" style="margin-top: 20px;width: 13vw">
                         <div slot="header" class="clearfix">
-                            <span>卡片名称</span>
+                            <el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
-                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+                                <template slot="prefix">
+                                    <i class="el-icon-s-flag" style="color: red"></i>
+                                </template>
+                                <template slot="suffix">
+                                    <i class="el-icon-s-flag" style="color: blue"></i>
+                                </template>
+                            </el-statistic>
+
+                            <el-statistic group-separator="," :precision="0" decimal-separator="." :value="projectTotal" title="项目总数">
+                                <template slot="prefix">
+                                    <i class="el-icon-s-flag" style="color: red"></i>
+                                </template>
+                                <template slot="suffix">
+                                    <i class="el-icon-s-flag" style="color: blue"></i>
+                                </template>
+                            </el-statistic>
                         </div>
-                        <div v-for="o in 4" :key="o" class="text item">
+                        <div class="text item">
-                            {{ '列表内容 ' + o }}
+                            <div style="font-size: 18px;color: #9ca3af;font-weight: bold"> 关于本站 </div>
+                            <span>
+HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 希望大家能够在这里找到编程的快乐、 轻松搞定问题的技术方案、 大呼过瘾的开源神器， 顺其自然地开启开源之旅。
+                            </span>
                         </div>
                     </el-card>
                 </div>
@@ -209,11 +228,15 @@
             <el-dialog
                 :visible.sync="manageCategoryVisible"
                 width="50vw">
-                <div>
+                    <el-card class="box-card">
-                    <ManageCategory></ManageCategory>
+                        <el-checkbox-group v-model="checkboxGroup" size="medium" :max="10">
-                </div>
+                            <el-checkbox  style="margin-top: 20px" v-for="(tag,index) in tags" :key="index" v-html="tag.category" border size="medium"></el-checkbox>
+                        </el-checkbox-group>
+                    </el-card>
+                <el-card class="box-card">
+                    总共:
+                </el-card>
             </el-dialog>
-
         </el-main>
     </el-container>
 </template>
@@ -222,14 +245,17 @@
 import axios from 'axios'
 import Vue from "vue";
 import ProjectList from "@/components/Home/ProjectList.vue";
-import manageCategory from "@/components/Home/ManageCategory.vue";
+import UserInfo from "@/components/Home/UserInfo.vue";
-import ManageCategory from "@/components/Home/ManageCategory.vue";
 
 export default {
     name: "HomeComponent",
-    components: {ManageCategory, ProjectList},
+    components: {UserInfo, ProjectList},
+
     data() {
         return {
+            userTotal:null,
+            projectTotal:null,
+            checkboxGroup: [],
             activeName: 'first',
             currentTabName:"综合",
             currentTabIndex:null,
@@ -267,9 +293,11 @@ export default {
         };
     },
     mounted() {
-        this.account(); //获取cookie的方法
+        // this.account(); //获取cookie的方法
         this.ProjectLists();
         this.categoryList();
+        this.getUserTotal();
+        this.getProjectTotal();
     },
     created() {
     //     if (sessionStorage.getItem('current_name') == null){
@@ -285,9 +313,6 @@ export default {
     //     next()
     },
     computed: {
-        manageCategory() {
-            return manageCategory
-        },
         noMore() {
             return this.count >= 10
         },
@@ -300,6 +325,8 @@ export default {
 
         openLogin() {
             this.loginDialogVisible = true;
+            // this.$cookie.delete('username')
+            // this.$cookie.delete('password')
         },
         closeLogin() {
             this.loginDialogVisible = false;
@@ -311,49 +338,44 @@ export default {
             this.registerDialogVisible = false;
         },
         // ******登录*****
-        account() {
+        // account() {
-            // console.log(this.getCookie("username"));
+        //     this.ruleForm.username = this.getCookie("username");
-            this.ruleForm.username = this.getCookie("username");
+        //     this.ruleForm.password = this.getCookie("password");
-            this.ruleForm.password = this.getCookie("password");
+        //     this.CookieUserName=this.getCookie("username");
-        },
+        // },
-        setCookie(c_name, c_pwd, exdate) {
+        // setCookie(c_name, c_pwd, exdate) {
-            //账号，密码 ，过期的天数
+        //     //账号，密码 ，过期的天数
-            exdate = new Date();
+        //     exdate = new Date();
-            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
+        //     exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
-            document.cookie =
+        //     document.cookie =
-                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
+        //         "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
-            document.cookie =
+        //     document.cookie =
-                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
+        //         "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
-        },
+        // },
-        getCookie(name) {
+        // getCookie(name) {
-            var arr = document.cookie.split(";");
+        //     var arr = document.cookie.split(";");
-            for (var i = 0; i < arr.length; i++) {
+        //     for (var i = 0; i < arr.length; i++) {
-                var arr2 = arr[i].split("=");
+        //         var arr2 = arr[i].split("=");
-                if (arr2[0].trim() == name) {
+        //         if (arr2[0].trim() == name) {
-                    return arr2[1];
+        //             return arr2[1];
-                }
+        //         }
-            }
+        //     }
-        },
+        // },
-        clearCookie() {
+        // clearCookie() {
-            this.setCookie("", "", -1); //清除cookie
+        //     this.setCookie("", "", -1); //清除cookie
-        },
+        // },
 
         // 方法
         submitForm(formName) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
-                    //取参数
-                    // let params = new URLSearchParams();
-                    // params.append("username", this.ruleForm.username);
-                    // params.append("password", this.ruleForm.password);
-                    // params.append("code", this.ruleForm.code);
-                    // params.append("remember",this.ruleForm.remember)
-                    if (this.checked == true) {
                         //存入cookie
-                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
+                   // this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-                    } else {
+                    this.$cookie.set('username',this.ruleForm.username,7);
-                        this.clearCookie();
+
-                    }
+                    // } else {
+                    //     this.clearCookie();
+                    // }
 
                     //调用方法提交
                     axios({
@@ -380,6 +402,7 @@ export default {
                                 type: 'success',
                                 offset: 50
                             });
+                            window.location.reload();
                         } else {
                             Vue.prototype.$notify.error({
                                 title: '错误',
@@ -387,7 +410,6 @@ export default {
                                 offset: 50
                             });
                         }
-                        console.log(res);
                     });
                 } else {
                     this.closeLogin();
@@ -435,12 +457,12 @@ export default {
                     // params.append("password", this.ruleForm.password);
                     // params.append("code", this.ruleForm.code);
                     // params.append("remember",this.ruleForm.remember)
-                    if (this.checked == true) {
+                    // if (this.checked == true) {
-                        //存入cookie
+                    //     //存入cookie
-                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
+                    //     this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
-                    } else {
+                    // } else {
-                        this.clearCookie();
+                    //     this.clearCookie();
-                    }
+                    // }
 
                     //调用方法提交
                     axios({
@@ -473,7 +495,7 @@ export default {
                                 offset: 50
                             });
                         }
-                        console.log(res);
+                        // console.log(res);
                     });
                 } else {
                     this.closeRegister();
@@ -553,7 +575,6 @@ export default {
                     name:name
                 }
             }).then((res)=>{
-                console.log(res.data);
                 that.projectLists=res.data;
             });
         },
@@ -578,11 +599,39 @@ export default {
                 params: {
                 }
             }).then((res)=>{
-                console.log(res);
+                // console.log(res);
                 that.tags=res.data;
             });
         },
 
+        getUserTotal(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then((res)=>{
+                that.userTotal=res.data;
+            });
+        },
+        getProjectTotal(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
+                // URL 中的查询参数
+                params: {
+
+                }
+            }).then((res)=>{
+                that.projectTotal=res.data;
+            });
+        }
+
     }
 }
 </script>

src/components/Home/ManageCategory.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-card class="box-card">
-        <el-checkbox-group v-model="checkboxGroup" size="medium">
-            <el-checkbox label="备选项1" border></el-checkbox>
-        </el-checkbox-group>
-    </el-card>
-</template>
-
-<script>
-export default {
-    name: "ManageCategory",
-    props: {
-        tags: Object
-    },
-    data(){
-        return{
-            checkboxGroup:[],
-        }
-    }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/Home/SearchInput.vue

@@ -7,40 +7,28 @@
                 trigger="focus"
                 :visible-arrow="false"
                 style="padding-top: 0"
-                v-model="visible">
+                v-model="visible"
-            <div class="search-content">
+                >
-                <div class="search-his" v-show="historySearch.length > 0">
+            <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"
+                            v-for="(tag,index) in historySearch"
-                            :key="tag.name"
+                            :key="index"
                             size="small"
                             closable
+                            @close="handleClose(tag)"
                             style="margin-right: 10px; margin-top: 10px; cursor: pointer"
-                            @click="handleSearch(tag.name)"
+                            @click="handleSearch(tag)"
-                            :type="tag.type">
+                            >
-                        {{ tag.name }}
+                        {{ 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: [
+            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'}
-            ],
             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>

src/components/Home/UserInfo.vue

@@ -0,0 +1,49 @@
+<template>
+    <div style="display: flex;flex-direction: column;flex-wrap: nowrap" v-show="this.$cookie.get('username')!=null">
+        <div style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
+            <div style="display: flex;flex-direction: row;align-items: center">
+                <el-avatar shape="square" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+                <div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
+                    <span style="font-weight: bold">{{this.$cookie.get('username')}}</span>
+                    <span style="font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</span>
+                </div>
+            </div>
+
+            <el-switch v-model="switchValue" style="">
+            </el-switch>
+        </div>
+        <div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
+            <span style="font-size: 10px;color: #9ca3af">贡献值</span>
+            <span style="font-weight: bold;color: #59A3A4;font-size: 20px">0/64</span>
+        </div>
+        <div style="margin-top: 10px">
+            <el-progress :text-inside="true" :stroke-width="15" :percentage="0"></el-progress>
+        </div>
+        <el-divider></el-divider>
+        <div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
+            <el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-s-custom" class="link">我的主页</el-link>
+            <el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-switch-button" class="link" @click="signOut">退出登录</el-link>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "UserInfo",
+    data(){
+        return{
+            switchValue:false,
+        }
+    },
+    methods:{
+        signOut(){
+            this.$cookie.delete('username');
+            window.location.reload();
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/components/UserInfoPage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      个人主页
+  </div>
+</template>
+
+<script>
+export default {
+    name: "UserInfoPage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -5,13 +5,19 @@ import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 import axios from "axios";
 import './assets/icon/iconfont.css'
+import store from './store'
 axios.defaults.withCredentials=true;
 
+import cookie from 'vue-cookie'
+Vue.prototype.$cookie = cookie;
+
 Vue.config.productionTip = false
 
 Vue.use(Element);
 new Vue({
     router,
     axios,
+    store,
+    cookie,
     render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -5,6 +5,7 @@ import home from "@/components/Home/Home.vue";
 import monthly from "@/components/Monthly.vue";
 import ranking from "@/components/Ranking.vue";
 import paper from "@/components/Paper.vue";
+import UserInfoPage from "@/components/UserInfoPage.vue";
 
 Vue.use(VueRouter)
 
@@ -39,6 +40,11 @@ const routes = [
                 name: 'paper',
                 component: paper
             },
+            {
+                path: '/UserInfoPage',
+                name: 'UserInfoPage',
+                component: UserInfoPage
+            },
         ]
     }
 

src/store/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    // CookieUserName:""
+  },
+  getters: {
+  },
+  mutations: {
+    // saveCookieUserName(state,userName){
+    //   state.pathName = userName;
+    // },
+  },
+  actions: {
+  },
+  modules: {
+  }
+})