我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)
你们知道的,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)的更多相关文章
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- vue+vuex初入门
Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...
- use vue vuex vue-router, not use webpack
vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...
- [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统
好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...
- vue vuex vue-rouert后台项目——权限路由(超详细简单版)
项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...
- [Vue] vuex进行组件间通讯
vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ...
- vue+vuex 回退定位到初始位置
先放出两张图(没错,你还在9012,做为一名资深设计师我唯一的技能点就是留白),简单说明下问题未做回退定位(从落地页回退,每次都回到A位置)想死啊有木有,每次都需要手动重新定位来选择,你大哥看到你做个 ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
随机推荐
- Sencha Touch学习(一)
一.Ext的内部类结构示意图 基类Ext.Base 该类是所有通过Ext.define定义出来的类的基类. 是所有Ext类的基石. 来自为知笔记(Wiz)
- dedecms标签使用
关键描述调用标签: <meta name="keywords" content="{dede:field name='keywords'/}">&l ...
- MySQL中 InnoDB 和 MyISAM 小结
转:http://blog.csdn.net/ithomer/article/details/5136982 部分内容: InnoDB和MyISAM的差别 InnoDB和MyISAM是许多人在使用My ...
- laravel memcached使用
当第一次使用cache时,想用 memcached 的方式,但是它直接报错: 说明你的php没安装 memcached 这个扩展,在ubuntu下直接 sudo apt-get install mem ...
- Oracle物化视图的用法与总结
物化视图(material view)是什么? 物化视图是包括一个查询结果的数据库对象,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表. 物化视图存储基于远程表的数据,也可以称为快照(类 ...
- CocoaPods安装和使用教程 分类: ios技术 ios相关 2015-03-11 21:53 48人阅读 评论(0) 收藏
目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...
- mongodb学习(四)CRUD操作
CRUD操作: 1. 插入操作: 直接使用 insert可执行单个操作,也可以执行批量操作 书上的batchInsert会报错.似乎被废弃了. db.foo.insert({"bar&quo ...
- module_param()函数
1.定义模块参数的方法: module_param(name, type, perm); 其中,name:表示参数的名字; type:表示参数的类型; perm:表示参数的访问权限; ...
- 统计学常用概念:T检验、F检验、卡方检验、P值、自由度
1,T检验和F检验的由来 一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错的概率,我们会利用统计学家所开发的一些统计方法,进行统计检定. 通过把所得到的统计检定值,与统计学家建立了一 ...
- UVa 270 & POJ 1118 - Lining Up
题目大意:给一些点,找出一条直线使尽可能多的点在这条直线上,求这条直线上点的个数. 以每一个点为原点进行枚举,求其它点的斜率,斜率相同则说明在一条直线上.对斜率排序,找出斜率连续相等的最大长度. #i ...