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

首页标签查询优化

Browse Source
This commit is contained in:
landaiqing
2023-07-02 11:12:50 +08:00
parent 71a299f4eb
commit 7aca0c112e
2 changed files with 130 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,8 @@
<div class="bottom clearfix">
<el-scrollbar style="height:50vh">
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="tag.index" :name="tag.name" >
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.icon"></span>
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="tag.categoryId" :name="tag.categoryName" >
<span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.category"></span>
</el-tab-pane>
</el-tabs>
</el-scrollbar>
@@ -263,6 +263,7 @@ export default {
password: [{required: true, message: "请输入密码", trigger: "blur"}],
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
tags:null,
// tags:['<i class="el-icon-discover"></i> 综 合',
// '<i class="el-ico-alicyuyan"></i> C++',
// '<i class="el-ico-aliPython"></i> python',
@@ -271,104 +272,105 @@ export default {
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
// ],
tags:[
{
index:0,
icon: `<i class="el-icon-discover" style="margin-right: 10px"></i> 综合`,
name:"综合"
},
{
index:1,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C`,
name:"C"
},
{
index:2,
icon: `<i class="el-ico-aliCyuyan" style="margin-right: 10px"></i> C#`,
name:"C#"
},
{
index:3,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C++`,
name:"C++"
},
{
index:4,
icon: `<i class="el-ico-alicss3" style="margin-right: 10px"></i> CSS`,
name:"CSS"
},
{
index:5,
icon: `<i class="el-ico-aliGoyuyan" style="margin-right: 10px"></i> Go`,
name:"Go"
},
{
index:6,
icon: `<i class="el-ico-alijava" style="margin-right: 10px"></i> Java`,
name:"Java"
},
{
index:7,
icon: `<i class="el-ico-alioutline-java-script" style="margin-right: 10px"></i> JavaScript`,
name:"JavaScript"
},
{
index:8,
icon: `<i class="el-ico-alikotlin" style="margin-right: 10px"></i> Kotlin`,
name:"Kotlin"
},
{
index:9,
icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> ObjectiveC`,
name:"Objective-C"
},
{
index:10,
icon: `<i class="el-ico-aliphp" style="margin-right: 10px"></i> PHP`,
name:"PHP"
},
{
index:11,
icon: `<i class="el-ico-aliPython" style="margin-right: 10px"></i> python`,
name:"python"
},
{
index:12,
icon: `<i class="el-ico-aliRubyyuyan" style="margin-right: 10px"></i> Ruby`,
name:"Ruby"
},
{
index:13,
icon: `<i class="el-ico-alirust" style="margin-right: 10px"></i> Rust`,
name:"Rust"
},
{
index:14,
icon: `<i class="el-ico-aliswift" style="margin-right: 10px"></i> Swift`,
name:"Swift"
},
{
index:15,
icon: `<i class="el-icon-s-help" style="margin-right: 10px"></i> Other`,
name:"Other"
},
{
index:16,
icon: `<i class="el-ico-alitushu" style="margin-right: 10px"></i> 开源书籍`,
name:"开源书籍"
},
{
index:17,
icon: `<i class="el-ico-alijiqixuexi___" style="margin-right: 10px"></i> 机器学习`,
name:"机器学习"
},
],
// tags:[
// {
// index:0,
// icon: `<i class="el-icon-discover" style="margin-right: 10px"></i> 综合`,
// name:"综合"
// },
// {
// index:1,
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C`,
// name:"C"
// },
// {
// index:2,
// icon: `<i class="el-ico-aliCyuyan" style="margin-right: 10px"></i> C#`,
// name:"C#"
// },
// {
// index:3,
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> C++`,
// name:"C++"
// },
// {
// index:4,
// icon: `<i class="el-ico-alicss3" style="margin-right: 10px"></i> CSS`,
// name:"CSS"
// },
// {
// index:5,
// icon: `<i class="el-ico-aliGoyuyan" style="margin-right: 10px"></i> Go`,
// name:"Go"
// },
// {
// index:6,
// icon: `<i class="el-ico-alijava" style="margin-right: 10px"></i> Java`,
// name:"Java"
// },
// {
// index:7,
// icon: `<i class="el-ico-alioutline-java-script" style="margin-right: 10px"></i> JavaScript`,
// name:"JavaScript"
// },
// {
// index:8,
// icon: `<i class="el-ico-alikotlin" style="margin-right: 10px"></i> Kotlin`,
// name:"Kotlin"
// },
// {
// index:9,
// icon: `<i class="el-ico-alicyuyan" style="margin-right: 10px"></i> ObjectiveC`,
// name:"Objective-C"
// },
// {
// index:10,
// icon: `<i class="el-ico-aliphp" style="margin-right: 10px"></i> PHP`,
// name:"PHP"
// },
// {
// index:11,
// icon: `<i class="el-ico-aliPython" style="margin-right: 10px"></i> python`,
// name:"python"
// },
// {
// index:12,
// icon: `<i class="el-ico-aliRubyyuyan" style="margin-right: 10px"></i> Ruby`,
// name:"Ruby"
// },
// {
// index:13,
// icon: `<i class="el-ico-alirust" style="margin-right: 10px"></i> Rust`,
// name:"Rust"
// },
// {
// index:14,
// icon: `<i class="el-ico-aliswift" style="margin-right: 10px"></i> Swift`,
// name:"Swift"
// },
// {
// index:15,
// icon: `<i class="el-icon-s-help" style="margin-right: 10px"></i> Other`,
// name:"Other"
// },
// {
// index:16,
// icon: `<i class="el-ico-alitushu" style="margin-right: 10px"></i> 开源书籍`,
// name:"开源书籍"
// },
// {
// index:17,
// icon: `<i class="el-ico-alijiqixuexi___" style="margin-right: 10px"></i> 机器学习`,
// name:"机器学习"
// },
// ],
};
},
mounted() {
this.account(); //获取cookie的方法
this.ProjectLists();
this.categoryList();
},
created() {
// if (sessionStorage.getItem('current_name') == null){
@@ -607,7 +609,7 @@ export default {
that.projectLists=res.data;
});
},
projectListsByCount(index){
projectListsByCount(index,name){
var that=this;
axios({
method: 'post',
@@ -616,6 +618,7 @@ export default {
// URL 中的查询参数
params: {
num: index,
name:name
}
}).then((res)=>{
// console.log(res.data);
@@ -625,23 +628,21 @@ export default {
tabChange(tab) {
if(tab.name=="first"){
if(this.currentTabIndex!=null){
this. typeChangeFun(this.currentTabIndex);
this.typeChangeFun(this.currentTabIndex,this.currentTabName);
}else {
this.ProjectLists();
}
}
if (tab.name == "second") {
if(this.currentTabIndex!=null){
this.projectListsByCount(this.currentTabIndex);
this.projectListsByCount(this.currentTabIndex,this.currentTabName);
}else {
this.projectListsByCount(this.tabindex);
}
}
},
typeChangeFun(index){
typeChangeFun(index,name){
var that=this;
axios({
method: 'post',
@@ -650,6 +651,7 @@ export default {
// URL 中的查询参数
params: {
num: index,
name:name
}
}).then((res)=>{
console.log(res.data);
@@ -660,12 +662,27 @@ export default {
typeChange(tab){
this.currentTabIndex=tab.index;
if(this.activeName==="first"){
this.typeChangeFun(tab.index);
this.typeChangeFun(tab.index,this.currentTabName);
}
if(this.activeName==="second"){
this.projectListsByCount(tab.index);
this.projectListsByCount(tab.index,this.currentTabName);
}
}
},
// 标签列表
categoryList(){
var that=this;
axios({
method: 'post',
// 请求的地址
url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
// URL 中的查询参数
params: {
}
}).then((res)=>{
console.log(res);
that.tags=res.data;
});
},
}
}

12
src/components/Home/ManageCategory.vue
View File

@@ -1,12 +1,20 @@
<template>
<el-card class="box-card">
<el-checkbox-group v-model="checkboxGroup" size="medium">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</el-card>
</template>
<script>
export default {
name: "ManageCategory"
name: "ManageCategory",
data(){
return{
checkboxGroup:[],
}
}
}
</script>