个人网站开发记录(六)三系统前端vite+js+antd

前言

这几天忙着放假(),然后三系统本身其实体量挺小的,所以在写这篇文章的时候我实际上已经开始我的四系统建立了....好吧这些都是题外话,我们先开始吧

正文

因为三系统实际上就只有一个功能,那就是通过手打单词来进行单词的记忆....所以我能讲的其实不是很多,不过还是遇到了一些值得记录的方法的

项目结构

└─ thirdsystem

   ├─ .gitignore

   ├─ .vscode

   │  └─ extensions.json

   ├─ index.html

   ├─ package-lock.json

   ├─ package.json

   ├─ public

   │  └─ vite.svg

   ├─ README.md

   ├─ src

   │  ├─ api

   │  │  └─ getword.js

   │  ├─ App.vue

   │  ├─ assets

   │  │  └─ vue.svg

   │  ├─ components

   │  │  ├─ chosewindow.vue

   │  │  ├─ countpage.vue

   │  │  └─ typePart.vue

   │  ├─ http

   │  │  ├─ newAxios.js

   │  │  └─ request.js

   │  ├─ main.js

   │  ├─ store

   │  │  └─ index.js

   │  ├─ style.css

   │  └─ view

   │     └─ main.vue

   └─ vite.config.js

动态 CSS 类名

说真的这个技术还是挺好用的,就像这样的:

 <div class="logosize" :class="store.state.start ? '' : 'blur'">

用一个vuex的变量来进行样式的变换,这样的话当我想根据某种条件来动态地改变一个元素的类名时，就可以使用这个指令。就像我的代码中，div 的类名 logosize 是固定的，但是类名 blur 则会根据 store.state.start 的值来决定是否应用。如果 store.state.start 是 true，则 blur 类名不会被添加；如果store.state.start 是 false，blur 类名会被添加到这个 div 元素上。这样，你就可以使用 CSS 来定义 blur 类的样式，从而达到当条件发生改变时，动态地改变这个 div 元素的样式。这样就能满足很多情况下的颜色和样式要求.

vue3计算属性的坑

在Vue 3中，计算属性在模板中被自动解包，也就是说在模板中可以直接访问它的值，而不是.ref对象。这就是在模板中可能没有看到.value这个属性，但仍然可以正常工作的原因。然而，在JavaScript或者TypeScript代码中，事情就有所不同了。在这些脚本块中，访问计算属性实际上会返回一个ComputedRef对象。要获取计算属性的值，就必须通过这个ComputedRef对象的.value属性。这是Vue 3的响应性系统的一部分，使得可以追踪和响应计算属性值的变化。换句话说，如果你在模板中，可以直接使用计算属性的名称获取其值，不需要附加.value。但在JavaScript或TypeScript代码块中，你需要使用.value来访问其值。

箭头函数的坑

这个纯属我自己的问题,原先没怎么注意,如果是这样写const getwordApi = (params) => post('http://localhost:5000/getword', params);就是直接返回的,在这个 `getwordApi` 函数中，由于箭头函数后面立即跟随的就是 `post` 方法的调用，所以 `post` 方法的返回值将直接作为 `getwordApi` 函数的返回值。这是箭头函数的简写形式，当箭头函数的函数体只有一条语句，且该语句的结果就是函数的返回值时，可以省略花括号和 `return` 关键字。这本该是很快就能想到的事情毕竟箭头函数是这样的....

服务器部署的坑

其实很简单,除了设置hash模式,还要记得在配置文件里加一个base:/就完事了,不然进入页面会有问题

键盘事件

简单来说就是这个

<div @keyup="handleKeyPress" tabindex="0">
onMounted(() => {
  document.addEventListener("keyup", handleKeyPress);
});
onBeforeUnmount(() => {
  document.removeEventListener("keyup", handleKeyPress);
});

简单来书就是在 HTML 代码中，<div @keyup="handleKeyPress" tabindex="0"> 在这个 div 元素上注册了一个 'keyup' 事件处理器。当用户在这个元素上释放按键时，就会用 handleKeyPress 这个函数。tabindex="0" 是将这个 div 元素设置为可获取焦点的。默认情况下，HTML div 元素是不能获取焦点的，添加 tabindex="0" 之后，这个 div 元素可以通过按 Tab 键来获取焦点。然后在 Vue 代码中:onMounted 是一个生命周期钩子函数，它会在这个 Vue 组件被挂载（即插入到 DOM 中）之后被调用。在这个函数里，我们添加了一个事件监听器 document.addEventListener("keyup", handleKeyPress); 到 document 上。这样，无论焦点在页面中的任何地方，只要用户释放按键，都会调用 handleKeyPress 这个函数。onBeforeUnmount 同样是一个生命周期钩子函数，它会在这个 Vue 组件即将被卸载（从 DOM 移除）前被调用。在这个函数里，我们移除了在 document 上的事件监听器 document.removeEventListener("keyup", handleKeyPress);。这是一个很重要的步骤，因为如果我们不移除这个监听器，即使组件被卸载，这个监听器也仍然会存在，会导致潜在的内存泄露问题。

结语

再接再励,继续肝四系统