完善登录页面vuex存入token

package-lock.json

@@ -14,7 +14,8 @@
         "flowbite": "^2.3.0",
         "vue": "^3.3.11",
         "vue-request": "^2.0.4",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.5.2",
@@ -2792,6 +2793,17 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package.json

@@ -15,7 +15,8 @@
     "flowbite": "^2.3.0",
     "vue": "^3.3.11",
     "vue-request": "^2.0.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",

src/components/HomeComponents/Carousel.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div id="controls-carousel" class="w-full relative" data-carousel="slide">
     <!-- Carousel wrapper -->
     <div class="relative h-56 overflow-hidden md:h-[600px]">
@@ -49,4 +50,8 @@
         </span>
     </button>
   </div>
+
+
+
+
 </template>

src/components/HomeComponents/ExcellentMember.vue

@@ -59,6 +59,7 @@
         </span>
     </button>
   </div>
+
 </template>
 <script setup>
 </script>

src/main.js

@@ -5,11 +5,13 @@ import router from './router'
 import 'ant-design-vue/dist/reset.css';
 import './assert/main.css'
 import 'flowbite';
+import store from './store' // 引入Vuex store
 
 const app = createApp(App)
 
 app.use(router)
 app.use(Antd)
+app.use(store)
 
 app.mount('#app')
 

src/store/index.js

@@ -0,0 +1,37 @@
+import {createStore} from 'vuex';
+import request from '@/js/request.js';
+import router from "@/router/index.js";
+
+const store = createStore({
+    state: {
+        tokenInfo: null
+    },
+    mutations: {
+        setTokenInfo(state, newToken) {
+            state.tokenInfo = newToken;
+            localStorage.setItem('token', newToken);
+        }
+    },
+    actions: {
+        async userLogin({ commit }, formState) {
+            try {
+                const res = await request.login(formState);
+                const token = res.data.data.token
+                console.log(res);
+                commit('setTokenInfo', token);
+                if (res.data.data.role.rid===1) {
+                    router.push("/Manager/Main")
+
+                }else {
+                    router.push("/")  //非管理员跳转index主页
+                }
+            } catch (err) {
+                console.error(err);
+                throw new Error('登录失败');
+            }
+        }
+    },
+});
+
+export default store;
+

src/views/AuthPage/Login.vue

@@ -29,7 +29,7 @@
                             <a-button href="" style="margin-left: 1vw" type="link" >忘记密码？</a-button>
                         </a-form-item>
                         <a-form-item>
-                            <a-button  :disabled="disabled" html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
+                            <a-button html-type="submit" size="large" style="margin-left: 5vw; margin-top: 1vh; margin-bottom: 1vh; background-color: dodgerblue; color: white;width: 10vw " @click="loginUser">
                                 登录
                             </a-button>
                            <br>
@@ -61,8 +61,9 @@
 <script setup>
 import {reactive} from 'vue';
 import {message} from "ant-design-vue";
-import requests from "@/js/request.js";
 import {useRouter} from "vue-router";
+import {useStore} from 'vuex'
+
 
 const router = useRouter()
 
