资讯专栏INFORMATION COLUMN

从0开始的Vue全栈项目(仿网易云音乐App)

ziwenxie / 484人阅读

摘要:转行前端一年多,之前一直忙于写业务代码,刚好近期不忙,就想写一个完全属于自己的项目。本项目因为时间关系暂时只做了部分功能,但是有空会继续更新的。项目未完成的部分后续会逐渐完成。

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

运行项目

将代码克隆到本地git clone https://github.com/chenging/vue.git;

安装依赖:进入项目根目录,命令行工具输入npm install;

运行前端服务器:命令行工具输入npm start,打开http://localhost:8888即可预览项目;

安装数据库:可以直接到mongodb官网下载,安装完在C盘目录下新建文件夹data,进入data文件夹再新建一个db文件夹,此为mongodb默认存放数据目录;

开启mongodb数据库:进入mongodb安装目录,找到mongod.exe文件,双击打开;

运行node.js后台服务器:进入项目根目录,命令行工具输入node server,第一次运行会存入初始数据。

一、目录结构

二、主要技术栈

前端:vue+vue-router+axios+es6+webpack+canvas;

后端:node.js+koa

数据库:mongodb+mongoose

三、目前已完成的功能

音乐播放:包括播放进度条、播放动画、歌曲切换

视频播放:播放视频时暂停音乐播放,结束后会继续音乐播放;

登录注册:登录、注册、修改资料

歌曲搜索:通过歌曲名称、演唱者名字、歌词模糊查询。

图片轮播:自动切换图片及手动切换图片

四、参考资料

webpack官方文档:https://webpack.js.org/guides...

廖老师nodejs教程https://www.liaoxuefeng.com/w...

mongoose官方文档:http://mongoosejs.com/docs/ap...

五、在线演示及项目地址

在线演示地址:https://chenging.github.io/vu...

github地址:https://github.com/chenging/vue

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88599.html

相关文章

  • 0开始Vue全栈项目仿网易音乐App

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

    YFan 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    leap_frog 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    graf 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    LittleLiByte 评论0 收藏0
  • Vue.js全家桶低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    melody_lql 评论0 收藏0

发表评论

0条评论

ziwenxie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<