校园OJ开发 on acye's blog

校园OJ开发之布局逻辑

Sat, 06 Dec 2025 12:36:00 +0800

写给小白的校园 OJ 开发详解

前言：为什么需要这些配置？

想象一下你要建一座房子 🏠：

vue.config.js = 房子的施工图纸和施工规则
main.js = 房子的地基和主要结构
App.vue = 房子的外壳框架
router = 房子的导航系统（房间分布图）
layout = 房子的装修布局（每个房间的固定摆设）

下面我一步步拆解，保证你能完全看懂！

注：本文基于 Vue3 开发，如果你用的是 Vue2，请自行修改。的本个项目的代码可以看这个仓库：仓库地址

vue.config.js 这个文件告诉 Vue 项目“怎么干活”：

// 就像给工人说：从环境变量读取接口地址，默认用"/api"
const VUE_APP_BASE_API = process.env.VUE_APP_BASE_API || "/api";

module.exports = {
  devServer: {
    port: 8081, // 开发服务器端口（房子建在8081号地皮）
    open: true, // 自动打开浏览器（房子建好自动开门）
    proxy: {
      // 配置代理：把本地/api开头的请求转发到真正的后端服务器
      "/api": {
        target: "http://real-backend.com", // 真正的后端地址
        changeOrigin: true, // 改变请求源（假装是同源的）
        pathRewrite: { "^/api": "" }, // 转发时去掉/api前缀
        ws: false, // 关闭WebSocket代理（避免冲突）
      },
    },
  },
};

通俗理解：

开发时，前端在localhost:8081运行，后端可能在localhost:8080或其他地方。配置代理后，前端访问/api/user时，会自动转发到http://real-backend.com/user，解决了跨域问题。

二、地基建设：main.js

这是整个应用的启动入口：

// 1. 导入Vue框架（拿到建房子的工具包）
import { createApp } from "vue";

// 2. 导入三个核心模块（三大件）
import App from "./App.vue"; // 房子蓝图
import router from "./router"; // 导航系统
import store from "./store"; // 中央仓库（存数据）

// 3. 导入UI组件库（预制好的门窗、家具）
import ElementPlus from "element-plus";

// 4. 创建Vue应用实例（开始施工）
const app = createApp(App);

// 5. 安装各种功能模块
app.use(router); // 安装导航系统
app.use(store); // 安装中央仓库
app.use(ElementPlus); // 安装预制家具

// 6. 挂载到页面（把建好的房子放到#app这个地块上）
app.mount("#app");

一张图看懂：

1
2

浏览器打开 → main.js启动 → 创建Vue实例 →
挂载路由/状态管理/UI库 → 渲染App.vue → 显示页面

三、房子外壳：App.vue

这是最外层的容器，所有页面都装在这里：

<template>
  <!-- 这里就是一个动态展示区，根据URL显示不同页面 -->
  <router-view />
</template>

<script setup>
// 这里是空的，因为这个组件只负责"装东西"，不处理具体业务
</script>

<style lang="scss">
/* 导入全局样式（全房子通用） */
@import "@/assets/styles/variables.scss"; // 颜色/尺寸变量
@import "@/assets/styles/common.scss"; // 公共样式
</style>

重要概念：

<router-view /> 就像一个幻灯片投影仪，URL 变化时，自动切换显示的内容
全局样式在这里引入，所有子页面都能用这些样式

四、房间布局：MainLayout.vue

这是页面的通用布局模板（像酒店的标准间装修）：

<template>
  <div class="main-layout">
    <!-- 顶部导航栏（每个页面都有） -->
    <AppNavbar />

    <!-- 主要内容区（会变化的部分） -->
    <main class="content">
      <router-view />
      <!-- 这里显示具体页面 -->
    </main>

    <!-- 底部页脚（每个页面都有） -->
    <AppFooter />
  </div>
</template>

布局逻辑：

┌─────────────────────┐
│     导航栏 Navbar    │ ← 固定，每个页面都有
├─────────────────────┤
│                     │
│     <router-view>    │ ← 动态变化的部分
│    (当前路由页面)     │
│                     │
├─────────────────────┤
│     页脚 Footer      │ ← 固定，每个页面都有
└─────────────────────┘

五、导航系统：路由配置

1. 路由规则（routes.js）

这是房间分布图，告诉系统每个 URL 对应哪个页面：

const routes = [
  {
    path: "/", // 访问路径
    component: MainLayout, // 用哪个布局模板
    redirect: "/home", // 重定向到首页
    children: [
      // 子路由（布局内的具体内容）
      {
        path: "home", // 实际路径：/home
        name: "Home", // 路由名字（方便跳转）
        component: () => import("@/views/AppHome.vue"), // 懒加载组件
        meta: { title: "首页" }, // 额外信息（页面标题、权限要求等）
      },
      {
        path: "problems",
        name: "ProblemList",
        component: () => import("@/views/problem/ProblemList.vue"),
        meta: { title: "题目列表" },
      },
    ],
  },
  {
    path: "/login", // 登录页不需要MainLayout布局
    component: () => import("@/views/login/AppLogin.vue"),
    meta: { title: "登录", requiresGuest: true }, // 仅游客可访问
  },
];

路由类型：

公共路由：所有人可访问（首页、题目列表）
登录路由：需要登录才能访问（个人中心）
管理员路由：需要管理员权限（题目管理）
404 路由：找不到页面时显示

2. 路由守卫（index.js）

这是门口的保安，控制谁能进哪个房间：

router.beforeEach(async (to, from, next) => {
  // 1. 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - OJ平台`;
  }

  // 2. 检查是否登录（看有没有token）
  const hasToken = store.getters.token;

  if (hasToken) {
    // 已登录的情况
    if (to.path === "/login") {
      next("/"); // 已登录还去登录页？跳回首页！
    } else {
      // 检查是否是管理员页面
      if (to.meta.requiresAdmin && !isAdmin) {
        next("/"); // 不是管理员？滚回首页！
      } else {
        next(); // 放行！
      }
    }
  } else {
    // 未登录的情况
    if (白名单.includes(to.path)) {
      next(); // 登录页可以进
    } else {
      next(`/login?redirect=${to.path}`); // 去登录，记下来路
    }
  }
});

