前段时间《极客时间》做企业权益活动的时候，我和其它同事购买了一批课程。但每门课程只能学习30天，就写了个脚本（详情可以看另一篇文章：[](https://www.cnblogs.com/tester-xt/p/12893060.html)），把课程保存到了本地（Markdown 或 HTML 文本）。
这一批课程保存下来后基本上都躺在磁盘里没动过了（和网盘中躺着的一堆学习资料同样的命运），主要是使用电脑时没有较多时间来看这些课程。于是就有想过把这些课程放到手机上，利用一些碎片时间用手机学习这些课程，但是把这些文档直接放到手机上查看也不太方便（在手机上找了个 Markdown 文档软件体验了下也不太好）。
尝试过无法用现有软件更好的学习这些课程后，就考虑着是不是可以像极客时间官方一样，把这些课程放到一个服务器上，然后在手机上用网页获取这些课程的信息然后展示。照着这个思路，利用业余时间去实现了下，发现还真可以达到我的目的，在手机上用网页查看这些课程的信息并且能正常播放各个课程的音频文件，下面就来大概介绍下。
怎么做的
整体思路还是按前面说的，把这些课程资源文件放到服务器里面，然后服务器对外提供几个接口。前端用 vue.js 做了几个页面，通过调取服务器提供的接口获取数据并展示。
后端 课程资源放到服务器上 服务器上启动一个 Flask服务对外提供接口通过 Flask-restful编写接口，把服务器本地资源读取后通过接口返回分登陆接口、课程列表接口、课程详情接口
前端 利用 vue-cli创建一个基本项目使用 vue.js编写页面基本逻辑使用 Vant库的组件来完成页面元素布局前端项目同样部署到服务器中，通过 Nginx提供外部访问能力
怎么用
目前已经部署在服务器上并且可供外部浏览器访问，地址为：http://139.9.165.132:7912/ （暂时还没买域名），需要登录账号密码才可看到课程，感兴趣的可以微信公众号回复关键字：极客，或者微信私聊获取账号密码。
可以用浏览器或者微信打开地址进入，我现在是把这个网址保存到微信浮窗中，方便下次快速打开
因为目前是 IP 地址，用微信打开的时候可能会有访问提示，直接继续访问就行
进入页面后，首先需要登录
登录后点击左上角菜单图标，选择要看的课程
选择了具体章节后，点击一下课程选择框外部灰色区域，会自动关闭选择框并加载指定章节的详细内容
在详细内容页面就可以直接查看课程章节的所有信息，并且可以播放音频
后续可优化地方
目前只能勉强达到能用的地步，体验上可能还不是很好，还需要做很多优化，使用过程中遇到什么问题欢迎随时联系我，目前已想到的一些可优化点如下：
账号体系不够完善，目前只有我自己在服务器手动添加账号； 课程列表可按类别进行分类（如后端相关、前端相关、基础相关）； 选择同样的章节点击灰色区域后后重新加载章节内容，可优化成，如果目前已打开该章节的内容就不再重新加载； 将网页加到微信浮窗后，如果过长时间未打开，重新再打开可能需要重新选择课程和章节，后续可以考虑增加记忆功能； 目前音频文件为点击播放的时候才开始加载，后续可以考虑优化成加载页面资源的时候一起加载音频文件； 音频部分不可以支持倍数播放和快进后退，只能手动拖到进度条，后续可考虑替换成功能较完整的音频播放组件； 音频播放完后可自动切换到下一个音频进行播放； 页面下拉到最底部查看完章节内容后，可以快速切换下一章节； 整体字体样式可以考虑再优化； 目前图片不支持点击后放大图片展示； 章节内容中，代码部分的样式目前为蓝底白字，可以考虑优化成某些 IDE 的样式； 目前不支持视频或者 PDF 类的资源加载到手机上；
因为时间关系，目前整个项目做得比较简单也比较粗糙，暂时不准备开源。如果有通过我之前脚本下载过课程的小伙伴也想把自己保存的课程按这样放到手机上观看，可以联系我。同时欢迎感兴趣的前端童鞋一起帮忙改进页面和优化交互体验。
