首页个人信息组件以及搜索框
This commit is contained in:
@@ -43,8 +43,8 @@
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">没有更多了</p>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-model="activeName" label="最热" name="second">
|
||||
<div class="lsm-container">
|
||||
@@ -60,8 +60,8 @@
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">没有更多了</p>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@@ -70,16 +70,35 @@
|
||||
</div>
|
||||
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||||
<el-card class="box-card" style="width: 13vw">
|
||||
<el-button type="info" plain @click="openLogin()">登 录</el-button>
|
||||
<el-button type="info" plain @click="openLogin()" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<UserInfo></UserInfo>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px;width: 13vw">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>卡片名称</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
|
||||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
|
||||
<template slot="prefix">
|
||||
<i class="el-icon-s-flag" style="color: red"></i>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||
</template>
|
||||
</el-statistic>
|
||||
|
||||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="projectTotal" title="项目总数">
|
||||
<template slot="prefix">
|
||||
<i class="el-icon-s-flag" style="color: red"></i>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{ '列表内容 ' + o }}
|
||||
<div class="text item">
|
||||
<div style="font-size: 18px;color: #9ca3af;font-weight: bold"> 关于本站 </div>
|
||||
<span>
|
||||
HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 希望大家能够在这里找到编程的快乐、 轻松搞定问题的技术方案、 大呼过瘾的开源神器， 顺其自然地开启开源之旅。
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@@ -209,11 +228,15 @@
|
||||
<el-dialog
|
||||
:visible.sync="manageCategoryVisible"
|
||||
width="50vw">
|
||||
<div>
|
||||
<ManageCategory></ManageCategory>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<el-checkbox-group v-model="checkboxGroup" size="medium" :max="10">
|
||||
<el-checkbox style="margin-top: 20px" v-for="(tag,index) in tags" :key="index" v-html="tag.category" border size="medium"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
总共:
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -222,14 +245,17 @@
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
import ProjectList from "@/components/Home/ProjectList.vue";
|
||||
import manageCategory from "@/components/Home/ManageCategory.vue";
|
||||
import ManageCategory from "@/components/Home/ManageCategory.vue";
|
||||
import UserInfo from "@/components/Home/UserInfo.vue";
|
||||
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
components: {ManageCategory, ProjectList},
|
||||
components: {UserInfo, ProjectList},
|
||||
|
||||
data() {
|
||||
return {
|
||||
userTotal:null,
|
||||
projectTotal:null,
|
||||
checkboxGroup: [],
|
||||
activeName: 'first',
|
||||
currentTabName:"综合",
|
||||
currentTabIndex:null,
|
||||
@@ -267,9 +293,11 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.account(); //获取cookie的方法
|
||||
// this.account(); //获取cookie的方法
|
||||
this.ProjectLists();
|
||||
this.categoryList();
|
||||
this.getUserTotal();
|
||||
this.getProjectTotal();
|
||||
},
|
||||
created() {
|
||||
// if (sessionStorage.getItem('current_name') == null){
|
||||
@@ -285,9 +313,6 @@ export default {
|
||||
// next()
|
||||
},
|
||||
computed: {
|
||||
manageCategory() {
|
||||
return manageCategory
|
||||
},
|
||||
noMore() {
|
||||
return this.count >= 10
|
||||
},
|
||||
@@ -300,6 +325,8 @@ export default {
|
||||
|
||||
openLogin() {
|
||||
this.loginDialogVisible = true;
|
||||
// this.$cookie.delete('username')
|
||||
// this.$cookie.delete('password')
|
||||
},
|
||||
closeLogin() {
|
||||
this.loginDialogVisible = false;
|
||||
@@ -311,49 +338,44 @@ export default {
|
||||
this.registerDialogVisible = false;
|
||||
},
|
||||
// ******登录*****
|
||||
account() {
|
||||
// console.log(this.getCookie("username"));
|
||||
this.ruleForm.username = this.getCookie("username");
|
||||
this.ruleForm.password = this.getCookie("password");
|
||||
},
|
||||
setCookie(c_name, c_pwd, exdate) {
|
||||
//账号，密码 ，过期的天数
|
||||
exdate = new Date();
|
||||
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
|
||||
document.cookie =
|
||||
"username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
|
||||
document.cookie =
|
||||
"password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
|
||||
},
|
||||
getCookie(name) {
|
||||
var arr = document.cookie.split(";");
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
var arr2 = arr[i].split("=");
|
||||
if (arr2[0].trim() == name) {
|
||||
return arr2[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
clearCookie() {
|
||||
this.setCookie("", "", -1); //清除cookie
|
||||
},
|
||||
// account() {
|
||||
// this.ruleForm.username = this.getCookie("username");
|
||||
// this.ruleForm.password = this.getCookie("password");
|
||||
// this.CookieUserName=this.getCookie("username");
|
||||
// },
|
||||
// setCookie(c_name, c_pwd, exdate) {
|
||||
// //账号，密码 ，过期的天数
|
||||
// exdate = new Date();
|
||||
// exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
|
||||
// document.cookie =
|
||||
// "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
|
||||
// document.cookie =
|
||||
// "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
|
||||
// },
|
||||
// getCookie(name) {
|
||||
// var arr = document.cookie.split(";");
|
||||
// for (var i = 0; i < arr.length; i++) {
|
||||
// var arr2 = arr[i].split("=");
|
||||
// if (arr2[0].trim() == name) {
|
||||
// return arr2[1];
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// clearCookie() {
|
||||
// this.setCookie("", "", -1); //清除cookie
|
||||
// },
|
||||
|
||||
// 方法
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//取参数
|
||||
// let params = new URLSearchParams();
|
||||
// params.append("username", this.ruleForm.username);
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
// this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
this.$cookie.set('username',this.ruleForm.username,7);
|
||||
|
||||
// } else {
|
||||
// this.clearCookie();
|
||||
// }
|
||||
|
||||
//调用方法提交
|
||||
axios({
|
||||
@@ -380,6 +402,7 @@ export default {
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
window.location.reload();
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
@@ -387,7 +410,6 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeLogin();
|
||||
@@ -435,12 +457,12 @@ export default {
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
// if (this.checked == true) {
|
||||
// //存入cookie
|
||||
// this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
// } else {
|
||||
// this.clearCookie();
|
||||
// }
|
||||
|
||||
//调用方法提交
|
||||
axios({
|
||||
@@ -473,7 +495,7 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeRegister();
|
||||
@@ -553,7 +575,6 @@ export default {
|
||||
name:name
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data);
|
||||
that.projectLists=res.data;
|
||||
});
|
||||
},
|
||||
@@ -578,11 +599,39 @@ export default {
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
that.tags=res.data;
|
||||
});
|
||||
},
|
||||
|
||||
getUserTotal(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.userTotal=res.data;
|
||||
});
|
||||
},
|
||||
getProjectTotal(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.projectTotal=res.data;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user