个人技术博客——从Vue到前后端协作：项目开发中的技术探索与解决方案

222200324郑昱 2025-01-04 13:47:29

这个作业属于哪个课程	FZU_SE_teacherW_4
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	软件工程实践总结&个人技术博客
其他参考文献	《构建之法》

1 技术概述

Vue.js 是一个用于构建现代 Web 应用的前端框架。它以其简洁的语法和强大的响应式机制在前端开发中占有一席之地。本项目中，我通过学习并应用 Vue.js，成功将前端与后端的交互做得更加流畅，解决了数据绑定、组件化开发、接口调试等技术难题。

2 技术详述

2.1 Vue的基本使用

Vue.js 是一个轻量级的 JavaScript 框架，主要用于构建交互式用户界面。它采用了基于组件的开发模式，使得项目的维护和扩展变得更加简便。Vue 的核心功能包括响应式数据绑定和组件化结构。通过数据绑定，可以使页面内容与数据状态实时同步，避免了传统开发中复杂的 DOM 操作。

在本项目中，我使用 Vue 来构建所有前端界面，主要采用了以下几项技术：

Vue 3.x：使用了 Vue 3 的 Composition API，使得代码更加简洁和模块化。
Pinia 状态管理：Pinia 用于管理全局应用状态，方便在各个组件间共享数据。
Element Plus：使用 Element Plus 来设计页面的 UI，提供了丰富的组件和样式，减少了设计和实现的时间。
Axios：通过 Axios 进行前后端接口数据交互，处理 GET、POST 请求等。

2.2 Axios配置与请求拦截器

// @/utiles/apiClient.ts
import router from "@/router";
import axios from "axios";
import { ElMessage } from "element-plus"; // 引入 Element Plus 的消息提示组件

const apiClient = axios.create({
  baseURL: "url", // 后端地址
  timeout: 5000, // 设置超时时间
});

// 请求拦截器：从 localStorage 中获取 Token 并附加到请求头
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token"); // 从 localStorage 获取 Token

    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在这个部分，我们创建了一个apiClient实例，并配置了请求拦截器。每次请求发出时，我们会从localStorage中获取Token，并将其附加到请求头的Authorization字段。这样可以确保只有在用户已登录并拥有有效Token的情况下，才能正常访问后端接口。

2.3 响应拦截器与错误处理

// 响应拦截器：处理错误（如 401 未授权）
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Token 无效或过期，清除存储并跳转到登录页面

      // 显示错误消息
      ElMessage.error("登录状态无效或已过期，请重新登录");

      // 清除本地存储的 token 和用户名
      localStorage.removeItem("token");
      localStorage.removeItem("username");

      // 跳转到登录页面
      router.push("/login");
    }

    return Promise.reject(error);
  }
);

当后端返回401 Unauthorized状态码时，表示Token无效或已过期。此时，我们会清除存储的Token，并提示用户重新登录，最后跳转到登录页面。这样可以确保用户在Token过期后无法继续访问敏感数据。

2.4 Pinia状态管理

import { defineStore } from 'pinia';
import apiClient from "@/utils/apiClient";
import type { UserInfo } from "@/types";

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false, // 登录状态
    username: '', // 用户名
    hasMessages: false, // 是否有新消息
    userInfo: null as UserInfo | null, // 用户信息
  }),
  actions: {
    // 登录操作
    async login(user: string, token: string) {
      this.isLoggedIn = true;
      this.username = user; // 存储用户名
      localStorage.setItem('token', token); // 存储 token
      localStorage.setItem('username', user); // 存储用户名

      // 获取用户信息
      try {
        const response = await apiClient.get<UserInfo>(`/api/users/getInfoByUsername/${user}`);
        this.userInfo = response.data; // 存储用户信息
      } catch (error) {
        console.error("登录后获取用户信息失败：", error);
        this.logout(); // 如果获取用户信息失败，执行登出
      }
    },
    // 登出操作
    logout() {
      this.isLoggedIn = false;
      this.username = ''; // 清空用户名
      this.hasMessages = false; // 清空消息状态
      this.userInfo = null; // 清空用户信息
      localStorage.removeItem('token'); // 清除 token
      localStorage.removeItem('username'); // 清除用户名
    },
    // 设置消息状态
    setMessages(status: boolean) {
      this.hasMessages = status;
    },
    // 初始化状态（用于刷新时恢复状态）
    async initializeState() {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (token && username) {
        try {
          const response = await apiClient.get<UserInfo>(`/api/users/getInfoByUsername/${username}`);
          const data: UserInfo = response.data;

          this.isLoggedIn = true;
          this.username = username;
          this.userInfo = data;
        } catch (error) {
          console.error("Failed to validate token or fetch user info:", error);
          this.logout();
        }
      } else {
        // 如果本地没有 token 和 username，则清空 userInfo
        this.userInfo = null;
      }
    }
  },
});

随着项目功能逐渐增加，管理全局状态变得尤为重要。我选择了 Pinia 作为状态管理库，它与 Vue 3 深度集成。Pinia 提供了简单的 API 来管理应用中的全局状态，支持多个 store，可以让每个 store 管理一个模块的状态。

3 遇到的问题与解决过程

3.1 接口请求失败

在开发过程中，遇到过接口请求失败的情况。具体问题是当我们发送请求时，返回的状态码是 500，表示服务器端出现了错误。为了解决这个问题，我们首先检查了接口路径是否正确，发现路径没有问题。然后，与后端开发人员确认了接口的返回格式，最终发现是接口返回的 JSON 格式不符合前端预期，导致了处理错误。

解决方法：

调整了接口的返回格式，使得数据符合前端的预期格式。
加强了错误处理逻辑，使用 try...catch 语句捕获错误，确保前端可以根据不同的错误信息显示合适的提示。
3.2 跨域请求问题
跨域请求是前后端分离开发中的常见问题，尤其是在开发过程中，前端和后端通常部署在不同的服务器上。在本项目中，后端服务器未配置 CORS，导致浏览器拒绝访问。

解决方法：