vue-router单页应用简单示例(三)
用vue-resource向服务器请求数据
我们主要来了解一下以下内容:
- 模拟服务端返回数据
- 用vue-resource向服务器请求数据
模拟服务器返回数据
1、准备一个data.json文件
{
"books": [
{ "price": "111.00", "title": "语文", "img": "http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },
{ "price": "123.00", "title": "数学", "img": "http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},
{ "price": "113.00", "title": "英语", "img": "http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},
{ "price": "112.00", "title": "物理", "img": "http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}
]
}
这里,books字段里的每一个对象表示一本书的信息。
2、“写接口”
修改dev-server.js文件,在大概第20行左右的 var app = express()之后,添加上如下内容
var appData = require('../data.json')
var books = appData.books var apiRoutes = express.Router()
apiRoutes.get('/books', function(req, res){
res.json({
data: books
})
}) app.use('/api', apiRoutes)
1、安装vue-resource
2、修改相关文件
1.在router/index.js里导入并使用vue-resource
当我们点击语文,会看到页面有如下变化
url中detail后面的id参数被取到然后显示在页面中。
至此我们的简单单页示例已经完成。
附上github完整代码https://github.com/herozhou/vue-spa-example
vue-router单页应用简单示例(三)的更多相关文章
- vue-router单页应用简单示例(二)
我们先来理一下思路. 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost ...
- vue-router单页应用简单示例(一)
请先完成了项目初始化,具体请看我另一篇博文.vue项目初始化 看一下完成的效果图,很典型的单页应用. .vue后缀名的单文件组件 这里先说一下我对组件的理解.组件,顾名思义就是一组元素组成的一个原 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 一套Vue的单页模板:N3-admin
趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...
- Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖
1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- 使用Vue构建单页应用一
一. 环境准备 1 安装Node.js 最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/ 我使用的是 v6.3.1 Current 版本.Node. ...
- 单页WEB应用(三),Chat聊天模块
Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...
随机推荐
- load data infile出现“ERROR 13 (HY000): Can't get stat of '/tmp/test2.txt' (Errcode: 2)”问题
用load data infile导数据到mysql数据库出现这个该问题,解决方法如下: 安全起见,连接mysql的语句需要添加–local-infile, mysql -hlocalhost -ur ...
- python open 关于读、写、追加的总结
# -*- coding: utf-8 -*- # 测试文件名为: # text.txt # 测试文件内容为: # abcdefg # 每次操作后将文件复原 # r # 以只读方式打开文件,文件不可写 ...
- Nowcoder 提高组练习赛-R7
Nowcoder 提高组练习赛-R7 https://www.nowcoder.com/acm/contest/179#question 中间空了两场,因为实在是太难了... 第五场的第二题好像还比较 ...
- mpvue 使用echarts动态绘制图表(数据改变重新渲染图表)
最近在公司开发一款微信小程序,按照客户需求用饼状图显示当前设备状态(开机.故障.关机),于是就在网上寻找各种资料,找了很多mpvue使用关于echarts绘制图表,最终功夫不负有心人,找到一篇关于mp ...
- Scala学习之路 (七)Scala的柯里化及其应用
一.概念 柯里化(currying, 以逻辑学家Haskell Brooks Curry的名字命名)指的是将原来接受两个参数的函数变成新的接受一个参数的函数的过程.新的函数返回一个以原有第二个参数作为 ...
- M100(3) 无线数传
本文记录了无线数传配合地面Windos qt写的飞机控制SDK软件的使用过程 使用了两种类型无线数传 遇到问题 1 界面卡死问题 1.1 数传问题 问题描述: 使用非官方数传,点击active按键和一 ...
- pycharm 取消空格,逗号 等符号的自动补全
- OpenCV——阈值化
上述五种结合CV_THRESH_OTSU(自适应阈值),写成:THRESH_BINARY | CV_THRESH_OTSU
- Android-ProgressDialog点击对话框外部是不让其消失
1)ProgressDialog.setCanceledOnTouchOutside(false); 调用这个方法时,按对话框以外的地方不起作用.按返回键还起作用 2)ProgressDialog.s ...
- P2962 [USACO09NOV]灯Lights
贝希和她的闺密们在她们的牛棚中玩游戏.但是天不从人愿,突然,牛棚的电源跳闸了,所有的灯都被关闭了.贝希是一个很胆小的女生,在伸手不见拇指的无尽的黑暗中,她感到惊恐,痛苦与绝望.她希望您能够帮帮她,把所 ...