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

更新页面

Browse Source
This commit is contained in:
Zhang HaoYang
2023-07-05 16:10:50 +08:00
parent dce2261a74
commit ca49ce55c5
7 changed files with 559 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/element-variables.scss
View File

@@ -57,7 +57,8 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
}
.RightContent{
width:20vw;
margin-top:10px;
height:fit-content;
margin-top:50px;
margin-left:20px;
border-radius: 6px;
background-color: #ffffff;

66
src/components/Monthly/Monthly.vue
View File

@@ -54,7 +54,7 @@
<span style="font-size:18px;font-weight:540;color: #676767">选择期数: &nbsp;</span>
<el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
<el-option
v-for="item in Monely"
v-for="item of Monely"
:key="item"
:label="item"
:value="item"
@@ -72,7 +72,7 @@
<el-card shadow="always" class="card_style">
<span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
<br/><br/>
<span style="font-size:55px;font-weight:650;color: #3d8bff">17</span>
<span style="font-size:55px;font-weight:650;color: #3d8bff">{{labelItem.length}}</span>
<br/><br/>
<span style="font-size:25px;font-weight:540;color: #676767">类</span>
<br/>
@@ -80,19 +80,19 @@
<div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
<br/>
<span style="font-size:18px;font-weight:540;color: #676767">选择分类: &nbsp;</span>
<el-select v-model="value" filterable placeholder="分类" style="width:80px;">
<el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in labelItem"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<br/><br/>
</div>
<br/>
<el-button type="info">查看分类</el-button>
<el-button type="info" @click="changePage()">查看分类</el-button>
<br/><br/>
</el-card>
</el-col>
@@ -150,14 +150,23 @@ export default {
Monely:0,
//保存用户选择期刊期数：
selectMonly:null,
// 保存用户选择的分类：
selectlabelItem:null,
//标签：
labelItem:[],
};
},
// 初始化渲染页面
mounted(){
this.getMonely();
this.getProjectNum();
this.getLabel();
},
methods: {
test(){
var that = this;
console.log(that.selectlabelItem);
},
goBack() {
window.history.go(-1);
},
@@ -187,6 +196,22 @@ export default {
// console.log(res.data);
})
},
//获取所有标签：
getLabel(){
var that = this;
axios({
method: 'post',
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
params: {
}
}).then(function (res){
that.labelItem = [];
for(let i=0;i<res.data.length;i++){
let tmp = res.data[i]['categoryName'];
that.labelItem.push(tmp);
}
})
},
// 月刊详情页面跳转
ToDetail(){
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
@@ -205,6 +230,26 @@ export default {
duration:700,
});
}
},
// 月刊分类页跳转
changePage(){
if(this.selectlabelItem){
let pathInfo = this.$router.resolve({
path: '/MonthlyByTags',
query:{
Protype:this.selectlabelItem
}
})
window.open(pathInfo.href, '_self');
}else{
this.$message({
message: '请选择分类类型',
type: 'warning',
offset:100,
duration:700,
});
}
}
}
}
@@ -242,4 +287,9 @@ export default {
text-align: center;
border-radius:10px;
}
::v-deep .el-scrollbar{
max-height:150px;
overflow: scroll;
}
</style>

