shuguang/Ollama-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改登录页面

Browse Source
This commit is contained in:
Shu Guang 2025-05-15 20:34:47 +08:00
parent b2ab2348d7
commit 7ad6ab41fc
6 changed files with 721 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

507
src/components/Admin/LoginAdmin.vue
View File

@ -1,90 +1,196 @@
<template> <template>
<div class="login_container"> <div class="login_container">
<div class="login_title">系统管理员登录界面</div>
<div class="login_box"> <div class="login_box">
<!-- 头像区域 --> <div class="login_header">
<div class="avatar_box"> <h1>基于Ollama大模型的图书推荐系统</h1>
<img
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
alt=""
/>
</div> </div>
<!-- 登录表单区域 -->
<el-form <div class="login_content">
ref="loginFormRef" <div class="form_container">
:model="loginForm" <h2>系统管理员登录</h2>
:rules="loginFormRules" <el-form
label-width="0px" ref="loginFormRef"
class="login_form" :model="loginForm"
> :rules="loginFormRules"
<!-- 用户名 --> label-width="0"
<el-form-item prop="username">
<el-input
v-model.trim="loginForm.username"
prefix-icon="iconfont icon-gerenxinxi"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="iconfont icon-tianchongxing-"
type="password"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" :loading="loginLoading"
>登录</el-button
> >
<el-button type="info" @click="resetLoginForm">重置</el-button> <el-form-item prop="username">
</el-form-item> <el-input
</el-form> v-model.trim="loginForm.username"
prefix-icon="el-icon-user"
placeholder="请输入管理员账号"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="el-icon-lock"
type="password"
placeholder="请输入密码"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button
type="primary"
@click="login"
:loading="loginLoading"
class="login-btn"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
<div class="info_container">
<h3>管理员须知</h3>
<div class="notice">
<p>欢迎使用系统管理平台</p>
<p>请妥善保管您的管理员账号</p>
<p>如有问题请联系技术支持</p>
</div>
</div>
</div>
<div class="login_footer">
<p>
Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
</p>
<div class="switch-buttons">
<el-tooltip content="用户登录" placement="top">
<i class="el-icon-user" @click="goUser"></i>
</el-tooltip>
</div>
</div>
</div> </div>
<vue-particles
class="login-bg"
color="#39AFFD"
:particleOpacity="0.7"
:particlesNumber="100"
shapeType="circle"
:particleSize="4"
linesColor="#8DD1FE"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
<div class="footer">
<span style="font-weight: bold; color: white; margin-bottom: 10px">
登录页面切换
</span>
<span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
</div>
<div class="footer2"></div>
</div> </div>
</template> </template>
<style lang="less" scoped>
.login_container {
height: 100vh;
background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.login_box {
width: 1000px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
.login_header {
background: #1e62c0;
padding: 20px;
text-align: center;
h1 {
color: #fff;
font-size: 24px;
margin: 0;
}
}
.login_content {
display: flex;
padding: 40px;
.form_container {
flex: 1;
padding-right: 40px;
border-right: 1px solid #e8e8e8;
h2 {
color: #333;
margin-bottom: 30px;
font-weight: 500;
}
.el-input {
margin-bottom: 20px;
}
.login-btn {
width: 100%;
margin-bottom: 15px;
}
}
.info_container {
flex: 1;
padding-left: 40px;
h3 {
color: #333;
margin-bottom: 20px;
font-weight: 500;
}
.notice {
color: #666;
line-height: 1.8;
p {
margin-bottom: 10px;
}
}
}
}
.login_footer {
background: #f7f9fc;
padding: 15px;
text-align: center;
border-top: 1px solid #e8e8e8;
position: relative;
p {
color: #666;
margin: 0;
}
.switch-buttons {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
i {
font-size: 20px;
color: #999;
cursor: pointer;
transition: all 0.3s;
margin-left: 15px;
&:hover {
color: #409eff;
}
}
}
}
}
</style>
<script> <script>
export default { export default {
name: "LoginAdmin",
data() { data() {
return { return {
//登录表单
loginForm: { loginForm: {
username: "root", username: "root",
password: "123456", password: "123456",
}, },
//登录表单规则的验证对象
loginFormRules: { loginFormRules: {
username: [ username: [
{ required: true, message: "用户名不能为空", trigger: "blur" }, { required: true, message: "请输入用户名", trigger: "blur" },
{ {
min: 3, min: 3,
max: 20, max: 20,
@ -93,7 +199,7 @@ export default {
}, },
], ],
password: [ password: [
{ required: true, message: "密码不能为空", trigger: "blur" }, { required: true, message: "请输入密码", trigger: "blur" },
{ {
min: 6, min: 6,
max: 15, max: 15,
@ -109,31 +215,30 @@ export default {
resetLoginForm() { resetLoginForm() {
this.$refs.loginFormRef.resetFields(); this.$refs.loginFormRef.resetFields();
}, },
login() { async login() {
this.$refs.loginFormRef.validate(async (valid) => { this.$refs.loginFormRef.validate(async (valid) => {
// console.log(valid); if (!valid) return;
//如果表单验证无效，直接返回
if (!valid) { try {
return; this.loginLoading = true;
} const { data: res } = await this.$http.post("admin/login", {
this.loginLoading = true; username: this.loginForm.username,
const username = this.loginForm.username; password: this.loginForm.password,
const password = this.loginForm.password; });
//向数据库发送axios请求，如果登录成功，就跳转
const { data: res } = await this.$http.post("admin/login", { if (res.status !== 200) {
username, throw new Error(res.msg);
password, }
});
if (res.status !== 200) { this.$message.success("登录成功");
window.sessionStorage.setItem("token", res.map.token);
window.sessionStorage.setItem("adminId", res.map.id);
this.$router.push("/homeadmin");
} catch (error) {
this.$message.error(error.message || "登录失败");
} finally {
this.loginLoading = false; this.loginLoading = false;
return this.$message.error(res.msg);
} }
this.$message.success("登录成功");
this.loginLoading = false;
// console.log(res);
window.sessionStorage.setItem("token", res.map.token);
window.sessionStorage.setItem("adminId", res.map.id);
this.$router.push("/homeadmin");
}); });
}, },
goUser() { goUser() {
@ -144,93 +249,155 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.footer2 {
position: absolute;
bottom: 0px;
left: 35%;
color: #ccc;
a {
color: #ccc;
}
}
.login_container { .login_container {
// background-color: #2b4b6b; height: 100vh;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
no-repeat 0px 0px;
background-size: cover; background-size: cover;
height: 100%; background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
} }
.login_box { .login_box {
height: 300px; width: 1000px;
width: 450px; background: rgba(255, 255, 255, 0.95);
background-color: #fff; border-radius: 10px;
border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
position: absolute; overflow: hidden;
top: 50%; position: relative;
left: 50%; z-index: 1;
transform: translate(-50%, -50%);
.avatar_box { .login_header {
width: 130px; background: #1a237e;
height: 130px; padding: 25px;
border: 1px solid #eee; text-align: center;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img { h1 {
width: 100%; color: #fff;
height: 100%; font-size: 28px;
border-radius: 50%; margin: 0;
background-color: #eee; margin-bottom: 8px;
}
p {
color: rgba(255, 255, 255, 0.8);
margin: 0;
font-size: 16px;
}
}
.login_content {
display: flex;
padding: 40px;
.form_container {
flex: 1;
padding-right: 40px;
border-right: 1px solid #eee;
.admin_icon {
text-align: center;
margin-bottom: 20px;
i {
font-size: 50px;
color: #1a237e;
background: #e8eaf6;
padding: 20px;
border-radius: 50%;
}
}
h2 {
color: #1a237e;
margin-bottom: 30px;
font-weight: 500;
text-align: center;
}
.el-input {
margin-bottom: 20px;
}
.login-btn {
width: 100%;
margin-bottom: 15px;
background: #1a237e;
border-color: #1a237e;
&:hover {
background: #283593;
border-color: #283593;
}
}
.reset-btn {
width: 100%;
}
}
.info_container {
flex: 1;
padding-left: 40px;
h3 {
color: #1a237e;
margin-bottom: 20px;
font-weight: 500;
}
.notice {
color: #666;
line-height: 2;
p {
margin-bottom: 15px;
padding-left: 20px;
position: relative;
&::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
background: #1a237e;
border-radius: 50%;
}
}
}
}
}
.login_footer {
background: #f5f5f5;
padding: 15px;
text-align: center;
border-top: 1px solid #eee;
position: relative;
p {
color: #666;
margin: 0;
}
i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #666;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #1a237e;
}
} }
} }
} }
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
.login_title {
position: relative;
top: 5%;
font-size: 36px;
color: white;
text-align: center;
font-weight: 700;
//控制字体间距
letter-spacing: 10px;
}
.footer {
display: flex;
position: absolute;
flex-direction: column;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
// background-color: pink;
span {
// width: 100%;
// background-color: red;
text-align: center;
}
}
</style> </style>

366
src/components/BookManage/LoginBookManage.vue
View File

@ -1,91 +1,88 @@
<template> <template>
<div class="login_container"> <div class="login_container">
<div class="login_title">图书管理员登录界面</div>
<div class="login_box"> <div class="login_box">
<!-- 头像区域 --> <div class="login_header">
<div class="avatar_box"> <h1>基于Ollama大模型的图书推荐系统</h1>
<img </div>
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
alt="" <div class="login_content">
/> <div class="form_container">
<h2>图书管理员登录</h2>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
label-width="0"
>
<el-form-item prop="username">
<el-input
v-model.trim="loginForm.username"
prefix-icon="el-icon-user"
placeholder="请输入管理员账号"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="el-icon-lock"
type="password"
placeholder="请输入密码"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button
type="primary"
@click="login"
:loading="loginLoading"
class="login-btn"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
<div class="info_container">
<h3>管理员须知</h3>
<div class="notice">
<p>欢迎使用图书管理系统</p>
<p>请妥善保管您的管理员账号</p>
<p>如有问题请联系系统管理员</p>
</div>
</div>
</div>
<div class="login_footer">
<p>
Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
</p>
<div class="switch-buttons">
<el-tooltip content="用户登录" placement="top">
<i class="el-icon-user" @click="goUser"></i>
</el-tooltip>
<el-tooltip content="超级管理员" placement="top">
<i class="el-icon-s-tools" @click="goAdmin"></i>
</el-tooltip>
</div>
</div> </div>
<!-- 登录表单区域 -->
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
label-width="0px"
class="login_form"
>
<!-- 用户名 -->
<el-form-item prop="username">
<el-input
v-model.trim="loginForm.username"
prefix-icon="iconfont icon-gerenxinxi"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="iconfont icon-tianchongxing-"
type="password"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" :loading="loginLoading"
>登录
</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div> </div>
<vue-particles
class="login-bg"
color="#39AFFD"
:particleOpacity="0.7"
:particlesNumber="100"
shapeType="circle"
:particleSize="4"
linesColor="#8DD1FE"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
<div class="footer">
<span style="font-weight: bold; color: white"> 登录页面切换 </span>
<span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
<span>
<i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
</span>
</div>
<div class="footer2"></div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "LoginBookManage",
data() { data() {
return { return {
//登录表单
loginForm: { loginForm: {
username: "admin", username: "admin",
password: "123456", password: "123456",
}, },
//登录表单规则的验证对象
loginFormRules: { loginFormRules: {
username: [ username: [
{ required: true, message: "用户名不能为空", trigger: "blur" }, { required: true, message: "请输入用户名", trigger: "blur" },
{ {
min: 3, min: 3,
max: 20, max: 20,
@ -94,7 +91,7 @@ export default {
}, },
], ],
password: [ password: [
{ required: true, message: "密码不能为空", trigger: "blur" }, { required: true, message: "请输入密码", trigger: "blur" },
{ {
min: 6, min: 6,
max: 15, max: 15,
@ -110,34 +107,30 @@ export default {
resetLoginForm() { resetLoginForm() {
this.$refs.loginFormRef.resetFields(); this.$refs.loginFormRef.resetFields();
}, },
login() { async login() {
this.$refs.loginFormRef.validate(async (valid) => { this.$refs.loginFormRef.validate(async (valid) => {
// console.log(valid); if (!valid) return;
//如果表单验证无效，直接返回
if (!valid) { try {
return; this.loginLoading = true;
} const { data: res } = await this.$http.post("bookadmin/login", {
this.loginLoading = true; username: this.loginForm.username,
// 进行md5加密 password: this.loginForm.password,
const username = this.loginForm.username; });
const password = this.loginForm.password;
//向数据库发送axios请求，如果登录成功，就跳转 if (res.status !== 200) {
const { data: res } = await this.$http.post("bookadmin/login", { throw new Error(res.msg);
username, }
password,
}); this.$message.success("登录成功");
// console.log(res); window.sessionStorage.setItem("token", res.map.token);
if (res.status !== 200) { window.sessionStorage.setItem("bookAdminId", res.map.id);
this.$router.push("/homemange");
} catch (error) {
this.$message.error(error.message || "登录失败");
} finally {
this.loginLoading = false; this.loginLoading = false;
return this.$message.error(res.msg);
} }
this.$message.success("登录成功");
this.loginLoading = false;
window.sessionStorage.setItem("token", res.map.token);
window.sessionStorage.setItem("bookAdminId", res.map.id);
this.$router.push("/homemange");
// window.sessionStorage.setItem("token", token);
// this.$router.push("/home"); //跳转到home页面下
}); });
}, },
goUser() { goUser() {
@ -151,93 +144,116 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.footer2 {
position: absolute;
bottom: 0px;
left: 35%;
color: #ccc;
a {
color: #ccc;
}
}
.login_container { .login_container {
// background-color: #2b4b6b; height: 100vh;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
no-repeat 0px 0px;
background-size: cover; background-size: cover;
height: 100%; background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
} }
.login_box { .login_box {
height: 300px; width: 1000px;
width: 450px; background: #fff;
background-color: #fff; border-radius: 8px;
border-radius: 3px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: absolute; overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.avatar_box { .login_header {
width: 130px; background: #1e62c0;
height: 130px; padding: 20px;
border: 1px solid #eee; text-align: center;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img { h1 {
width: 100%; color: #fff;
height: 100%; font-size: 24px;
border-radius: 50%; margin: 0;
background-color: #eee; }
}
.login_content {
display: flex;
padding: 40px;
.form_container {
flex: 1;
padding-right: 40px;
border-right: 1px solid #e8e8e8;
h2 {
color: #333;
margin-bottom: 30px;
font-weight: 500;
}
.el-input {
margin-bottom: 20px;
}
.login-btn {
width: 100%;
margin-bottom: 15px;
}
.reset-btn {
width: 100%;
}
}
.info_container {
flex: 1;
padding-left: 40px;
h3 {
color: #333;
margin-bottom: 20px;
font-weight: 500;
}
.notice {
color: #666;
line-height: 1.8;
p {
margin-bottom: 10px;
}
}
}
}
.login_footer {
background: #f7f9fc;
padding: 15px;
text-align: center;
border-top: 1px solid #e8e8e8;
position: relative;
p {
color: #666;
margin: 0;
}
.switch-buttons {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
i {
font-size: 20px;
color: #999;
cursor: pointer;
transition: all 0.3s;
margin-left: 15px;
&:hover {
color: #409eff;
}
}
} }
} }
} }
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
.login_title {
position: relative;
top: 5%;
font-size: 36px;
color: white;
text-align: center;
font-weight: 700;
//控制字体间距
letter-spacing: 10px;
}
.footer {
display: flex;
position: absolute;
flex-direction: column;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
// background-color: pink;
span {
// width: 100%;
// background-color: red;
text-align: center;
}
}
</style> </style>

371
src/components/Login.vue
View File

@ -1,94 +1,88 @@
<template> <template>
<div class="login_container"> <div class="login_container">
<div class="login_title">登录</div>
<div class="login_box"> <div class="login_box">
<!-- 头像区域 --> <div class="login_header">
<div class="avatar_box"> <h1>基于Ollama大模型的图书推荐系统</h1>
<img
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
alt=""
/>
</div> </div>
<!-- 登录表单区域 -->
<el-form <div class="login_content">
ref="loginFormRef" <div class="form_container">
:model="loginForm" <h2>用户登录</h2>
:rules="loginFormRules" <el-form
label-width="0px" ref="loginFormRef"
class="login_form" :model="loginForm"
> :rules="loginFormRules"
<!-- 用户名 --> label-width="0"
<el-form-item prop="username">
<el-input
v-model.trim="loginForm.username"
prefix-icon="iconfont icon-gerenxinxi"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
prefix-icon="iconfont icon-tianchongxing-"
type="password"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" :loading="loginLoading"
>登录</el-button
> >
<el-button type="info" @click="resetLoginForm">重置</el-button> <el-form-item prop="username">
</el-form-item> <el-input
</el-form> v-model.trim="loginForm.username"
</div> prefix-icon="el-icon-user"
<!-- 粒子插件特效--> placeholder="请输入用户名"
<vue-particles ></el-input>
class="login-bg" </el-form-item>
color="#39AFFD" <el-form-item prop="password">
:particleOpacity="0.7" <el-input
:particlesNumber="100" v-model="loginForm.password"
shapeType="circle" prefix-icon="el-icon-lock"
:particleSize="4" type="password"
linesColor="#8DD1FE" placeholder="请输入密码"
:linesWidth="1" @keyup.enter.native="login"
:lineLinked="true" :show-password="true"
:lineOpacity="0.4" ></el-input>
:linesDistance="150" </el-form-item>
:moveSpeed="3" <el-form-item class="btns">
:hoverEffect="true" <el-button
hoverMode="grab" type="primary"
:clickEffect="true" @click="login"
clickMode="push" :loading="loginLoading"
> class="login-btn"
</vue-particles> >
<div class="footer"> 登录
<span style="font-weight: bold; color: white; margin-bottom: 10px"> </el-button>
登录页面切换 </el-form-item>
<!-- <i class="iconfont icon-haoyou " @click="goUser"></i> --> </el-form>
</span> </div>
<span>
<i class="iconfont icon-guanliyuan" @click="goManage"></i> <div class="info_container">
</span> <h3>系统公告</h3>
<div class="notice">
<p>欢迎使用基于Ollama大模型的图书推荐系统</p>
<p>本系统提供个性化图书推荐服务</p>
<p>如有问题请联系管理员</p>
</div>
</div>
</div>
<div class="login_footer">
<p>
Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
</p>
<el-tooltip content="管理员入口" placement="top">
<i class="el-icon-s-tools" @click="goManage"></i>
</el-tooltip>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import VueParticles from "vue-particles";
import Vue from "vue";
Vue.use(VueParticles);
export default { export default {
name: "Login",
data() { data() {
return { return {
//登录表单
loginForm: { loginForm: {
username: "yangzhen", username: "yangzhen",
password: "123456", password: "123456",
}, },
//登录表单规则的验证对象
loginFormRules: { loginFormRules: {
username: [ username: [
{ required: true, message: "用户名不能为空", trigger: "blur" }, { required: true, message: "请输入用户名", trigger: "blur" },
{ {
min: 3, min: 3,
max: 20, max: 20,
@ -97,7 +91,7 @@ export default {
}, },
], ],
password: [ password: [
{ required: true, message: "密码不能为空", trigger: "blur" }, { required: true, message: "请输入密码", trigger: "blur" },
{ {
min: 6, min: 6,
max: 15, max: 15,
@ -113,38 +107,32 @@ export default {
resetLoginForm() { resetLoginForm() {
this.$refs.loginFormRef.resetFields(); this.$refs.loginFormRef.resetFields();
}, },
login() { async login() {
this.$refs.loginFormRef.validate(async (valid) => { this.$refs.loginFormRef.validate(async (valid) => {
console.log(valid); if (!valid) return;
//如果表单验证无效，直接返回
if (!valid) { try {
return; this.loginLoading = true;
} const { data: res } = await this.$http.post("user/login", {
this.loginLoading = true; username: this.loginForm.username,
// 进行md5加密 password: this.loginForm.password,
const salt = "xiaobaitiao"; });
const username = this.loginForm.username;
const password = this.loginForm.password; if (res.status !== 200) {
//向数据库发送axios请求，如果登录成功，就跳转 throw new Error(res.msg);
const { data: res } = await this.$http.post("user/login", { }
username,
password, this.$message.success("登录成功");
}); window.sessionStorage.setItem("token", res.map.token);
if (res.status !== 200) { window.sessionStorage.setItem("userId", res.map.id);
this.$router.push("/home");
} catch (error) {
this.$message.error(error.message || "登录失败");
} finally {
this.loginLoading = false; this.loginLoading = false;
return this.$message.error(res.msg);
} }
// console.log(res);
this.$message.success("登录成功");
this.loginLoading = false;
window.sessionStorage.setItem("token", res.map.token);
window.sessionStorage.setItem("userId", res.map.id);
this.$router.push("/home"); //跳转到home页面下
}); });
}, },
goUser() {
this.$router.push("/login");
},
goManage() { goManage() {
this.$router.push("/loginmanage"); this.$router.push("/loginmanage");
}, },
@ -153,94 +141,117 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.footer2 {
position: absolute;
bottom: 0px;
left: 35%;
color: #ccc;
a {
color: #ccc;
}
}
.login_container { .login_container {
// background-color: #2b4b6b; height: 100vh;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
no-repeat 0px 0px;
background-size: cover; background-size: cover;
height: 100%; background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
} }
.login_box { .login_box {
height: 300px; width: 1000px;
width: 450px; background: #fff;
background-color: #fff; border-radius: 8px;
border-radius: 3px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: absolute; overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.avatar_box { .login_header {
width: 130px; background: #1e62c0;
height: 130px; padding: 20px;
border: 1px solid #eee; text-align: center;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img { .logo {
width: 100%; height: 60px;
height: 100%; margin-bottom: 10px;
border-radius: 50%; }
background-color: #eee;
h1 {
color: #fff;
font-size: 24px;
margin: 0;
}
}
.login_content {
display: flex;
padding: 40px;
.form_container {
flex: 1;
padding-right: 40px;
border-right: 1px solid #e8e8e8;
h2 {
color: #333;
margin-bottom: 30px;
font-weight: 500;
}
.el-input {
margin-bottom: 20px;
}
.login-btn {
width: 100%;
margin-bottom: 15px;
}
.reset-btn {
width: 100%;
}
}
.info_container {
flex: 1;
padding-left: 40px;
h3 {
color: #333;
margin-bottom: 20px;
font-weight: 500;
}
.notice {
color: #666;
line-height: 1.8;
p {
margin-bottom: 10px;
}
}
}
}
.login_footer {
background: #f7f9fc;
padding: 15px;
text-align: center;
border-top: 1px solid #e8e8e8;
position: relative;
p {
color: #666;
margin: 0;
}
.el-icon-s-tools {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #999;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #409eff;
}
} }
} }
} }
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
.login_title {
position: relative;
top: 5%;
font-size: 36px;
color: white;
text-align: center;
font-weight: 700;
//控制字体间距
letter-spacing: 10px;
}
.footer {
display: flex;
position: absolute;
flex-direction: column;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
// background-color: pink;
span {
// width: 100%;
// background-color: red;
text-align: center;
}
}
</style> </style>

2
src/main-dev.js
View File

@ -40,7 +40,7 @@ Vue.use(vueBaberrage)
//导入axios //导入axios
import axios from 'axios' import axios from 'axios'
//配置请求的根路径 //配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8889/api/' axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
Vue.prototype.$http = axios Vue.prototype.$http = axios
// const CancelToken = axios.CancelToken; // const CancelToken = axios.CancelToken;
// const source = CancelToken.source(); // const source = CancelToken.source();

2
src/main-prod.js
View File

@ -36,7 +36,7 @@ Vue.use(vueBaberrage)
//导入axios //导入axios
import axios from 'axios' import axios from 'axios'
//配置请求的根路径 //配置请求的根路径
axios.defaults.baseURL = 'http://abc.xiaobaitiao.top:443/api/' axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
Vue.prototype.$http = axios Vue.prototype.$http = axios
// const CancelToken = axios.CancelToken; // const CancelToken = axios.CancelToken;
// const source = CancelToken.source(); // const source = CancelToken.source();