HelloGithub/hellogithub-vue
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页列表展示完成80%

Browse Source
This commit is contained in:
landaiqing
2023-06-30 23:22:40 +08:00
parent 626991b2cc
commit 226632509a
2 changed files with 106 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Home/Home.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<el-container style="display: flex;flex-direction: row;"> <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> <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"> <div slot="header" class="clearfix">
<span><i class="el-icon-menu"></i> 热门标签</span> <span><i class="el-icon-menu"></i> 热门标签</span>
</div> </div>
@@ -23,19 +25,20 @@
<template> <template>
<div> <div>
<el-tabs v-model="activeName" type="border-card" style="width: 45vw;" @tab-click="tabChange"> <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"> <el-tab-pane label="最新" name="first">
<ul <ul
class="list" class="list"
v-infinite-scroll="load" v-infinite-scroll="load"
infinite-scroll-disabled="disabled"> infinite-scroll-disabled="disabled">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px"> <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
<ProjectList></ProjectList> style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList :project-lists="project"></ProjectList>
</ol> </ol>
</ul> </ul>
<p v-if="loading">加载中...</p> <p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p> <p v-if="noMore">没有更多了</p>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="最新" name="second"> <el-tab-pane label="最热" name="second">
<div class="lsm-container"> <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"> <div class="infinite-list-wrapper">
@@ -43,8 +46,9 @@
class="list" class="list"
v-infinite-scroll="load" v-infinite-scroll="load"
infinite-scroll-disabled="disabled"> infinite-scroll-disabled="disabled">
<ol v-for="i in count" :key="i" class="list-item" style="display: flex;flex-direction: row;margin-left: -80px"> <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
<ProjectList></ProjectList> style="display: flex;flex-direction: row;margin-left: -80px">
<ProjectList :project-lists="project"></ProjectList>
</ol> </ol>
</ul> </ul>
<p v-if="loading">加载中...</p> <p v-if="loading">加载中...</p>
@@ -173,9 +177,9 @@
<img :src="imageUrl" @click="resetImg" class="vertify_img"/> <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
</el-form-item> </el-form-item>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center"> <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
<!-- <el-form-item prop="remember">--> <!-- <el-form-item prop="remember">-->
<!-- <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>--> <!-- <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-link type="success" @click="loginFun()">已有账户？去登录!</el-link> <el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
</div> </div>
@@ -198,12 +202,14 @@
import axios from 'axios' import axios from 'axios'
import Vue from "vue"; import Vue from "vue";
import ProjectList from "@/components/ProjectList.vue"; import ProjectList from "@/components/ProjectList.vue";
export default { export default {
name: "HomeComponent", name: "HomeComponent",
components: {ProjectList}, components: {ProjectList},
data() { data() {
return { return {
activeName:'first', activeName: 'first',
projectLists:[],
count: 10, count: 10,
loading: false, loading: false,
loginDialogVisible: false, loginDialogVisible: false,
@@ -216,7 +222,7 @@ export default {
username: null, username: null,
password: null, password: null,
code: null, code: null,
remember:null remember: null
}, },
resisterRuleForm: { resisterRuleForm: {
username: null, username: null,
@@ -236,27 +242,28 @@ export default {
}, },
mounted() { mounted() {
this.account(); //获取cookie的方法 this.account(); //获取cookie的方法
this.ProjectLists();
}, },
computed: { computed: {
noMore () { noMore() {
return this.count >= 20 return this.count >= 20
}, },
disabled () { disabled() {
return this.loading || this.noMore return this.loading || this.noMore
} }
}, },
methods: { methods: {
openLogin(){ openLogin() {
this.loginDialogVisible=true; this.loginDialogVisible = true;
}, },
closeLogin(){ closeLogin() {
this.loginDialogVisible=false; this.loginDialogVisible = false;
}, },
openResister(){ openResister() {
this.registerDialogVisible=true; this.registerDialogVisible = true;
}, },
closeRegister(){ closeRegister() {
this.registerDialogVisible=false; this.registerDialogVisible = false;
}, },
// ******登录***** // ******登录*****
account() { account() {
@@ -283,7 +290,7 @@ export default {
} }
}, },
clearCookie() { clearCookie() {
this.setCookie("", "",-1); //清除cookie this.setCookie("", "", -1); //清除cookie
}, },
// 方法 // 方法
@@ -298,7 +305,7 @@ export default {
// params.append("remember",this.ruleForm.remember) // 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();
} }
@@ -316,19 +323,19 @@ export default {
remember: this.ruleForm.remember, remember: this.ruleForm.remember,
} }
}).then(function (res){ }).then(function (res) {
// Vue.prototype.$message({ // Vue.prototype.$message({
// message: '成功！', // message: '成功！',
// type: 'success' // type: 'success'
// }); // });
if(res.data.code===200){ if (res.data.code === 200) {
Vue.prototype.$notify({ Vue.prototype.$notify({
title: '成功', title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg), message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success', type: 'success',
offset: 50 offset: 50
}); });
}else{ } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
title: '错误', title: '错误',
message: res.data.msg, message: res.data.msg,
@@ -363,7 +370,7 @@ export default {
this.icon = "el-icon-lock"; this.icon = "el-icon-lock";
} }
}, },
loginFun(){ loginFun() {
this.loginDialogVisible = true; this.loginDialogVisible = true;
this.registerDialogVisible = false; this.registerDialogVisible = false;
}, },
@@ -385,7 +392,7 @@ export default {
// params.append("remember",this.ruleForm.remember) // 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();
} }
@@ -402,19 +409,19 @@ export default {
code: this.resisterRuleForm.code, code: this.resisterRuleForm.code,
} }
}).then(function (res){ }).then(function (res) {
// Vue.prototype.$message({ // Vue.prototype.$message({
// message: '成功！', // message: '成功！',
// type: 'success' // type: 'success'
// }); // });
if(res.data.code===200){ if (res.data.code === 200) {
Vue.prototype.$notify({ Vue.prototype.$notify({
title: '成功', title: '成功',
message: ('i', { style: 'color: teal'}, res.data.msg), message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success', type: 'success',
offset: 50 offset: 50
}); });
}else{ } else {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
title: '错误', title: '错误',
message: res.data.msg, message: res.data.msg,
@@ -432,29 +439,36 @@ export default {
}); });
}, },
//----------注册结束---------- //----------注册结束----------
load () { load() {
this.loading = true this.loading = true
setTimeout(() => { setTimeout(() => {
this.count += 2 this.count += 2
this.loading = false this.loading = false
}, 2000) }, 2000)
}, },
tabChange(tab, event){
console.log(tab, event); //-------首页列表-------
if (tab.name == "first") { ProjectLists() {
var that=this;
axios({ axios({
method: 'get', method: 'post',
// 请求的地址 // 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate', url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
// URL 中的查询参数 // URL 中的查询参数
params: { params: {
num: 0, num: "0",
} }
}).then(function (res){ }).then((res)=>{
console.log(res); console.log(res.data);
that.projectLists=res.data;
}); });
} else if (tab.name == "second") { },
//网络请求2
tabChange(tab, event) {
console.log(tab, event);
// eslint-disable-next-line no-empty
if (tab.name == "second") {
} }
} }