142
src/components/Monthly/MonthlyByTags.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<div class="test" style="display:flex;flex-direction:row;flex-wrap: nowrap" >
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
<div class="PageHeader">
<br/>
<div style="display:flex;flex-wrap:nowrap">
<el-button icon="el-icon-search" circle></el-button>
<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:25px;font-weight: 650;margin-top:0px">
《HelloGitHub》月刊<span style="font-size:18px">{{selectlabelItem}}</span>分区
</div>
</el-page-header>
</div>
</div>
<div class="PageContent">
<div style="margin-top:30px;width:50vw;margin-left:20px">
<el-row :gutter="24">
<el-col :span="24">
<el-card shadow="always" style="font-size: 18px;
font-weight:550;color: #a9a9a9;
line-height: 35px;
text-align:left;background-color: #f4ffed;
border-color: rgba(255,243,232,0.89);border-radius:10px">
这里是按照<span style="font-size:20px;font-weight:600;color:#7e7e7e">「分类」</span>
阅读往期的 HelloGitHub 月刊内容， 您目前在查看往期 HelloGitHub 月刊中的
<span style="font-size:20px;font-weight:600;color:#7e7e7e">{{selectlabelItem}} 项目</span>
集合。
</el-card>
</el-col>
</el-row>
<div class="ItemsContent" >
<el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
<div class="infinite-list-wrapper" >
<ul class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled"
>
<div style="text-align: center">
<div v-for="(items,index2) of projectLists.length" :key="index2">
<MonthlyItems :Items='projectLists[index2]'></MonthlyItems>
</div>
<div :id="index"></div>
</div>
</ul>
<p v-if="loading" style="color: #9ca3af">加载中...</p>
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue";
import axios from "axios";
export default {
name: "MonthlyByTags",
components: {MonthlyItems},
data(){
return{
// 项目分类标签数组
labelItem:[],
// 项目列表：
projectLists:null,
// 选择的分类：
selectlabelItem:null,
//种类对应项目数组：
MonTypePro:[],
}
},
//初始化
mounted() {
this.initPage() ;
},
methods:{
test(){
var that = this;
console.log(that.selectlabelItem);
},
// 初始化方法
initPage(){
this.selectlabelItem = this.$route.query.Protype;
var that = this;
this.getList(1,that.selectlabelItem);
},
goBack() {
let pathInfo = this.$router.resolve({
path: '/Monthly',
query:{
}
})
window.open(pathInfo.href, '_self');
},
// 获取所有标签列表
getLabel(){
var that = this;
axios({
method: 'post',
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
params: {
}
}).then(function (res){
that.labelItem = [];
for(let i=0;i<res.data.length;i++){
let tmp = res.data[i]['categoryName'];
that.labelItem.push(tmp);
}
console.log(that.labelItem);
})
},
getList(index,name){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
// URL 中的查询参数
params: {
num:index,
name:name
}
}).then((res)=>{
that.projectLists=res.data;
});
},
}
}
</script>
<style scoped lang="scss">
::v-deep .el-page-header__left{
left:-200px;
display: none;
}
</style>

260
src/components/Monthly/MonthlyDetail.vue
View File

