零零散散的项目经验

@error处理异常，调用函数

在 Vue 3 中，@error 是用于监听 DOM 元素或组件上的错误事件的一种方式。当绑定的元素或组件发生错误时，可以触发一个回调函数来处理异常。以下是关于 @error 处理异常和调用函数的详细解释和示例。

1. 使用 @error 监听 DOM 元素的错误事件

@error 可以直接绑定到 HTML 元素（如 <img>、<video> 等）上，用于捕获加载失败或其他错误事件。

示例：

<template>
  <div>
    <img :src="imageUrl" @error="handleError" alt="示例图片" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
  methods: {
    handleError(event) {
      console.error('图片加载失败:', event);
      // 可以在这里执行其他逻辑，例如显示默认图片
      event.target.src = 'https://example.com/default.jpg';
    },
  },
};
</script>

2. 使用 @error 监听组件的错误事件

对于 Vue 组件，可以通过 @error 监听子组件抛出的错误事件。

示例：

<template>
  <div>
    <ChildComponent @error="handleError" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleError(error) {
      console.error('子组件发生错误:', error);
      // 可以在这里执行其他逻辑，例如显示错误提示
    },
  },
};
</script>

3. 使用 errorCaptured 生命周期钩子

errorCaptured 是 Vue 3 提供的一个生命周期钩子，用于捕获子组件的错误。它可以在组件内部捕获错误并处理。

示例：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  errorCaptured(err, instance, info) {
    console.error('捕获到子组件错误:', err, info);
    return false; // 返回 false 阻止错误向上传播
  },
};
</script>

4. 全局错误处理

Vue 3 提供了 app.config.errorHandler 配置选项，用于全局捕获未处理的错误。

示例：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error('全局错误捕获:', err, info);
  // 可以在这里记录错误或通知用户
};

app.mount('#app');

5. 异步错误处理

对于异步操作（如 API 请求），可以使用 try...catch 或 Promise.catch 来捕获错误。

示例：

<template>
  <div>
    <button @click="loadData">加载数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async loadData() {
      try {
        const data = await this.fetchData();
        console.log('数据加载成功:', data);
      } catch (error) {
        console.error('数据加载失败:', error);
        // 可以在这里显示用户友好的错误信息
      }
    },
    async fetchData() {
      throw new Error('模拟的网络错误');
    },
  },
};
</script>

6. 使用 ErrorBoundary 组件

ErrorBoundary 是一种封装错误处理的组件模式，用于捕获子组件的错误并显示友好的错误页面。

示例：

<!-- ErrorBoundary.vue -->
<template>
  <div>
    <slot v-if="!hasError"></slot>
    <div v-else>
      <h1>发生错误</h1>
      <p>请刷新页面或稍后再试。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasError: false,
    };
  },
  errorCaptured(err) {
    this.hasError = true;
    return false; // 阻止错误向上传播
  },
};
</script>

使用时：

<template>
  <ErrorBoundary>
    <HeavyComponent />
  </ErrorBoundary>
</template>

<script>
import ErrorBoundary from './ErrorBoundary.vue';
import HeavyComponent from './HeavyComponent.vue';

export default {
  components: { ErrorBoundary, HeavyComponent },
};
</script>

总结

在 Vue 3 中，@error 是一种简单而强大的方式，用于监听和处理 DOM 元素或组件的错误事件。结合 errorCaptured、app.config.errorHandler 和 try...catch 等机制，可以实现从局部到全局的错误处理，确保应用的稳定性和用户体验。

:class动态绑定字样式

:class="{子样式名: 展示该样式的条件}"

 <div class="pagination" v-if="totalPages > 0">
            <button  :disabled="currentPage === 1" @click="prevPage" ><</button>
            <button @click="changePage($event)" :class="{ active: showPage === currentPage || inpval == showPage}">{{ showPage }}</button>
            <button @click="changePage($event)" v-if="showPage + 1 <= totalPages"
                :class="{ active: currentPage === showPage + 1 || inpval == showPage+1}">{{ showPage + 1 }}</button>
            <button @click="changePage($event)" v-if="showPage + 2 <= totalPages"
                :class="{ active: currentPage === showPage + 2 || inpval == showPage+2}">{{ showPage + 2 }}</button>
            <button @click="changePage($event)" v-if="showPage + 3 <= totalPages"
                :class="{ active: currentPage === showPage + 3 || inpval == showPage+3}">{{ showPage + 3 }}</button>
            <!-- <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span> -->
            <button  :disabled="currentPage === totalPages" @click="nextPage">></button>
            <div> 
              <input type="text" style="width: 60px; " v-model="inpvals"> <button @click="gotoPage">Go</button>
            </div>
        </div>

然后样式部分

/* 添加一个简单的 active 状态样式 */
button.active {
    background-color: #6eb9fb;
    /* 绿色背景 */
    color: white;
    /* 白色文字 */
}

v-if 的巧用

app.vue文件中，在各个路由中，只有当不是登录注册页面时才展示侧边栏

<template>
  <div class="app-container">
    <!-- 只在非登录/注册/找回密码页面显示侧边栏 -->
    <Sidebar v-if="shouldShowSidebar()" />
    
    <div class="main-content" :class="{ 'with-sidebar': shouldShowSidebar() }">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>
<script>
// 判断当前路由是否需要显示侧边栏
const shouldShowSidebar = () => {
  const publicRoutes = ['Login', 'Register', 'ForgotPassword'];
  return !publicRoutes.includes(router.currentRoute.value.name as string);
};</script>

flex :1

展示侧边栏后剩余空间才是给各个路由对应文件用的

这样才能正确展示除了侧边栏之外的内容

.main-content {
  flex: 1;
  overflow-y: auto;
  transition: all 0.3s ease;
}

flex: 1; 是 CSS flex 布局中一个简写的样式属性，主要用来定义子元素在容器中的伸缩行为。以下是关于它的详细解释和用法示例。

flex 属性的定义

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，分别定义元素在弹性容器中的增长、收缩和基准大小。

• flex-grow：定义子元素如何分配弹性容器中的多余空间。值为数字，默认 0（不增长）。值越大，增长越快。
• flex-shrink：定义子元素如何缩小以适应弹性容器中的空间不足。值为数字，默认 1（允许缩小）。值越大，缩小越多。
• flex-basis：定义子元素在主轴方向上的初始大小（基础大小）。默认值为 auto，指的是根据内容自动调整大小。

flex: 1; 的含义

flex: 1; 是一个简写，相当于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

也就是说，flex: 1; 表示：

1. 子元素将占据弹性容器中所有可用空间（flex-grow: 1），并且
2. 子元素可以被缩小（flex-shrink: 1），
3. 其初始大小为基础大小 0（flex-basis: 0）。

示例

假设有一个弹性的容器（display: flex;），里面有多个子元素：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

样式

.container {
  display: flex;
  width: 100%;
  border: 1px solid #ccc;
}

.item {
  flex: 1;
  border: 1px solid #666;
  padding: 20px;
  text-align: center;
}

效果

• 父容器宽度为 100%：整个容器占据父级的宽度。
• 三个子元素（Item 1、Item 2、Item 3）会平分父容器的可用空间：
  • 每个子元素的宽度为 100% / 3 ≈ 33.33%。
  • 所有子元素的高度会自动调整以适应父容器的高度（如果父容器没有固定高度，子元素的高度会根据内容自动调整）。

