企业官网建设流程全解析

<template>

<div class="center">

<h1>登录/注册</h1>

<div class="logon">

<div :class="overlaylongClass">

<div class="overlaylong-Signin" v-if="displayMode === 0">

<h2 class="overlaylongH2">登录</h2>

<input type="text" placeholder="用户名" v-model="login.username">

<input type="password" placeholder="密码" v-model="login.password" autocomplete="new-password">

<h3 @click="resetPassword">忘记密码？</h3>

<button class="inupbutton" @click="signUp" :disabled="!isLoginFormValid">登录</button>

</div>

<div class="overlaylong-Signup" v-if="displayMode === 1">

<h2 class="overlaylongH2">注册账户</h2>

<input type="text" v-model="username" placeholder="用户名" @input="validateUsername">

<p v-if="usernameError" class="error">{{ usernameError }}</p>

<input type="password" v-model="password" placeholder="密码" autocomplete="new-password" @input="validatePassword">

<p v-if="passwordError" class="error">{{ passwordError }}</p>

<input type="password" v-model="confirmPassword" placeholder="确认密码" autocomplete="new-password" @input="validatePassword">

<p v-if="confirmPasswordError" class="error">{{ confirmPasswordError }}</p>

<button class="inupbutton" @click="enroll" :disabled="!isFormValid">注册</button>

</div>

</div>

<div :class="overlaytitleClass">

<div class="overlaytitle-Signin" v-if="displayMode === 0">

<h2 class="overlaytitleH2">你好，朋友！</h2>

<p class="overlaytitleP">输入您的个人信息，开始与我们同行。</p>

<div class="buttongohs" @click="signIn">注册</div>

</div>

<div class="overlaytitle-Signup" v-if="displayMode === 1">

<h2 class="overlaytitleH2">欢迎回来！</h2>

<p class="overlaytitleP">请使用您的个人信息登录以保持连接。</p>

<div class="buttongohs" @click="firstLoginpush">登录</div>

</div>

</div>

</div>

</div>

</template>

<script>

import Request from '@/utils/request';

import Cookies from 'js-cookie';

export default {

data() {

return {

overlaylongClass: 'overlaylong',

overlaytitleClass: 'overlaytitle',

displayMode: 0, // 默认显示登录页面

username: '',

password: '',

confirmPassword: '',

usernameError: '',

passwordError: '',

confirmPasswordError: '',

login: {

username: '',

password: ''

},

};

},

computed: {

isFormValid() {

return !this.usernameError && !this.passwordError && !this.confirmPasswordError;

},

isLoginFormValid() {

return this.login.username !== '' && this.login.password !== '';

}

},

methods: {

signIn() {

this.overlaylongClass = "overlaylongleft";

this.overlaytitleClass = "overlaytitleright";

setTimeout(() => {

this.displayMode = 1;

}, 200);

},

firstLoginpush() {

this.overlaylongClass = "overlaylongright";

this.overlaytitleClass = "overlaytitleleft";

setTimeout(() => {

this.displayMode = 0;

}, 200);

},

resetPassword() {

// 这里可以添加重置密码的逻辑

console.log('忘记密码');

},

signUp() {

if (this.login.username === '' || this.login.password === '') {

this.$message.error('请输入用户名和密码');

return;

}

Request.post('login/loginadmin', {

username: this.login.username,

password: this.login.password

}).then((res) => {

console.log(res);

if (res.data.msg != 0) {

// 登录成功后设置 Cookie 并直接跳转到 /firstpage

Cookies.set('admin', JSON.stringify(res.data.data));

this.$router.push('/firstpage').catch(() => {});

this.$message.success('登录成功');

} else {

this.$message.error('用户名或密码错误，请重新输入');

this.login.username = '';

this.login.password = '';

}

}).catch((error) => {

console.error('登录请求失败:', error);

this.$message.error('登录请求失败，请稍后再试');

});

},

validateUsername() {

if (this.username.trim() === '') {

this.usernameError = '用户名不能为空';

return;

}

if (this.username.length < 8 || this.username.length > 15) {

this.usernameError = '用户名必须在8到15个字符之间';

return;

}

const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"|,.<>/?]*$/;

if (!regex.test(this.username)) {

this.usernameError = '用户名必须同时包含字母和数字，并且可以包含特殊字符';

return;

}

this.usernameError = '';

},

validatePassword() {

if (this.password.trim() === '') {

this.passwordError = '密码不能为空';

return;

}

if (this.confirmPassword.trim() === '') {

this.confirmPasswordError = '确认密码不能为空';

return;

}

if (this.password.length < 8 || this.password.length > 15) {

this.passwordError = '密码必须在8到15个字符之间';

return;

}

const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"|,.<>/?]*$/;

if (!regex.test(this.password)) {

this.passwordError = '密码必须同时包含字母和数字，并且可以包含特殊字符';

return;

}

if (this.password !== this.confirmPassword) {

this.confirmPasswordError = '密码不一致';

return;

}

this.passwordError = '';

this.confirmPasswordError = '';

},

enroll() {

if (this.isFormValid) {

if (this.username === '' && this.password === '') {

this.$notify.error("请输入有效的用户名和密码后再进行注册");

} else if (this.username === '' && this.password !== '') {

this.$notify.error("请输入有效的用户名后再进行注册");

} else if (this.username !== '' && this.password === '') {

this.$notify.error("请输入有效的密码后再进行注册");

} else {

Request.post("login/enroll", { username: this.username, password: this.password })

.then((res) => {

console.log(res);

if (res.data.data === 0) {

this.$notify.success("注册成功");

this.username = '';

this.password = '';

this.confirmPassword = '';

} else if (res.data.data == 1) {

this.$notify.error("用户已存在");

}

}).catch((error) => {

console.error('申请异常', error);

this.$message.error('申请异常，请稍后再试');

});

}

} else {

this.$notify.error("请输入有效的用户名和密码后再次尝试");

}

}

}

};