保安的工作流程：

用户访问页面 → 保安拦截 →
    ↓
判断是否登录？
    ├─ 已登录 → 想进登录页？→ 踢回首页
    │         → 想进管理页？→ 检查权限 → 放行/踢回
    │         → 进普通页 → 直接放行
    │
    └─ 未登录 → 想进登录页？→ 放行
            → 想进其他页？→ 带到登录页（记住想去哪）

六、权限控制逻辑

1. 路由元信息（meta 字段）

meta: {
  title: "页面标题",
  requiresAuth: true,     // 需要登录
  requiresAdmin: true,    // 需要管理员
  requiresGuest: true     // 仅游客（未登录）
}

2. 用户角色判断

// 从store获取用户信息
const userInfo = store.getters.userInfo;

// 判断是否是管理员
const isAdmin = userInfo.roles?.includes("admin");

// 根据角色显示不同菜单
<el-menu v-if="isAdmin">
  <el-menu-item>题目管理</el-menu-item>
</el-menu>;

七、开发流程总结

步骤 1：环境配置

配置vue.config.js（代理、端口等）
配置环境变量（接口地址等）

步骤 2：项目初始化

main.js引入核心依赖
App.vue设置路由容器和全局样式

步骤 3：布局设计

创建MainLayout.vue（通用布局）
设计导航栏、页脚等公共组件

步骤 4：路由配置

在routes.js定义所有路由
按需设置权限（public、auth、admin）
在router/index.js配置路由守卫

步骤 5：页面开发

在views/目录创建页面组件
根据路由配置连接页面

步骤 6：权限集成

登录后保存 token 到 store
路由守卫根据 token 和角色控制访问
页面内根据角色显示不同内容

常见问题解答

Q1：为什么需要路由守卫？

A：就像学校大门，要检查学生证（登录）、权限卡（角色），防止无关人员进入。

Q2：懒加载（() => import()）有什么好处？

A：按需加载，首次打开只下载首页代码，其他页面点到了再下载，提高首次加载速度。

Q3：为什么 token 要存 store 而不是 localStorage？

A：store 是响应式的，组件能实时感知登录状态变化，localStorage 需要手动监听。

Q4：如何新增一个页面？

1
2

1. 在views/创建组件 → 2. 在routes.js添加路由 →
3. 在导航栏添加菜单（如果需要） → 4. 测试访问

最后的小贴士

配置先行：先配好路由和权限，再开发页面
分模块开发：用户模块、题目模块、提交模块分开
权限细化：按钮级别也要控制权限
错误处理：404 页面、无权限提示要友好

记住这个开发流程，你就能搭建一个结构清晰、权限分明的校园 OJ 系统了！加油 💪

校园OJ项目的详细开发(登录界面)

Fri, 05 Dec 2025 18:36:00 +0800

手把手教你理解校园 OJ 登录系统：从输入密码到进入首页

一、前言：登录系统的“三件套”

想象一下你要进宿舍楼：

门禁卡（token） - 证明你是楼里的学生
保安（路由守卫） - 检查你有没有门禁卡
楼长（Vuex） - 登记你的入住信息

我们的登录系统就是这样的三级验证机制！

二、核心模块详解

1. Token 管理系统 - `auth.js`（你的电子门禁卡）

这个文件专门管理你的“门禁卡”（token）：

// 就像宿舍楼的门禁系统
const TOKEN_KEY = "oj_user_token"; // 门禁卡的编号

// 进门时刷卡（获取token）
export function getToken() {
  return localStorage.getItem(TOKEN_KEY);
}

// 办新卡（设置token）
export function setToken(token) {
  localStorage.setItem(TOKEN_KEY, token);
}

// 卡丢了/毕业了（移除token）
export function removeToken() {
  localStorage.removeItem(TOKEN_KEY);
}

// 检查有没有卡（是否已登录）
export function isAuthenticated() {
  return !!getToken(); // !!就是把任何值变成true/false的魔法
}

比喻理解：

localStorage = 你的钱包，专门放重要卡片
TOKEN_KEY = 卡包里的特定卡槽，只放门禁卡
每次进出，保安只看这个卡槽有没有卡

2. 通信专员 - `request.js`（你的专属信使）

这个文件负责和后端服务器对话，就像你有个专属信使：

import axios from "axios"; // 信使工具包
import { getToken, removeToken } from "./auth"; // 带上/退回门禁卡
import { ElMessage } from "element-plus"; // 消息提示喇叭

// 招募一个专属信使
const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || "/api", // 服务器地址
  timeout: 10000, // 10秒没回复就算超时
});

// 【出发前的准备】请求拦截器 - 信使出发前做的事
request.interceptors.request.use((config) => {
  const token = getToken(); // 从钱包拿出门禁卡
  if (token) {
    config.headers["Authorization"] = `Bearer ${token}`; // 把卡挂在脖子上
  }
  return config; // 可以出发了！
});

// 【回来后的处理】响应拦截器 - 信使回来后做的事
request.interceptors.response.use(
  (response) => {
    const res = response.data; // 打开信封
    if (res.code === 1) {
      // 如果信上说"一切正常"
      return res.data; // 把真正的内容给你
    } else {
      // 信上说"有问题"
      ElMessage.error(res.message || "请求失败"); // 用喇叭广播问题
      throw new Error(res.message || "请求失败"); // 抛出问题
    }
  },
  (error) => {
    // 信使自己出问题了（网络错误）
    const { status } = error.response || {};

    switch (status) {
      case 401: // 门禁卡过期
        ElMessage.error("登录已过期，请重新登录");
        removeToken(); // 扔掉过期卡
        if (window.location.pathname !== "/login") {
          window.location.href = "/login"; // 赶回登录处重新办卡
        }
        break;
      case 403: // 权限不足
        ElMessage.error("没有权限访问");
        break;
      default:
        ElMessage.error("网络错误");
    }

    throw error; // 把问题继续上报
  }
);

信使工作流程图：

1
2
3

你要发信 → 信使出发前（拦截器）→ 检查带没带门禁卡 → 出发送信
         ↓
服务器回信 → 信使回来后（拦截器）→ 检查信的内容 → 正常就给你，异常就广播

3. 用户服务接口 - `user.js`（能办的四件事）

这个文件定义了你能让信使办的四件事：

import request from "@/utils/request"; // 调用刚才的信使

// 1. 办门禁卡（登录）
export function login(data) {
  return request({
    url: "/user/login", // 去"办卡处"
    method: "post", // 用"申请"的方式
    data, // 带上身份证明（账号密码）
  });
}

// 2. 注册新身份（注册）
export function register(data) {
  return request({
    url: "/user/register", // 去"登记处"
    method: "post",
    data,
  });
}

// 3. 更新个人信息（修改资料）
export function updateUserInfo(data) {
  return request({
    url: "/user/info", // 去"资料修改处"
    method: "put", // 用"修改"的方式
    data,
  });
}

// 4. 注销门禁卡（退出登录）
export function logout() {
  return request({
    url: "/user/logout", // 去"注销处"
    method: "post",
  });
}

// 5. 查看个人档案（获取用户信息）
export function getUserInfo() {
  return request({
    url: `/user/stats`, // 去"档案室"
    method: "get",
  });
}

通俗理解：

每个export function就像一张办事指南
request()就是让信使按指南办事
返回值是一个Promise（承诺书），承诺会给你结果

4. 用户管理中心 - `user.js (store/modules)`（楼长的登记簿）

这里是 Vuex 的用户模块，负责管理所有用户相关的全局状态：

// 【状态仓库】楼长手里的登记簿
const state = {
  token: getToken(), // 当前有效的门禁卡
  userInfo: null, // 住户的详细信息
};

// 【修改规则】楼长能做的修改操作
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token; // 登记新卡
  },
  SET_USER_INFO: (state, userInfo) => {
    state.userInfo = userInfo; // 登记住户信息
  },
  CLEAR_USER: (state) => {
    state.token = ""; // 注销卡片
    state.userInfo = null; // 清除住户信息
    removeToken(); // 从钱包里也扔掉
  },
};

// 【办事流程】楼长处理事务的流程
const actions = {
  // 办理入住（登录）
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      // 情况1：模拟模式（开发时用）
      if (useMock) {
        if (用户名密码正确) {
          commit("SET_TOKEN", "临时卡"); // 发临时卡
          commit("SET_USER_INFO", { 角色: "管理员" }); // 登记信息
          resolve(); // 办好了！
        } else {
          reject("密码错了"); // 办不了
        }
      }

      // 情况2：真实模式（实际上线用）
      else {
        apiLogin(userInfo).then((响应) => {
          if (响应.成功) {
            commit("SET_TOKEN", 响应.token); // 发正式卡
            commit("SET_USER_INFO", 响应.用户信息); // 登记信息
            resolve(); // 办好了！
          }
        });
      }
    });
  },

  // 查看住户档案（获取用户信息）
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      if (!state.token) {
        reject("你没卡啊！"); // 没卡看什么档案
        return;
      }

      // ...获取信息的逻辑
    });
  },

  // 办理退宿（退出登录）
  logout({ commit }) {
    return new Promise((resolve, reject) => {
      // 1. 通知服务器我要走了
      apiLogout().then(() => {
        // 2. 本地也清理
        commit("CLEAR_USER");
        resolve();
      });
    });
  },
};

Vuex 核心概念（必须理解！）：

state = 当前的状态（现在有什么）
mutations = 能做什么修改（只能通过这里改！）
actions = 做事的流程（可以包含异步操作）

修改状态的标准流程：

`1`	`你要改数据 → 调用action → action调用mutation → mutation修改state`

5. 快捷访问门 - `getters.js`（快速查询通道）

这个文件提供快速查询状态的方法：

const getters = {
  token: (state) => state.user.token, // "给我当前的门禁卡"
  userInfo: (state) => state.user.userInfo, // "给我住户信息"
  isLogin: (state) => !!state.user.token, // "告诉我有没有卡"（!!转布尔值）
};

为什么需要 getters？

就像图书馆的查询机，不用自己去书库翻
统一的查询接口，避免拼写错误
可以计算衍生数据（如isLogin）

6. Vuex 总仓库 - `index.js`（所有登记簿的集合）

这里是 Vuex 的入口文件，整合所有模块：

import { createStore } from "vuex";
import getters from "./getters";
import user from "./modules/user";

export default createStore({
  modules: {
    user, // 用户登记簿
    // problem,  题目登记簿（可以后续添加）
    // submission, 提交记录登记簿
  },
  getters, // 快速查询通道
});

模块化设计的好处：

用户数据放user模块
题目数据放problem模块
提交记录放submission模块
互不干扰，清晰明了

7. 登录页面 - `AppLogin.vue`（前台接待处）

这是用户看到的登录界面：

<template>
  <div class="login-container">
    <div class="login-card">
      <!-- 标题区域 -->
      <div class="login-header">
        <h2>OJ平台登录</h2>
      </div>

      <!-- 表单区域 -->
      <el-form @submit.prevent="handleLogin">
        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="用户名" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

// 获取工具
const router = useRouter(); // 导航员（负责跳转页面）
const route = useRoute(); // 当前路线信息
const store = useStore(); // 楼长（Vuex）

// 表单数据
const formData = reactive({
  username: "",
  password: "",
});

// 登录函数
const handleLogin = async () => {
  try {
    // 1. 找楼长办卡（调用Vuex的login）
    await store.dispatch("user/login", {
      username: formData.username,
      password: formData.password,
    });

    // 2. 办卡后登记详细信息（调用getInfo）
    const userInfo = await store.dispatch("user/getInfo");

    // 3. 欢迎入住！
    ElMessage.success(`欢迎回来，${userInfo.username}！`);

    // 4. 导航员带你去想去的地方
    const redirect = route.query.redirect || "/home";
    router.push(redirect);
  } catch (error) {
    // 出错了，喇叭广播
    ElMessage.error(error.message);
  }
};
</script>

页面组件关键点：

useRouter() - 获取导航员，用于页面跳转
useStore() - 获取楼长，用于状态管理
store.dispatch() - 让楼长办事（异步操作）
router.push() - 让导航员带路

三、完整登录流程（故事版）

让我们跟着"小明"走一遍完整流程：

第一幕：来到登录页面

小明打开浏览器，输入 OJ 平台网址，看到登录页面（AppLogin.vue）。

第二幕：填写信息

小明输入：

用户名：xiaoming
密码：123456

第三幕：点击登录按钮

// 发生的事：
1. 页面调用 handleLogin()
2. 找楼长（store）："帮我办卡！"
3. 楼长查看登记簿（state），发现没卡
4. 楼长派信使（request）去服务器办卡

第四幕：信使出发

// request.js 的工作：
1. 信使出发前检查："带门禁卡了吗？" → 没带（第一次登录）
2. 出发去服务器（baseURL + "/user/login"）
3. 带上小明的账号密码（data）

第五幕：服务器验证

// 服务器的工作：
1. 检查账号密码
2. 正确：生成一张门禁卡（token）
3. 返回：{ code: 1, data: { token: "abc123", userInfo: {...} } }
4. 错误：返回 { code: 0, message: "密码错误" }

第六幕：信使归来

// request.js 的响应拦截器：
1. 打开信封看code
2. code=1：把data给页面
3. code=0：用喇叭广播"密码错误"

第七幕：楼长登记

// user.js (store) 的login action：
1. 收到信使带回的token
2. 调用SET_TOKEN登记到簿子
3. 调用setToken存到钱包（localStorage）
4. 调用SET_USER_INFO登记用户信息

第八幕：获取完整信息

// 登录后自动调用getInfo：
1. 楼长："刚办了卡，现在去档案室拿详细资料"
2. 派信使去/user/stats
3. 拿回完整档案（roles、permissions等）
4. 登记到簿子（SET_USER_INFO）

第九幕：页面跳转

// AppLogin.vue 的最后：
1. 喇叭广播："欢迎回来，小明！"
2. 导航员查看："小明原来想去哪？"
3. 发现route.query.redirect是"/problems"
4. 带小明去题目列表页

第十幕：后续访问

小明第二天再访问：

1. 进大门（打开网站）
2. 保安（路由守卫）拦截："请出示门禁卡！"
3. 小明从钱包拿出卡（getToken()）
4. 保安验证有效，放行到首页

四、关键概念精讲

1. 什么是 Token？

比喻：Token 就像酒店的房卡。

办入住时（登录）给你一张
每次进房间（访问页面）要刷卡
退房时（退出登录）收回
过期了要重新办（token 过期）

2. localStorage vs sessionStorage

localStorage（长期钱包）：
- 关浏览器还在
- 适合存token这种重要东西
- 容量大（5MB）

sessionStorage（临时口袋）：
- 关浏览器就丢
- 适合临时数据
- 同标签页共享

3. Promise 异步处理

比喻：叫外卖的过程

// 点外卖（发起请求）
const 外卖 = 点餐("鱼香肉丝");

// then：外卖到了做什么
外卖.then((餐) => {
  吃(餐);
});

// catch：外卖出问题了
外卖.catch((错误) => {
  打电话投诉(错误);
});

// async/await：优雅的等外卖
async function 吃饭() {
  try {
    const 餐 = await 点餐("鱼香肉丝");
    吃(餐);
  } catch (错误) {
    打电话投诉(错误);
  }
}

4. Vuex 数据流

1
2
3

单向数据流（必须遵守！）：
组件 → dispatch Action → commit Mutation → 修改 State → 更新组件
      （做什么事）       （怎么改）        （改哪里）    （看到变化）

五、常见问题解答

Q1：为什么登录后页面刷新，又变未登录了？

可能原因：

token 没存进 localStorage（检查setToken）
刷新后 Vuex 的 state 重置了，但 token 还在 localStorage
需要在main.js或App.vue初始化时从 localStorage 读 token

Q2：如何实现"记住我"功能？

// auth.js 增加
export function setToken(token, remember = false) {
  if (remember) {
    localStorage.setItem(TOKEN_KEY, token); // 长期存储
  } else {
    sessionStorage.setItem(TOKEN_KEY, token); // 会话存储
  }
}

// 登录时
await store.dispatch("user/login", {
  username,
  password,
  remember: true, // 传这个参数
});

Q3：多个标签页同时登录怎么办？

// 监听storage变化
window.addEventListener("storage", (event) => {
  if (event.key === TOKEN_KEY) {
    // token变了，同步更新Vuex
    store.commit("user/SET_TOKEN", event.newValue);
  }
});

Q4：如何防止 XSS 攻击盗取 token？

安全措施：

token 设置合理过期时间
使用 HttpOnly Cookie（后端设置）
重要操作需要二次验证
定期更换 token

六、登录系统架构总结

【三层架构】
1. 展示层（View） - AppLogin.vue
   ↓ 用户交互
2. 逻辑层（ViewModel） - Vuex (user模块)
   ↓ 状态管理
3. 服务层（Service） - request.js + user.js(api)
   ↓ 网络通信
4. 持久层（Persistence） - localStorage + auth.js

