fix: 修改登录页面
This commit is contained in:
Shu Guang
parent
b2ab2348d7
commit
7ad6ab41fc
@ -1,90 +1,196 @@
|
||||
<template>
|
||||
<div class="login_container">
|
||||
<div class="login_title">系统管理员登录界面</div>
|
||||
<div class="login_box">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
<div class="login_header">
|
||||
<h1>基于Ollama大模型的图书推荐系统</h1>
|
||||
</div>
|
||||
<!-- 登录表单区域 -->
|
||||
|
||||
<div class="login_content">
|
||||
<div class="form_container">
|
||||
<h2>系统管理员登录</h2>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginFormRules"
|
||||
label-width="0px"
|
||||
class="login_form"
|
||||
label-width="0"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model.trim="loginForm.username"
|
||||
prefix-icon="iconfont icon-gerenxinxi"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="请输入管理员账号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
prefix-icon="iconfont icon-tianchongxing-"
|
||||
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"
|
||||
>登录</el-button
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="login"
|
||||
:loading="loginLoading"
|
||||
class="login-btn"
|
||||
>
|
||||
<el-button type="info" @click="resetLoginForm">重置</el-button>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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 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 class="footer2"></div>
|
||||
</div>
|
||||
</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>
|
||||
export default {
|
||||
name: "LoginAdmin",
|
||||
data() {
|
||||
return {
|
||||
//登录表单
|
||||
loginForm: {
|
||||
username: "root",
|
||||
password: "123456",
|
||||
},
|
||||
//登录表单规则的验证对象
|
||||
loginFormRules: {
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{
|
||||
min: 3,
|
||||
max: 20,
|
||||
@ -93,7 +199,7 @@ export default {
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{
|
||||
min: 6,
|
||||
max: 15,
|
||||
@ -109,31 +215,30 @@ export default {
|
||||
resetLoginForm() {
|
||||
this.$refs.loginFormRef.resetFields();
|
||||
},
|
||||
login() {
|
||||
async login() {
|
||||
this.$refs.loginFormRef.validate(async (valid) => {
|
||||
// console.log(valid);
|
||||
//如果表单验证无效，直接返回
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
if (!valid) return;
|
||||
|
||||
try {
|
||||
this.loginLoading = true;
|
||||
const username = this.loginForm.username;
|
||||
const password = this.loginForm.password;
|
||||
//向数据库发送axios请求，如果登录成功，就跳转
|
||||
const { data: res } = await this.$http.post("admin/login", {
|
||||
username,
|
||||
password,
|
||||
username: this.loginForm.username,
|
||||
password: this.loginForm.password,
|
||||
});
|
||||
|
||||
if (res.status !== 200) {
|
||||
this.loginLoading = false;
|
||||
return this.$message.error(res.msg);
|
||||
throw new 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");
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || "登录失败");
|
||||
} finally {
|
||||
this.loginLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
goUser() {
|
||||
@ -144,93 +249,155 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer2 {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 35%;
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.login_container {
|
||||
// background-color: #2b4b6b;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
|
||||
no-repeat 0px 0px;
|
||||
height: 100vh;
|
||||
background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login_box {
|
||||
height: 300px;
|
||||
width: 450px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.avatar_box {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px #ddd;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login_form {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.login_title {
|
||||
width: 1000px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 5%;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
|
||||
.login_header {
|
||||
background: #1a237e;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
//控制字体间距
|
||||
letter-spacing: 10px;
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.login_content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
// background-color: pink;
|
||||
span {
|
||||
// width: 100%;
|
||||
// background-color: red;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,91 +1,88 @@
|
||||
<template>
|
||||
<div class="login_container">
|
||||
<div class="login_title">图书管理员登录界面</div>
|
||||
<div class="login_box">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
<div class="login_header">
|
||||
<h1>基于Ollama大模型的图书推荐系统</h1>
|
||||
</div>
|
||||
<!-- 登录表单区域 -->
|
||||
|
||||
<div class="login_content">
|
||||
<div class="form_container">
|
||||
<h2>图书管理员登录</h2>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginFormRules"
|
||||
label-width="0px"
|
||||
class="login_form"
|
||||
label-width="0"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model.trim="loginForm.username"
|
||||
prefix-icon="iconfont icon-gerenxinxi"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="请输入管理员账号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
prefix-icon="iconfont icon-tianchongxing-"
|
||||
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"
|
||||
>登录
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="login"
|
||||
:loading="loginLoading"
|
||||
class="login-btn"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
<el-button type="info" @click="resetLoginForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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 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>
|
||||
<div class="footer2"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LoginBookManage",
|
||||
data() {
|
||||
return {
|
||||
//登录表单
|
||||
loginForm: {
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
},
|
||||
//登录表单规则的验证对象
|
||||
loginFormRules: {
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{
|
||||
min: 3,
|
||||
max: 20,
|
||||
@ -94,7 +91,7 @@ export default {
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{
|
||||
min: 6,
|
||||
max: 15,
|
||||
@ -110,34 +107,30 @@ export default {
|
||||
resetLoginForm() {
|
||||
this.$refs.loginFormRef.resetFields();
|
||||
},
|
||||
login() {
|
||||
async login() {
|
||||
this.$refs.loginFormRef.validate(async (valid) => {
|
||||
// console.log(valid);
|
||||
//如果表单验证无效，直接返回
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
if (!valid) return;
|
||||
|
||||
try {
|
||||
this.loginLoading = true;
|
||||
// 进行md5加密
|
||||
const username = this.loginForm.username;
|
||||
const password = this.loginForm.password;
|
||||
//向数据库发送axios请求，如果登录成功，就跳转
|
||||
const { data: res } = await this.$http.post("bookadmin/login", {
|
||||
username,
|
||||
password,
|
||||
username: this.loginForm.username,
|
||||
password: this.loginForm.password,
|
||||
});
|
||||
// console.log(res);
|
||||
|
||||
if (res.status !== 200) {
|
||||
this.loginLoading = false;
|
||||
return this.$message.error(res.msg);
|
||||
throw new 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页面下
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || "登录失败");
|
||||
} finally {
|
||||
this.loginLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
goUser() {
|
||||
@ -151,93 +144,116 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer2 {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 35%;
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.login_container {
|
||||
// background-color: #2b4b6b;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
|
||||
no-repeat 0px 0px;
|
||||
height: 100vh;
|
||||
background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login_box {
|
||||
height: 300px;
|
||||
width: 450px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1000px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.avatar_box {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px #ddd;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
.login_header {
|
||||
background: #1e62c0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login_form {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btns {
|
||||
.login_content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 40px;
|
||||
|
||||
.form_container {
|
||||
flex: 1;
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login_title {
|
||||
.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;
|
||||
top: 5%;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
//控制字体间距
|
||||
letter-spacing: 10px;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
.switch-buttons {
|
||||
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;
|
||||
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>
|
||||
|
||||
@ -1,94 +1,88 @@
|
||||
<template>
|
||||
<div class="login_container">
|
||||
<div class="login_title">登录</div>
|
||||
<div class="login_box">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
<div class="login_header">
|
||||
<h1>基于Ollama大模型的图书推荐系统</h1>
|
||||
</div>
|
||||
<!-- 登录表单区域 -->
|
||||
|
||||
<div class="login_content">
|
||||
<div class="form_container">
|
||||
<h2>用户登录</h2>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginFormRules"
|
||||
label-width="0px"
|
||||
class="login_form"
|
||||
label-width="0"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model.trim="loginForm.username"
|
||||
prefix-icon="iconfont icon-gerenxinxi"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
prefix-icon="iconfont icon-tianchongxing-"
|
||||
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"
|
||||
>登录</el-button
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="login"
|
||||
:loading="loginLoading"
|
||||
class="login-btn"
|
||||
>
|
||||
<el-button type="info" @click="resetLoginForm">重置</el-button>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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">
|
||||
登录页面切换
|
||||
<!-- <i class="iconfont icon-haoyou " @click="goUser"></i> -->
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont icon-guanliyuan" @click="goManage"></i>
|
||||
</span>
|
||||
|
||||
<div class="info_container">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueParticles from "vue-particles";
|
||||
import Vue from "vue";
|
||||
|
||||
Vue.use(VueParticles);
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
//登录表单
|
||||
loginForm: {
|
||||
username: "yangzhen",
|
||||
password: "123456",
|
||||
},
|
||||
|
||||
//登录表单规则的验证对象
|
||||
loginFormRules: {
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入用户名", trigger: "blur" },
|
||||
{
|
||||
min: 3,
|
||||
max: 20,
|
||||
@ -97,7 +91,7 @@ export default {
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{
|
||||
min: 6,
|
||||
max: 15,
|
||||
@ -113,38 +107,32 @@ export default {
|
||||
resetLoginForm() {
|
||||
this.$refs.loginFormRef.resetFields();
|
||||
},
|
||||
login() {
|
||||
async login() {
|
||||
this.$refs.loginFormRef.validate(async (valid) => {
|
||||
console.log(valid);
|
||||
//如果表单验证无效，直接返回
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
if (!valid) return;
|
||||
|
||||
try {
|
||||
this.loginLoading = true;
|
||||
// 进行md5加密
|
||||
const salt = "xiaobaitiao";
|
||||
const username = this.loginForm.username;
|
||||
const password = this.loginForm.password;
|
||||
//向数据库发送axios请求，如果登录成功，就跳转
|
||||
const { data: res } = await this.$http.post("user/login", {
|
||||
username,
|
||||
password,
|
||||
username: this.loginForm.username,
|
||||
password: this.loginForm.password,
|
||||
});
|
||||
|
||||
if (res.status !== 200) {
|
||||
this.loginLoading = false;
|
||||
return this.$message.error(res.msg);
|
||||
throw new 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页面下
|
||||
this.$router.push("/home");
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || "登录失败");
|
||||
} finally {
|
||||
this.loginLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
goUser() {
|
||||
this.$router.push("/login");
|
||||
},
|
||||
goManage() {
|
||||
this.$router.push("/loginmanage");
|
||||
},
|
||||
@ -153,94 +141,117 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer2 {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 35%;
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.login_container {
|
||||
// background-color: #2b4b6b;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
|
||||
no-repeat 0px 0px;
|
||||
height: 100vh;
|
||||
background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login_box {
|
||||
height: 300px;
|
||||
width: 450px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1000px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.avatar_box {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px #ddd;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
.login_header {
|
||||
background: #1e62c0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
.logo {
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login_form {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btns {
|
||||
.login_content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 40px;
|
||||
|
||||
.form_container {
|
||||
flex: 1;
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login_title {
|
||||
.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;
|
||||
top: 5%;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
//控制字体间距
|
||||
letter-spacing: 10px;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
.el-icon-s-tools {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
// background-color: pink;
|
||||
span {
|
||||
// width: 100%;
|
||||
// background-color: red;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,7 +40,7 @@ Vue.use(vueBaberrage)
|
||||
//导入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
|
||||
// const CancelToken = axios.CancelToken;
|
||||
// const source = CancelToken.source();
|
||||
|
||||
@ -36,7 +36,7 @@ Vue.use(vueBaberrage)
|
||||
//导入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
|
||||
// const CancelToken = axios.CancelToken;
|
||||
// const source = CancelToken.source();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user