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-06-29 15:40:35 +08:00
parent 9da2250458
commit b3bdb8afba
14 changed files with 480 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Header.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="header">
<div class="logo-all">
<img class="logo" src="../assets/logo/logo.png">
<span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
</div>
<el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
active-text-color="#42b983"
style="width: 30vw;"
router>
<el-menu-item class="menu-item" index="/home">首 页</el-menu-item>
<el-menu-item class="menu-item" index="/monthly">月 刊</el-menu-item>
<el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
</el-menu-item>
<el-menu-item class="menu-item" index="/paper">文 章</el-menu-item>
</el-menu>
<SearchInput></SearchInput>
<el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
</div>
</template>
<script>
import SearchInput from "@/components/SearchInput.vue";
export default {
name: "HeaderComponent",
components: {SearchInput},
data() {
return {}
}
}
</script>
<style scoped>
.logo-all {
height: 60px;
width: 12vw;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
border-radius: 50px;
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.el-menu {
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-evenly;
}
.menu-item {
width: 6vw;
}
</style>

245
src/components/Home.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<el-container>
<el-aside width="23%" style="display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
<template>
<el-card class="box-card" style="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">
<div v-for="o in 4" :key="o" class="text item">
<el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</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 type="border-card" style="width: 45vw">
<el-tab-pane label="最热">
最热
</el-tab-pane>
<el-tab-pane label="最新">
最新
</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="loginDialogVisible = true">登 录</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">
<el-input
prefix-icon="el-icon-mobile-phone"
type="text"
placeholder="点击图片更换验证码"
v-model="ruleForm.code"
class="vertify_code"
auto-complete="false"
style="width: 15vw"
></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">
<el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
<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">
注册
</el-dialog>
</el-main>
</el-container>
</template>
<script>
export default {
name: "HomeComponent",
data() {
return {
loginDialogVisible: false,
registerDialogVisible: false,
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date(),
checked: false,
passwordVisible: "password",
icon: "el-icon-view",
ruleForm: {
username: "",
password: "",
code: "",
},
rules: {
username: [
// required：规则，trigger：失去焦点触发
{required: true, message: "请输入用户名", trigger: "blur"},
],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
};
},
mounted() {
this.account(); //获取cookie的方法
},
methods: {
// ******登录*****
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("name", this.ruleForm.username);
params.append("password", this.ruleForm.password);
params.append("code", this.ruleForm.code);
if (this.checked == true) {
//存入cookie
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
} else {
this.clearCookie();
}
//调用方法提交
// getLoginStatus(params).then((res) => {
// if (res.code == 1) {
// localStorage.setItem("userName", this.ruleForm.username);
// this.$router.push("/Info");
// this.notify("登录成功", "success");
// }
// if (res.code == 0) {
// this.notify("验证码错误", "error");
// }
// if (res.code == 2) {
// this.notify("用户名或密码错误", "error");
// }
// });
} else {
return false;
}
});
},
//点击图片更换验证码
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";
}
},
// ******登录方法结束*****
// ----------注册------------
registerFun() {
this.loginDialogVisible = false;
this.registerDialogVisible = true;
}
//----------注册结束----------
}
}
</script>
<style scoped>
</style>

15
src/components/Monthly.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
月刊
</div>
</template>
<script>
export default {
name: "MonthlyComponent"
}
</script>
<style scoped>
</style>

15
src/components/Paper.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
文章
</div>
</template>
<script>
export default {
name: "PaperComponent"
}
</script>
<style scoped>
</style>

15
src/components/Ranking.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
榜单
</div>
</template>
<script>
export default {
name: "RankingComponent"
}
</script>
<style scoped>
</style>