调整

2023-07-05 12:29:40 +08:00
parent 03110a9b1e
commit dce2261a74
12 changed files with 432 additions and 101 deletions
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -125,8 +125,8 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。

 <script>
 import axios from 'axios'
-import ProjectList from "@/components/Home/ProjectList.vue";
-import UserInfo from "@/components/Home/UserInfo.vue";
+import ProjectList from "@/components/Project/ProjectList.vue";
+import UserInfo from "@/components/User/UserInfo.vue";
 import LoginDialog from "@/components/Home/LoginDialog.vue";

 export default {
--- a/src/components/Home/RightTools.vue
+++ b/src/components/Home/RightTools.vue
@@ -10,9 +10,9 @@
 </template>

 <script>
-import UserInfo from "@/components/Home/UserInfo.vue";
+import UserInfo from "@/components/User/UserInfo.vue";
 import LoginDialog from "@/components/Home/LoginDialog.vue";
-import RandomProjects from "@/components/Home/RandomProjects.vue";
+import RandomProjects from "@/components/Project/RandomProjects.vue";

 export default {
    name: "RightTools",
--- a/src/components/Home/SearchInput.vue
+++ b/src/components/Home/SearchInput.vue
@@ -15,7 +15,7 @@
                        <span class="title">搜索历史</span>
                        <span class="clear" @click="clearHistory" v-show="this.$cookie.get('username')!=null"><i class="el-icon-circle-close"></i>清空</span>
                    </div>
-                    <div v-show="this.$cookie.get('username')!=null">
+                    <div v-if="historySearch!==null" v-show="this.$cookie.get('username')!=null">
                        <el-tag
                            v-for="(tag,index) in historySearch"
                            :key="index"
@@ -28,7 +28,11 @@
                            {{ tag }}
                        </el-tag>
                    </div>
-                    <div v-show="this.$cookie.get('username')==null">
+                    <div v-if="historySearch==null" v-show="this.$cookie.get('username')!=null">
+                        <el-empty description="暂无搜索历史" :image-size="20"></el-empty>
+                    </div>
+                    <div
+                        v-show="this.$cookie.get('username')==null">
                        <span style="color: #9ca3af;font-size: 15px">你还没有登录哦~</span>
                    </div>

@@ -115,12 +119,7 @@ export default {
                params: {
                }
            }).then((res)=>{
-                // console.log(res.data);
-                if(res.data.code===500){
-                    return;
-                }else{
-                    that.historySearch=res.data;
-                }
+                that.historySearch=res.data;

            });
        },
--- a/src/components/Project/ProjectDetail.vue
+++ b/src/components/Project/ProjectDetail.vue
--- a/src/components/Project/ProjectList.vue
+++ b/src/components/Project/ProjectList.vue
--- a/src/components/Project/RandomProjects.vue
+++ b/src/components/Project/RandomProjects.vue
--- a/src/components/Ranking.vue
+++ b/src/components/Ranking.vue
@@ -6,24 +6,47 @@
                <el-page-header  @back="goBack" style="justify-content: center;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" style="font-size:23px;font-weight: 600;">
-                        HelloGitHub (2023)年(6)月语言排行榜
+                        HelloGitHub (2023)年语言排行榜
                    </div>
                </el-page-header>
            </div>
-            <div class="PageContent">榜单内容</div>
+            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
+                <el-card class="box-card">
+                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between">
+                        <el-select v-model="selectedValue" style="width: 7vw">
+                            <el-option label="编程语言" value="1"></el-option>
+                            <el-option label="服务器" value="2"></el-option>
+                            <el-option label="数据库" value="3"></el-option>
+                        </el-select>
+                        <el-image fit="fill" :src="require('@/assets/svg/logo-tiobe.svg')" style="width:8vw;height: 4vh;display: flex;flex-direction: row;justify-content: flex-end"></el-image>
+                        <el-select v-model="selectedValueByYear" style="width: 7vw">
+                            <el-option label="2023" value="2023"></el-option>
+                            <el-option label="2022" value="2022"></el-option>
+                        </el-select>
+                    </div>
+                </el-card>
+                <el-card class="box-card" style="margin-top: 20px">
+                    <el-table
+                        :data="tableData"
+                        style="width: 100%">
+                        <el-table-column
+                            prop="date"
+                            label="日期"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="姓名"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="address"
+                            label="地址">
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+            </div>
        </div>
