最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下. 一.工具环境 1.node.js 6.10.0,目前node.js最新版本是8.7.0,可以到官网下载最新版本安装.链接:http://nodejs.cn/download/ 2.编辑器,Hbuilder 8.8.4 3.windows 8.1 二.创建项目 1.安装node.js,默认安装在"C:\Program Files\nodejs&…

这几天完成了歌曲收藏功能,先看最后效果: 新注册用户:“newuser”,进入“我的音乐界面如下所示” 点击新建歌单,输入:“新歌单”,确认,如下: 目前还没有歌曲,打开音乐界面,点击收藏功能,如下,可以看到新创建的歌单已经在上面: 把歌曲收藏在新歌单,在打开我的音乐界面,已经收藏好了: 点击删除之后,可以看到歌曲已经被删除: 删除歌单: 基本的功能就是这样,有一些细节就不展示了,下面是实现,整体功能的实现,跟前面没太大区别,利用vue-resource和后台通信,发送请求,在后台利用mongo…

这是完成了预想中的最后两个功能:歌曲评论以及歌曲搜索. 1.评论效果: 用户点击评论按钮,评论框获取焦点. 输入之后点击提交,下方显示评论,用户名称以及日期.相应的用户也可以删除自己评论. 当然只能删除自己的评论,鼠标放置其他人评论上面不会显示删除按钮. 2.搜索歌曲 搜索可以搜索歌曲或者歌手,这里搜索"LiSA",结果如下: 也可以只输入“A”,显示如下: 这里有一个歌手页面,显示的是所有歌手的歌曲,如点击"Aimer"歌手: 至此,基本功能就展示完成,下面看实现…

上一篇遗漏了一个简单的效果没写,见下图: 主页面点击热门推荐和更多之后跳转到歌曲列表页面,现在的页面只是简单的把所有歌曲列出来,没有进行排序.实现起来也很简单,在MainPage的两个链接上添加: <div id="recommend-head"> <router-link to="/PopularMusic">热门推荐</router-link> <router-link to="/PopularMusic&qu…

上一篇文章讲到的是如何利用mongoose从数据库读取数据然后更新页面,接下来要实现的就是用户注册登录功能,这个功能涉及到的东西太多了,今天只实现了登录功能,登陆之后更新导航条界面,最后效果如下: 登录之前: 登陆之后(用户名:oujiamin): 这是登陆界面(还没有设置css): 主要实现步骤: 1.校验 所谓校验就是对用户的输入进行限制并且给出一点提示,这里使用的是vee-validate插件,该插件主要作用就在于可以很方便地绑定input标签并且给出校验规则和提示语,使用步骤: 安装:n…

1.利用vue-router实现页面跳转 程序可以正常运行之后,下面我们需要配置路由实现页面的局部刷新,这一功能将用来实现网站页面的跳转. 打开程序目录,进入"src\router\index.js",可以看到程序已经配置了一个路由和其相关联的组件. 这里引入了"vue-router",并且新建了一个Router对象,对象里有一个routes属性,是一个对象数组.routes的每一个对象都有以下属性: path:表示程序当前在什么路径下就需要渲染,"/&q…

上一篇文章中说到这一篇博客会实现音乐播放功能,只是令我意外的是,如果利用h5的audio标签,几行代码就实现了......先来看一下最终效果吧. 这里直接用了audio标签,样式没有怎么管,能获得音乐文件并且播放就足够了. 所以后面我利用了两天的时间,在看了一遍vue官方文档,然后看了vue-router + vue-resource,再学习了mongodb和mongoose,安装了Mongodb数据库,下载了mongo可视化工具robomongo并且学习使用,最后要实现的效果就是利用node.…

1.利用router-link在组件之间传递数据 如上图,MainPage.vue中主要有8个推荐曲目数据,主要实现方式是建立好主页面模板,然后用v-for循环获取返回的music对象,然后分别绑定曲目,代码如下: ul作为承载8个曲目的模板,利用v-for="music in musics"遍历musics数组,依次生成li标签填充页面.musics为一个对象数组,其内容是8个对象,具体实现如下图所示: 在dev-server.js中先把请求到的json函数(appData)复制一份…

Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Django搭建博客网站(三) 要用到的package django-pagedown markdown2 django-pagedown用来在后台生成markdown编辑器,markdown2则是用来将markdown解析成html显示在网页上. install $ pip install django-…

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje…