摘要：数据结构平台是为满足我校计算机学院的数据结构课程上机教学、实验和考试等需求，以提供在线编程服务为核心的教学辅助系统，具体包括题目练习、考试、实验、竞赛等功能。目前该平台的后端是使用PHP进行开发，前端使用HTML、CSS、JavaScript和jQuery插件进行开发。由于前端代码写在后端开发人员提供的模板文件中，因此，前端开发人员在基于这种模板文件进行开发时前端代码和模板代码混合在了一起，不仅使得代码的结构复杂，不容易理解，增加了功能扩展的难度，降低开发效率。除此之外，目前的数据结构平台的还存在着UI设计和部分功能用户体验不佳的问题。

本项目针对前后端代码耦合以及用户体验不佳这两个主要的问题，使用当前流行的MVVM(Model-View-ViewModel)模式的前端框架Vue.js和当下热门的前端资源模块化管理和打包工具Webpack进行前端代码构建，对UI界面进行改版，改善用户体验；将平台的前后端代码解耦和前端组件化，为之后的平台扩展和维护提供便利。

关键词：数据结构平台；Vue.js框架；单页面

目录

摘要

Abstract

1 绪论-1

1.1 研究背景-1

1.2 实现目标-1

2 需求分析-3

2.1 技术可行性分析-3

2.2 系统运行环境-3

2.3 关键技术介绍-3

2.3.1 Vue.js和Angualr.js、React的对比-3

2.3.2 Webpack和Grunt、Gulp的对比-4

2.3.3 懒加载技术-4

3 概要设计-6

3.1 功能模块设计-6

3.2 前端设计-7

3.2.1 组件划分-7

3.2.2 网页设计-8

4 系统实现-9

4.1-页面搭建-9

4.1.1 开发环境搭建-9

4.1.2 组件开发-9

4.1.3 添加路由-10

4.1.4 添加状态管理-10

4.1.5 性能优化-11

4.2 数据通信-11

4.2.1 假数据模拟-11

4.2.2 Ajax交互与跨域-12

4.2.3 接口联调-12

5 项目测试-13

5.1 功能测试-13

5.2 页面性能-15

结    论-16

参 考 文 献-17

致    谢-18