vue web fix

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "qs": "^6.11.1",
         "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@popperjs/core": "^2.11.6",
@@ -1798,6 +1799,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/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/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
@@ -3031,6 +3043,14 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "qs": "^6.11.1",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",

src/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
 import Login from './views/Login.vue'
 </script>
 

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/util/store.js

@@ -0,0 +1,16 @@
+const state = {
+    isLogin: false,
+    successMessage: ''
+};
+
+const mutations = {
+    login(state) {
+        state.isLogin = true;
+    },
+    logout(state) {
+        state.isLogin = false;
+    },
+    setSuccessMessage(state, message) {
+        state.successMessage = message;
+    }
+};  

src/main.js

@@ -6,8 +6,11 @@ import './scss/styles.scss'
 import "@popperjs/core"
 import "bootstrap"
 import './scss/global.scss'
+// 导入store
+import store from './utils/vuex/m'
 
 const app = createApp(App)
 
 app.use(router)
 app.mount('#app')
+app.use(store)

src/utils/vuex/m.js

@@ -0,0 +1,19 @@
+import { createStore } from "vuex";
+
+// 实例化一个store对象
+
+const store = createStore({
+    state() {
+        return {
+            count: 0
+        }
+    },
+    mutations: {
+        increment(state) {
+            state.count++
+        }
+    }
+})
+
+
+export default store

src/views/Index.vue

@@ -16,7 +16,7 @@
                     <div class="container-fluid row ">
                         <div class="col-1 item" id="logo">
                             <span>
-                                <a class="navbar-brand">
+                                <a class="navbar-brand" href="/index">
                                     <img src="https://img.icons8.com/cotton/24/null/money--v2.png"
                                         class="d-inline-block align-text-top" alt="Logo" />
                                     资产系统
@@ -44,6 +44,7 @@
             <!-- content区域 -->
             <div>
                 <div class="tab-content" id="nav-tabContent">
+                    <SuccessMessage/>
                     <RouterView />
                 </div>
             </div>
@@ -58,10 +59,11 @@
 
 <script >
 import sidebar from './navigations/sidebar.vue';
+import SuccessMessage from './modal/SuccessMessage.vue';
 
 export default {
     name: 'App5Index',
-    components: { sidebar },
+    components: { sidebar, SuccessMessage },
 
     data() {
         return {
@@ -69,6 +71,11 @@ export default {
         };
     },
 
+    // 初始化
+    created() {
+
+    },
+
     mounted() {
 
     },

src/views/Login.vue

@@ -40,7 +40,7 @@
 <script>
 import { createDOMCompilerError } from '@vue/compiler-dom'
 import { createApp } from 'vue'
-import request from "../utils/request"
+import request from "../utils/axios/request"
 import qs from "qs"
 
 export default {
@@ -73,7 +73,8 @@ export default {
                 console.log(resp)
                 if (resp.status == 200) {
                     this.$router.push({
-                        path: '/index'
+                        path: '/index',
+                        name: 'access'
                     })
                 }
             }).catch(error => console.log(error))

src/views/modal/SuccessMessage.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="success-message">
+        {{ message }}
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        message: String
+    }
+};
+</script>
+  
+<style scoped>
+.success-message {
+    position: fixed;
+    top: 20px;
+    right: -200px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: #67C23A;
+    color: #fff;
+    transition: all .4s ease-in-out;
+}
+
+.success-message.show {
+    right: 20px;
+}
+</style>
+