转行前端一年多，之前一直忙于写业务代码，刚好近期不忙，就想写一个完全属于自己的项目。原本打算用react来做的，但是估计边翻api边写可能会花特别长的时间，所以打算这个项目完成后写个react的项目。
本项目因为时间关系暂时只做了部分功能，但是有空会继续更新的。

运行项目

1. 将代码克隆到本地：git clone https://github.com/chenging/vue.git;
2. 安装依赖：进入项目根目录，命令行工具输入npm install;
3. 运行前端服务器：命令行工具输入npm start,打开http://localhost:8888即可预览项目；
4. 安装数据库：可以直接到mongodb官网下载，安装完在C盘目录下新建文件夹data，进入data文件夹再新建一个db文件夹，此为mongodb默认存放数据目录；
5. 开启mongodb数据库：进入mongodb安装目录，找到mongod.exe文件，双击打开；
6. 运行node.js后台服务器：进入项目根目录，命令行工具输入node server，第一次运行会存入初始数据。

一、目录结构

二、主要技术栈

1. 前端：vue+vue-router+axios+es6+webpack+canvas;
2. 后端：node.js+koa；
3. 数据库：mongodb+mongoose

三、目前已完成的功能

1. 音乐播放：包括播放进度条、播放动画、歌曲切换
2. 视频播放：播放视频时暂停音乐播放，结束后会继续音乐播放；
3. 登录注册：登录、注册、修改资料
4. 歌曲搜索：通过歌曲名称、演唱者名字、歌词模糊查询。
5. 图片轮播：自动切换图片及手动切换图片

四、参考资料

1. webpack官方文档：https://webpack.js.org/guides...
2. 廖老师nodejs教程https://www.liaoxuefeng.com/w...
3. mongoose官方文档：http://mongoosejs.com/docs/ap...

五、在线演示及项目地址

1. 在线演示地址：https://chenging.github.io/vu...
2. github地址：https://github.com/chenging/vue

---

项目截图和代码部分就不放了，里面有详细的注释（主要是怕自己给忘了。。。）
第一次写文章，也是第一个个人项目，包括后台和数据库都是第一次。。。。
更多的是对自己的一个总结吧，也欢迎大家对代码或者项目部分提出意见和建议。
项目未完成的部分后续会逐渐完成。

---