登录1

src/LoginRegister/Login.vue

@@ -1,83 +1,425 @@
 <template>
     <div>
-    <div>头部</div>
+        <div class="container">
-    <div style="height: 300px;width: 400px; margin: 10px auto;background-color:#fdf7f7;">
+            <div class="forms-container">
-    <a-form
+                <div class="signin-signup">
-            :model="formState"
+                    <a-card style="width: 28vw;margin-left: 10vw; display: flex; justify-content: center; background-color: #f9f9f9" class="sign-in-form" >
-            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>
 
-        <a-form-item
+                        <h1 style="display: flex; justify-content: center; font-weight: bold">用户登录</h1>
-                label="Password"
+                        <a-form-item
-                name="password"
+                                :rules="[{ required: true, message: '请输入您的用户名！' }]"
-                :rules="[{ required: true, message: 'Please input your password!' }]"
+                                label="用户名"
-        >
+                                name="username"
-            <a-input-password v-model:value="formState.password">
+                                style="margin-top: 20px"
-                <template #prefix>
+                        >
-                    <LockOutlined class="site-form-item-icon" />
+                            <a-input v-model:value="formState.user" type="text"  style="width: 250px;height: 40px;"/>
-                </template>
-            </a-input-password>
-        </a-form-item>
 
-        <a-form-item>
+                        </a-form-item>
-            <a-form-item name="remember" no-style>
+                        <a-form-item
-                <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+                                :rules="[{ required: true, message: '请输入您的密码！' }]"
-            </a-form-item>
+                                label="用户密码"
-            <a class="login-form-forgot" href="">Forgot password</a>
+                                name="password"
-        </a-form-item>
+                                style="margin: 20px -10px 20px "
 
-        <a-form-item>
+                        >
-            <a-button type="primary" html-type="submit" class="login-form-button">
+                            <a-input-password v-model:value="formState.password" style="width: 250px;height: 40px;" />
-                Log in
+                        </a-form-item>
-            </a-button>
+                        <a-form-item>
-            Or
+                            <a-form-item name="remember" no-style>
-            <a href="">register now!</a>
+                                <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
-        </a-form-item>
+                            </a-form-item>
-    </a-form>
+                            <a class="login-form-forgot" href="" style="margin-left: 6vw">Forgot password</a>
-    </div>
+                        </a-form-item>
-    <div>底部</div>
+
+                        <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 {reactive} from 'vue';
-// import {message} from "../router/index.js";
+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,
+    // remember: true,
-});
-const onFinish = values => {
-    console.log('Success:', values);
-};
-const onFinishFailed = errorInfo => {
-    console.log('Failed:', errorInfo);
-};
-const disabled = computed(() => {
-    return !(formState.username && formState.password);
 });
+
+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>

src/Manager/Header.vue

@@ -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>

src/Manager/components/Carousel.vue

@@ -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-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
-            <a-button :size="size"><SearchOutlined />查询</a-button>
+            <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;
+            deleteId.id = record.id
-           requests.infoDeleteHeaderImage(id, token.value)
+           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) {
+        if (res.data.code === 200) {
-        //     getAll()
+            getAll()
-        //     message.success('修改成功')
+            message.success('修改成功')
-        // }
+        }
-        // else {
+        else {
-        //     loadingTable.value = false
+            loadingTable.value = false
-        //     message.error('修改失败')
+            message.error('修改失败')
-        //
+
-        // }
+        }
     })
 
 }
 
 
-// 删除
+// 查询
-// const infoDeleteHeaderImage = (id, token) => {
+const searchData = reactive({
-//     return axios({
+   id: -1,
-//         url: api + "/info/header-image/del",
+})
-//         method: "delete",
+function searchUser() {
-//         params: id,
+    // loadingTable.value = true
-//         headers: {
+    if (searchData.id === '') {
-//             'Authorization':'Bearer '+token,
+        getAll()
-//             'Content-Type': 'application/json;charset=utf-8',
+    } else {
-//             'Timestamp': getCurrentTimestamp()
+        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>
 

src/main.js

@@ -1,13 +1,13 @@
-
+import {createApp} from 'vue'
-import { createApp } from 'vue'
+import Antd from 'ant-design-vue';
-import Antd from 'ant-design-vue';
+import App from './App.vue'
-import App from './App.vue'
+import router from './router'
-import router from './router'
+import 'ant-design-vue/dist/reset.css';
-import 'ant-design-vue/dist/reset.css';
+
-
+const app = createApp(App)
-const app = createApp(App)
+
-
+app.use(router)
-app.use(router)
+app.use(Antd)
-app.use(Antd)
+
-
+app.mount('#app')
-app.mount('#app')
+

src/public/request.js

@@ -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 (id,displayOrder（排序顺序）,image（图片地址）,title,description,isActive（是否启用）)
- * @param data (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,