From 226632509a27c29fd11d42783b559ed08cd58457 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Fri, 30 Jun 2023 23:22:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=88=97=E8=A1=A8=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=AE=8C=E6=88=9080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home/Home.vue   | 176 ++++++++++++++++++---------------
 src/components/ProjectList.vue |  21 ++--
 2 files changed, 106 insertions(+), 91 deletions(-)

diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index 88d1bd0..b6f4430 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -1,8 +1,10 @@
 <template>
     <el-container style="display: flex;flex-direction: row;">
-        <el-aside width="22vw" style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
+        <el-aside width="22vw"
+                  style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
             <template>
-                <el-card class="box-card" style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+                <el-card class="box-card"
+                         style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                     <div slot="header" class="clearfix">
                         <span><i class="el-icon-menu"></i> 热门标签</span>
                     </div>
@@ -19,32 +21,34 @@
                 </el-card>
             </template>
         </el-aside>
-        <el-main  style="display: flex;flex-direction: row;flex-wrap: nowrap;">
+        <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
             <template>
                 <div>
-                    <el-tabs  v-model="activeName" type="border-card" style="width: 45vw;"  @tab-click="tabChange">
-                        <el-tab-pane label="最热" name="first" style="display: flex;justify-content: flex-start">
-                                        <ul
-                                            class="list"
-                                            v-infinite-scroll="load"
-                                            infinite-scroll-disabled="disabled">
-                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
-                                                <ProjectList></ProjectList>
-                                            </ol>
-                                        </ul>
-                                        <p v-if="loading">加载中...</p>
-                                        <p v-if="noMore">没有更多了</p>
+                    <el-tabs v-model="activeName" type="border-card" style="width: 45vw;" @tab-click="tabChange">
+                        <el-tab-pane label="最新" name="first">
+                            <ul
+                                    class="list"
+                                    v-infinite-scroll="load"
+                                    infinite-scroll-disabled="disabled">
+                                <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
+                                    style="display: flex;flex-direction: row;margin-left: -80px">
+                                    <ProjectList :project-lists="project"></ProjectList>
+                                </ol>
+                            </ul>
+                            <p v-if="loading">加载中...</p>
+                            <p v-if="noMore">没有更多了</p>
                         </el-tab-pane>
-                        <el-tab-pane label="最新" name="second">
+                        <el-tab-pane label="最热" name="second">
                             <div class="lsm-container">
-                                <el-scrollbar class="scrollbar-wrapper"  style="position: relative;">
+                                <el-scrollbar class="scrollbar-wrapper" style="position: relative;">
                                     <div class="infinite-list-wrapper">
                                         <ul
-                                            class="list"
-                                            v-infinite-scroll="load"
-                                            infinite-scroll-disabled="disabled">
-                                            <ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px">
-                                                <ProjectList></ProjectList>
+                                                class="list"
+                                                v-infinite-scroll="load"
+                                                infinite-scroll-disabled="disabled">
+                                            <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
+                                                style="display: flex;flex-direction: row;margin-left: -80px">
+                                                <ProjectList :project-lists="project"></ProjectList>
                                             </ol>
                                         </ul>
                                         <p v-if="loading">加载中...</p>
@@ -141,41 +145,41 @@
                         <el-form-item prop="username">
                             <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
                             <el-input
-                                prefix-icon="el-icon-user"
-                                v-model="resisterRuleForm.username"
-                                placeholder="用户名"
-                                auto-complete="off"
+                                    prefix-icon="el-icon-user"
+                                    v-model="resisterRuleForm.username"
+                                    placeholder="用户名"
+                                    auto-complete="off"
                             ></el-input>
                         </el-form-item>
                         <el-form-item prop="password">
                             <!-- type：密码显示* -->
                             <el-input