-<!--        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
-<!--                <div class="UserInfo">-->
-<!--                    用户信息展示内容-->
-<!--                </div>-->
-<!--                <div class="RightContent">-->
-<!--                    空位置，待填入-->
-<!--                </div>-->
-<!--                <div class="ReferralProgram">-->
-<!--                    推荐项目目录-->
-<!--                </div>-->
-<!--        </div>-->
-
    </div>

 </template>
@@ -31,6 +54,29 @@
 <script>
 export default {
    name: "RankingComponent",
+    data(){
+        return{
+            selectedValue:'1',
+            selectedValueByYear:'2023',
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
    methods: {
        goBack() {
            window.history.go(-1);
@@ -43,4 +89,7 @@ export default {
 ::v-deep .el-page-header__left{
  left:-150px;
 }
+.el-card{
+    border: none;
+}
 </style>
--- a/src/components/User/UserInfo.vue
+++ b/src/components/User/UserInfo.vue
@@ -44,6 +44,16 @@ export default {
    },
    methods:{
        signOut(){
+            // deletecookie
+            var that=this;
+            axios({
+                method: 'get',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/deletesession',
+                // URL 中的查询参数
+                params: {
+                }
+            });
            this.$cookie.delete('username');
            if(this.$cookie.get('username')===null){
                Vue.prototype.$notify({
@@ -52,14 +62,20 @@ export default {
                    type: 'success',
                    offset: 50
                });
+                setTimeout(()=>{
+                    window.location.reload();
+                },1000)
            }
-            setTimeout(()=>{
-                window.location.reload();
-            },1000)
+

        },
        toUserPage(){
-            this.$router.push({path:'/UserInfoPage'})
+            this.$router.push({
+                    path:'/UserInfoPage',
+                    query: {
+                    name: this.$cookie.get('username'),
+                    refresh: true
+                }})
        },
        getContributionValue(){
            var that=this;
--- a/src/components/User/UserInfoPage.vue
+++ b/src/components/User/UserInfoPage.vue
@@ -0,0 +1,137 @@
+<template>
+    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+            <div class="PageHeader">
+                <br/>
+                <el-page-header  @back="goBack" style="justify-content: center;">
+                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                    <div slot="content" style="font-size:23px;font-weight: 600;">
+                        个人主页
+                    </div>
+                </el-page-header>
+            </div>
+            <div class="PageContent">
+                <el-card class="box-card" style="border: none">
+                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
+                        <div style="display: flex;flex-direction: row;justify-content: flex-start">
+                            <div style="width: 100px;height: 100px">
+                                <el-avatar :size="90">{{username}}</el-avatar>
+                            </div>
+                            <div style="display: flex;flex-direction: column;margin-left: 15px;">
+                                <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
+                                    <span style="font-size: 20px;font-weight: bold;">{{username}}</span>
+                                    <span style="font-size: 15px;font-weight: bold;color: #3b82f6;margin-left: 10px">Lv.1</span>
+                                </div>
+                                <span style="margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> {{userId}} </span>位用户，于 {{creatTime}} 加入。</span>
+                                <span style="display: flex;justify-content: flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">
+                                    已分享
+                                    <span v-if="projectNum!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{projectNum}}</span>
+                                    <span v-if="projectNum==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
+                                    个开源项目，
+                                    <span v-if="Object.keys(commentList).length!==0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{Object.keys(commentList).length}}</span>
+                                    <span v-if="Object.keys(commentList).length===0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
+                                    份项目评价，
+                                    共获得
+                                    <span v-if="contributionValue!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{contributionValue}}</span>
+                                    <span v-if="contributionValue==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
+                                    点贡献值。
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+                <el-card class="box-card" style="border: none;margin-top: 20px">
+                    <el-tabs v-model="activeName">
+                        <el-tab-pane label="评论" name="first">
+                            <el-empty description="暂无评论" :image-size="115"></el-empty>
+                        </el-tab-pane>
+                        <el-tab-pane label="项目" name="third">
+                            <el-empty description="暂无项目" :image-size="115"></el-empty>
+                        </el-tab-pane>
+                    </el-tabs>
+                </el-card>
+            </div>
+        </div>
+        <RightTools></RightTools>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import RightTools from "@/components/Home/RightTools.vue";
+
+export default {
+    name: "UserInfoPage",
+    components: {RightTools},
+    data(){
+        return{
+            activeName:'first',
+            username: null,
+            contributionValue:0,
+            creatTime:null,
+            projectNum:0,
+            userId:null,
+            projectList:null,
+            commentList:{},
+        }
+    },
+    mounted() {
+        this.getUserInfo()
+        this.getUserDetail();
+    },
+    watch: {
+        $route () {
+            if(this.$route.query.refresh){
+                this.getUserInfo() //重新调用http请求实现页面的重新渲染
+                this.getUserDetail();
+            }
+        }
+    },
+
+    methods: {
+        goBack() {
+            window.history.go(-1);
+        },
+        getUserInfo(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
+                // URL 中的查询参数
+                params: {
+                    username:this.$route.query.name
+                }
+            }).then(function (res) {
+                that.username=res.data.userName;
+                that.contributionValue=res.data.contributionValue;
+                that.creatTime=res.data.creatTime;
+                that.projectNum=res.data.projectNum;
+                that.userId=res.data.userId;
+            });
+        },
+        getUserDetail(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/userDetail',
+                // URL 中的查询参数
+                params: {
+                    username:this.$route.query.name
+                }
+            }).then(function (res) {
+                that.projectList=JSON.parse(res.data.project);
+                that.commentList=JSON.parse(res.data.comment);
+            });
+        },
+    }
+}
+</script>
+
+<style scoped>
+::v-deep .el-page-header__left{
+    position: relative;
+    left:-20vw;
+}
+</style>
--- a/src/components/UserInfoPage.vue
+++ b/src/components/UserInfoPage.vue
@@ -1,69 +0,0 @@
-<template>
-    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
-        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
-            <div class="PageHeader">
-                <br/>
-                <el-page-header  @back="goBack" style="justify-content: center;">
-                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
-                    <div slot="content" style="font-size:23px;font-weight: 600;">
-                        个人主页
-                    </div>
-                </el-page-header>
-            </div>
-            <div class="PageContent">
-                <el-card class="box-card" style="border: none">
-                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
-                        <div style="display: flex;flex-direction: row;justify-content: flex-start">
-                            <div style="width: 100px;height: 100px">
-                                <el-avatar :size="90">{{this.$cookie.get('username')}}</el-avatar>
-                            </div>
-                            <div style="display: flex;flex-direction: column;margin-left: 15px;">
-                                <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
-                                    <span style="font-size: 20px;font-weight: bold;">{{this.$cookie.get('username')}}</span>
-                                    <span style="font-size: 15px;font-weight: bold;color: #3b82f6;margin-left: 10px">Lv.1</span>
-                                </div>
-                                <span style="margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> 7750 </span>位用户，于 2023 年 06 月 25 日 加入。</span>
-                                <span style="display: flex;justify-content: flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">已分享<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>个开源项目<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>份项目评价，共获得<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>点贡献值。</span>
-                            </div>
-                        </div>
-                    </div>
-                </el-card>
-                <el-card class="box-card" style="border: none;margin-top: 20px">
-                    <el-tabs v-model="activeName">
-                        <el-tab-pane label="评论" name="first">
-                            <el-empty description="暂无评论" :image-size="100"></el-empty>
-                        </el-tab-pane>
-                        <el-tab-pane label="项目" name="third">
-                            <el-empty description="暂无项目" :image-size="100"></el-empty>
-                        </el-tab-pane>
-                    </el-tabs>
-                </el-card>
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<script>
-export default {
-    name: "UserInfoPage",
-    data(){
-        return{
-            activeName:'first'
-        }
-    },
-
-    methods: {
-        goBack() {
-            window.history.go(-1);
-        }
-    }
-}
-</script>
-
-<style scoped>
-::v-deep .el-page-header__left{
-    position: relative;
-    left:-20vw;
-}
-</style>