【五大模块】
1. 认证模块（auth.js）- 管卡
2. 通信模块（request.js）- 管信使
3. 接口模块（user.js api）- 管能办什么事
4. 状态模块（user.js store）- 管登记簿
5. 界面模块（AppLogin.vue）- 管用户看到什么

七、给新手的黄金法则

法则 1：先理解流程，再写代码

画个流程图，搞清楚"点击登录"到"进入首页"中间发生了什么。

法则 2：分层思考，各司其职

auth.js：只关心 token 存哪、怎么取
request.js：只关心怎么发请求、怎么处理响应
store：只关心数据怎么存、怎么改
组件：只关心用户怎么交互、数据怎么展示

法则 3：错误处理要全面

每个可能出错的地方都要有应对方案：

网络错误
服务器错误
用户输入错误
token 过期错误

法则 4：用户体验要友好

登录中显示 loading
错误提示要明确
成功后有反馈
记住用户上次操作

八、下一步学习方向

掌握了登录系统后，你可以继续学习：

权限管理：不同角色看到不同菜单
路由守卫：更精细的访问控制
第三方登录：微信、QQ 快速登录
双因素认证：密码+手机验证码
单点登录：一个账号通行所有系统

记住，登录系统是 Web 应用的大门，大门设计得好不好，直接影响用户体验和系统安全。现在你不仅知道怎么用，还知道为什么这样设计，这就是成为高级开发者的第一步！

加油，你已经掌握了现代前端登录系统的核心原理！🚀

校园OJ项目的整体结构

Fri, 05 Dec 2025 17:36:00 +0800

引言（为什么写这个?）

在完成全域生活服务平台后，我对前后端协同开发的流程有了更深入的理解。但一直想挑战一个更贴近编程学习场景的项目——在线判题系统（OJ，Online Judge）。这类平台不仅需要清晰的用户交互设计，还涉及代码提交、实时判题、数据统计等复杂业务逻辑，非常适合用来巩固前端工程化思想。

本次分享将聚焦前端开发细节，包括项目架构设计、核心功能实现及业务流程梳理。后端部分由好友 shuimo 负责搭建，后续若有机会会邀请他补充后端架构细节。

先放一张完整的项目架构图，帮助大家建立整体认知：

下面是校园 OJ 平台前端项目的完整目录结构，这个结构体现了现代 Vue 项目的模块化设计思想：

src
├─ api                  # 接口请求层：封装所有后端接口调用
│  ├─ admin.js          # 管理员相关接口（题目管理、权限操作等）
│  ├─ problem.js        # 题目相关接口（题目列表、详情、提交判题等）
│  ├─ submission.js     # 提交记录相关接口（提交列表、判题结果查询等）
│  └─ user.js           # 用户相关接口（登录、注册、个人信息、设置等）
├─ assets               # 静态资源层：存放样式、图片等静态文件
│  ├─ css               # 通用CSS文件（未拆分到styles的基础样式）
│  ├─ images            # 项目图片资源（图标、背景图等）
│  └─ styles            # 核心样式文件
│     ├─ Applogin.css   # 登录/注册页面专属样式
│     ├─ AppNavbar.css  # 导航栏组件专属样式
│     ├─ common.css     # 全局通用样式（重置样式、公共类名等）
│     └─ variables.scss # SCSS全局变量（颜色、字体、间距等）
├─ components           # 通用组件层：可复用的Vue组件（按业务拆分）
│  ├─ admin             # 管理员专属组件
│  │  ├─ ProblemForm.vue # 题目新增/编辑表单组件
│  │  └─ ProblemManagement.vue # 题目列表管理组件（查询、删除、编辑）
│  ├─ common            # 全局通用组件
│  │  ├─ AppFooter.vue  # 页面底部版权/导航组件
│  │  └─ AppNavbar.vue  # 页面顶部导航栏（含登录态、菜单切换）
│  ├─ problem           # 题目相关组件
│  │  ├─ ProblemDetail.vue # 题目详情展示组件（题干、输入输出示例等）
│  │  ├─ ProblemItem.vue   # 题目列表项组件（单个题目卡片）
│  │  └─ ProblemTags.vue   # 题目标签组件（难度、题型等标签展示）
│  └─ submission        # 提交记录相关组件
│     ├─ CodeEditor.vue    # 代码编辑组件（支持语法高亮、代码提交）
│     ├─ JudgeResult.vue   # 判题结果展示组件（AC/WA/RE等状态+详情）
│     ├─ SubmissionItem.vue # 提交记录列表项组件（单个提交记录展示）
│     └─ SubmissionList.vue # 提交记录列表组件（查询、筛选提交记录）
├─ layouts              # 布局组件层：页面整体布局容器
│  └─ MainLayout.vue    # 主布局组件（包含Navbar+Footer+内容区域）
├─ router               # 路由配置层：前端路由管理
│  ├─ index.js          # 路由入口（创建路由实例、挂载路由守卫等）
│  └─ routes.js         # 路由规则定义（所有页面的路由路径、组件映射）
├─ store                # 状态管理层：Vuex全局状态管理（按模块拆分）
│  ├─ modules           # Vuex模块拆分
│  │  ├─ problem.js     # 题目相关状态（题目列表、当前题目详情等）
│  │  ├─ submission.js  # 提交相关状态（提交记录、判题结果等）
│  │  └─ user.js        # 用户相关状态（登录态、用户信息、权限等）
│  ├─ getters.js        # Vuex全局getters（统一获取各模块状态）
│  └─ index.js          # Vuex入口（创建store实例、注册模块等）
├─ utils                # 工具函数层：通用工具方法封装
│  ├─ auth.js           # 权限相关工具（JWT存储/解析、登录态校验等）
│  ├─ constant.js       # 全局常量（接口地址、状态码、枚举值等）
│  ├─ debounce.js       # 防抖函数（防止重复点击、频繁请求）
│  ├─ format.js         # 格式化工具（时间、判题状态、文件大小等）
│  ├─ mockData.js       # 模拟数据（开发阶段替代后端接口）
│  └─ request.js        # 请求封装（Axios拦截器、请求/响应统一处理）
├─ views                # 页面视图层：对应路由的页面级组件
│  ├─ admin             # 管理员页面
│  │  ├─ ProblemEdit.vue   # 题目编辑页面（复用ProblemForm组件）
│  │  └─ ProblemManagement.vue # 题目管理页面（复用ProblemManagement组件）
│  ├─ login             # 登录/注册页面
│  │  ├─ AppLogin.vue   # 登录页面（账号密码登录、验证码等）
│  │  └─ AppRegister.vue # 注册页面（用户信息填写、校验等）
│  ├─ problem           # 题目相关页面
│  │  ├─ ProblemDetailView.vue # 题目详情页面（基于MainLayout+ProblemDetail）
│  │  └─ ProblemListView.vue   # 题目列表页面（基于MainLayout+ProblemItem）
│  ├─ submission        # 提交记录页面
│  │  └─ SubmissionHistory.vue # 提交历史页面（基于MainLayout+SubmissionList）
│  ├─ user              # 用户中心页面
│  │  ├─ UserProfile.vue # 个人资料页面（展示/编辑用户信息）
│  │  └─ UserSetting.vue # 用户设置页面（密码修改、偏好设置等）
│  ├─ AppHome.vue       # 项目首页（展示平台介绍、热门题目等）
│  └─ NotFound.vue      # 404页面（路由匹配失败时展示）
├─ App.vue              # 根组件（挂载路由出口、全局样式引入）
└─ main.js              # 项目入口文件（创建Vue实例、挂载路由/store等）

这个架构清晰地将项目分为 10 个核心模块，每个模块都有明确的职责边界，确保了代码的可维护性和可扩展性。

技术栈解析

核心技术框架

Vue 3 - 渐进式 JavaScript 框架，负责整个应用的核心逻辑和 UI 渲染
Vue Router - 官方路由管理器，处理页面导航和权限控制
Vuex - 状态管理模式，管理全局共享数据
Element Plus - UI 组件库，提供丰富的预制界面元素

开发工具链

Vue CLI - 项目脚手架，快速初始化标准化项目结构
npm - 包管理器，管理项目依赖和构建脚本
SCSS/Sass - CSS 预处理器，提供变量、嵌套等高级功能
ESLint - 代码检查工具，保证代码质量和风格统一
Babel - JavaScript 编译器，确保代码兼容性

辅助工具库

Axios - HTTP 客户端，处理网络请求和数据交互
Vue I18n (可选) - 国际化支持
Vite (可选) - 下一代前端构建工具，提供更快开发体验

各模块深度解析

api/ - 网络通信枢纽

这个模块是前端与后端之间的通信桥梁。它将 HTTP 请求封装成语义化的函数，让业务代码无需关心底层网络细节。

admin.js - 管理员专属接口网关，处理题目管理、权限控制等高阶操作
problem.js - 题目数据接口，提供题目列表查询、详情获取等服务
submission.js - 提交记录服务，处理代码提交、评测结果查询
users.js - 用户身份服务，管理登录、注册和个人信息

设计理念：每个文件对应一个后端服务领域，通过统一的请求拦截器处理认证、错误等通用逻辑。

assets/ - 静态资源仓库

这里是项目的视觉资产库，存放所有非代码资源。

css/login.css - 登录页专属样式，实现特殊视觉效果
images/ - 图片资源中心，管理 logo、图标、背景图等
styles/variables.scss - 设计令牌系统，定义颜色、间距、字体等设计常量
styles/common.scss - 全局样式基础，包含重置样式、工具类、布局框架

设计理念：通过 CSS 变量和混合宏实现主题可配置性，支持白天/黑夜模式切换。

components/ - 可复用组件工厂

这个模块采用乐高积木式的设计思想，每个组件都是独立、可复用的 UI 单元。

common/ - 基础设施组件
- AppNavbar：全局导航系统，根据用户权限动态显示菜单
- AppFooter：版权信息展示区，包含网站信息和外部链接
problem/ - 题目相关组件套件
- ProblemDetail：题目展示器，渲染题目描述、示例和难度信息
- ProblemItem：题目卡片，在列表中展示题目的核心信息
- ProblemTags：标签管理系统，支持标签展示和筛选
admin/ - 管理后台组件集
- ProblemForm：题目编辑器，提供富文本编辑和测试用例配置
- ProblemManagement：题目控制面板，支持批量操作和高级搜索
submission/ - 代码提交组件包
- CodeEditor：代码编辑器，提供语法高亮和智能提示
- SubmissionItem：提交记录卡片，显示评测状态和时间消耗
- SubmissionList：提交历史视图，支持分页和过滤

设计理念：组件遵循单一职责原则，通过 Props 和 Events 与父组件通信，支持深度定制。

layouts/ - 页面布局框架

MainLayout.vue 是应用的骨架系统，定义了页面的基本结构：

顶部：导航栏区域
中部：动态内容区域
底部：页脚信息区域

这个布局被大多数页面复用，确保用户体验的一致性。

router/ - 应用导航系统

路由模块是应用的GPS 导航系统，管理着所有页面的访问路径。

routes.js - 路线图数据库，定义了 URL 到页面的映射关系
index.js - 导航控制中心，包含权限守卫和路由钩子

权限分级：

公共路由：无需登录即可访问（首页、题目列表）
用户路由：需要登录凭证（提交记录、个人中心）
管理员路由：需要管理员权限（题目管理、用户管理）

store/ - 全局状态管理中心

这里是应用的中央数据中心，采用模块化设计管理全局状态。

modules/user.js - 用户状态库，管理登录态、权限信息和个人数据
modules/problem.js - 题目状态库，缓存题目列表和详情数据
modules/submission.js - 提交状态库，跟踪提交历史和评测结果
getters.js - 数据查询接口，提供便捷的状态访问方法
index.js - 状态库入口，集成所有模块并提供插件支持

数据流：组件 → Actions → Mutations → State → 组件

utils/ - 工具函数库

工具库是项目的瑞士军刀，提供各种通用功能。

request.js - HTTP 请求引擎，封装 Axios 并提供拦截器
auth.js - 身份验证工具，管理 Token 的存储和验证
constant.js - 常量字典，集中管理接口地址、状态码等
format.js - 数据格式化器，统一日期、数字等展示格式
mockData.js - 模拟数据生成器，支持离线开发和测试

views/ - 页面视图层

视图层是用户直接交互的界面，每个页面都是路由的终点。

login/ - 身份验证门户
- AppLogin.vue：登录注册一体化页面，支持第三方登录
problem/ - 题目浏览区
- ProblemList.vue：题目目录页，支持搜索和筛选
- ProblemDetailView.vue：题目详情页，集成代码编辑器
submission/ - 提交记录区
- SubmissionHistory.vue：个人提交历史，支持状态过滤
admin/ - 管理控制台
- ProblemManagement.vue：题目管理面板
- ProblemEdit.vue：题目编辑界面
user/ - 个人空间
- AppHome.vue：个人主页，展示统计信息和活动记录
NotFound.vue - 404 错误页面，提供友好的错误提示

核心入口文件

App.vue - 应用根容器，定义全局样式和基础结构
main.js - 应用启动器，集成所有插件并挂载到 DOM

校园OJ开发之admin页面的开发

Sun, 30 Nov 2025 12:36:00 +0000

由于没有后端，我来为你添加前端模拟数据和模拟 API，并解释为什么不需要处理 token。

1. 创建模拟数据存储

首先在 src/utils/ 下创建模拟数据管理工具：

`src/utils/mockData.js`

// 模拟数据存储
class MockStorage {
  constructor() {
    this.storageKey = "oj_mock_data";
    this.initData();
  }

  initData() {
    if (!localStorage.getItem(this.storageKey)) {
      const initialData = {
        problems: [
          {
            id: 1,
            title: "两数之和",
            label: "数组,哈希表,简单",
            testPointNum: 3,
            description:
              "给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。\n\n你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。",
            testPointList: [
              { input: "3\n2 7 11 15\n9", output: "0 1", isSample: 1 },
              { input: "2\n3 2 4\n6", output: "1 2", isSample: 0 },
              { input: "2\n3 3\n6", output: "0 1", isSample: 0 },
            ],
            createTime: "2024-01-15 10:00:00",
          },
          {
            id: 2,
            title: "验证回文串",
            label: "字符串,双指针,简单",
            testPointNum: 6,
            description:
              "给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略字母的大小写。\n\n说明：本题中，我们将空字符串定义为有效的回文串。",
            testPointList: [
              {
                input: '"A man, a plan, a canal: Panama"',
                output: "true",
                isSample: 1,
              },
              { input: '"race a car"', output: "false", isSample: 1 },
              { input: '""', output: "true", isSample: 0 },
            ],
            createTime: "2024-01-16 14:30:00",
          },
        ],
        nextProblemId: 3,
      };
      this.saveData(initialData);
    }
  }

  getData() {
    return JSON.parse(localStorage.getItem(this.storageKey)) || {};
  }

  saveData(data) {
    localStorage.setItem(this.storageKey, JSON.stringify(data));
  }

  // 获取所有题目
  getProblems() {
    return this.getData().problems || [];
  }

  // 添加题目
  addProblem(problem) {
    const data = this.getData();
    const newProblem = {
      ...problem,
      id: data.nextProblemId++,
      createTime: new Date().toLocaleString("zh-CN"),
    };
    data.problems.push(newProblem);
    this.saveData(data);
    return newProblem;
  }

  // 更新题目
  updateProblem(updatedProblem) {
    const data = this.getData();
    const index = data.problems.findIndex((p) => p.id === updatedProblem.id);
    if (index !== -1) {
      data.problems[index] = {
        ...data.problems[index],
        ...updatedProblem,
        // 保留创建时间
        createTime: data.problems[index].createTime,
      };
      this.saveData(data);
      return data.problems[index];
    }
    return null;
  }

  // 删除题目
  deleteProblem(id) {
    const data = this.getData();
    data.problems = data.problems.filter((p) => p.id !== id);
    this.saveData(data);
    return true;
  }

  // 分页查询
  getProblemsByPage(pageNum = 1, size = 10) {
    const problems = this.getProblems();
    const start = (pageNum - 1) * size;
    const end = start + size;
    const pageData = problems.slice(start, end);

    return {
      records: pageData,
      total: problems.length,
      pageNum,
      size,
    };
  }

  // 根据ID查询
  getProblemById(id) {
    const problems = this.getProblems();
    return problems.find((p) => p.id === Number(id));
  }
}

// 创建单例实例
export const mockStorage = new MockStorage();

2. 修改 API 文件支持模拟数据

`src/api/admin.js` (更新版本)

import request from "@/utils/request";
import { mockStorage } from "@/utils/mockData";

// 是否使用模拟数据
const USE_MOCK = true;

// 模拟延迟
const mockDelay = (ms = 500) =>
  new Promise((resolve) => setTimeout(resolve, ms));

