添加随机项目

src/components/Home/ProjectList.vue

@@ -24,7 +24,7 @@
                     </div>
                 </div>
                 <div class="lookCount">
-                    <i class="el-icon-view" style="color: rgb(156 163 175);"></i><span style="margin-left: 5px;color: rgb(156 163 175); ">{{ projectLists.lookCount }}</span>
+                    <i class="el-icon-view" style="color: rgb(156 163 175);"></i><span style="margin-left: 5px;color: rgb(156 163 175); ">{{ formatNumber(projectLists.lookCount) }}</span>
                 </div>
             </div>
         </div>
@@ -66,6 +66,9 @@ export default {
                     id: this.projectLists.projectId,
                 }})
             // console.log(this.$route.query.id)
+        },
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
         }
     }
 }

src/components/Home/RandomProjects.vue

@@ -0,0 +1,66 @@
+<template>
+    <el-card class="box-card" style="width: 15vw;height: auto;border: none">
+        <div slot="header" class="clearfix" style="display: flex;flex-direction: row;justify-content: space-between">
+            <span style="font-size: 14px;color: #4b5563">推荐项目</span>
+            <el-button class="randomProjectBtn" @click="getRandomProject" style="font-size: 12px;float: right; padding: 3px 0;color: #9ca3af" type="text"><i class="el-icon-refresh"></i>换一换</el-button>
+        </div>
+        <div class="text item" v-for="(item,index) in randomProjectList" :key="index" style="margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap">
+            <div style="width: 40px;height: 40px;">
+                <el-avatar :size="40" :src="item.projectIco"></el-avatar>
+            </div>
+            <div style="display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;justify-content: left">
+                <span style="font-size: 14px;font-weight: bold;display: flex;flex-direction: row;justify-content: flex-start">{{item.projectName}}</span>
+                <div style=";margin-left:10px;margin-top: 5px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap">
+                    <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                        <i class="el-icon-star-off"></i> <span>{{formatNumber(item.lookCount)}}</span>
+                    </div>
+                    <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
+                        <div style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
+                        <span style="margin-left: 5px">{{item.categoryName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    name: "RandomProjects",
+    data(){
+        return{
+             randomProjectList:[],
+        }
+    },
+    mounted() {
+        this.getRandomProject();
+        console.log(this.randomProjectList);
+    },
+    methods:{
+        getRandomProject(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/randomSelectPro',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then(function (res) {
+                that.randomProjectList=res.data;
+            });
+        },
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        }
+    }
+}
+</script>
+
+<style scoped>
+.randomProjectBtn:hover{
+    color: #00ff0d;
+}
+</style>

src/components/ProjectDetail.vue

@@ -216,11 +216,12 @@
           </div>
       </div>
       <div style="display: flex;margin-left: 20px;margin-top: 7vh;flex-direction: column">
-          <el-card class="box-card" style="width: 13vw;height: auto;border: none">
+          <el-card class="box-card" style="width: 15vw;height: auto;border: none">
               <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
               <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
               <UserInfo></UserInfo>
           </el-card>
+          <RandomProjects style="margin-top: 20px"></RandomProjects>
       </div>
   </div>
 </template>
@@ -229,10 +230,12 @@
 import axios from "axios";
 import UserInfo from "@/components/Home/UserInfo.vue";
 import LoginDialog from "@/components/Home/LoginDialog.vue";
+import Vue from "vue";
+import RandomProjects from "@/components/Home/RandomProjects.vue";
 
 export default {
     name: "ProjectDetail",
-    components: {LoginDialog, UserInfo},
+    components: {RandomProjects, LoginDialog, UserInfo},
     data(){
         return{
             starValue:null,
@@ -328,9 +331,23 @@ export default {
                     isUsed: that.radio,
                 }
             }).then(function (res) {
-                console.log(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
                     });
                 }
+            });
+        },
+
     }