你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西。

这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊。

后台: nodejs 7 + koa 2 

这就没什么了,其实,只需要一个中转,转发查询百度音乐的接口。

关于百度音乐的接口,抓包获取百度歌曲api:http://www.tuicool.com/articles/fUbUZz3

前台:vue + vuex + vue-router

vue就不提了,现在比较火,最开始写了一个版本,是不带vuex,发现数据传递,子父,父子两个层级还好,多了,还真是麻烦,

后来重写了一个版本,引入了vuex + vue-router。

github地址:https://github.com/xiangwenhu/MPlaer

然后因为不想babel转换,所以chrome 55以上的版本才可以,而且需要开启实验特性,具体如下

依赖百度API, 手机上暂不能自动播放
chrome 版本55以上,chrome需要开启javascript相关试验性特性 
打开步骤,
1):打开chrome 
2):输入 chrome://flags/ 
3):ctrl +F 搜索javascript 4):找到 实验性 JavaScript Mac, Windows, Linux, Chrome OS, Android,点击启用,
5):重启浏览器

下载后 npm install 
npm run build 
node --harmony server/app.js

输入  http://localhost:3000/ 为 非vuex版本
输入 http://localhost:3000/index 为 vuex版本

懒了,暂为止

,奉上截图,

哦,忘了,css比较差,大量引用百度的,见谅

在线演示:http://babydairy2017.cloudapp.net:3000/index

截图:

我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)的更多相关文章

  1. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  2. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  3. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  4. [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

    好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...

  5. vue vuex vue-rouert后台项目——权限路由(超详细简单版)

    项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...

  6. [Vue] vuex进行组件间通讯

    vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ...

  7. vue+vuex 回退定位到初始位置

    先放出两张图(没错,你还在9012,做为一名资深设计师我唯一的技能点就是留白),简单说明下问题未做回退定位(从落地页回退,每次都回到A位置)想死啊有木有,每次都需要手动重新定位来选择,你大哥看到你做个 ...

  8. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  9. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

随机推荐

  1. js - object的属性操作

    视频学习地址: http://www.imooc.com/video/6002 原文PPT下载地址: http://img.mukewang.com/down/54c5ec1a000141f10000 ...

  2. 中国气象台api

    1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点,列出所有的省,其中的pyName字段是各个省XML的文件名,比 ...

  3. mysql优化———第二篇:数据库优化调整参数

    摘要 参数调优内容: 1. 内存利用方面 2. 日志控制方面 3.文件IO分配,空间占用方面 4. 其它相关参数 一  摘要 通过参数提高MYSQL的性能.核心思想如下:         1 提高my ...

  4. Spring+struts+ibatis(一)环境准备工作

    首先我们先了解几个jar包的作用和一些未曾见过的接口和类 xwork-2.0.7.jar XWork是一个标准的Command模式实现,并且完全从web层脱离出来.Xwork提供了很多核心功能:前端拦 ...

  5. hdu 2614

    #include<stdio.h> int map[99][99]; int vist[99]; int sum=1; int maxsum=1; int max=0; int N; vo ...

  6. iOS开发——判断邮箱格式

    //判断邮箱格式 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...

  7. XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法

    去第三方的info.plist文件中,比如TencentOpenApi_IOS_Bundle.bundel 的info.plist ,删除 executable file 这一行

  8. S3C2440的定时器详解

    还包含用于大电流驱动的死区发生器 位预分频器是可编程的,并且按存储在TCFG0和TCFG1寄存器中的加载值来分频PCLK 位递减计数器.当递减计数器到达零时,产生定时器中断请求通知CPU定时器操作已经 ...

  9. iOS所有常用证书,appID,Provisioning Profiles配置说明及制作图文教程

    概述: 苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有证书,做了这么多次还是感觉很纠结,索性直接记录下来,日后你我他查阅都方便: 首先得描述一下各个证书的定位,作用,这样在制作 ...

  10. Run Loop简介

    做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一门语言还是需要深层次的了解它,这样才能在使用的时候得心应手,出 ...