-                                prefix-icon="el-icon-unlock"
-                                :type="passwordVisible"
-                                v-model="resisterRuleForm.password"
-                                placeholder="密码"
-                                auto-complete="new-password"
+                                    prefix-icon="el-icon-unlock"
+                                    :type="passwordVisible"
+                                    v-model="resisterRuleForm.password"
+                                    placeholder="密码"
+                                    auto-complete="new-password"
                             >
                                 <i slot="suffix" :class="icon" @click="showPass"></i>
                             </el-input>
                         </el-form-item>
                         <el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                             <el-input
-                                prefix-icon="el-icon-mobile-phone"
-                                type="text"
-                                placeholder="点击图片更换验证码"
-                                v-model="resisterRuleForm.code"
-                                class="vertify_code"
-                                auto-complete="false"
-                                style="width: 15.8vw"
+                                    prefix-icon="el-icon-mobile-phone"
+                                    type="text"
+                                    placeholder="点击图片更换验证码"
+                                    v-model="resisterRuleForm.code"
+                                    class="vertify_code"
+                                    auto-complete="false"
+                                    style="width: 15.8vw"
                             ></el-input>
                             <!-- <span class="code">验证码</span> -->
                             <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
                         </el-form-item>
                         <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
-<!--                            <el-form-item prop="remember">-->
-<!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
-<!--                            </el-form-item>-->
+                            <!--                            <el-form-item prop="remember">-->
+                            <!--                                <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
+                            <!--                            </el-form-item>-->
 
                             <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
                         </div>
@@ -198,12 +202,14 @@
 import axios from 'axios'
 import Vue from "vue";
 import ProjectList from "@/components/ProjectList.vue";
