每日瑜伽应用程序

摘  要：该项目以Visual Studio Code为主要的开发工具，运用了Vue框架，数据库使用Apache+MYSQL+Node.js的服务器系统开发套件的XAMPP这款软件，该软件包含了管理MySQL的工具phpMyAdmin，即可对MySQL进行可视化操作。主要功能有用户的登录模块、注册模块、选课学习模块、关注模块、搜索模块、个人模块（个人账号密码信息、个人关注的足迹、更改个人信息）、了解课程详情页模块、评论模块、发布个人动态模块等。

论文分为引言、开发工具及环境介绍、项目概述、需求分析、瑜伽应用程序的设计、系统实现、测试、总结和展望八个部分的组成。

关键词：每日瑜伽 web程序设计 Vue组件

目 录

1 引言 1

1.1 背景.. 1

1.2 意义和目的 1

1.3可行性研究 1

2 开发工具及环境分析 2

2.1 每日瑜伽App开发环境 2

2.1.1 应用程序实践环境 2

2.1.2 开发实践环境 2

2.2 项目开发工具 4

2.2.1 Visual Studio Code 1.42.1 4

2.2.2 Element 4

2.2.3 XAMPP Control 5

2.2.4 Microsoft Office Visio 6

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

3.3 项目进度 8

4 需求分析 10

4.1 功能性需求概述 10

4.1.1 应用总功能结构图 10

4.1.2 功能模块概要说明 10

4.2 概要设计 10

4.2.1 总体设计 10

4.2.2 总体结构 10

4.3 研究存在的问题及解决办法 11

4.4 用例模型 11

4.4.1 确定软件项目中的参与者 11

4.4.2 确定软件项目中的用例 12

4.4.3 软件项目用例图 12

4.4.4 用例列表 13

4.5 用例 14

4.5.1 登录用例 14

4.5.2 用户注册用例 15

4.5.3 加入课程用例 16

4.5.4 关注用户用例 17

5 瑜伽应用程序的设计 18

5.1 网站结构 18

6 系统实现 19

6.1 说明 19

6.1.1 项目文件命名规范 19

6.1.2 项目的文件结构说明 19

6.2 应用程序功能实现 19

6.2.1 路由组件代码 19

6.2.2 用户登录注册 21

6.2.3 主页 24

6.2.4 课程详情页面 31

6.2.5 课程学习页面 37

6.2.6 选课页面 40

6.2.7 加入课程详情页面 44

6.2.8 老师陪你详情 52

6.2.9 关注点赞页面 63

6.2.10 个人中心页 67

6.2.11 搜索 73

6.2.12 修改资料 78

6.2.13 账号绑定 83

6.3 后台系统功能实现 86

6.3.1管理员登录 86

6.3.2管理员退出 88

6.3.3用户管理 89

6.3.4评论管理 98

6.3.5消息管理 102

6.3.6选课管理 114

7 测试 122

7.1 测试 122

7.2 测试例子以及其结果 122

7.2.1 登录测试 122

7.2.2 关注页测试 123

8 总结与展望 124

致谢 125

参考文献 126