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 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...
随机推荐
- 【JAVA】什么是冒泡排序?——面试加分题
冒泡排序是一种计算机科学领域的较简单的排序算法,有心人将代码不断优化改良,本人特摘抄部分代码进行学习. 文章来自开源中国,转载自:程序员小灰.原文:漫画:什么是冒泡排序? 冒泡排序第一版 public ...
- net.exe use命令的使用
net.exe use 查看当前的连接 net.exe use * /del /y 断开所有连接 net.exe use \\server\share "password" /us ...
- 表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
- 在TortoiseSVN使用clean up
1.在[Cleanup]窗体中勾选中复选框[Clean up working copy status],选中该复选框表示解除锁定. 2.在[Cleanup]窗体中勾选中复选框[revert all c ...
- VC Debug和Release区别
https://msdn.microsoft.com/en-us/library/xz7ttk5s.aspx Optimizing Your Code Visual Studio 2015 The ...
- 【Vue.js学习】生命周期及数据绑定
一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...
- MySQL并发相关的参数
1.max_connections 这个参数可提高并发连接数,即允许连接到MySQL数据库的最大数量. 如果实验MySQL过程中遇到too many connections等问题,可提高这个值,此外我 ...
- 深入浅出Web开发——Fiddler
环境配置: 如果使用Chrome,Fiddler无法捕捉HTTP请求信息,请检查Chrome是否使用SwitchyOmega插件.
- Alpha冲刺报告(6/12)(麻瓜制造者)
今日已完成 邓弘立: 看github上的开源库 确定了几个对UI改进有帮助的第三方库 符天愉: 部署了用户修改信息,修改头像的接口,并且完成两个接口的api文档,复习了PHP的无限分类来实现商品的发布 ...
- 极限编程核心价值:勇气(Courage)
原文:https://deviq.com/courage 极限编程核心价值:简单(Simplicity) 极限编程核心价值:沟通(Communication) 极限编程核心价值:反馈(Feedback ...