登录1
This commit is contained in:
parent
2c1edad772
commit
855c43aed9
@ -1,83 +1,425 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>头部</div>
|
||||
<div style="height: 300px;width: 400px; margin: 10px auto;background-color:#fdf7f7;">
|
||||
<a-form
|
||||
:model="formState"
|
||||
name="normal_login"
|
||||
class="login-form"
|
||||
@finish="onFinish"
|
||||
@finishFailed="onFinishFailed"
|
||||
>
|
||||
<a-form-item
|
||||
label="Username"
|
||||
name="username"
|
||||
:rules="[{ required: true, message: 'Please input your username!' }]"
|
||||
>
|
||||
<a-input v-model:value="formState.username">
|
||||
<template #prefix>
|
||||
<UserOutlined class="site-form-item-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<div class="container">
|
||||
<div class="forms-container">
|
||||
<div class="signin-signup">
|
||||
<a-card style="width: 28vw;margin-left: 10vw; display: flex; justify-content: center; background-color: #f9f9f9" class="sign-in-form" >
|
||||
|
||||
<a-form-item
|
||||
label="Password"
|
||||
name="password"
|
||||
:rules="[{ required: true, message: 'Please input your password!' }]"
|
||||
>
|
||||
<a-input-password v-model:value="formState.password">
|
||||
<template #prefix>
|
||||
<LockOutlined class="site-form-item-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<h1 style="display: flex; justify-content: center; font-weight: bold">用户登录</h1>
|
||||
<a-form-item
|
||||
:rules="[{ required: true, message: '请输入您的用户名！' }]"
|
||||
label="用户名"
|
||||
name="username"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<a-input v-model:value="formState.user" type="text" style="width: 250px;height: 40px;"/>
|
||||
|
||||
<a-form-item>
|
||||
<a-form-item name="remember" no-style>
|
||||
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
|
||||
</a-form-item>
|
||||
<a class="login-form-forgot" href="">Forgot password</a>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:rules="[{ required: true, message: '请输入您的密码！' }]"
|
||||
label="用户密码"
|
||||
name="password"
|
||||
style="margin: 20px -10px 20px "
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" class="login-form-button">
|
||||
Log in
|
||||
</a-button>
|
||||
Or
|
||||
<a href="">register now!</a>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div>底部</div>
|
||||
>
|
||||
<a-input-password v-model:value="formState.password" style="width: 250px;height: 40px;" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-form-item name="remember" no-style>
|
||||
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
|
||||
</a-form-item>
|
||||
<a class="login-form-forgot" href="" style="margin-left: 6vw">Forgot password</a>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button @click="loginUser" :disabled="disabled" type="primary" html-type="submit" class="login-form-button" size="large" style="margin:20px 9vw 20px ">
|
||||
登录
|
||||
</a-button>
|
||||
<br>
|
||||
<a href="/register">register now!</a>
|
||||
</a-form-item>
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels-container">
|
||||
<div class="panel left-panel">
|
||||
<div class="content">
|
||||
<h3>加入我们</h3>
|
||||
<p>
|
||||
加入我们，成为团队的一份子。
|
||||
</p>
|
||||
<button class="btn transparent" id="sign-up-btn" @click="SendRegister">
|
||||
去注册
|
||||
</button>
|
||||
</div>
|
||||
<!-- <img src="log.svg" class="image" alt="" />-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {computed, reactive} from 'vue';
|
||||
// import {message} from "../router/index.js";
|
||||
import {reactive} from 'vue';
|
||||
import {message} from "ant-design-vue";
|
||||
import requests from "../public/request.js";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
user: '',
|
||||
password: '',
|
||||
remember: true,
|
||||
});
|
||||
const onFinish = values => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
const onFinishFailed = errorInfo => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
const disabled = computed(() => {
|
||||
return !(formState.username && formState.password);
|
||||
// remember: true,
|
||||
});
|
||||
|
||||
function SendRegister(){
|
||||
router.push('/Register');
|
||||
}
|
||||
function loginUser(){
|
||||
console.log("formState:",formState)
|
||||
requests.login(formState).then((res) => {
|
||||
console.log(res)
|
||||
message.config({
|
||||
background: true
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
//登录成功，跳转页面+消息提示+存储登录用户的数据
|
||||
//判断是否是管理员，管理员跳转manager，
|
||||
window.localStorage.setItem('token',res.data.data.token)
|
||||
if (res.data.data.role.rid===1) {
|
||||
router.push("/Manager/Main")
|
||||
|
||||
}else {
|
||||
router.push("/") //非管理员跳转index主页
|
||||
}
|
||||
message.success('登录成功')
|
||||
} else {
|
||||
//登录失败，消息提示
|
||||
message.error(res.data.message)
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#components-form-demo-normal-login .login-form {
|
||||
max-width: 300px;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-forgot {
|
||||
float: right;
|
||||
|
||||
body,
|
||||
input {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-button {
|
||||
width: 100vw;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forms-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.signin-signup {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 75%;
|
||||
width: 50%;
|
||||
transition: 1s 0.7s ease-in-out;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0rem 5rem;
|
||||
transition: all 0.2s 0.7s;
|
||||
overflow: hidden;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
|
||||
.input-field i {
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
color: #acacac;
|
||||
transition: 0.5s;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.input-field input {
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-field input::placeholder {
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 150px;
|
||||
background-color: #5995fd;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 49px;
|
||||
border-radius: 49px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #4d84e2;
|
||||
}
|
||||
.panels-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.container:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 2000px;
|
||||
width: 2000px;
|
||||
top: -10%;
|
||||
right: 48%;
|
||||
transform: translateY(-50%);
|
||||
background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
|
||||
transition: 1.8s ease-in-out;
|
||||
border-radius: 50%;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
transition: transform 1.1s ease-in-out;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
pointer-events: all;
|
||||
padding: 3rem 17% 2rem 12%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.panel .content {
|
||||
color: #fff;
|
||||
transition: transform 0.9s ease-in-out;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
|
||||
.btn.transparent {
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
width: 130px;
|
||||
height: 41px;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.right-panel .image,
|
||||
.right-panel .content {
|
||||
transform: translateX(800px);
|
||||
}
|
||||
|
||||
/* ANIMATION */
|
||||
|
||||
.container.sign-up-mode .left-panel .image,
|
||||
.container.sign-up-mode .left-panel .content {
|
||||
transform: translateX(-800px);
|
||||
}
|
||||
|
||||
.container.sign-up-mode .signin-signup {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.container.sign-up-mode form.sign-in-form {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container.sign-up-mode .right-panel .image,
|
||||
.container.sign-up-mode .right-panel .content {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
.container.sign-up-mode .left-panel {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 870px) {
|
||||
.container {
|
||||
min-height: 800px;
|
||||
height: 100vh;
|
||||
}
|
||||
.signin-signup {
|
||||
width: 100%;
|
||||
top: 95%;
|
||||
transform: translate(-50%, -100%);
|
||||
transition: 1s 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.signin-signup,
|
||||
.container.sign-up-mode .signin-signup {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.panels-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 2fr 1fr;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 2.5rem 8%;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
|
||||
.left-panel {
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 200px;
|
||||
transition: transform 0.9s ease-in-out;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
.panel .content {
|
||||
padding-right: 15%;
|
||||
transition: transform 0.9s ease-in-out;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.btn.transparent {
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.container:before {
|
||||
width: 1500px;
|
||||
height: 1500px;
|
||||
transform: translateX(-50%);
|
||||
left: 30%;
|
||||
bottom: 68%;
|
||||
right: initial;
|
||||
top: initial;
|
||||
transition: 2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.container.sign-up-mode .left-panel .image,
|
||||
.container.sign-up-mode .left-panel .content {
|
||||
transform: translateY(-300px);
|
||||
}
|
||||
|
||||
.container.sign-up-mode .right-panel .image,
|
||||
.container.sign-up-mode .right-panel .content {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.right-panel .image,
|
||||
.right-panel .content {
|
||||
transform: translateY(300px);
|
||||
}
|
||||
|
||||
.container.sign-up-mode .signin-signup {
|
||||
top: 5%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
form {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
.panel .content {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.container:before {
|
||||
bottom: 72%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
2
src/LoginRegister/log.svg
Normal file
2
src/LoginRegister/log.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 34 KiB |
@ -1,4 +1,4 @@
|
||||
<template>
|
||||
<template >
|
||||
<div class="header">
|
||||
<a-button class="logo" ghost>LOGO</a-button>
|
||||
<div class="centered-text">内部系统管理界面</div>
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<div class="dropdown-content">
|
||||
<div>
|
||||
<a href="/LoginRegister/Login">退出</a>
|
||||
<a href="/LoginRegister/Login">退出<ArrowRightOutlined /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div style="display:flex;flex-direction: column">
|
||||
<div style="margin: 20px">
|
||||
<a-space direction="vertical" style="display: flex;flex-direction: row">
|
||||
<a-input class="first-input" v-model:value="value1" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
|
||||
<a-button :size="size"><SearchOutlined />查询</a-button>
|
||||
<a-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
|
||||
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
|
||||
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
@ -148,7 +148,7 @@ const pagination = computed(() => ({
|
||||
const showModal = (record) => {
|
||||
// formState.author = record.author;
|
||||
console.log("record:",record)
|
||||
updateId.value = record.id
|
||||
formState.id = record.id
|
||||
formState.description = record.description
|
||||
formState.photo = record.photo;
|
||||
formState.title=record.title;
|
||||
@ -164,7 +164,9 @@ const states = reactive({
|
||||
data:[],
|
||||
|
||||
})
|
||||
|
||||
const deleteId = reactive({
|
||||
id: -1
|
||||
})
|
||||
//删除
|
||||
|
||||
const showDeleteConfirm = (record) => {
|
||||
@ -177,8 +179,8 @@ const showDeleteConfirm = (record) => {
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
|
||||
const id = record.id;
|
||||
requests.infoDeleteHeaderImage(id, token.value)
|
||||
deleteId.id = record.id
|
||||
requests.infoDeleteHeaderImage(deleteId, token)
|
||||
.then(response => {
|
||||
// 处理删除成功的响应
|
||||
console.log('删除成功');
|
||||
@ -242,7 +244,7 @@ const addOk = e => {
|
||||
modelRef.isActive= false
|
||||
}
|
||||
|
||||
requests.infoAddHeaderImage(modelRef,token.value).then((res)=>{
|
||||
requests.infoAddHeaderImage(modelRef,token).then((res)=>{
|
||||
console.log(res)
|
||||
if (res.data.code===200) {
|
||||
message.success('新增成功')
|
||||
@ -297,8 +299,8 @@ const beforeUpload = file => {
|
||||
};
|
||||
|
||||
// 状态
|
||||
const updateId = ref(-1);
|
||||
const formState = reactive({
|
||||
id:-1,
|
||||
// author:'',
|
||||
description: '',
|
||||
photo:'',
|
||||
@ -382,8 +384,8 @@ const rowSelection = {
|
||||
};
|
||||
|
||||
|
||||
const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4IiwiZXhwIjoxNzA3MDYyNzU1fQ.a6ga7a0jhOabBMEmDmUd0sZsOo9fC8PjGHL19nF47KU");
|
||||
|
||||
// const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4IiwiZXhwIjoxNzA3MDYyNzU1fQ.a6ga7a0jhOabBMEmDmUd0sZsOo9fC8PjGHL19nF47KU");
|
||||
const token = window.localStorage.getItem('token')
|
||||
|
||||
// 接口
|
||||
onMounted(() => {
|
||||
@ -409,35 +411,45 @@ function getAll() {
|
||||
// 编辑
|
||||
function EditHeaderImage(){
|
||||
open.value = false;
|
||||
requests.infoEditHeaderImage(updateId,formState,token.value).then((res)=>{
|
||||
requests.infoEditHeaderImage(formState,token).then((res)=>{
|
||||
console.log("editResult:",res)
|
||||
// console.log("updateData:",updateData)
|
||||
// if (res.data.code === 200) {
|
||||
// getAll()
|
||||
// message.success('修改成功')
|
||||
// }
|
||||
// else {
|
||||
// loadingTable.value = false
|
||||
// message.error('修改失败')
|
||||
//
|
||||
// }
|
||||
if (res.data.code === 200) {
|
||||
getAll()
|
||||
message.success('修改成功')
|
||||
}
|
||||
else {
|
||||
loadingTable.value = false
|
||||
message.error('修改失败')
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 删除
|
||||
// const infoDeleteHeaderImage = (id, token) => {
|
||||
// return axios({
|
||||
// url: api + "/info/header-image/del",
|
||||
// method: "delete",
|
||||
// params: id,
|
||||
// headers: {
|
||||
// 'Authorization':'Bearer '+token,
|
||||
// 'Content-Type': 'application/json;charset=utf-8',
|
||||
// 'Timestamp': getCurrentTimestamp()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// 查询
|
||||
const searchData = reactive({
|
||||
id: -1,
|
||||
})
|
||||
function searchUser() {
|
||||
// loadingTable.value = true
|
||||
if (searchData.id === '') {
|
||||
getAll()
|
||||
} else {
|
||||
requests.infoGetHeaderImage(searchData, token).then((res) => {
|
||||
// loadingTable.value = false
|
||||
console.log("searchResult:", res)
|
||||
if (res.data.code === 200) {
|
||||
states.data = []
|
||||
states.data = res.data.data.data
|
||||
message.success('查询成功')
|
||||
// console.log(loadingTable.value)
|
||||
} else {
|
||||
message.error(res.data.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
26
src/main.js
26
src/main.js
@ -1,13 +1,13 @@
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import Antd from 'ant-design-vue';
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'ant-design-vue/dist/reset.css';
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.use(Antd)
|
||||
|
||||
app.mount('#app')
|
||||
import {createApp} from 'vue'
|
||||
import Antd from 'ant-design-vue';
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'ant-design-vue/dist/reset.css';
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.use(Antd)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ const api = 'http://nbxt.oa.x-lf.cn'
|
||||
|
||||
/**
|
||||
* 登录
|
||||
* @param data (username,password)
|
||||
* @param data (user,password)
|
||||
* @returns {*}
|
||||
*/
|
||||
const login = (data) => {
|
||||
@ -425,18 +425,14 @@ const infoGetHeaderImage = (id, token) => {
|
||||
|
||||
/**
|
||||
* 编辑轮播图信息
|
||||
* @param id 轮播图id
|
||||
* @param data (displayOrder（排序顺序）,image（图片地址）,title,description,isActive（是否启用）)
|
||||
* @param data (id,displayOrder（排序顺序）,image（图片地址）,title,description,isActive（是否启用）)
|
||||
* @param token
|
||||
* @returns {Promise<AxiosResponse<any>> | *}
|
||||
*/
|
||||
const infoEditHeaderImage = (id, data, token) => {
|
||||
const infoEditHeaderImage = ( data, token) => {
|
||||
return axios({
|
||||
url: api + "/info/header-image/edit",
|
||||
method: "put",
|
||||
params: {
|
||||
id: id
|
||||
},
|
||||
data: data,
|
||||
headers: {
|
||||
'Authorization':'Bearer '+token,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user