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-04 00:40:49 +08:00
parent 572a87b8ec
commit 23d901a953
11 changed files with 1064 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,7 +70,7 @@
</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()" v-show="this.$cookie.get('username')==null">登 录</el-button>
<el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
<UserInfo></UserInfo>
</el-card>
@@ -103,127 +103,8 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
</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>
<!-- 登录注册-->
<LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
<!--管理标签弹框-->
<el-dialog
:visible.sync="manageCategoryVisible"
@@ -237,19 +118,20 @@ HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
总共:
</el-card>
</el-dialog>
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</el-main>
</el-container>
</template>
<script>
import axios from 'axios'
import Vue from "vue";
import ProjectList from "@/components/Home/ProjectList.vue";
import UserInfo from "@/components/Home/UserInfo.vue";
import LoginDialog from "@/components/Home/LoginDialog.vue";
export default {
name: "HomeComponent",
components: {UserInfo, ProjectList},
components: {LoginDialog, UserInfo, ProjectList},
data() {
return {
@@ -264,31 +146,7 @@ export default {
count: 10,
loading: false,
loginDialogVisible: false,
registerDialogVisible: false,
manageCategoryVisible: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：规则，o：失去焦点触发
{required: true, message: "请输入用户名", trigger: "blur"},
],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
tags:null,
};
},
@@ -300,17 +158,6 @@ export default {
this.getProjectTotal();
},
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() {
@@ -328,186 +175,7 @@ export default {
// this.$cookie.delete('username')
// this.$cookie.delete('password')
},
closeLogin() {
this.loginDialogVisible = false;
},
openResister() {
this.registerDialogVisible = true;
},
closeRegister() {
this.registerDialogVisible = false;
},
// ******登录*****
// 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) {
var _this=this;
this.$refs[formName].validate((valid) => {
if (valid) {
//存入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) {
_this.$cookie.set('username',_this.ruleForm.username,7);
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, res.data.msg),
type: 'success',
offset: 50
});
window.location.reload();
} else {
Vue.prototype.$notify.error({
title: '错误',
message: res.data.msg,
offset: 50
});
}
});
} 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(() => {
@@ -632,40 +300,40 @@ export default {
}).then((res)=>{
that.projectTotal=res.data;
});
}
},
}
}
</script>
<style>
.el-scrollbar__wrap {
<style scoped>
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
::v-deep .el-tabs__active-bar {
background-color: transparent !important;
}
/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
}
.el-tabs__item:hover{
::v-deep .el-tabs__item:hover{
background-color: #eeeeee;
}
.el-tabs__item{
::v-deep .el-tabs__item{
text-align: center;
}
.el-tabs__nav{
::v-deep .el-tabs__nav{
/*margin-left: 7px;*/
}
.el-tabs__item.is-active {
::v-deep .el-tabs__item.is-active {
background-color: #eeeeee;
}
.el-scrollbar__wrap {
overflow-y: hidden;
::v-deep .el-scrollbar__wrap {
/*overflow-y: hidden;*/
overflow-x: hidden;
}
</style>