21
src/components/ProjectList.vue
View File

@@ -1,30 +1,30 @@
<template> <template>
<div class="ProjectList"> <div class="ProjectList">
<div class="projectIco"> <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>
<div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between"> <div style="height: 12vh;margin-left: 5px;width: auto;display: flex;flex-direction: column;justify-content: space-between">
<div class="ProjectTitle"> <div class="ProjectTitle">
<span>由密码学专家团队打造的开源隐私计算平台</span> <span>{{projectLists.projectTitle}}</span>
</div> </div>
<div class="summary"> <div class="summary">
<span style="font-size: 1rem">随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近两..</span> <span style="font-size: 1rem">{{brief}}</span>
</div> </div>
<div class="other"> <div class="other">
<div class="otherInfo"> <div class="otherInfo">
<div class="projectName"> <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> <div>
<div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div> <div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
</div> </div>
<el-tag size="mini" style="margin-left: 5px">C++</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span> <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"> <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> </div>
<div class="lookCount"> <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> </div>
</div> </div>
@@ -43,17 +43,18 @@ export default {
computed: { computed: {
// 对时间进行格式化 // 对时间进行格式化
formatTime: function() { formatTime: function() {
if (this.article) { if (this.projectLists) {
const dt = new Date(this.article.time) const dt = new Date(this.projectLists.submitTime)
const year=dt.getFullYear()
const month = dt.getMonth() const month = dt.getMonth()
const date = dt.getDate() const date = dt.getDate()
return `${month}月${date}日` return `${year}-${month}-${date}`
} }
return ''; return '';
}, },
// 截取文章内容的前 35 个字，并加上省略号 // 截取文章内容的前 35 个字，并加上省略号
brief: function() { brief: function() {
return this.projectLists.content.substr(0, 35) + '...'; return this.projectLists.projectDescription.substr(0, 35) + '...';
} }
} }
} }