// 题目管理接口
export const problemAdminAPI = {
  // 添加题目
  addProblem: async (data) => {
    if (USE_MOCK) {
      await mockDelay();
      const result = mockStorage.addProblem(data);
      return { data: result, code: 200, message: "添加成功" };
    }

    return request({
      url: "/testQuestion/addTestQuestion",
      method: "POST",
      data,
    });
  },

  // 删除题目
  deleteProblem: async (id) => {
    if (USE_MOCK) {
      await mockDelay();
      const success = mockStorage.deleteProblem(id);
      return {
        data: null,
        code: success ? 200 : 400,
        message: success ? "删除成功" : "删除失败",
      };
    }

    return request({
      url: "/testQuestion/deleteTestQuestionById",
      method: "DELETE",
      data: { id },
    });
  },

  // 更新题目
  updateProblem: async (data) => {
    if (USE_MOCK) {
      await mockDelay();
      const result = mockStorage.updateProblem(data);
      if (result) {
        return { data: result, code: 200, message: "更新成功" };
      } else {
        return { data: null, code: 400, message: "题目不存在" };
      }
    }

    return request({
      url: "/testQuestion/updateTestQuestion",
      method: "POST",
      data,
    });
  },

  // 题目分页查询
  getProblemsByPage: async (params) => {
    if (USE_MOCK) {
      await mockDelay(300);
      const { pageNum = 1, size = 10, keyword } = params;

      let problems = mockStorage.getProblems();

      // 模拟搜索功能
      if (keyword) {
        problems = problems.filter(
          (p) =>
            p.title.toLowerCase().includes(keyword.toLowerCase()) ||
            p.label.toLowerCase().includes(keyword.toLowerCase())
        );
      }

      const start = (pageNum - 1) * size;
      const end = start + size;
      const pageData = problems.slice(start, end);

      return {
        data: {
          records: pageData,
          total: problems.length,
          pageNum,
          size,
        },
        code: 200,
        message: "查询成功",
      };
    }

    return request({
      url: "/testQuestion/getTestQuestionByPage",
      method: "GET",
      params,
    });
  },

  // 根据ID查询题目
  getProblemById: async (id) => {
    if (USE_MOCK) {
      await mockDelay();
      const problem = mockStorage.getProblemById(id);
      if (problem) {
        return { data: problem, code: 200, message: "查询成功" };
      } else {
        return { data: null, code: 404, message: "题目不存在" };
      }
    }

    return request({
      url: "/testQuestion/getTestQuestionById",
      method: "GET",
      params: { id },
    });
  },
};

3. 更新组件处理模拟数据响应

`src/components/admin/ProblemManagement.vue` (关键部分更新)

// 在 fetchProblems 方法中更新数据处理：
const fetchProblems = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: pagination.value.pageNum,
      size: pagination.value.size,
    };

    if (searchKeyword.value) {
      params.keyword = searchKeyword.value;
    }

    const response = await problemAdminAPI.getProblemsByPage(params);

    // 处理模拟数据和真实数据的响应格式差异
    if (USE_MOCK) {
      problemList.value = response.data.records || [];
      pagination.value.total = response.data.total || 0;
    } else {
      problemList.value = response.data?.records || [];
      pagination.value.total = response.data?.total || 0;
    }
  } catch (error) {
    ElMessage.error("获取题目列表失败");
    console.error("获取题目列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 在 handleDelete 方法中：
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm("确定要删除这个题目吗？", "警告", {
      type: "warning",
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    });

    const response = await problemAdminAPI.deleteProblem(id);

    // 检查响应是否成功
    if (response.code === 200) {
      ElMessage.success("删除成功");
      fetchProblems();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
      console.error("删除失败:", error);
    }
  }
};

`src/components/admin/ProblemForm.vue` (关键部分更新)

// 在 handleSubmit 方法中更新：
const handleSubmit = async () => {
  try {
    await formRef.value.validate();

    submitting.value = true;

    // 更新测试点数量
    form.testPointNum = form.testPointList.length;

    const response = isEdit.value
      ? await problemAdminAPI.updateProblem(form)
      : await problemAdminAPI.addProblem(form);

    // 检查响应是否成功
    if (response.code === 200) {
      ElMessage.success(isEdit.value ? "更新成功" : "创建成功");
      router.push("/admin/problem");
    } else {
      ElMessage.error(
        response.message || (isEdit.value ? "更新失败" : "创建失败")
      );
    }
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(isEdit.value ? "更新失败" : "创建失败");
      console.error("提交失败:", error);
    }
    // 如果是验证失败，不显示错误消息
  } finally {
    submitting.value = false;
  }
};

// 在 fetchProblemDetail 方法中更新：
const fetchProblemDetail = async (id) => {
  try {
    const response = await problemAdminAPI.getProblemById(id);
    if (response.code === 200 && response.data) {
      Object.assign(form, response.data);
    } else {
      ElMessage.error(response.message || "获取题目详情失败");
    }
  } catch (error) {
    ElMessage.error("获取题目详情失败");
    console.error("获取题目详情失败:", error);
  }
};

4. 为什么不需要处理 Token

原因分析：

模拟环境特性：
- 在模拟环境中，所有数据都存储在前端（localStorage）
- 不需要与真实服务器通信，因此不需要身份验证
- 数据操作完全在前端完成，没有跨域或安全限制
开发阶段便利性：
- 简化开发流程，专注于功能实现
- 避免因认证问题阻碍开发进度
- 便于测试和演示
架构设计考虑：
- 保持 API 接口的一致性
- 真实环境切换简单（只需修改 USE_MOCK 常量）
- 模拟数据层与业务逻辑分离

真实环境切换：

当需要连接真实后端时，只需：

将 src/api/admin.js 中的 USE_MOCK 改为 false
确保 src/utils/request.js 中的 token 处理正常工作
配置正确的后端 API 地址

Token 处理的预备工作：

虽然在模拟环境中不需要 token，但你的项目已经具备了 token 处理能力：

// 在 src/utils/request.js 中已经有类似的代码：
import store from "@/store";

// 请求拦截器 - 添加 token
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers["Authorization"] = `Bearer ${store.getters.token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

这样设计确保了：

开发阶段：快速原型开发，无需后端依赖
生产环境：无缝切换到真实 API，自动处理认证
代码质量：保持接口一致性，便于维护

现在你的题目管理功能已经完全可以在前端独立运行，所有数据都会持久化保存在浏览器的 localStorage 中！