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 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...
随机推荐
- python 之@staticmethod和@classmethod
在python中,要调用一个类中的方法,一般的操作步骤如下: 1.实例化此类 2.调用此类中的方法 而@staticmethod和@classmethod则打破了这种引用方式,可以在不实例化类的情况下 ...
- javascript 正则(将数字转化为三位分隔的样式)【转】
原文:https://www.cnblogs.com/sivkun/p/7123963.html })+\b)/g, ',') 解释: \b : 匹配单词边界,就是位于字符\w([a-zA-Z0-9_ ...
- jquery实现显示textarea输入字符数
起初会想到使用keyup.keydown.keypress或者是onchange事件,onchange需要失去焦点才触发, 其它三个有些对按住键盘某个键不放不生效,有些对使用中文输入法正在输入时统计不 ...
- 通过HTTP参数污染绕过WAF拦截 (转)
上个星期我被邀请组队去参加一个由CSAW组织的CTF夺旗比赛.因为老婆孩子的缘故,我只能挑一个与Web漏洞利用相关的题目,名字叫做”HorceForce”.这道题价值300点.这道题大概的背景是,你拥 ...
- 针对系统中磁盘IO负载过高的指导性操作
针对系统中磁盘IO负载过高的指导性操作 主要命令:echo deadline > /sys/block/sda/queue/scheduler 注:以下的内容仅是提供参考,如果磁盘IO确实比较大 ...
- ip 命令的使用
网上相似的资源很多,可以参考如下资料: man ip ip help 博客链接: https://linoxide.com/linux-command/use-ip-command-linux/ ht ...
- Python实例---模拟微信网页登录(day1)
第一步:创建Django项目 创建Django项目,添加App 创建静态文件夹static 修改settings.py文件 1. 取消csrf注释 2. 添加静态文件路径 # 添加静态文件路径 STA ...
- 作为一名GIS从业人员,这些网站你应该关注
前言:今年工作的第二年,端午节后,入职新公司.总算是回归本行,从事GIS相关工作.这个系列算是对在公司工作和学习成长的记录吧. 数据篇: 作为遥感的商业应用,首先考虑的是遥感数据的产品化. ...
- PyQt5--QSlide
# -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: ''' import sys f ...
- 打开Excel时提示“向程序发送命令时出现问题”
Excel界面中点击“文件”,选择“选项”,在弹出的“Excel选项”对话框中依次点击“高级”-“常规”,然后取消勾选”忽略使用动态数据交换(DDE)的其他应用程序”: