596 lines
25 KiB
Vue
596 lines
25 KiB
Vue
<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;">
|
||
<template>
|
||
<el-card class="box-card"
|
||
style="position: fixed;width: 10vw;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>
|
||
<div class="bottom clearfix">
|
||
<el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange">
|
||
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="index" :name="tag.name" >
|
||
<span slot="label" style="text-align: center" v-html="tag.icon"></span>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<!-- <div v-for="(tag,index) in tags" :key="index" class="text item">-->
|
||
<!--<!– <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>–>-->
|
||
<!-- </div>-->
|
||
<div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
|
||
<div>
|
||
<i class="el-icon-setting"></i>
|
||
<el-button type="text" class="button">管理标签</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
</el-aside>
|
||
<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">
|
||
<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: column;margin-left: -80px;" >
|
||
<ProjectList :project-lists="project"></ProjectList>
|
||
<el-divider></el-divider>
|
||
</ol>
|
||
</ul>
|
||
<p v-if="loading">加载中...</p>
|
||
<p v-if="noMore">没有更多了</p>
|
||
</el-tab-pane>
|
||
<el-tab-pane v-model="activeName" label="最热" name="second">
|
||
<div class="lsm-container">
|
||
<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="(project,index) in projectLists" :key="index" class="list-item"
|
||
style="display: flex;flex-direction: column;margin-left: -80px">
|
||
<ProjectList :project-lists="project"></ProjectList>
|
||
<el-divider></el-divider>
|
||
</ol>
|
||
</ul>
|
||
<p v-if="loading">加载中...</p>
|
||
<p v-if="noMore">没有更多了</p>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</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-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>
|
||
</div>
|
||
<div v-for="o in 4" :key="o" class="text item">
|
||
{{ '列表内容 ' + o }}
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<!--登录弹框-->
|
||
<el-dialog
|
||
title="登录"
|
||
:visible.sync="loginDialogVisible"
|
||
width="25vw">
|
||
<div>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
|
||
<el-form-item prop="username">
|
||
<!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
|
||
<el-input
|
||
prefix-icon="el-icon-user"
|
||
v-model="ruleForm.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="ruleForm.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="ruleForm.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: space-between;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-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
|
||
</div>
|
||
|
||
<div class="login-btn">
|
||
<el-button type="primary" @click="submitForm('ruleForm')"
|
||
>登录
|
||
</el-button
|
||
>
|
||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!--注册弹框-->
|
||
<el-dialog
|
||
title="注册"
|
||
:visible.sync="registerDialogVisible"
|
||
width="25vw">
|
||
<div>
|
||
<el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
|
||
<el-form-item prop="username">
|
||
<!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
|
||
<el-input
|
||
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"
|
||
>
|
||
<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"
|
||
></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-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
|
||
</div>
|
||
|
||
<div class="login-btn" style="margin-top: 10px;">
|
||
<el-button type="primary" @click="resisterForm('resisterRuleForm')"
|
||
>注册
|
||
</el-button
|
||
>
|
||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
import Vue from "vue";
|
||
import ProjectList from "@/components/ProjectList.vue";
|
||
|
||
export default {
|
||
name: "HomeComponent",
|
||
components: {ProjectList},
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
currentTabName:"综合",
|
||
currentTabIndex:null,
|
||
projectLists:[],
|
||
tabindex:0,
|
||
count: 10,
|
||
loading: false,
|
||
loginDialogVisible: false,
|
||
registerDialogVisible: false,
|
||
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
|
||
checked: false,
|
||
passwordVisible: "password",
|
||
icon: "el-icon-view",
|
||
ruleForm: {
|
||
username: null,
|
||
password: null,
|
||
code: null,
|
||
remember: null
|
||
},
|
||
resisterRuleForm: {
|
||
username: null,
|
||
password: null,
|
||
code: null,
|
||
},
|
||
rules: {
|
||
username: [
|
||
// required：规则，trigger：失去焦点触发
|
||
{required: true, message: "请输入用户名", trigger: "blur"},
|
||
],
|
||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||
},
|
||
// tags:['<i class="el-icon-discover"></i> 综 合',
|
||
// '<i class="el-ico-alicyuyan"></i> C++',
|
||
// '<i class="el-ico-aliPython"></i> python',
|
||
// `<i class="el-ico-alijava"></i> java`,
|
||
// `<i class="el-ico-alicyuyan"></i> C`,
|
||
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
|
||
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
|
||
// ],
|
||
tags:[
|
||
{
|
||
icon: `<i class="el-icon-discover"></i> 综 合`,
|
||
name:"综合"
|
||
},
|
||
{
|
||
icon: `<i class="el-ico-alicyuyan"></i> C`,
|
||
name:"C"
|
||
},
|
||
{
|
||
icon: `<i class="el-ico-aliGoyuyan"></i> C#`,
|
||
name:"C#"
|
||
},
|
||
{
|
||
icon: `<i class="el-ico-alicyuyan"></i> C++`,
|
||
name:"C++"
|
||
},
|
||
],
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
this.account(); //获取cookie的方法
|
||
this.ProjectLists();
|
||
},
|
||
created() {
|
||
// if (sessionStorage.getItem('current_name') == null){
|
||
// this.activeIndex = '综合'
|
||
// }else{
|
||
// this.activeIndex = sessionStorage.getItem('current_name')
|
||
// }
|
||
// },
|
||
// beforeRouteLeave(to, from, next){
|
||
// // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
|
||
// // 根据个人需求决定清除的时间
|
||
// sessionStorage.removeItem('currentTab')
|
||
// next()
|
||
},
|
||
computed: {
|
||
noMore() {
|
||
return this.count >= 10
|
||
},
|
||
disabled() {
|
||
return this.loading || this.noMore
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
|
||
openLogin() {
|
||
this.loginDialogVisible = true;
|
||
},
|
||
closeLogin() {
|
||
this.loginDialogVisible = false;
|
||
},
|
||
openResister() {
|
||
this.registerDialogVisible = true;
|
||
},
|
||
closeRegister() {
|
||
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
|
||
},
|
||
|
||
// 方法
|
||
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();
|
||
}
|
||
|
||
//调用方法提交
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
|
||
// URL 中的查询参数
|
||
params: {
|
||
username: this.ruleForm.username,
|
||
password: this.ruleForm.password,
|
||
code: this.ruleForm.code,
|
||
remember: this.ruleForm.remember,
|
||
|
||
}
|
||
}).then(function (res) {
|
||
// Vue.prototype.$message({
|
||
// message: '成功！',
|
||
// type: 'success'
|
||
// });
|
||
if (res.data.code === 200) {
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||
type: 'success',
|
||
offset: 50
|
||
});
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
}
|
||
console.log(res);
|
||
});
|
||
} else {
|
||
this.closeLogin();
|
||
return false;
|
||
}
|
||
this.closeLogin();
|
||
|
||
});
|
||
},
|
||
//点击图片更换验证码
|
||
resetImg() {
|
||
this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
|
||
},
|
||
//重置
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
},
|
||
showPass() {
|
||
if (this.passwordVisible === "text") {
|
||
this.passwordVisible = "password";
|
||
//更换图标
|
||
this.icon = "el-icon-view";
|
||
} else {
|
||
this.passwordVisible = "text";
|
||
this.icon = "el-icon-lock";
|
||
}
|
||
},
|
||
loginFun() {
|
||
this.loginDialogVisible = true;
|
||
this.registerDialogVisible = false;
|
||
},
|
||
// ******登录方法结束*****
|
||
|
||
// ----------注册------------
|
||
registerFun() {
|
||
this.loginDialogVisible = false;
|
||
this.registerDialogVisible = true;
|
||
},
|
||
resisterForm(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();
|
||
}
|
||
|
||
//调用方法提交
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
|
||
// URL 中的查询参数
|
||
params: {
|
||
username: this.resisterRuleForm.username,
|
||
password: this.resisterRuleForm.password,
|
||
code: this.resisterRuleForm.code,
|
||
|
||
}
|
||
}).then(function (res) {
|
||
// Vue.prototype.$message({
|
||
// message: '成功！',
|
||
// type: 'success'
|
||
// });
|
||
if (res.data.code === 200) {
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||
type: 'success',
|
||
offset: 50
|
||
});
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
}
|
||
console.log(res);
|
||
});
|
||
} else {
|
||
this.closeRegister();
|
||
return false;
|
||
}
|
||
this.closeRegister();
|
||
|
||
});
|
||
},
|
||
//----------注册结束----------
|
||
load() {
|
||
this.loading = true
|
||
setTimeout(() => {
|
||
this.count += 2
|
||
this.loading = false
|
||
}, 2000)
|
||
},
|
||
|
||
//-------首页列表-------
|
||
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;
|
||
});
|
||
},
|
||
projectListsByCount(index){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectMostStar',
|
||
// URL 中的查询参数
|
||
params: {
|
||
num: index,
|
||
}
|
||
}).then((res)=>{
|
||
// console.log(res.data);
|
||
that.projectLists=res.data;
|
||
});
|
||
},
|
||
tabChange(tab) {
|
||
if(tab.name=="first"){
|
||
this.ProjectLists();
|
||
}
|
||
else if (tab.name == "second") {
|
||
this.projectListsByCount(this.tabindex);
|
||
}
|
||
},
|
||
|
||
typeChangeFun(index){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
|
||
// URL 中的查询参数
|
||
params: {
|
||
num: index,
|
||
}
|
||
}).then((res)=>{
|
||
console.log(res.data);
|
||
that.projectLists=res.data;
|
||
});
|
||
},
|
||
|
||
typeChange(tab){
|
||
if(this.activeName==="first"){
|
||
this.typeChangeFun(tab.index);
|
||
}
|
||
if(this.activeName==="second"){
|
||
this.projectListsByCount(tab.index);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.el-scrollbar__wrap {
|
||
overflow-x: hidden;
|
||
}
|
||
/*去掉切换时el-tab-pane底部的蓝色下划线*/
|
||
.el-tabs__active-bar {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/*去掉tabs底部的下划线*/
|
||
.el-tabs__nav-wrap::after {
|
||
position: static !important;
|
||
}
|
||
.el-tabs__item:hover{
|
||
background-color: #eeeeee;
|
||
}
|
||
.el-tabs__item{
|
||
text-align: center;
|
||
}
|
||
.el-tabs__nav{
|
||
/*margin-left: 7px;*/
|
||
}
|
||
.el-tabs__item.is-active {
|
||
background-color: #eeeeee;
|
||
}
|
||
|
||
</style> |