Updated files

vite-project分析文档.md

@@ -48,3 +48,120 @@ admin 是 存放 管人员的；home 是存放用户的；List 是表单的；Lo
 
 首先看Login 界面的代码：
 
+```vue
+// index.vue
+<template>
+  <div class="login">
+    <loginForm @LoginEmit="LoginEmit" />
+  </div>
+</template>
+<script setup>
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useStore } from '@/store/index.js'
+import { handleLogin } from '@/api/login.js'
+import { animationRoute } from '@/api/common.js'
+import loginForm from './components/loginForm.vue'
+
+
+const Component = defineComponent({
+  loginForm
+})
+
+const Mounted = onMounted(() => {
+  let type = Math.ceil(Math.random() * 10)
+  if (type % 2 !== 0) {
+    document.querySelector('.login').style.background = '#000'
+    for (let i = 0; i < 200; i++) {
+      createSnow()
+    }
+  }
+})
+
+const Unmounted = onUnmounted(() => {
+  clearInterval(timer.value)
+  timer.value = null
+})
+
+/**
+ * @type Router
+ * @description 所有数据都在此体现
+ * **/
+
+const Router = useRouter()
+const store = useStore()
+const timer = ref(null)
+const windowWidth = window.screen.width
+const windowHeight = window.screen.height
+
+/**
+* @type methods
+* @description 所有方法、事件都在此层中体现
+* **/
+
+
+//创建雪花
+const createSnow = () => {
+  let left = 0
+  let top = 0
+
+  //定义一个初始化随机数,使雪花在屏幕中
+  let left_random = Math.random() * windowWidth
+  let top_random = Math.random() * windowHeight
+  let div = document.createElement('div')
+  div.style.color = '#fff'
+  div.style.fontSize = Math.round(Math.random() * 60) + 'px'
+  div.style.position = 'absolute'
+  div.style.userSelect = 'none'
+  div.innerText = '❄'
+  div.style.transform = 'scale(' + (Math.random()) + ')'
+  document.querySelector('.login').appendChild(div)
+
+  //雪花飘落
+  timer.value = setInterval(() => {
+    div.style.left = left_random + left + 'px'
+    div.style.top = top_random + top + 'px'
+    left += 0.2
+    top += 0.2
+
+    //如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部
+    if (left_random + left >= windowWidth) {
+      left_random = Math.random()
+      left = 0
+    }
+
+    if (top_random + top >= windowHeight) {
+      top_random = Math.random()
+      top = 0
+    }
+  }, 20)
+}
+
+const LoginEmit = async form => {
+  const { username, password } = form
+  //   这里定义一个get请求。
+  let res = await handleLogin()
+  //   这里就是通过get请求中的过滤器来判断所传入的item 中的item。username是否相同。【注释：这里的过滤器是JavaScript自带的。是用于对数组进行过滤的】
+  let currentUser = res.data.filter(item => { return item.username === username })
+  if (currentUser.length < 1) return ElMessage.error('用户不存在')
+  if (currentUser[0].password !== password) return ElMessage.error('密码错误')
+  store.SAVE_USER_MESSAGE(currentUser[0])
+  let routerList = await animationRoute(username)
+  store.SAVE_ANIMATION_ROUTER([...routerList.data])
+  await Router.push('/home')
+}
+</script>
+<style lang="less" scoped>
+.login {
+  position: relative;
+  height: 100%;
+  background-image: url("../../assets/images/login_bg.webp");
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow: hidden;
+}
+</style>
+```
+
+从该代码中结合前面的项目结构，可以联想到整项目的界面仿佛像是一个卡槽。只要通过功能文件夹下的component的组件进行插入，这样的好处是在后面维护中，可以快速替换某个区域的功能。而index卡槽只需要对后方的状态的