@@ -1,15 +1,14 @@
<template>
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
<div class="test" 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:18px;font-weight: 600;margin-top:-10px">
<el-button ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>
&nbsp;
<el-select no-data-text="MonthlyId" @change="ToDetail()" size="medium"
clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
<el-button @click="ToNearMon('LastBtn')" ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>&nbsp;
<el-select @change="ToDetail()" size="medium"
clearable v-model="selectMonly" filterable placeholder="跳转期数" style="width:80px;">
<el-option
v-for="item in Monely"
:key="item"
@@ -20,13 +19,13 @@
</el-select>
&nbsp;
/ {{Monely}}&nbsp;
<el-button ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
<el-button @click="ToNearMon('NextBtn')" ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div>
</el-page-header>
</div>
<div class="PageContent">
<div style="font-size:35px;font-weight:750;">
《HelloGitHub》月刊第{{selectMonly}}期
《HelloGitHub》月刊第{{MonthlyId}}期
</div>
<div style="margin-top:30px;width:50vw;margin-left:20px">
@@ -43,31 +42,61 @@
</el-card>
</el-col>
</el-row>
</div>
<div class="ItemsContent" >
<el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
<div class="infinite-list-wrapper" >
<ul class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled"
>
<div v-for="(items,index) in MonType.length" :key="index" style="text-align: center">
<div class="scroll-content">
<span style="font-size:40px;font-weight:700;font-family:'华文彩云' ">{{MonType[index]}}语言区</span>
</div>
<div v-for="(items,index2) of MonTypePro[index].length" :key="index2">
<MonthlyItems :Items='MonTypePro[index][index2]'></MonthlyItems>
</div>
<div :id="index"></div>
</div>
<!-- <el-button @click="test()"></el-button>-->
</ul>
<p v-if="loading" style="color: #9ca3af">加载中...</p>
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
</div>
</el-scrollbar>
</div>
</div>
</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 class="RightContent" style="position:fixed;left:70vw;max-height:80vh;overflow: scroll">
<el-row class="tac">
<el-col :span="24">
<h5 style="font-size:25px;">快速导航</h5>
<div style="display: flex;flex-direction:row;flex-wrap:wrap">
<a id="menuItems" v-for="(item,index2) in MonType" :key="index2" href="javascript:void(0)" @click="goAnchor(index2)">
<div style="display:flex;text-align: left">
<div style="margin-top:16px;margin-left:8vw;">
<i id="icon" :class="IconList[MonType[index2]]" style="font-size:25px;color:#fff;font-weight:550"></i>
<span style="font-weight:550;margin-left:10px">{{MonType[index2]}}</span>
</div>
</div>
</a>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import axios from "axios";
import Monthly from "@/components/Monthly/Monthly.vue";
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue"
export default {
name: "MonthlyDetailComponent",
components: {MonthlyItems},
data(){
return{
//用户当前所处的月刊期号
@@ -76,24 +105,110 @@ export default {
Monely:null,
// //用户选择跳转的月刊数
selectMonly:null,
//保存月刊内项目分类
MonList:null,
loading: false,
count: 10,
//测试组类：
a1:null,
//种类数组：
MonType:[],
//种类对应项目数组：
MonTypePro:[],
active:null,
//图标列表：
IconList:{"综合":"el-icon-discover", "C":"el-ico-alicyuyan", "C#":"el-ico-aliCyuyan", "C++":"el-ico-alicyuyan",
"CSS":"el-ico-alicss3", "Go":"el-ico-aliGoyuyan", "Java":"el-ico-alijava", "JavaScript":"el-ico-alioutline-java-script",
"Kotlin":"el-ico-alikotlin", "Objective-C":"el-ico-alicyuyan", "PHP":"el-ico-aliphp", "python":"el-ico-aliPython",
"Ruby":"el-ico-aliRubyyuyan", "Rust":"el-ico-alirust", "Swift":"el-ico-aliswift",
"Other":"el-icon--help", "开源书籍":"el-ico-alitushu", "机器学习":"el-ico-alijiqixuexi___"}
}
},
mounted() {
this.getMonely();
window.addEventListener('scroll', this.onScroll)
this.initPage();
this.getMonely();
this.FreshItems();
},
destroy() {
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
window.removeEventListener('scroll', this.onScroll)
},
computed:{
noMore() {
return this.count >= 10
},
disabled() {
return this.loading || this.noMore
}
},
beforeRouteLeave(to , from, next){
if(to.name == 'Monthly'){
from.meta.keepAlive = false;
}
next();
},
methods: {
//滚动
// 点击切换锚点：
goAnchor(id) {
var anchor = document.getElementById(id);
// chrome
document.body.scrollTop = anchor.offsetTop + anchor.offsetHeight;
// firefox
document.documentElement.scrollTop = anchor.offsetTop + anchor.offsetHeight;
// safari
window.pageYOffset = anchor.offsetTop + anchor.offsetHeight;
var that = this;
that.active = id;
console.log(that.active);
},
onScroll() {
// 获取所有锚点元素
const navContents = document.querySelectorAll('.scroll-content')
// 所有锚点元素的 offsetTop
const offsetTopArr = []
navContents.forEach(item => {
offsetTopArr.push(item.offsetTop)
})
// 获取当前文档流的 scrollTop
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 定义当前点亮的导航下标
let navIndex = 0
for (let n = 0; n < offsetTopArr.length; n++) {
// 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
// 那么此时导航索引就应该是 n 了
if (scrollTop >= offsetTopArr[n]) {
navIndex = n
}
}
// 把下标赋值给 vue 的 data
this.active = navIndex
},
goBack() {
window.history.go(-1);
let pathInfo = this.$router.resolve({
path: '/Monthly',
query:{
}
})
window.open(pathInfo.href, '_self');
},
initPage(){
this.selectMonly = this.$route.query.MonethlyId;
this.MonthlyId = this.$route.query.MonethlyId;
this.selectMonly = this.MonthlyId;
// if(parseInt(this.selectMonly) == parseInt(1) || parseInt(this.MonethlyId) == parseInt(1)){
// this.$refs.LastBtn.style.display = "none"
// }else if(parseInt(this.selectMonly) == this.Monely || parseInt(this.MonethlyId) == this.Monely){
// this.$refs.NextBtn.style.display = "none"
// }
},
test(){
console.log(this.MonType);
console.log(this.MonTypePro);
console.log(this.MonList);
},
// 月刊总数:
getMonely(){
var that = this;
axios({
@@ -106,11 +221,38 @@ export default {
// console.log(res.data);
})
},
// 获取该期月刊中项目列表
getList(num){
var that = this;
axios({
method: 'post',
url: 'http://localhost:8082/helloGithub_war_exploded/selectTerm',
params: {
type:num
}
}).then(function (res){
that.MonList = res.data;
that.MonType=[];
that.MonTypePro=[];
Object.keys(that.MonList).forEach(key=>{
that.MonType.push(key);
that.MonTypePro.push(that.MonList[key]);
})
})
},
// 月刊详情页面跳转
ToDetail(){
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
this.MonthlyId = this.selectMonly;
let pathInfo = this.$router.resolve({
path: '/MonthlyDetail',
query:{
MonethlyId:this.selectMonly
}
})
window.open(pathInfo.href, '_self');
// console.log(parseInt(this.selectMonly) + " " + parseInt(this.MonethlyId) )
console.log("跳转成功")
this.$router.go(0);
}else{
this.$message({
message: '请输入正确的月刊号',
@@ -120,12 +262,82 @@ export default {
});
}
},
//上一期下一期：
ToNearMon(name){
if(name == "LastBtn" && this.MonthlyId>1){
// this.selectMonly = this.MonthlyId -1;
let pathInfo = this.$router.resolve({
path: '/MonthlyDetail',
query:{
MonethlyId:this.MonthlyId - 1
}
})
window.open(pathInfo.href, '_self');
this.$router.go(0);
}else if(name == "LastBtn" && this.MonthlyId == 1){
this.$message({
message: '您已处于第一期月刊！',
type: 'warning',
offset:100,
duration:500,
});
}
if(name == "NextBtn" && this.MonthlyId < this.Monely){
let pathInfo = this.$router.resolve({
path: '/MonthlyDetail',
query:{
MonethlyId:parseInt(this.MonthlyId) + parseInt(1)
}
})
window.open(pathInfo.href, '_self');
this.$router.go(0);
}else if(name == "NextBtn" && this.MonthlyId == this.Monely){
this.$message({
message: '您已处于最后一期月刊!',
type: 'warning',
offset:100,
duration:500,
});
}
},
// 更行月刊内容：
FreshItems(){
this.getList(this.MonthlyId);
var that = this;
that.active = 0;
},
load(){
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
},
}
}
</script>
<style scoped lang="scss">
::v-deep .el-page-header__left{
left:-200px;
}
.ItemsContent{
margin-left:-10px;
width:54vw;
}
#menuItems{
background-color:rgb(178, 178, 178);
color:#fff;
width:20vw;
height:55px;
font-size:20px;
text-decoration-line: none;
}
#menuItems:hover{
background-color:#a4a4a4;
transform:scale(1.15);
cursor:pointer;
}
</style>

