.NET Core+Vue在线考试系统全栈开发实践

爱过河的小马锅

1. 项目概述与技术栈选型

最近在开发在线考试系统的同行们，这套基于.NET Core MVC的全栈方案值得仔细研究。系统采用前后端分离架构，后端使用.NET Core MVC框架，前端采用Vue.js+Bootstrap的组合，数据库选用SQL Server并通过EF Core Code First进行数据访问。这种技术搭配在当前企业级应用中相当典型，既保证了开发效率，又能满足性能需求。

系统最突出的特点是实现了完善的国际化支持，内置中英双语切换功能。这在需要面向多语言用户的考试场景中尤为重要，比如跨国企业的内部认证考试或国际学校的在线测评。从技术实现来看，ASP.NET Core自带的本地化方案与Vue i18n的配合使用，为多语言支持提供了优雅的解决方案。

2. 系统架构设计解析

2.1 后端架构设计

后端采用经典的.NET Core MVC分层架构：

表现层：处理HTTP请求和响应
应用层：实现业务逻辑
领域层：核心业务模型
基础设施层：数据持久化和外部服务

这种分层设计使得各层职责清晰，便于团队协作和维护。特别值得一提的是，系统使用EF Core Code First进行数据库建模，这种方式特别适合快速迭代的开发场景。开发人员可以直接在C#代码中定义数据模型，然后通过迁移命令自动生成数据库结构。

2.2 前端架构设计

前端采用Vue.js作为主要框架，配合Bootstrap实现响应式布局。Vue的组件化开发模式使得前端代码更易于维护和复用。例如，考试页面可以拆分为多个独立组件：

考试信息展示组件
题目展示组件
计时器组件
答题卡组件

这种组件化设计不仅提高了开发效率，也使得后续功能扩展更加方便。Bootstrap的引入则确保了系统在各种设备上都能提供良好的用户体验。

3. 核心功能模块实现

3.1 用户角色与权限管理

系统设计了三种角色：

管理员：拥有最高权限，可管理系统所有功能
教师：可管理题库、考试和成绩
考生：可参加考试、查看成绩

权限控制采用基于角色的访问控制(RBAC)模型，在后端通过ASP.NET Core的授权特性实现：

csharp复制[Authorize(Roles = "Admin")]
public class UserController : Controller
{
    // 用户管理接口
}

这种实现方式简单有效，能够满足大多数考试系统的权限需求。对于更复杂的权限场景，可以考虑使用策略模式的权限验证。

3.2 题库管理模块

题库管理是考试系统的核心功能之一。系统支持多种题型：

单选题
多选题
判断题
填空题
简答题

数据库设计采用灵活的结构，允许每种题型有不同的字段需求。例如，选择题需要存储选项内容，而简答题则需要存储评分标准。

3.3 考试管理模块

考试管理模块实现了完整的考试生命周期管理：

考试创建：设置考试基本信息、时间、参与人员等
试卷生成：支持手动组卷和自动组卷
考试监控：实时查看考试情况
考试结束：自动收集答卷

自动组卷算法考虑了多种因素：

题目难度分布
知识点覆盖
题目类型比例

这确保了生成的试卷既符合考试要求，又具有合理的难度分布。

4. 关键技术实现细节

4.1 国际化实现

国际化是系统的亮点功能，实现涉及前后端协作：

后端配置：

csharp复制services.AddLocalization(opts => opts.ResourcesPath = "Resources");
services.Configure<RequestLocalizationOptions>(options => {
    var supportedCultures = new[] { "en", "zh" };
    options.SetDefaultCulture("zh")
        .AddSupportedCultures(supportedCultures)
        .AddSupportedUICultures(supportedCultures);
});

前端使用Vue i18n管理多语言资源，通过axios拦截器在请求头中添加语言标识。这种实现方式使得语言切换无需刷新页面，用户体验更加流畅。

4.2 自动评分系统

系统实现了智能评分功能，针对不同题型采用不同的评分策略：

csharp复制public interface IScoringStrategy
{
    Task<ScoreResult> EvaluateAsync(Answer answer);
}

public class MultipleChoiceScorer : IScoringStrategy
{
    public async Task<ScoreResult> EvaluateAsync(Answer answer)
    {
        // 获取正确答案
        var correctOption = await _context.Questions
            .Where(q => q.Id == answer.QuestionId)
            .Select(q => q.CorrectOption)
            .FirstOrDefaultAsync();
        
        // 判断并返回结果
        return new ScoreResult {
            IsCorrect = answer.SelectedOption == correctOption,
            Score = answer.SelectedOption == correctOption ? 5 : 0
        };
    }
}

策略模式的使用使得新增题型评分规则变得简单，只需实现新的IScoringStrategy即可。

4.3 考试计时功能

考试计时是考试系统的关键功能，前端实现如下：

javascript复制// ExamTimer.vue
data() {
  return {
    minutes: this.duration,
    seconds: 0
  }
},
methods: {
  startTimer() {
    this.interval = setInterval(() => {
      if(this.seconds === 0) {
        if(this.minutes === 0) {
          this.submitExam();
          return;
        }
        this.minutes--;
        this.seconds = 59;
      } else {
        this.seconds--;
      }
    }, 1000);
  }
}