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-28 18:39:35 +08:00
parent 0510b157f9
commit 8306ca2013
6 changed files with 427 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/HelloWorld.vue
View File

@@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

4
src/components/SearchInput.vue
View File

@@ -2,7 +2,7 @@
<div class="search-item">
<el-popover
placement="bottom"
width="475"
width="275"
ref="popover"
trigger="focus"
:visible-arrow="false"
@@ -45,7 +45,7 @@
<el-input
size="medium"
:placeholder="tipsWord"
style="width: 500px"
style="width: 20vw"
clearable
v-popover:popover
@keyup.enter.native="searchRequest"

6
src/router/index.js
View File

@@ -17,7 +17,13 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/login',
name: 'login',
component: ()=>import('../views/LoginView.vue')
}
]
const router = new VueRouter({

209
src/views/HomeView.vue
View File

@@ -5,11 +5,12 @@
<div class="header">
<div class="logo-all">
<img class="logo" src="../assets/logo/logo.png">
<span style="cursor: pointer;margin-left: 10px;font-size: 25px;font-weight: bold;font-family:'楷体';">HelloGithub</span>
<span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
</div>
<el-menu :default-active="activeIndex" class="el-menu" mode="horizontal"
active-text-color="#42b983"
style="width: 30vw;"
@select="handleSelect">
<el-menu-item class="menu-item" index="1">首 页</el-menu-item>
<el-menu-item class="menu-item" index="2">月 刊</el-menu-item>
@@ -17,7 +18,7 @@
单
</el-menu-item>
<el-menu-item index="4">文 章</el-menu-item>
<el-menu-item class="menu-item" index="4">文 章</el-menu-item>
</el-menu>
<SearchInput></SearchInput>
<el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
@@ -28,7 +29,7 @@
<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 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
<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>
@@ -51,7 +52,7 @@
<el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
<template >
<div>
<el-tabs type="border-card" style="width: 700px">
<el-tabs type="border-card" style="width: 45vw">
<el-tab-pane label="最热">
最热
</el-tab-pane>
@@ -61,11 +62,11 @@
</el-tabs>
</div>
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
<el-card class="box-card" style="width: 200px">
<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: 200px">
<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>
@@ -77,16 +78,71 @@
</div>
</template>
<!--登录弹框-->
<el-dialog
title="登录"
:visible.sync="loginDialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="loginDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="loginDialogVisible = false">确 定</el-button>
</span>
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: 240px"
></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>
@@ -99,6 +155,7 @@
<script>
import SearchInput from "@/components/SearchInput.vue";
export default {
components: {
SearchInput,
@@ -107,25 +164,133 @@ export default {
return {
activeIndex: '1',
activeIndex2: '1',
loginDialogVisible: false
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: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleClose() {
this.$confirm('确认关闭？')
// ******登录*****
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>
.logo-all {
/*background-color: #13ce66;*/
height: 60px;
width: 12vw;
display: flex;
align-items: center;
justify-content: space-between;
/*justify-content: space-between;*/
}
.logo {
@@ -139,16 +304,22 @@ export default {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
justify-content: space-evenly;
}
.el-menu {
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: space-evenly;
}
.box-card {
width: 150px;
width: 10vw;
}
.menu-item{
width: 6vw;
/*background-color: #ffca00;*/
}
</style>

227
src/views/LoginView.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div class="login-wrap">
<div class="ms-title">'音酷'-后台管理系统</div>
<div class="ms-login">
<!-- ruleForm：数据表单；rules：提示；ref：使用这个form的名字 -->
<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="password" v-model="ruleForm.password" placeholder="密码" auto-complete="false"></el-input> -->
<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"
></el-input>
<!-- <span class="code">验证码</span> -->
<img :src="imgUrl" @click="resetImg" class="vertify_img" />
</el-form-item>
<el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
checked: false,
passwordVisible: "password",
icon: "el-icon-view",
imgUrl: "http://localhost:8888/verifyCode?time=" + new Date(),
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.imgUrl = "http://localhost:8888/verifyCode?time=" + new Date();
},
//重置
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";
}
},
},
};
</script>
<style scoped>
.login-wrap {
position: relative;
/*background: url("../assets/img/background1.jpg");*/
background-attachment: fixed;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
.ms-title {
position: absolute;
top: 50%;
width: 100%;
margin-top: -230px;
text-align: center;
font-size: 30px;
font-weight: 600;
color: #fff;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 260px;
margin-left: -190px;
margin-top: -150px;
padding: 40px;
border-radius: 5px;
/* 调整透明度 */
opacity: 0.9;
filter: alpha(opacity=90);
background: #fff;
}
.login-btn {
text-align: center;
}
.login-btn button {
/* width: 100%; */
height: 36px;
}
.form {
position: relative;
}
.remeberMe {
text-align: left;
margin: 0 0 15px 0;
}
.vertify_code {
width: 180px;
}
.vertify_img {
position: absolute;
right: 0;
bottom: 0;
width: 110px;
}
</style>

3
vue.config.js
View File

@@ -1,4 +1,5 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
transpileDependencies: true,
lintOnSave: false
})