113
src/components/Monthly/MonthlyItems.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div class="MonItems">
<div class="Title"><i class="el-icon-s-promotion"></i>{{briefTitle}}</div>
<div class="State">
<div style="margin-top:10px">
<i class="el-icon-star-off"></i>&nbsp;Star:1400&nbsp;&nbsp;&nbsp;&nbsp;
<i class="el-icon-set-up"></i>&nbsp;Fork:755&nbsp;&nbsp;&nbsp;&nbsp;
<i class="el-icon-view"></i>&nbsp;浏览量:{{Items.lookCount}}
</div>
<div>
<el-button size="medium" type="primary" plain @click="changePage(Items.projectId)">详&nbsp;&nbsp;&nbsp;情</el-button>
</div>
</div>
<div class="ItemsContent">
{{briefDescribe}}
</div>
</div>
</template>
<script>
export default {
name: "MonthlyItems",
data(){
return{
content:'随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近' +
'两年迎来了前所未有的热度。该项目是由密码学专家团队打造的隐私计算平台，它开箱即用、安全可靠，支持隐匿查询、' +
'隐私求交、联合统计、数据资源管理等功能，实现了“数据可用不可见”，为数据安全流通保驾护航。',
}
},
props:{
Items:{
type: Object,
default () {
return {}
}
}
},
computed:{
briefTitle: function(){
if(this.Items.projectTitle.length>=14){
return this.Items.projectTitle.substr(0, 13) + '...';
}else{
return this.Items.projectTitle;
}
},
briefDescribe: function(){
if(this.Items.projectDescription.length >= 151){
return this.Items.projectDescription.substr(0, 150) + '...';
}else {
return this.Items.projectDescription;
}
}
},
methods:{
//项目详情
changePage(id){
let pathInfo = this.$router.resolve({
path: '/ProjectDetail',
query:{
id:id
}
})
window.open(pathInfo.href, '_self');
this.$router.go(0);
}
}
}
</script>
<style scoped>
.MonItems{
width:52vw;
margin-top:30px
}
.Title{
margin-left:0px;
width:fit-content;
color: #7bb6ff;
font-size:25px;
font-weight:550;
}
.Title:hover{
text-decoration-line:underline ;
color: #2b93ff;
cursor: pointer;
}
.State{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin-top:10px;
margin-left:0px;
width:48vw;
/*width:fit-content;*/
font-size:16px;
font-family: '华文细黑';
font-weight:700;
color: #6b6b6b;
}
.ItemsContent{
font-weight:550;
margin-top:8px;
margin-left:0px;
width:700px;
font-size:18px;
/*background-color: #ff4949;*/
line-height: 35px;
text-align: left;
}
</style>

6
src/router/index.js
View File

@@ -6,6 +6,7 @@ import monthly from "@/components/Monthly/Monthly.vue";
import ranking from "@/components/Ranking.vue";
import paper from "@/components/Paper/Paper.vue";
import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";
import UserInfoPage from "@/components/User/UserInfoPage.vue";
import ProjectDetail from "@/components/Project/ProjectDetail.vue";
import ArticleDetail from "@/components/Paper/ArticleDetail.vue";
@@ -56,6 +57,11 @@ const routes = [
name: 'UserInfoPage',
component: UserInfoPage
},
{
path: '/MonthlyByTags',
name: 'MonthlyByTags',
component: MonthlyByTags
},
{
path: '/ProjectDetail',
name: 'ProjectDetail',

2
src/views/index.vue
View File

@@ -5,7 +5,9 @@
</el-header>
<el-container>
<el-main>
<!-- <keep-alive>-->
<router-view></router-view>
<!-- </keep-alive>-->
</el-main>
</el-container>
</el-container>