+
 export default {
     name: "HomeComponent",
     components: {ProjectList},
     data() {
         return {
-            activeName:'first',
+            activeName: 'first',
+            projectLists:[],
             count: 10,
             loading: false,
             loginDialogVisible: false,
@@ -216,7 +222,7 @@ export default {
                 username: null,
                 password: null,
                 code: null,
-                remember:null
+                remember: null
             },
             resisterRuleForm: {
                 username: null,
@@ -236,27 +242,28 @@ export default {
     },
     mounted() {
         this.account(); //获取cookie的方法
+        this.ProjectLists();
     },
     computed: {
-        noMore () {
+        noMore() {
             return this.count >= 20
         },
-        disabled () {
+        disabled() {
             return this.loading || this.noMore
         }
     },
     methods: {
-        openLogin(){
-            this.loginDialogVisible=true;
+        openLogin() {
+            this.loginDialogVisible = true;
         },
-        closeLogin(){
-            this.loginDialogVisible=false;
+        closeLogin() {
+            this.loginDialogVisible = false;
         },
-        openResister(){
-            this.registerDialogVisible=true;
+        openResister() {
+            this.registerDialogVisible = true;
         },
-        closeRegister(){
-            this.registerDialogVisible=false;
+        closeRegister() {
+            this.registerDialogVisible = false;
         },
         // ******登录*****
         account() {
@@ -283,7 +290,7 @@ export default {
             }
         },
         clearCookie() {
-            this.setCookie("", "",-1); //清除cookie
+            this.setCookie("", "", -1); //清除cookie
         },
 
         // 方法
@@ -298,7 +305,7 @@ export default {
                     // 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.clearCookie();
                     }
@@ -316,19 +323,19 @@ export default {
                             remember: this.ruleForm.remember,
 
                         }
-                    }).then(function (res){
+                    }).then(function (res) {
                         // Vue.prototype.$message({
                         //     message: '成功！',
                         //     type: 'success'
                         // });
-                        if(res.data.code===200){
+                        if (res.data.code === 200) {
                             Vue.prototype.$notify({
                                 title: '成功',
-                                message: ('i', { style: 'color: teal'}, res.data.msg),
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                 type: 'success',
                                 offset: 50
                             });
-                        }else{
+                        } else {
                             Vue.prototype.$notify.error({
                                 title: '错误',
                                 message: res.data.msg,
@@ -363,7 +370,7 @@ export default {
                 this.icon = "el-icon-lock";
             }
         },
-        loginFun(){
+        loginFun() {
             this.loginDialogVisible = true;
             this.registerDialogVisible = false;
         },
@@ -385,7 +392,7 @@ export default {
                     // 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.clearCookie();
                     }
@@ -402,19 +409,19 @@ export default {
                             code: this.resisterRuleForm.code,
 
                         }
-                    }).then(function (res){
+                    }).then(function (res) {
                         // Vue.prototype.$message({
                         //     message: '成功！',
                         //     type: 'success'
                         // });
-                        if(res.data.code===200){
+                        if (res.data.code === 200) {
                             Vue.prototype.$notify({
                                 title: '成功',
-                                message: ('i', { style: 'color: teal'}, res.data.msg),
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                 type: 'success',
                                 offset: 50
                             });
-                        }else{
+                        } else {
                             Vue.prototype.$notify.error({
                                 title: '错误',
                                 message: res.data.msg,
@@ -432,29 +439,36 @@ export default {
             });
         },
         //----------注册结束----------
-        load () {
+        load() {
             this.loading = true
             setTimeout(() => {
                 this.count += 2
                 this.loading = false
             }, 2000)
         },
-        tabChange(tab, event){
+
+        //-------首页列表-------
+        ProjectLists() {
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                // URL 中的查询参数
+                params: {
+                    num: "0",
+                }
+            }).then((res)=>{
+                console.log(res.data);
+                that.projectLists=res.data;
+            });
+        },
+
+        tabChange(tab, event) {
             console.log(tab, event);
-            if (tab.name == "first") {
-                axios({
-                    method: 'get',
-                    // 请求的地址
-                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
-                    // URL 中的查询参数
-                    params: {
-                        num: 0,
-                    }
-                }).then(function (res){
-                    console.log(res);
-                });
-        } else if (tab.name == "second") {
-                //网络请求2
+            // eslint-disable-next-line no-empty
+            if (tab.name == "second") {
+
             }
         }
 
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
index 73c4ea3..8b31ebf 100644
--- a/src/components/ProjectList.vue
+++ b/src/components/ProjectList.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="ProjectList">
         <div class="projectIco">
-            <img src="../assets/images/touxiang.png" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
+            <img :src="projectLists.projectIco" style="width: 5vw;height: 5vw;margin-left: 10px;border-radius: 10px">
         </div>
         <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
             <div class="ProjectTitle">
-                <span>由密码学专家团队打造的开源隐私计算平台</span>
+                <span>{{projectLists.projectTitle}}</span>
             </div>
             <div class="summary">
-                <span style="font-size: 1rem">随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近两..</span>
+                <span style="font-size: 1rem">{{brief}}</span>
             </div>
             <div class="other">
                 <div class="otherInfo">
                     <div class="projectName">
-                        <span style="color: #59A3A4">primihub</span><span style="color: rgb(156 163 175);"> • </span>
+                        <span style="color: #59A3A4">{{ projectLists.projectName }}</span><span style="color: rgb(156 163 175);"> • </span>
                     </div>
                     <div>
                         <div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
                     </div>
                     <el-tag size="mini" style="margin-left: 5px">C++</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
                     <div style="margin-left: 10px">
-                        <span style="color: rgb(156 163 175); ">2023-6-30</span>
+                        <span style="color: rgb(156 163 175); ">{{ formatTime }}</span>
                     </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); ">1.3k</span>
+                    <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>
                 </div>
             </div>
         </div>
@@ -43,17 +43,18 @@ export default {
     computed: {
         // 对时间进行格式化
         formatTime: function() {
-            if (this.article) {
-                const dt = new Date(this.article.time)
+            if (this.projectLists) {
+                const dt = new Date(this.projectLists.submitTime)
+                const year=dt.getFullYear()
                 const month = dt.getMonth()
                 const date = dt.getDate()
-                return `${month}月${date}日`
+                return `${year}-${month}-${date}`
             }
             return '';
         },
         // 截取文章内容的前 35 个字，并加上省略号
         brief: function() {
-            return this.projectLists.content.substr(0, 35) + '...';
+            return this.projectLists.projectDescription.substr(0, 35) + '...';
         }
     }
 }