# 培训网站

**Repository Path**: judicial-training/sodium

## Basic Information

- **Project Name**: 培训网站
- **Description**: 司法培训——培训网站vue
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-26
- **Last Updated**: 2026-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# sodium
# 法制培训业务端-PC
> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8086
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

项目整体定位
sodium 是一个 Vue2 PC 端法治培训业务系统，核心围绕“学员在线学习 + 考试考核 + 个人中心”闭环，业务上更偏政企培训平台（课程课时、考试次数、证书导向、备案信息展示等）。

架构概述（技术与分层）
前端基座：Vue 2 + Vue Router + Vuex + Axios + Element UI，打包仍是 webpack3 时代模板。
入口初始化集中在 main.js：全局注册 UI 库、工具方法 utils、common、过滤器、视频播放器、Cookie、Moment。
路由主干清晰：以 view 目录为业务页面容器，核心一级路由是 home / course / theTest / my / teacher / news，子路由承载功能页。
状态管理偏轻量：Vuex 只存放少量全局状态（登录态标识、考试标题、课程类型等），没有严格的 mutations/actions 分层，很多地方直接改 state。
接口层为工具式封装：src/utils/index.js 对 GET/POST 做统一入口，注入 userId/token 头，统一处理 retCode（如 L0011 登录失效）。
跨组件通信：大量使用 globalBus 事件总线（登录状态广播等），而非完全依赖 Vuex。
业务逻辑主线（核心流程）
登录与鉴权

顶部导航里集成登录弹窗（身份证/执法证号登录）。
路由守卫按 to.meta.isJump 与 Cookie 判断是否放行；未登录弹窗提示并回首页。
接口层遇到登录失效会清本地凭据并广播 isLogin=false。
课程学习链路（最核心）

课程中心区分公共/专业课，分页拉取课程列表。
进入上课页后加载视频、讲义 PDF、学习记录，支持断点续播。
定时心跳上报学习进度（videoHeartbeat），并带有防快进逻辑（按时间差控制）。
学习中会随机弹题（随堂抽题），答题后继续播放，体现“学习过程监管”。
考试链路

考试中心展示考试计划、开始/结束状态、必修/选修课时进度、可用考试次数。
支持模拟/正式/特殊考试入口，按 nextAction、剩余次数、时间窗做前置校验。
考后进入考试记录/回顾页，形成“学习-考试-结果”闭环。
个人中心

包含个人资料维护、执法证号绑定、密码修改。
表单校验规则较完整（姓名、密码复杂度、身份证格式等）。
设计风格总结（界面与代码）
视觉风格

明显“政务培训平台”风格：红白主色（#D32A00/#98000B）、大标题、信息卡片、流程感强。
首页采用“模块宫格 + 列表资讯 + 固定二维码 + 统一页头页脚”的门户型布局。
字体与样式更偏传统 PC 站点，强调可读性和正式感。
组件与页面组织风格

以“页面级大组件”为主，单文件较长（尤其课程播放页），业务逻辑集中在 methods。
新旧版本并存痕迹明显（Old/copy 文件较多），说明经历过多轮迭代重构但未完全清理。
样式以 less + scoped 为主，但通过 /deep/ 对第三方组件大量覆写。
工程风格（优缺点）

优点：业务链路完整、容错与登录失效处理覆盖较多、页面功能实用性强。
风险点：状态变更不够规范（直接改 Vuex state）、事件总线耦合较高、部分守卫/鉴权判断可维护性一般、超大组件后期维护成本偏高。