摘要 | Abstract

本文介绍智链细米安全盾队展示系统的设计与实现。该系统采用 Vue 3 + Vite 前端与 PHP + MySQL 后端的全栈架构，为高校网络安全团队提供了一个涵盖成员展示、竞赛成果归档、科研项目管理、指导教师信息及文章发布的综合性展示平台。系统支持前台展示与后台管理双模式，并通过 JWT 鉴权保障管理操作的安全性。

项目仓库：github.com/cmijohnson/team_UJSEAIIS

1. 引言 | Introduction

高校网络安全团队在 CTF 竞赛、攻防演练与安全研究中扮演着重要角色。然而，许多团队缺乏一个系统化的展示平台来记录和传播团队成果。智链细米安全盾队（以下简称”安全盾队”）作为一支专注于网络空间安全的高校团队，其研究方向涵盖 Web 安全、二进制分析、区块链安全 与 云原生安全 等领域。

为提升团队的专业形象与信息透明度，我们设计并实现了一套团队展示系统，旨在以结构化的方式呈现团队成员、竞赛荣誉、科研项目及技术文章。

2. 团队概况 | Team Overview

2.1 核心成员

姓名 职责 研究方向
张晨 队长 Web 安全方向训练与项目统筹，长期参与攻防演练
李航 核心成员 二进制分析与漏洞挖掘，参与多个攻防科研项目
王越 开发工程师 平台开发与自动化工具建设，支撑团队研发交付
赵宁 安全研究员 区块链与智能合约安全，参与审计和安全工具建设

2.2 竞赛成果

竞赛名称 时间 成绩
全国大学生信息安全竞赛 2023-10 全国一等奖
XCTF 国际网络安全联赛 2023-06 分站赛亚军

2.3 科研项目

基于区块链的物联网设备身份认证系统（进行中）

  • 面向海量设备场景，探索轻量级可信身份认证方案
  • 已完成原型设计与核心模块开发

容器逃逸检测机制研究（已完成）

  • 面向云原生环境，研究基于系统调用序列的异常检测方法
  • 形成可复用检测规则与实验数据集

3. 系统设计 | System Design

3.1 技术架构

系统采用前后端分离的 SPA + REST API 架构模式：

层级 技术栈
前端框架 Vue 3.4 + TypeScript
构建工具 Vite
UI 组件库 Element Plus 2.13
样式方案 Tailwind CSS
状态管理 Pinia
路由管理 Vue Router
后端语言 PHP 8.0
数据库 MySQL 8.0
鉴权方案 JWT (HS256)

3.2 功能模块

系统包含前台展示（7 个页面）与后台管理（7 个页面）两大模块：

前台展示模块：

  • 首页 — 轮播图、团队简介、最新动态、快速导航
  • 团队风采 — 核心成员卡片与团队发展时间轴
  • 竞赛成果 — 按时间线展示竞赛获奖，支持图文混排
  • 科研项目 — 项目卡片网格，标注进行中 / 已完成 / 计划中状态
  • 指导教师 — 教师简介、研究方向与联系方式
  • 文章列表 — 分页文章列表，支持分类筛选
  • 文章详情 — Markdown 渲染，支持代码高亮

后台管理模块：

  • 管理员登录（JWT 鉴权）
  • 文章 CRUD（内置 Markdown 编辑器）
  • 成员管理、竞赛管理、项目管理、时间轴管理
  • 仪表盘概览（统计数据与快捷操作）

3.3 数据库设计

系统共设计 8 张核心数据表：

1
2
3
4
5
6
7
8
9
-- 核心表结构概要
admins          -- 管理员账户（用户名、密码哈希、JWT）
articles        -- 文章（标题、分类、Markdown 内容、封面、浏览量）
members         -- 团队成员（姓名、职位、头像、简介、排序）
competitions    -- 竞赛成果（名称、日期、成绩、图片）
projects        -- 科研项目（标题、状态、日期、描述、成果）
advisors        -- 指导教师（姓名、职称、研究方向、联系方式）
timeline_events -- 团队发展时间轴
images          -- 图片资源管理

4. 实现要点 | Implementation Highlights

4.1 前端 Mock 数据降级

系统在 API 不可用时自动降级为内置 Mock 数据，确保前端展示的连续性。这一设计使得前端开发可以独立于后端进行，同时也为演示场景提供了便利。

4.2 JWT 鉴权流程

1
2
3
4
5
6
// 前端请求拦截器自动附加 Token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('admin_token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

4.3 响应式设计

系统采用移动优先的响应式布局，在桌面端展示为多列网格，在移动端自动折叠为单列布局，导航栏切换为汉堡菜单模式。

5. 结论 | Conclusion

智链细米安全盾队展示系统为高校网络安全团队提供了一套完整的数字化展示解决方案。系统采用主流的前后端分离架构，具备良好的可维护性与可扩展性。未来计划包括：集成对象存储服务以支持图片云上传、增加评论互动功能、以及对接学校统一身份认证系统。

参考文献 | References

  1. Vue 3 Documentation. [Online]. Available: https://vuejs.org/
  2. Element Plus Documentation. [Online]. Available: https://element-plus.org/
  3. PHP Official Documentation. [Online]. Available: https://www.php.net/docs.php
  4. JSON Web Tokens (JWT). [Online]. Available: https://jwt.io/