间距和内容对齐

如果子元素内容较短，flex: 1; 会使它们在横向方向上平分空间。如果内容较长，flex-shrink: 1; 会使它们适当缩小以适应容器宽度。

其他情况

假设父容器宽度为 600px，子元素中有两个：

<div class="container">
  <div class="item">Item A</div>
  <div class="item">Item B</div>
</div>

样式：

.item {
  flex: 1;
}

结果：

• Item A 和 Item B 各占据 300px 的宽度（平分 600px 的父容器宽度）。

小结

flex: 1; 是一种简单而强大的布局方式，适用于需要子元素平分容器空间的场景。通过调整 flex-grow 和 flex-basis，可以实现更复杂的布局效果。

去除按钮焦点边框

在点击按钮之后，由于焦点在按钮上，可以利用css去除按钮焦点边框

在style.css文件中定义全局的按钮样式

button:focus {
    //去除焦点边框
  outline: none; 
}

隐藏侧边栏滚动条

*{
  /* 隐藏侧边栏的滚动条 */
  scrollbar-width: none;
}

组件之间传参数

假设我现在在组件ModleFile，我现在点击按钮之后会跳转到另外一个组件并将筛选器的条件应用到另外一个组件，那么在ModleFile 文件中应该这样写：

在路由跳转的时候带上query参数，这个参数是一个对象

// 跳转到文件管理页面并应用筛选条件
        const goToFileManage = (template: TemplateFile) => {
            router.push({
                path: '/filemanage',
                query: {
                    name: template.name,
                    author: template.createdBy,
                    date: template.modifyDatetime,
                }
            });
        };

那么在另外一个文件中应该在组件挂载的时候就检查route路由器里面的参数，如果有就对应赋值到对应的筛选栏

        // 检查URL参数，如果有则应用筛选条件
        onMounted(() => {
            const queryId = route.query.id as string;
            const queryName = route.query.name as string;
            const queryAuthor = route.query.author as string;
            const queryCategory = route.query.category as string;
            const queryModifyDate = route.query.modifyDate as string;

            if (queryId) filters.value.id = queryId;
            if (queryName) filters.value.templateName = queryName;
            if (queryAuthor) filters.value.author = queryAuthor;
            if (queryCategory) filters.value.category = queryCategory;
            if (queryModifyDate) filters.value.modifyDate = queryModifyDate;            
        });

接口定义来ref类型

比如有这么一个类型接口

// 用户信息接口
export interface UserInfo{
  id: number,
  username:string,
  email:string,
  organization:string,
  avatarUrl:string
}

我们现在想要定义一个可变的ref类型变量，应用上这个类型接口，，那么应该这样写：

const userInfo = ref<UserInfo>({
    id: 21233,
    username: '张伟',
    email: 'doctor@126.com',
    organization: '技术部',
    avatarUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.JCEcaQJVR_vC2kgt6BGZlAAAAA?rs=1&pid=ImgDetMain"
});

时间戳处理

后端传来的时间是数字类型的时间戳，自然前端要定义函数去处理