</script>

<style scoped>

.center {

width: 100vw;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

h1 {

font-size: 30px;

color: #333;

margin-bottom: 20px;

}

.error {

color: red;

font-size: 14px;

margin-top: 5px;

}

.inupbutton:disabled {

opacity: 0.5;

cursor: not-allowed;

}

.logon {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

width: 768px;

max-width: 100%;

min-height: 480px;

display: flex;

overflow: hidden;

}

.overlaylong {

border-radius: 10px 0 0 10px;

width: 50%;

height: 100%;

background-color: #f9f9f9;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

}

.overlaylongleft {

border-radius: 0px 10px 10px 0px;

width: 50%;

height: 100%;

background-color: #f9f9f9;

transform: translateX(100%);

transition: transform 0.6s ease-in-out;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

}

.overlaylongright {

border-radius: 10px 0 0 10px;

width: 50%;

height: 100%;

background-color: #f9f9f9;

transform: translateX(0%);

transition: transform 0.6s ease-in-out;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

}

.overlaytitle {

border-radius: 0px 10px 10px 0px;

width: 50%;

height: 100%;

background-color: #29eac4;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

color: #fff;

}

.overlaytitleleft {

border-radius: 0px 10px 10px 0px;

width: 50%;

height: 100%;

background-color: #29eac4;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

color: #fff;

transform: translateX(0%);

transition: transform 0.6s ease-in-out;

}

.overlaytitleright {

border-radius: 0px 10px 10px 0px;

width: 50%;

height: 100%;

background-color: #29eac4;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 20px;

color: #fff;

transform: translateX(-100%);

transition: transform 0.6s ease-in-out;

}

.overlaytitleH2 {

font-size: 24px;

margin-bottom: 10px;

}

.overlaytitleP {

font-size: 16px;

margin-bottom: 20px;

}

.buttongohs {

width: 180px;

height: 40px;

border-radius: 50px;

border: 1px solid #fff;

color: #fff;

font-size: 15px;

text-align: center;

line-height: 40px;

cursor: pointer;

}

.overlaylongH2 {

font-size: 24px;

color: #333;

margin-bottom: 20px;

}

input {

background-color: #eee;

border: none;

padding: 12px 15px;

margin: 10px 0;

width: 240px;

border-radius: 5px;

font-size: 16px;

}

h3 {

font-size: 14px;

margin-top: 10px;

cursor: pointer;

color: #666;

}

.inupbutton {

background-color: #29eac4;

border: none;

width: 180px;

height: 40px;

border-radius: 50px;

font-size: 15px;

color: #fff;

text-align: center;

line-height: 40px;

margin-top: 30px;

cursor: pointer;

}

</style>