yindongqi 07a5f956f2 fix(study): 修复视频播放结束逻辑和定时器清理问题
修复视频播放结束判断条件,增加对播放进度的验证
添加定时器清理逻辑防止内存泄漏
2025-08-15 15:52:41 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-08-05 17:38:33 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00
2025-06-25 12:11:39 +08:00

JT360 前端项目

项目简介

JT360是一个基于Vue.js 2.x的前端项目使用Webpack 5.x作为构建工具。项目集成了Mint-UI组件库支持移动端开发。

技术栈

  • Vue.js 2.5.2 - 前端框架
  • Vue Router 3.0.1 - 路由管理
  • Vuex 3.0.1 - 状态管理
  • Mint-UI 2.2.13 - 移动端UI组件库
  • Webpack 5.88.2 - 构建工具
  • Axios 0.17.1 - HTTP客户端
  • Sass - CSS预处理器
  • buffer@6.0.3process@0.11.10 - Node.js核心模块polyfill

环境要求

Node.js版本要求

support Node.js 18.x 版本

注意使用Node.js 18.x版本时可能会遇到node-sass弃用警告和pkcs7包兼容性警告但不影响项目运行。

# 检查Node.js版本
node -v
# 推荐显示: v18.12.1 或更高版本

其他要求

  • npm >= 3.0.0
  • 支持ES6+的现代浏览器

安装和运行

1. 克隆项目

git clone [项目地址]
cd jt360front

2. 安装依赖

npm install --legacy-peer-deps
# 或者使用yarn
# yarn install

3. 开发环境运行

npm run dev
# 或者使用yarn
# yarn dev

4. 生产环境构建

npm run build
# 或者使用yarn
# yarn build

Webpack 5 升级说明

项目已从Webpack 3.x升级到Webpack 5.x主要解决了以下问题

  1. 添加了Node.js核心模块如Buffer、process的polyfill
  2. 配置了fallback解析路径
  3. 使用ProvidePlugin全局提供对象

升级后可能存在的警告:

  • node-sass弃用警告建议未来迁移到sass/sass-embedded
  • pkcs7包引擎版本不兼容警告建议未来更新此包

项目结构

jt360front/
├── config/                 # 配置文件
├── src/                    # 源代码
│   ├── components/         # 组件
│   │   ├── common/         # 公共组件
│   │   ├── login/          # 登录相关组件
│   │   ├── signin/         # 签到相关组件
│   │   ├── study/          # 学习相关组件
│   │   └── user/           # 用户相关组件
│   ├── assets/             # 静态资源
│   ├── router/             # 路由配置
│   ├── utils/              # 工具函数
│   ├── vuex/               # 状态管理
│   └── weixin/             # 微信相关配置
├── static/                 # 静态文件
└── index.html              # 入口HTML文件

主要功能模块

  • 用户认证 - 登录、注册、微信登录
  • 学习系统 - 课程管理、考试系统、每日练习
  • 用户中心 - 个人信息、证书管理、密码修改
  • 签到系统 - 二维码签到、签到记录
  • 留言系统 - 留言发布、查看、管理

开发注意事项

  1. Node.js版本支持Node.js 18.x版本
  2. 浏览器兼容性支持现代浏览器不支持IE8及以下版本
  3. 移动端适配项目主要针对移动端开发使用了Mint-UI组件库
  4. 依赖安装:建议使用npm install --legacy-peer-deps安装依赖以避免兼容性问题
  5. 浏览器兼容性支持现代浏览器不支持IE8及以下版本
  6. 移动端适配项目主要针对移动端开发使用了Mint-UI组件库

构建和部署

开发环境

  • 访问地址:http://localhost:8080
  • 支持热重载
  • 自动打开浏览器

生产环境

  • 执行 yarn build 生成dist目录
  • 将dist目录内容部署到Web服务器

常见问题

Q: 为什么使用Node.js 18.x版本会出现警告

A: 主要是node-sass和pkcs7包的兼容性问题这些警告不影响项目运行。未来计划迁移到sass/sass-embedded并更新pkcs7包。

Q: 如何解决依赖安装冲突?

A: 建议使用npm install --legacy-peer-deps命令安装依赖。

Q: 如何切换Node.js版本

A: 推荐使用nvmNode Version Manager来管理Node.js版本

# 安装指定版本
nvm install 18.12.1
nvm use 18.12.1

联系方式

  • 作者:王觉贤
  • 邮箱615297896@qq.com

许可证

私有项目,未经授权不得使用。

Description
讲堂360前端页面代码
Readme 11 MiB
Languages
JavaScript 70.3%
Vue 28.1%
SCSS 1.5%