@@ -75,7 +76,7 @@ const formState = reactive({
 function  SendRegister(){
     router.push('/Register');
 }
-function loginUser(){
+/*function loginUser(){
     console.log("formState:",formState)
     requests.login(formState).then((res) => {
         console.log(res)
@@ -101,7 +102,24 @@ function loginUser(){
         }
 
     });
+}*/
+
+const store = useStore()
+
+async function loginUser () {
+   //console.log(this.user)
+  try {
+    await store.dispatch('userLogin', formState)
+    message.success('登陆成功')
+  } catch (err) {
+     console.log('err:', err)
+    message.warn('登陆失败')
+  }
 }
+
+
+
+
 </script>
 <style scoped>
 * {

src/views/ManagePage/NewsDisplay.vue

@@ -1,3 +1,96 @@
 <template>
 新闻展示
-</template>
+
+
+        <a-card title="dsdvsvdv" hoverable class="w-[23vw] h-[32vh]  flex flex-col rounded-lg border-gray-300">
+
+            <template #extra >
+           <div class="flex flex-row justify-start">
+<!--                <span  class="text-blue-900 font-bold text-xl mt-1">后台管理系统</span>-->
+                <button  v-if="edit === false" class=" w-6 h-6  flex items-center justify-center bg-blue-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
+                <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                </svg>
+            </button>
+
+                <button  v-if="edit === true" class=" w-6 h-6  flex items-center justify-center bg-red-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
+                    <CloseOutlined   style="font-size: large ;color:white" />
+                </button>
+<!--            <a-button  v-else-if="edit === true" type="link"  class="mt-8 w-6 h-6 flex items-center justify-center bg-red-400 text-white rounded-full transition duration-300 ease-in-out transform " @click="deleteCard(index)">-->
+<!--               -->
+<!--            </a-button>-->
+           </div>
+            </template>
+            <div class="flex flex-row justify-between ">
+                <div class="flex-row flex justify-end space-x-5">
+                    <div class="flex-col flex text-s text-blue-500">
+                        <span class="text-blue-900 font-bold">负责人</span>
+                        <span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%]">杨怼怼</span>
+                    </div>
+                    <div class="flex-col flex">
+                        <span class="text-blue-900 font-bold">系统周期</span>
+                        <span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%] ">60天</span>
+                    </div>
+                    <div class="flex-col flex">
+                        <span class="text-blue-900 font-bold">系统状态</span>
+
+                            <div  style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===2">
+                                <sync-outlined :spin="true"  style="color: #04befe" v-if="project.isFinish===2"/>
+                                进行中
+                            </div>
+
+
+
+                            <div  style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===1">
+                                <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
+                                已完成
+                            </div>
+
+
+
+                            <div style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===0">
+                                <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
+                                未开始
+                            </div>
+
+
+                            <div style="color: #04befe" class="text-sm text-[80%]  ml-1  font-bold" v-if="project.isFinish===-1">
+                                <InfoCircleOutlined style="color: #04befe" v-if="project.isFinish===-1"/>
+                                已暂停
+                            </div>
+
+
+
+
+                    </div>
+                    <div class="flex flex-col mb-2 ">
+                        <span  class="font-bold text-blue-900 ">系统工作量</span>
+                        <span style="color: #04befe" class="text-blue-300 text-sm text-[85%] font-bold">120人/天</span>
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex-col flex">
+                <span class="font-bold text-blue-900">简介</span>
+                <span style="color: #04befe" class="w-[15vw] break-words text-blue-300 text-sm text-[85%] ">dwhdbwudheuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuw</span>
+            </div>
+
+        </a-card>
+
+</template>
+<script setup>
+import {
+    CheckCircleTwoTone,
+    CloseOutlined,
+    InfoCircleOutlined,
+    PlayCircleOutlined,
+    SyncOutlined
+} from "@ant-design/icons-vue";
+import {reactive, ref} from "vue";
+// const project = defineProps(["name","id","isFinish","principalUser","description","cycle","workLoad","tags"])
+const project  = reactive({
+    isFinish:2,
+})
+const edit = ref(false)
+</script>

src/views/ProjectPage/ProjectList.vue

@@ -1,258 +0,0 @@
-<template>
-    <a-spin  :spinning="false"  tip="Loading..." >
-    <div class="relative  bg-gray-50 flex w-full  overflow-x-hidden">
-        <div class="mt-0">
-            <div class="flex flex-row justify-between">
-                    <div class="ml-3">
-                        <!-- 第一个是 全部 所以独立出来 -->
-                        <a-checkable-tag
-                                v-model:checked="tagAll"
-                                @change="checked => handleClickAll(checked)"
-                        >
-                            全部
-                        </a-checkable-tag>
-                        <a-checkable-tag
-                                v-for="(tag, index) in tagsData"
-                                :key="tag.id"
-                                v-model:checked="selectTags[index]"
-                                @change="checked => handleChange(tag, checked)"
-                        >
-                            {{ tag.name }}
-                        </a-checkable-tag>
-                    </div>
-                    <div class="">
-                        <a-checkbox-group v-model:value="data.isFinish" :options="options" class="mr-3" />
-                    </div>
-                </div>
-
-            <template v-if="projects.length === 0">
-                <!-- 数据为空时的提示信息 -->
-                <div class="w-full h-[80vh]  ">
-                        <img src="../../../public/33.png" class="w-[300px] h-[300px] mt-[20vh] ml-[40vw]">
-                </div>
-            </template>
-            <template v-else>
-            <div class="flex flex-wrap justify-start  mt-5 w-full">
-<!--                <template v-for="(project, index) in projects" :key="index">-->
-<!--                    <a-card class=" mr-2 transition-transform transform-gpu hover:scale-105 relative w-[24vw]  h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">-->
-<!--                        <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">-->
-<!--                            <p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>-->
-<!--                            <div class="ml-auto mr-10">-->
-<!--                                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="MainMessage(project)">-->
-<!--                                    <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">-->
-<!--                                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
-<!--                                    </svg>-->
-<!--                                </button>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                    </a-card>-->
-<!--                </template>-->
-<!--            </template>-->
-
-
-
-
-
-
-
-
-            <template v-for="(project, index) in projects" :key="index"  >
-<!--                <div class="flex flex-row justify-start  mt-5 w-full">-->
-                <a-card hoverable  class="w-[30vw] ml-[2.5vw] mb-[4vh]"  :loading="false" @click="MainMessage(project)" >
-                    <template #title>
-                        <div style="display: flex; flex-direction: row">
-                            <div style="display: flex; flex-direction: row; width: 18vw">
-                                <div style="width: 0.5vw; height: 3vh; background-color: #BD3124; border-radius: 10px; margin-right: 0.2vw;margin-top: 0.3vh"/>
-
-                                <div style="text-shadow: 2px 2px 6px rgba(189, 49, 36, 0.4);">{{ project.name }}</div>
-                            </div>
-                            <div style="margin-left: 1.8vw;
-                    font-size: 70%;
-                    font-weight: normal;
-                    text-shadow: 2px 2px 4px #B886F8;
-                    display: flex;
-                    flex-direction: row;
-                    margin-top: 0.8vh;">
-                                <div style="width: 0.5vw; height: 2.5vh; background-color: #B886F8; border-radius: 10px; margin-right: 0.2vw;"/>负责人：{{ project.principalUser }}</div>
-                        </div>
-                    </template>
-                    <div style="display: flex; flex-direction: column; height: 10vh; margin-top: 0">
-                        <!--      description-->
-                        <div style="display: flex; flex-direction: row; height: 8vh">
-                            <div style="width: 0.8vw; height: 2vh; background-color: rgba(233, 157, 66, 1); border-radius: 10px; margin-right: 0.2vw;"/>
-                            <div style="font-size: 60%; text-shadow: 2px 2px 6px rgba(233, 157, 66, 1); color: rgba(154, 154, 154, 1)">{{ project.description }}</div>
-                        </div>
-                        <!--      other message-->
-                        <div style="display: flex; flex-direction: row; height: 2vh">
-                            <!--        status-->
-                            <div style="display: flex; flex-direction: row; width: 5vw">
-                                <sync-outlined :spin="true" style="color:#87d068;" v-if="project.isFinish===2"/>
-                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===2">进行中</div>
-
-                                <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
-                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===1">已完成</div>
-
-                                <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
-                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===0">未开始</div>
-
-                                <InfoCircleOutlined style="color: red" v-if="project.isFinish===-1"/>
-                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===-1">已暂停</div>
-                            </div>
-                            <!--        works-->
-                            <div style="display: flex; flex-direction: row; width: 8.5vw">
-                                <smile-two-tone />
-                                <div style="font-size: 60%; margin-left: 0.3vw">工作量：{{ project.workLoad }}人/天</div>
-                            </div>
-
-                            <div style="display: flex; flex-direction: row; width: 8vw">
-                                <schedule-two-tone two-tone-color="pink"/>
-                                <div style="font-size: 60%; margin-left: 0.3vw">周期：{{ project.cycle }}天</div>
-                            </div>
-                        </div>
-
-                    </div>
-                    <template >
-                        <a-tag v-for="(tag, index) in project.tags" :color="color[index]">
-                            {{ tag }}
-                        </a-tag>
-                        <a-button type="text" shape="circle" :icon="ArrowRightOutlined"></a-button>
-                    </template>
-                </a-card>
-<!--                </div>-->
-            </template>
-            </div>
-            </template>
-
-        </div>
-    </div>
-    </a-spin>
-</template>
-<script setup>
-import {onMounted, reactive, ref, watch} from "vue";
-import request from "@/js/request.js";
-import router from "@/router/index.js";
-import {
-    ArrowRightOutlined,
-    CheckCircleTwoTone,
-    InfoCircleOutlined,
-    PlayCircleOutlined,
-    ScheduleTwoTone,
-    SmileTwoTone,
-    SyncOutlined,
-} from "@ant-design/icons-vue";
-
-const color = ['pink','red','green','orange','cyan','blue','purple']
-const showButton = reactive([]);
-const projects = ref([
-
-]);
-
-const id =ref(1)
-const data = reactive({
-  id:'',
-  tags:[],
-  isFinish:[0,1,2,-1]
-})
-// const loading  =ref(false)
-onMounted(() =>{
-
-    request.getTagsProjectList().then(res=>{
-        console.log("tagsData:",res)
-        tagsData.value=res.data.data
-
-    })
-    getAllProject()
-
-
-})
-function  getAllProject(){
-    request.projectGetCustom(data).then((res)=>{
-        projects.value = res.data.data;
-        console.log('查询到的所有项目',projects.value)
-
-    })
-    // loading.value = true;
-    // console.log('zmhuisss',loading.value)
-}
-
-const tagsData = ref([]);
-const selectTags = ref([false, false, false, false]);
-const options = [
-  {
-    label: '未开始',
-    value: 0,
-  },
-  {
-    label: '进行中',
-    value: 2,
-  },
-  {
-    label: '已完成',
-    value: 1,
-  },
-  {
-    label: '已暂停',
-    value: -1,
-  },
-]
-watch(() =>data.isFinish, async (newValue, oldValue) =>{
-  console.log("data.isFinish", data.isFinish)
-  getAllProject()
-})
-
-const tagAll=ref(true)
-const token = window.localStorage.getItem('token')
-
-//当选中全部时，其他的都不选中
-const handleClickAll=(checked)=>{
-    if(checked){
-        selectTags.value.forEach((item,index)=>{
-            selectTags.value[index]=false
-        })
-      selectedTags.value = []
-    }
-
-  // console.log("selectedTags",selectedTags.value)
-}
-const  selectedTags =ref([])
-
-// 当选中其他的时候， 全部 不选中
-const handleChange = (tag, checked) => {
-    tag.checked = checked; // 更新checkbox的选中状态
-
-    if (checked) {
-        tagAll.value = false;
-
-        selectedTags.value.push(tag.name); // 将选中的tag.name添加到数组中
-    } else {
-        const index = selectedTags.value.indexOf(tag.name);
-        if (index !== -1) {
-            selectedTags.value.splice(index, 1); // 从数组中移除取消选中的tag.name
-        }
-        let flag = true;
-        selectTags.value.forEach((item, index) => {
-            if (item) {
-                flag = false;
-            }
-        });
-        if (flag) {
-            tagAll.value = true;
-        }
-    }
-};
-
-function MainMessage(project) {
-console.log(project.id)
-    window.localStorage.setItem('id',project.id)
-        router.push('/ProjectMessage');
-
-}
-watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
-  data.tags = []
-  selectedTags.value.forEach((item,index)=>{
-    data.tags.push(item)
-  })
-  getAllProject()
-})
-
-</script>