export default function (timestamp: number): string{
    // 创建 Date 对象
    const date = new Date(timestamp);

    // 获取年月日
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // getMonth() 返回 0-11，需要加 1
    const day = date.getDate();

    // 获取小时和分钟
    const hours = date.getHours();
    const minutes = date.getMinutes();

    // 判断是 AM 还是 PM
    const ampm = hours >= 12 ? 'PM' : 'AM';

    // 将小时转换为 12 小时制
    const hours12 = hours % 12 || 12; // 如果是 0 点，显示为 12 AM

    // 格式化分钟，确保是两位数
    const formattedMinutes = minutes.toString().padStart(2, '0');

    // 返回格式化的字符串
    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours12}:${formattedMinutes} ${ampm}`;
};

然后在对应的组件页面引入这个工具函数

import formatDate from "../tools/formatDate";

同时通过spilt进行自定义展示

<td>{{ formatDate(template.updateTime).split(" ")[0] }}
                            <div style="font-size: smaller; color: gray;">{{ formatDate(template.updateTime).split(" ")[1]}} {{ formatDate(template.updateTime).split(" ")[2]}} 
                            </div>
</td>

文件上传

在Vue3项目中实现文件上传到后端，并且前端需要同时传递userId，可以按照以下步骤进行：

1. 页面构建

使用<input type="file">标签创建文件选择器，供用户选择要上传的文件。同时，确保你有获取userId的逻辑（例如从Vuex、Pinia状态管理中获取，或者从API响应中获取）。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

2. 文件选择与处理

监听文件选择事件，获取用户选择的文件。同时，获取userId并将其与文件一起封装到FormData对象中。

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const selectedFile = ref(null);
const userId = ref('12345'); // 假设从某个地方获取到的 userId

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    selectedFile.value = file;
  }
};
</script>

3. 文件上传逻辑

使用HTTP客户端（如axios）将封装好的文件数据和userId发送到后端API。设置请求头为multipart/form-data，以确保文件能正确上传。

const uploadFile = async () => {
  if (!selectedFile.value) return;

  const formData = new FormData();
  formData.append('file', selectedFile.value);
  formData.append('userId', userId.value); // 将 userId 添加到 formData 中

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

4. 与后端交互

确保后端API能够接收multipart/form-data格式的请求，并正确处理上传的文件和userId。例如，使用Express和multer中间件来处理文件上传。

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send({ error: '请上传一个文件' });
  }
  const userId = req.body.userId; // 获取 userId
  console.log('上传的文件:', req.file);
  console.log('用户ID:', userId);
  res.send({ url: req.file.path, filename: req.file.originalname, userId });
});

5. 注意事项

• 文件格式与大小限制：在前端对文件进行校验，限制上传的文件格式和大小，提升用户体验。
• 上传进度显示：利用axios的onUploadProgress方法，向用户展示上传进度。
• 错误处理：对上传过程中可能出现的错误进行处理，如网络问题、服务器错误等，及时向用户反馈。

扩展功能

• 多文件上传：如果需要支持多文件上传，可以将<input type="file">的multiple属性设置为true，并在handleFileChange中处理多个文件。
• 文件预览：在上传之前，可以使用URL.createObjectURL(file)方法对文件进行预览。
• 取消上传：如果需要支持取消上传功能，可以使用axios的CancelToken。

通过以上步骤，就可以在Vue3项目中实现文件上传到后端，并同时传递userId的功能。

overflow: hidden;

在制作类似点击产生下拉框的效果时，千万不能将外部子容器设置成这个属性

这是源代码：

<td class="action-cell">
                            <div class="act">
                                <button class="action-btn" @click="toggleActionMenu(template.id)">
                                    <span>详情</span>
                                    <i class="dropdown-icon">▼</i>
                                </button>
                                <div class="action-menu" v-if="showActionMenu === template.id">
                                    <div class="action-item" @click="viewFileDetails(template.id)">
                                        <i class="view-icon"></i>
                                        <span>查看</span>
                                    </div>
                                    <div class="action-item" @click="downloadFile(template.id)">
                                        <i class="download-icon"></i>
                                        <span>下载</span>
                                    </div>
                                    <div class="action-item delete" @click="renameFile(template.id)">
                                        <i class="delete-icon"></i>
                                        <span>重命名</span>
                                    </div>
                                    <div class="action-item delete" @click="deleteFile(template.id)">
                                        <i class="delete-icon"></i>
                                        <span>删除</span>
                                    </div>
                                </div>
                            </div>
                        </td>

overflow: hidden; 是一个 CSS 属性，用于控制元素内容超出其容器时的行为。当元素的内容超出其容器的宽度或高度时，overflow: hidden; 会隐藏超出的部分。

在你的场景中，如果父元素（td）设置了 overflow: hidden;，那么子元素（div）即使使用了 position: absolute; 或 position: fixed;，也可能被裁剪掉超出父元素的部分。

解决方案：

要让子元素（div）覆盖父元素（td）并且不受 overflow: hidden; 的限制，可以通过以下方法：

方法 1：移除父元素的 overflow: hidden;

最直接的解决方案是移除父元素（td）上的 overflow: hidden; 样式。这样子元素（div）就可以正常显示，而不会被裁剪。

<table>
  <tr>
    <td id="parent">
      这是父元素（td）
      <div id="child">这是子元素（div）</div>
    </td>
  </tr>
</table>

#parent {
  position: relative; /* 创建定位上下文 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
  /* overflow: hidden; */ /* 移除这一行 */
}

#child {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 240px;
  height: 120px;
  background-color: red;
  z-index: 1;
}

方法 2：调整子元素的定位

如果无法移除父元素的 overflow: hidden;，可以通过调整子元素的定位，使其相对于页面根元素定位，而不是相对于父元素。

#parent {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden; /* 父元素仍然有 overflow: hidden */
}

#child {
  position: fixed; /* 使用 fixed 定位 */
  top: 0; /* 相对于页面顶部 */
  left: 0; /* 相对于页面左侧 */
  width: 240px;
  height: 120px;
  background-color: red;
  z-index: 1;
}

方法 3：使用负的 margin

如果子元素的内容被裁剪，可以通过负的 margin 将其部分移出父元素的范围。

#parent {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}

#child {
  margin-top: -20px; /* 向上移动 */
  margin-left: -20px; /* 向左移动 */
  width: 240px;
  height: 120px;
  background-color: red;
  z-index: 1;
}

总结

• 如果可以移除父元素的 overflow: hidden;，这是最简单的解决方案。
• 如果不能移除，可以使用 position: fixed; 或负的 margin 来调整子元素的位置，使其显示在父元素之外。

动态样式

盒子样式要多用align-items、justify-content和text-align以及display:flex

关于CSS布局三剑客的用法，我们可以用一场「元素排列舞会」的比喻来理解它们的分工：

1. align-items：垂直方向的领舞者

角色：控制舞池（flex容器）中所有舞者（子元素）在侧轴（垂直方向）的队形
舞步示例：

• center：所有人保持垂直中线对齐（集体站军姿）
• flex-start：集体紧贴天花板（瑜伽倒立式）
• flex-end：集体蹲在舞台底部（谢幕鞠躬式）
• stretch：全员拉伸到同高度（芭蕾踮脚式）
  经典场景：
  当需要让导航栏的LOGO和菜单项垂直居中时，就像让不同身高的舞者踩着隐形台阶达到统一高度：

.nav-bar {
  display: flex;
  align-items: center; /* 垂直居中魔法 */
}

2. justify-content：水平队列指挥官

角色：编排舞者们在主轴（水平方向）的分布方式
战术手势：

• center：向中看齐（国庆阅兵方阵）
• space-between：头尾贴边，中间等距（地铁早高峰排队）
• space-around：每人自带等距气泡（超市货架陈列）
• flex-end：向右看齐（候车室排队检票）
  实战案例：
  实现电商网站的卡片等间距排列，就像把商品在货架上均匀铺开：

.product-grid {
  display: flex;
  justify-content: space-around; /* 呼吸感布局 */
}

3. text-align：文字排版指挥家

角色：指挥文本乐符在五线谱（块级元素）中的水平位置
指挥棒动作：

• left：左起奏鸣曲（西方文本默认序章）
• right：右起进行曲（阿拉伯语系篇章）
• center：中央C大调（诗歌标题华彩段）
• justify：两端对齐赋格曲（报纸专栏严谨排版）
  经典乐章：
  让博客正文呈现优雅的两端对齐效果，如同印刷书籍的精致排版：

.article-content {
  text-align: justify; /* 学术论文级排版 */
}

🌟 组合技演示

场景：制作一个垂直水平居中且文字居中的按钮

/* 外层flex双居中 */
.modal-box {
  display: flex;
  align-items: center;     /* 垂直领舞 */
  justify-content: center; /* 水平指挥 */
  height: 300px;
}

/* 内部文字居中 */
.confirm-btn {
  text-align: center;     /* 文字指挥家 */
  padding: 1rem 2rem;
}

这就像让按钮在舞台中央聚光灯下完成360度完美亮相，内外三层对齐系统各司其职

🧭 属性定位指南

⚠️ 常见踩坑点

1. 混淆主轴方向：flex容器的默认主轴是水平方向，但flex-direction: column会让主轴变垂直，此时justify-content控制垂直排列，align-items控制水平排列
2. 多行布局失效：align-items只对单行flex项目生效，多行布局需要用align-content
3. 图片对齐陷阱：给<img>设置text-align无效，需改用flex布局或margin: 0 auto

这三个属性就像CSS布局世界的XYZ三轴坐标系，掌握它们的配合使用，就能让元素在三维空间跳出优雅的排列之舞💃

axios拦截器

个人总结

个人写的

拦截器本质上就是，你自定义一个axios对象（这里是axiosService），在每次发送axios请求的时候对请求进行加工，一般是加上token，同时对于请求的响应状态进行错误处理，比如转到401的专门页面什么的

import axios from "axios";
import host from "../config/hostname";

// 在拦截器中使用时显式传递
const hostname = host();


// 创建独立Axios实例[7,10](@ref)
const service = axios.create({
    baseURL: hostname, 
    timeout: 15000,
});

// ==================== 请求拦截器 ====================
service.interceptors.request.use(
    config => {
        const url = config.url;
        if (sessionStorage.getItem("accessToken") && url?.indexOf("renewal") === -1) {
            try {
                const token = JSON.parse(sessionStorage.getItem("accessToken")!);
                config.headers["Authorization"] = `Bearer ${token}`; 
            } catch (e) {
                console.error("Token解析失败:", e);
                sessionStorage.removeItem("accessToken");
            }
        }
        return config;
    },
    error => Promise.reject(error)
);

// ==================== Token刷新机制 ==================== 
const userIds = localStorage.getItem("userinfo")
async function getNewToken() {
    try {
        if (userIds) {
            const refreshToken = JSON.parse(sessionStorage.getItem("refreshToken")!);
            return await service.post("/auth/token/renewal",
                { id: JSON.parse(userIds) },
                {
                    headers: {
                        accessToken: refreshToken, // 修正header字段拼写
                        isRefresh: true
                    }
                }
            );
        }

    } catch (error) {
        console.error("刷新Token失败:", error);
        throw error;
    }
}

// ==================== 响应拦截器 ====================
service.interceptors.response.use(  
    async response => {
        
        if (response.status === 401 && !response.config.headers.isRefresh) {
            try {
                const res = await getNewToken();
                if (res && res.data && res.data.code === 200 && res.data.data && res.data.data.status) {
                    sessionStorage.setItem("accessToken", JSON.stringify(res.data.data.accessToken));

                    // Retry the original request
                    return service({
                        ...response.config,
                        headers: {
                            ...response.config.headers,
                            Authorization: `Bearer ${res.data.data.accessToken}`
                        }
                    });
                }

            } catch (error) {
                window.location.href = "/login";
                return Promise.reject(error);
            }
        }
        return response.data;
    },
    error => {
        if (error.response?.status === 404) {
            console.error("资源未找到:", error.config.url);
            // router.push("/404");  // 建议使用vue-router跳转[4](@ref)
        }
        return Promise.reject(error);
    }
);

export default service; // 添加默认导出[5,10](@ref)

然后如果要使用，就直接导入就行，就不要用axios发请求了而是用你自定义的axiosService发请求

import axiosService from '../../utils/axios-test' // 导入配置好的axios实例

const response = await axiosService.post(hostname + '/api/login', {  
          email: email,
          password: password,
        });

还有就是=要注意的点是如果你自己的请求就带有请求头，会产生覆盖，记得带上token

同时要注意，拦截器不要去拦截refreshToken的那个请求，因为那时候的accessToken已经过期，不能再带着她请求了，要将原有的accessToken换成refreshToken在请求头里面。

同时注意，自定义的service已经拼接了 baseURL为hostname,后续直接拿service请求，不需要拼接请求的基地址。

const service = axios.create({
    baseURL: hostname, 
    timeout: 15000,
});

• baseURL:
  • 类型：string
  • 作用：为请求设置基础 URL。当使用该实例发送请求时，baseURL 会自动附加到请求的相对路径前面，形成完整的请求地址。
  • 示例：如果 baseURL 是 "https://api.example.com"，而请求路径是 "/users"，那么实际请求的地址会是 "https://api.example.com/users"。
• timeout:
  • 类型：number
  • 作用：设置请求的超时时间（单位：毫秒）。如果请求在规定时间内没有完成，Axios 会中断请求并抛出超时错误。
  • 示例：timeout: 15000 表示请求最多等待 15 秒，超过这个时间就会触发超时。

AI分析

一、拦截器架构解析

// 请求拦截器（所有axios请求生效）
axios.interceptors.request.use(
  config => { // 类型推断为AxiosRequestConfig
    // 此处可添加认证令牌
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; // 
    return config;
  },
  error => { // 类型为AxiosError
    return Promise.reject(error); // 必须抛出错误
  }
)

// 响应拦截器（所有axios响应生效）
axios.interceptors.response.use(
  response => { // 类型为AxiosResponse
    // 数据脱壳处理（根据后端数据结构调整）
    return response.data.payload; // 
  },
  error => {
    // 统一错误处理（网络错误/业务错误）
    handleError(error.response?.status); // 
    return Promise.reject(error); 
  }
)

二、TypeScript强化实践

1. 类型增强声明（参考网页2/网页7）：

declare module 'axios' {
  interface AxiosRequestConfig {
    silent?: boolean;  // 禁用全局Loading提示
    retryCount?: number; // 自动重试次数
  }
  
  interface AxiosResponse<T = any> {
    traceId: string; // 链路追踪ID
  }
}

2. 多拦截器执行顺序（参考网页8）：

// 请求拦截器执行顺序：后添加的先执行
axios.interceptors.request.use(config => {
  console.log('拦截器2'); // 最后执行
  return config;
});

axios.interceptors.request.use(config => {
  console.log('拦截器1'); // 最先执行
  return config;
});

// 响应拦截器执行顺序：先添加的先执行
axios.interceptors.response.use(res => {
  console.log('响应1'); // 先处理
  return res;
});

axios.interceptors.response.use(res => {
  console.log('响应2'); // 后处理
  return res;
});

三、企业级功能扩展

1. 请求签名（参考网页7）：

config => {
  const timestamp = Date.now();
  config.headers['X-Sign'] = createSign({
    url: config.url,
    method: config.method,
    timestamp
  });
  return config;
}

2. 性能监控（参考网页9）：

const startTime = Date.now();
return response => {
  const latency = Date.now() - startTime;
  trackPerformance({
    url: response.config.url,
    latency,
    status: response.status
  });
  return response;
}

3. 自动重试机制（参考网页5）：

error => {
  const config = error.config;
  if(!config.retryCount) config.retryCount = 0;
  
  if(config.retryCount < 3 && error.code === 'ECONNABORTED') {
    config.retryCount++;
    return axios(config); // 自动重试
  }
  return Promise.reject(error);
}

四、开发注意事项

1. 配置污染问题
   避免直接修改原始config对象，建议使用扩展运算符：

   return { 
     ...config,
     headers: { ...config.headers, 'X-Trace': uuid() }
   }
   

2. 异步操作处理
   使用async/await处理异步逻辑时需保持链式调用：

   service.interceptors.request.use(async config => {
     const token = await refreshToken();
     config.headers.Authorization = token;
     return config;
   });
   

3. 类型安全校验
   通过泛型强化响应数据类型：

   interface ApiResponse<T> {
     code: number;
     data: T;
     message: string;
   }
   
   axios.interceptors.response.use(
     (response: AxiosResponse<ApiResponse<any>>) => {
       if(response.data.code !== 200) throw new Error(response.data.message);
       return response.data.data;
     }
   )
   

建议结合Vue3的Composition API封装成可复用的Hook，并通过单元测试验证拦截器逻辑的健壮性。具体项目示例可参考网页7中Auth类的实现，实现Token的自动化管理。

一、拦截器基础架构

1. 全局拦截器写法

// 请求拦截器（所有axios请求生效）
axios.interceptors.request.use(
  config => {
    // 发送请求前的处理逻辑
    return config // 必须返回修改后的配置
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器（所有axios响应生效）
axios.interceptors.response.use(
  response => {
    // 处理响应数据（2xx状态码）
    return response 
  },
  error => {
    // 处理错误响应（非2xx状态码）
    return Promise.reject(error)
  }
)

引用示例：网页1、网页3、网页5均展示了基础拦截器结构

二、企业级封装方案

1. 创建自定义实例（推荐）

const service = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  headers: {'Content-Type': 'application/json'}
})

2. 实例专属拦截器

// 请求拦截器
service.interceptors.request.use(config => {
  // 添加认证token（典型场景）
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() 
  }
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 统一处理业务错误码（如401跳登录）
    if (res.code !== 200) {
      showErrorMessage(res.msg)
      return Promise.reject(new Error(res.msg))
    }
    return res.data // 数据脱壳
  },
  error => {
    // 处理HTTP状态码错误
    handleHttpError(error.response.status)
    return Promise.reject(error)
  }
)

最佳实践参考：网页5的权限验证方案和网页3的实例封装

三、六大核心应用场景

1. 认证令牌注入
   自动添加JWT到请求头，避免手动传token

2. 请求参数预处理
   序列化参数、添加时间戳等公共参数

3. 全局Loading状态
   通过拦截器统一管理请求加载提示

4. 响应数据格式化
   提取嵌套数据（如response.data.data -> data）

5. 错误统一处理
   根据状态码显示对应错误提示（401跳登录/500显示服务异常）

6. 性能监控
   记录请求耗时，优化慢接口

四、高级使用技巧

1. 拦截器执行顺序

// 添加顺序决定执行顺序
axios.interceptors.request.use(config => {
  console.log('第一个请求拦截器')
  return config
})

axios.interceptors.request.use(config => {
  console.log('第二个请求拦截器') 
  return config
})

2. 动态移除拦截器

const myInterceptor = axios.interceptors.request.use(...)
axios.interceptors.request.eject(myInterceptor) // 移除

参考网页3的拦截器管理方案

3. 多实例隔离

const api1 = axios.create({/* 配置A */})
const api2 = axios.create({/* 配置B */})

// 各实例独立维护拦截器
api1.interceptors.request.use(...)
api2.interceptors.response.use(...) 

五、开发注意事项

1. 配置必须返回
   请求拦截器中忘记return config会导致请求卡死

2. 避免循环调用
   在拦截器内调用axios可能造成死循环

3. 异步处理
   需要异步操作时使用async/await：

   service.interceptors.request.use(async config => {
     config.headers.token = await getTokenAsync()
     return config
   })
   

4. 错误传播
   响应拦截器中需要将错误继续抛出，否则.catch无法捕获

六、TypeScript强化（进阶）

declare module 'axios' {
  interface AxiosRequestConfig {
    silent?: boolean // 自定义配置项
  }
}

// 使用增强类型
service.interceptors.request.use(config => {
  if (!config.silent) {
    showLoading()
  }
  return config
})

通过合理使用拦截器，可减少30%以上的重复代码量。建议结合Vuex/Pinia进行状态管理，实现更优雅的全局请求控制。具体项目示例可参考网页5的权限管理方案。

双Token验证技术

一、双Token的诞生：临时工牌与长期签证

[场景]
想象你进入一家高科技园区：
• Access Token 是 临时工牌（有效期2小时），每次进出闸机都要刷卡验证
• Refresh Token 是 长期签证（有效期7天），用于在工牌过期时快速补办新工牌

[实现步骤]

// 登录接口返回示例
interface TokenPair {
  accessToken: string     // 门禁卡（易碎品）
  refreshToken: string    // 园区通行证（保险柜存放）
  expiresIn: number       // 2小时后需更新
}

二、令牌存储：保险柜与随身包

[安全策略]
• Access Token 存内存或sessionStorage（类似随身包，方便取用但易丢失）
• Refresh Token 存HttpOnly Cookie（类似保险柜，防XSS盗窃）

[代码示例]

// 安全存储工具类
const storeTokens = (tokens: TokenPair) => {
  sessionStorage.setItem('accessToken', tokens.accessToken) // 随身携带
  document.cookie = `refreshToken=${tokens.refreshToken}; Path=/; Secure` // 保险柜
}

三、请求拦截：智能闸机系统

[工作流程]

1. 正常通行：每次请求自动携带Access Token
2. 过期检测：当闸机提示"工牌失效"（401错误）
3. 自动续期：用Refresh Token呼叫园区服务中心换新工牌

[axios拦截器实现]

// 请求拦截器 - 自动佩戴工牌
service.interceptors.request.use(config => {
  if (!isRefreshRequest(config.url)) { // 排除刷新Token的请求
    config.headers.Authorization = `Bearer ${getAccessToken()}` 
  }
  return config
})

// 响应拦截器 - 智能续期
service.interceptors.response.use(null, async error => {
  if (error.response?.status === 401 && !error.config._retry) {
    error.config._retry = true
    const newTokens = await refreshToken() // 调用刷新接口
    resetAuthHeader(newTokens.accessToken) // 更新请求头
    return service(error.config) // 重新发送原请求
  }
  return Promise.reject(error)
})

四、无感刷新：隐形维修工

[幕后机制]
• 请求队列：当多个请求同时发现Token过期，首个请求触发刷新，其他请求排队等候新Token
• 静默刷新：在用户无感知时完成续期，避免操作中断（如同电梯维修不影响使用）

[代码逻辑]

let isRefreshing = false // 刷新状态锁
const queue: ((token: string) => void)[] = [] // 等待队列

const addToQueue = (resolve: (value: unknown) => void) => {
  queue.push((newToken: string) => {
    resolve(service.request({ ...originalConfig, headers: { Authorization: `Bearer ${newToken}` } }))
  })
}

五、安全防线：多层安保系统

1. 加密存储：用AES加密Token，如同给保险箱上密码锁
2. 设备指纹：绑定设备特征，防止令牌异地使用
3. 黑名单机制：服务端记录已注销的Refresh Token，如同挂失的护照

[安全增强示例]

// 生成设备指纹
const generateFingerprint = () => {
  return navigator.userAgent + screen.width + screen.colorDepth // 组合设备特征
}

// 请求携带指纹
service.interceptors.request.use(config => {
  config.headers['X-DeviceID'] = deviceFingerprint
  return config
})

六、异常处理：应急预案手册

1. 双Token同时过期：跳转登录页，如同园区全面安检
2. 刷新失败：清除本地存储，提示重新登录
3. 高频刷新报警：监控异常请求，防御恶意攻击

[路由守卫示例]

// 页面访问拦截
router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    try {
      await silentRefresh() // 尝试静默刷新
      return true
    } catch {
      return { path: '/login', query: { redirect: to.path } }
    }
  }
})

技术选型建议：
• 有效期设置：Access Token（15-30分钟），Refresh Token（7-30天）
• 加密库推荐：crypto-js用于前端加密，jsonwebtoken用于服务端签发
• 监控指标：记录Token刷新频率、异常设备请求等安全日志

通过这套机制，用户就像在拥有隐形安保的智能园区中畅行无阻——既享受无缝体验，又获得银行级安全防护。

Vue暴露在局域网

很简单，启动项目的时候利用这个启动就行

 npm run dev -- --host 0.0.0.0

控制台会显示多个网址，那是正常 的

原因

Vue3（基于Vite）在运行项目时显示多个内网IP地址，主要与开发服务器的网络接口绑定策略和本地网络环境有关。以下是具体原因及解析：

一、Vite开发服务器的默认配置特性

1. 监听所有网络接口
   当在vite.config.ts中设置server.host: '0.0.0.0'或通过npm run dev --host 0.0.0.0启动时，Vite开发服务器会绑定到所有活跃的网络接口（包括物理网卡、虚拟网卡等），而不仅仅是本地回环地址localhost。这会使得服务器主动扫描并列出当前设备上所有可用的内网IP地址。

2. 多网络适配器的存在
   如果设备存在多个网络适配器（如Wi-Fi、有线网卡、虚拟机网卡、Docker虚拟网桥等），每个适配器可能分配了不同的内网IP。例如： • 192.168.x.x：通常是路由器分配的局域网IP。 • 169.254.x.x：链路本地地址（无DHCP时自动生成）。 • 26.x.x.x：可能属于NAT或特殊虚拟网络环境。

二、本地网络环境的影响

1. 虚拟化软件或容器
   若安装了VMware、VirtualBox、Docker等工具，它们会创建虚拟网卡并分配独立的IP（如192.168.56.1可能来自VirtualBox的Host-Only网络）。这些虚拟接口会被Vite识别并显示为可访问地址。

2. 多网络连接场景
   设备同时连接多个网络（如Wi-Fi和有线网络、手机热点等），每个网络会分配不同的内网IP，导致Vite列出多个Network地址。

3. 操作系统网络服务
   Windows的“网络共享”或macOS的“互联网共享”功能可能激活额外的虚拟接口，进一步增加IP地址数量。

三、技术实现原理

Vite底层基于Node.js的http模块创建服务器。当设置host: '0.0.0.0'时，Node.js会监听所有IPv4接口，并通过os.networkInterfaces()方法获取所有网络接口的IP信息，最终在控制台输出这些地址。

四、如何控制显示的IP数量

1. 指定单一IP
   修改vite.config.ts，将host设置为特定IP（如192.168.1.104），而非0.0.0.0：

   // vite.config.ts
   export default defineConfig({
     server: {
       host: '192.168.1.104', // 仅监听指定IP
     },
   });
   

2. 过滤虚拟网络接口
   关闭不必要的虚拟网卡（如禁用VMware虚拟网络适配器）或调整网络优先级，减少活跃接口数量。

3. 忽略部分IP段
   通过脚本过滤输出（非Vite原生支持，需自定义中间件）。

总结

Vue3/Vite显示多个内网IP是正常现象，反映了服务器对所有可用网络接口的监听行为。这种现象在需要多设备联调时非常实用，但也可能因虚拟网络环境导致冗余地址。用户可通过配置或网络设置灵活控制IP的生成与展示。

控制网站文本是否可以被用户鼠标选中

嗯，用户问的是如何让整个页面的文字不能被鼠标选中。首先，我需要回想一下CSS中有哪些属性可以实现这个效果。记得有一个user-select属性，可以控制用户是否能够选择文本。对的，这个属性设置成none的话，应该就能阻止文本被选中了。

接下来，我需要考虑兼容性问题。不同的浏览器可能需要不同的前缀，比如-webkit-、-moz-、-ms-这些。虽然现在大多数现代浏览器都支持标准的user-select，但为了兼容旧版本，加上前缀会更稳妥。

然后，用户可能是在做一个需要防止复制内容的网站，比如某些教育平台或者付费内容，防止用户随意复制。不过也有可能他们只是想要提升用户体验，避免误选。这时候可能需要提醒用户，完全禁止选择可能会影响用户体验，比如无法复制有用的信息，或者影响辅助功能。

另外，可能需要提到如何针对特定元素允许选择，比如使用user-select: text，这样可以在全局禁止的情况下，局部允许选择。这会让解决方案更灵活。

还有，JavaScript的方法，比如在onselectstart事件中返回false，或者在mousedown事件中阻止默认行为。不过CSS方法更简洁高效，应该作为首选方案。

需要注意的是，这些方法并不能完全防止用户复制内容，因为用户仍然可以通过开发者工具或者禁用CSS来获取文本。所以如果内容非常敏感，可能需要其他保护措施，比如服务器端处理或者水印等。

总结一下，我应该分步骤说明如何使用CSS的user-select属性，包括各个浏览器前缀，以及可能的注意事项，比如兼容性和用户体验的影响。同时，提到JavaScript的方法作为补充，但强调CSS是更好的选择。

要实现整个页面文字不能被鼠标选中，可以通过CSS的user-select属性实现。以下是具体实现方法和注意事项：

一、基础实现方案

/* 全局禁用文本选择 */
* {
  -webkit-user-select: none;  /* Chrome/Safari/Edge */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE10+ */
  user-select: none;          /* 标准语法 */
}

二、精确控制方案（推荐）

/* 禁止全选但仍允许部分元素可选 */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许特定元素可选 */
.allow-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

三、JavaScript补充方案

// 阻止默认选择行为
document.addEventListener('selectstart', function(e) {
  e.preventDefault();
});

// 或阻止鼠标按下事件
document.addEventListener('mousedown', function(e) {
  if (e.button === 0) { // 仅阻止左键
    e.preventDefault();
  }
});

四、注意事项

1. 兼容性： • 现代浏览器（Chrome 54+、Firefox 69+）支持标准语法 • 需要前缀兼容旧版浏览器

2. 功能限制： • 无法阻止右键"查看页面源代码" • 无法阻止开发者工具直接读取DOM内容 • 无法阻止屏幕截图软件获取文字

3. 辅助功能影响： • 可能违反WCAG可访问性标准 • 对屏幕阅读器用户不友好

五、最佳实践建议

1. 局部禁用：仅在需要保护的内容区域使用

   .protected-content {
     user-select: none;
     cursor: default;
   }
   

2. 图像替代方案：对重要文本内容转为图片+alt描述

   <img src="protected-text.png" alt="版权保护文本内容">
   

3. 动态控制：允许临时选择

   // 按住Ctrl键时允许选择
   let isCtrlPressed = false;
   
   document.addEventListener('keydown', (e) => {
     if (e.ctrlKey) isCtrlPressed = true;
   });
   
   document.addEventListener('keyup', () => {
     isCtrlPressed = false;
   });
   
   document.styleSheets[0].addRule('*', 
     `user-select: ${isCtrlPressed ? 'text' : 'none'} !important`);
   

六、效果验证方法

1. 尝试用鼠标拖动选择文本
2. 使用快捷键Ctrl+A（Windows）或Cmd+A（Mac）
3. 右键检查是否出现复制选项
4. 在移动设备上测试长按选择

头像上传单机版

一般的头像上传正常是要向后端请求，后端更新好数据后前端再次对获取头像的接口进行请求，并更新数据。

当然，我也可以利用

avatarPreview.value = URL.createObjectURL(file);

来为你本地上传的文件创建一个临时的链接，根据这个链接去更新localStorage里面的内容就行。

event会监听文件的上传，利用 const file = (event.target as HTMLInputElement).files?.[0];获取用户选中的文件对象

// 处理文件选择
const handleFileSelect = (event: Event) => {
    const file = (event.target as HTMLInputElement).files?.[0];
    // console.log(file);
    if (file) {
        selectedFile.value = file;
        //对上传的文件创建临时的链接
        avatarPreview.value = URL.createObjectURL(file);
        console.log(avatarPreview.value);
    }
};

// 上传头像
const uploadAvatar = async () => {
    if (!selectedFile.value) return;

    const formData = new FormData();
    formData.append('multipartFile', selectedFile.value);

    //单机测试
    if (avatarPreview.value && userStore.$state.userInfo?.avatarUrl) {
        // console.log("fdsfsdfsd")
        userStore.$state.userInfo.avatarUrl = avatarPreview.value;
        localStorage.setItem('userInfo', JSON.stringify(userStore.$state.userInfo))
        ElMessage.success("头像上传成功！")
        showAvatarDialog.value = false;
        //刷新页面以更新数据
        window.location.reload();
        return
    }
};

关键代码解释

 const file = (event.target as HTMLInputElement).files?.[0];

这段代码是 TypeScript 中的一种写法，用于从文件输入元素中获取用户选择的第一个文件。下面我将逐步解释这段代码的含义：

代码分解

1. event.target:

   • event 是一个事件对象，通常是在处理文件输入的 change 事件时传入的。
   • event.target 指向触发事件的 DOM 元素，这里假设是一个文件输入元素（<input type="file">）。

2. as HTMLInputElement:

   • 这是 TypeScript 中的类型断言（Type Assertion）。
   • 由于 event.target 的类型默认是 EventTarget，它没有 files 属性，因此需要通过类型断言将其明确为 HTMLInputElement，以便访问 files 属性。

3. .files:

   • HTMLInputElement 的 files 属性是一个 FileList 对象，包含用户选择的所有文件。
   • 如果用户没有选择任何文件，files 的值为 null。

4. ?.:

   • 这是可选链操作符（Optional Chaining），用于安全地访问嵌套属性。
   • 如果 files 是 null 或 undefined，表达式会直接返回 undefined，而不会抛出错误。

5. .[0]:

   • FileList 是一个类数组对象，.[0] 用于获取用户选择的第一个文件。

完整含义

const file = (event.target as HTMLInputElement).files?.[0];

这段代码的作用是：

• 从文件输入元素中获取用户选择的第一个文件，并将其赋值给常量 file。
• 如果用户没有选择任何文件，file 的值将为 undefined。

示例

假设你有一个文件输入元素：

<input type="file" id="fileInput" />

在 TypeScript 中处理文件选择的代码可以这样写：

const fileInput = document.getElementById('fileInput') as HTMLInputElement;
fileInput.addEventListener('change', (event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    console.log('Selected file:', file.name);
  } else {
    console.log('No file selected');
  }
});

总结

• event.target as HTMLInputElement：将事件目标断言为文件输入元素。
• .files：获取用户选择的文件列表。
• ?.[0]：安全地获取第一个文件，如果文件列表为空，则返回 undefined。

这种写法在处理文件上传时非常常见，特别是在 TypeScript 项目中。

各种状态码总结

1xx（信息性状态码）

• 100 Continue：客户端应继续发送请求的剩余部分。 • 101 Switching Protocols：服务器同意切换协议（如WebSocket升级）。 • 102 Processing：服务器已接收请求但尚未完成处理（用于长时间操作）。

2xx（成功状态码）

• 200 OK：请求成功，响应中包含结果数据。 • 201 Created：资源创建成功（通常配合POST请求，响应头Location包含新资源URL）。 • 202 Accepted：请求已接受但未处理完成（适用于异步任务）。 • 204 No Content：请求成功，但无返回内容（如DELETE请求）。 • 206 Partial Content：部分内容响应（用于分块下载或断点续传）。

3xx（重定向状态码）

• 301 Moved Permanently：资源永久重定向（搜索引擎更新链接）。 • 302 Found：资源临时重定向（浏览器可能改用GET方法）。 • 303 See Other：强制客户端使用GET方法访问新URL。 • 304 Not Modified：资源未修改，可使用缓存（与If-Modified-Since配合）。 • 307 Temporary Redirect：临时重定向，保持原请求方法。 • 308 Permanent Redirect：永久重定向，保持原请求方法。

4xx（客户端错误状态码）

• 400 Bad Request：请求语法错误（如参数格式错误）。 • 401 Unauthorized：需身份认证（如未提供Token或Token无效）。 • 403 Forbidden：服务器拒绝请求（权限不足）。 • 404 Not Found：资源不存在。 • 405 Method Not Allowed：请求方法不被支持（如用POST访问仅支持GET的端点）。 • 408 Request Timeout：请求超时。 • 409 Conflict：资源冲突（如重复创建或数据冲突）。 • 410 Gone：资源已永久删除（不同于404，明确说明资源不可用）。 • 429 Too Many Requests：请求频率过高（限流）。

5xx（服务器错误状态码）

• 500 Internal Server Error：服务器内部错误（通用错误码）。 • 501 Not Implemented：服务器不支持请求的功能。 • 502 Bad Gateway：网关或代理服务器收到无效响应（上游服务器错误）。 • 503 Service Unavailable：服务不可用（如过载或维护）。 • 504 Gateway Timeout：网关超时（上游服务器未及时响应）。 • 505 HTTP Version Not Supported：不支持的HTTP协议版本。

关键区别

• 401 vs 403：401表示未认证，403表示认证后权限不足。 • 301 vs 302：301影响SEO（永久重定向），302为临时重定向。 • 502 vs 504：502是上游服务器返回无效数据，504是上游服务器超时。 • 404 vs 410：404表示资源不存在（可能临时），410表示资源已永久删除。

最佳实践

• RESTful API设计：正确使用状态码（如201创建资源，204删除资源）。 • 错误处理：避免滥用200包装错误，优先使用语义明确的状态码。 • 客户端兼容性：考虑旧客户端对307/308的支持。

掌握这些状态码能帮助开发者更精准地调试和优化应用，同时提升API的规范性和可维护性。建议参考RFC 9110获取官方定义。

.prevent 修饰符阻止表单默认提交行为

具体来讲，对于表单提交，不要直接@click，要@click.prevent来阻止默认提交行为，即在点击按钮刷新页面之前提交请求取得数据，不然会各种错误。

<!-- 修改前 -->
<button type="submit" class="submit-button" @click="handleSubmits">

<!-- 修改后 -->
<button type="submit" class="submit-button" @click.prevent="handleSubmits">

ai 解释

好的，用户之前遇到了修改个人信息请求的问题，我建议他们使用.prevent修饰符来阻止表单的默认提交行为。现在他们进一步询问为什么这是一个关键修复点，我需要详细解释原因。

首先，我需要回顾一下之前的问题。用户在使用表单时，点击提交按钮后可能没有达到预期的效果，可能是因为表单的默认行为导致页面刷新，从而中断了Vue的处理流程。所以，我需要解释默认表单提交行为的影响。

用户可能不太了解表单的默认行为是什么样的。默认情况下，当表单被提交时，浏览器会尝试向服务器发送请求并重新加载页面，这会导致单页应用（SPA）中的Vue应用状态丢失，用户体验变差。尤其是在他们的场景中，用户正在使用Vue处理异步请求，页面刷新会导致请求未完成就被中断，数据无法正确保存。

接下来，我需要解释.prevent修饰符的作用。在Vue中，事件修饰符可以简化事件处理。.prevent等同于调用event.preventDefault()，阻止元素的默认行为。在表单提交的上下文中，这会阻止浏览器重新加载页面，允许Vue完全控制提交过程，执行异步操作如axios请求，而不会中断。

用户可能没有意识到，如果没有阻止默认行为，即使他们的handleSubmits函数发送了请求，页面也会刷新，导致无法接收到服务器的响应，或者无法更新本地状态。例如，用户提到的保存成功后更新本地存储和状态，如果页面刷新了，这些更新可能无法正确应用，用户可能看不到“更改成功”的提示，甚至可能因为刷新导致数据丢失。

此外，用户代码中的表单没有使用<form>标签的@submit事件，而是直接在按钮上使用@click。这可能导致即使没有.prevent，表单的默认行为仍然被触发的情况。需要指出正确的做法是将提交事件绑定在表单上，而不是按钮的点击事件，这样可以更准确地捕获提交行为，无论是回车键触发还是按钮点击。

可能用户还不太清楚如何正确绑定事件。比如，在表单元素上使用@submit.prevent，然后在按钮上保持type="submit"，这样无论用户点击按钮还是按下回车，都会触发处理函数，并且阻止默认提交。这样可以提高可访问性和用户体验。

另外，用户可能在测试时发现，当点击提交按钮后，页面会闪一下然后重置，这就是默认提交行为导致的页面刷新。通过使用.prevent，可以消除这种现象，让所有处理在Vue内部完成，保持SPA的流畅性。

还要考虑可能的异常情况，比如网络请求失败。如果默认行为被阻止，用户可以留在当前页面，看到错误提示，而不是页面刷新后回到初始状态，这样更友好。

最后，需要总结为什么这一点是关键修复：因为它确保了异步请求的完整执行，保持了应用状态，提升了用户体验，避免了数据丢失和意外行为。同时，正确的事件绑定和修饰符使用是Vue开发中的最佳实践，有助于代码的可维护性和稳定性。

.prevent 修饰符是 Vue 中用于阻止 DOM 元素默认行为的关键机制。在表单提交的场景下，这是确保前端正确处理异步请求的关键。以下是具体原因分析：

一、表单的默认行为是什么？

当 <form> 表单中存在 type="submit" 的按钮时，点击该按钮会触发浏览器的 默认表单提交行为：

1. 自动组装表单数据为 HTTP 请求
2. 刷新页面（或跳转到 action 指定的 URL）
3. 重置所有表单状态

这种行为在传统多页面应用中有效，但会破坏单页应用（SPA）的工作流程。

二、为什么需要阻止默认行为？

在 Vue 等 SPA 框架中，我们通常需要：

1. 保持页面不刷新：维持 Vue 组件的当前状态和路由
2. 手动控制数据提交：使用 axios 等库发送异步请求
3. 自定义响应处理：例如显示成功提示、更新本地状态

如果不阻止默认行为： • 页面会强制刷新 → 中断 Vue 的响应式更新 • 无法执行异步操作 → 你的 handleSubmits 中的 axios 请求会被终止 • 用户看不到操作结果 → 所有提示（如 alert('更改成功')）会被页面刷新清除

三、.prevent 如何解决问题？

Vue 的 .prevent 修饰符本质是调用了 event.preventDefault()，它做了两件事：

1. 阻止浏览器的默认表单提交
2. 允许你完全控制后续逻辑

代码对比：

<!-- 错误方式：会导致页面刷新 -->
<button @click="handleSubmits">提交</button>

<!-- 正确方式：阻止默认行为 -->
<button @click.prevent="handleSubmits">提交</button>

四、如何验证这个问题？

你可以通过以下方式观察问题：

1. 移除 .prevent 并点击提交按钮 • 浏览器地址栏会闪烁（页面刷新迹象） • 控制台的 console.log(res.data) 输出会被中断 • 网络请求可能显示为 "canceled"（请求被页面刷新终止）

2. 保留 .prevent 时 • 页面保持静止 • 可以完整执行从请求到状态更新的整个流程 • 成功提示能正常显示

五、最佳实践建议

1. 始终在表单提交事件中使用 .prevent

   <form @submit.prevent="handleSubmit">
     <button type="submit">提交</button>
   </form>
   

2. 不要混用原生表单行为与 SPA 逻辑
   如果你需要模拟表单提交效果，应完全用 JavaScript 控制：

   const handleSubmit = async () => {
     // 1. 手动验证表单数据
     if (!formValid) return
   
     // 2. 手动发送请求
     try {
       await axios.post(...)
       // 3. 手动处理响应
       alert('成功')
     } catch (err) {
       // 4. 手动处理错误
       alert('失败')
     }
   }
   

六、与其他问题的关联

如果仅添加 .prevent 但未修复其他问题（如请求字段缺失），你可能会看到： • 请求正常发送（不再被中断） • 但后端返回 400 错误（其他参数问题）

这说明 .prevent 已正确解决了前端的行为控制问题，此时应继续检查网络请求的负载（Payload）是否符合 API 要求。

通过这个修复，你确保了前端逻辑的完整执行，这是后续调试其他问题的必要基础。

更新浏览器缓存的函数

在store里面内置一个更新浏览器缓存的函数，这样可以增加代码的复用。

如authStore.ts文件里面：

setUser(name: string) {
      const user = localStorage.getItem('user')
      const userid = ref("")
      if (user) {
        userid.value = JSON.parse(user).userid
      }
      
      this.user = name
      localStorage.setItem('user', JSON.stringify({
        userid:userid.value ,
        username: name
      }))
    },

插槽

零、简要描述

首先定义一个子组件ChildComponent.vue ，在父组件中就直接引入使用：

import ChildComponent from './ChildComponent.vue'

然后就利用标签在父组件的相应位置放置使用子组件，如果我们想要传值，需要然后在子组件的ts代码中利用defineProps(["title"])来进行一个对父组件变量的接收。

当我想要传一个组件给子组件的时候，就将单标签换成双标签，中间包裹你想传的组件，子组件中利用slot标签来定义你传的组件出现的位置。

注意可以对传的组件进行命名，那么就会在子组件中相同名字的插槽显示内容。

父组件：

<template>
  <ChildLayout message=“你好”>
    <!-- 具名插槽 header -->
    <template name="header">
      <h1>页面标题</h1>
      <nav>导航栏</nav>
    </template>

    <!-- 默认插槽 -->
    <p>页面主要内容...</p>

    <!-- 具名插槽 footer -->
    <template name="footer">
      <p>版权信息 © 2023</p>
    </template>
  </ChildLayout>
</template>

子组件（ChildComponent.vue ）：

<!-- ChildComponent.vue -->
<script setup lang="ts">
// 获取 父组件传的WebID
const props = defineProps({
  message: {
    type: String, // 或 Number
    required: true
  }
});

// get website by webid
const message = toRef(props, 'message'); // 创建响应式引用，并将父组件的 props 值赋给它
</script>

<template>
	<slot name="header">这是没传组件插槽显示的默认内容</slot>
  <div>
    <!-- 默认插槽位置 -->
    <slot></slot>
    <p>子组件内容：{{props.message }}</p>
  </div>
	<slot name="footer">这是没传组件插槽显示的默认内容</slot>
</template>

一、默认插槽（Default Slot）

核心概念

• 用途：父组件向子组件传递一段内容，子组件通过 <slot> 标签渲染该内容。 • 特点：不需要指定名称，内容直接插入子组件中 <slot> 的位置。

1. 子组件定义（TypeScript 类型）

使用 <script setup> 语法

<!-- ChildComponent.vue -->
<script setup lang="ts">
// 可定义 props（可选）
defineProps<{
  message: string;
}>();
</script>

<template>
  <div>
    <!-- 默认插槽位置 -->
    <slot></slot>
    <p>子组件内容：{{ message }}</p>
  </div>
</template>

类型说明

• 默认插槽不需要显式类型定义，父组件传递的任意内容都会被渲染。 • 如果子组件需要依赖插槽是否存在，可以通过 useSlots() 获取插槽状态：

import { useSlots } from "vue";
const slots = useSlots();
if (slots.default) {
  // 存在默认插槽内容
}

2. 父组件使用

<template>
  <ChildComponent message="Hello from child">
    <!-- 默认插槽内容 -->
    <p>这是父组件传递的内容</p>
    <button>点击按钮</button>
  </ChildComponent>
</template>