用vue-resource向服务器请求数据

我们主要来了解一下以下内容:

  • 模拟服务端返回数据
  • 用vue-resource向服务器请求数据

模拟服务器返回数据

 
我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-server.js,在这个文件中,我们就可以来做一些模拟数据的工作。

1、准备一个data.json文件

在项目根目录下,新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。
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)

简单说明一下,这段代码就是通过请求醒目根目录下的data.json文件,拿到文件的内容并赋值给appData变量,取到里面的books字段内容保存在books变量中。然后,通过express提供的Router对象,以及Router对象的一些方法(这里是get方法)来设置请求的路径,以及请求成功后的回调函数来处理要返回给请求端的数据。最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。在这个“接口”中,当我们访问“http://localhost:8080/api/books”路径的时候,就会返回data.json里的books对象给我们。
 
这里我们先来简单验证一下是否能成功返回数据,打开命令行,cd到当前项目目录,运行 npm run dev ,等项目运行成功之后,在浏览器地址栏输入http://localhost:8080/api/books,看到如下图所示,数据正常返回,OK!“接口”就开发完成了。

1、安装vue-resource

打开命令行,cd到项目目录,运行 npm install vue-resource --save或者 cnpm install vue-resource --save,等待安装完成即可。
 

2、修改相关文件

1.在router/index.js里导入并使用vue-resource

在index.js中添加如下代码
 
 2.在App.vue中添加如下代码
 

然后,再回到浏览器,应该会看到如下图的效果了。

当我们点击语文,会看到页面有如下变化

url中detail后面的id参数被取到然后显示在页面中。

至此我们的简单单页示例已经完成。

附上github完整代码https://github.com/herozhou/vue-spa-example

vue-router单页应用简单示例(三)的更多相关文章

  1. vue-router单页应用简单示例(二)

    我们先来理一下思路. 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app,将App.vue中的模版渲染到入口界面(就是打开localhost ...

  2. vue-router单页应用简单示例(一)

    请先完成了项目初始化,具体请看我另一篇博文.vue项目初始化 看一下完成的效果图,很典型的单页应用. .vue后缀名的单文件组件   这里先说一下我对组件的理解.组件,顾名思义就是一组元素组成的一个原 ...

  3. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  4. 一套Vue的单页模板:N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  5. Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

    1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...

  6. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  7. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  8. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  9. 单页WEB应用(三),Chat聊天模块

    Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...

随机推荐

  1. 【JAVA】什么是冒泡排序?——面试加分题

    冒泡排序是一种计算机科学领域的较简单的排序算法,有心人将代码不断优化改良,本人特摘抄部分代码进行学习. 文章来自开源中国,转载自:程序员小灰.原文:漫画:什么是冒泡排序? 冒泡排序第一版 public ...

  2. net.exe use命令的使用

    net.exe use 查看当前的连接 net.exe use * /del /y 断开所有连接 net.exe use \\server\share "password" /us ...

  3. 表格排序(tablesorter)

    1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...

  4. 在TortoiseSVN使用clean up

    1.在[Cleanup]窗体中勾选中复选框[Clean up working copy status],选中该复选框表示解除锁定. 2.在[Cleanup]窗体中勾选中复选框[revert all c ...

  5. VC Debug和Release区别

    https://msdn.microsoft.com/en-us/library/xz7ttk5s.aspx   Optimizing Your Code Visual Studio 2015 The ...

  6. 【Vue.js学习】生命周期及数据绑定

    一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...

  7. MySQL并发相关的参数

    1.max_connections 这个参数可提高并发连接数,即允许连接到MySQL数据库的最大数量. 如果实验MySQL过程中遇到too many connections等问题,可提高这个值,此外我 ...

  8. 深入浅出Web开发——Fiddler

    环境配置: 如果使用Chrome,Fiddler无法捕捉HTTP请求信息,请检查Chrome是否使用SwitchyOmega插件.

  9. Alpha冲刺报告(6/12)(麻瓜制造者)

    今日已完成 邓弘立: 看github上的开源库 确定了几个对UI改进有帮助的第三方库 符天愉: 部署了用户修改信息,修改头像的接口,并且完成两个接口的api文档,复习了PHP的无限分类来实现商品的发布 ...

  10. 极限编程核心价值:勇气(Courage)

    原文:https://deviq.com/courage 极限编程核心价值:简单(Simplicity) 极限编程核心价值:沟通(Communication) 极限编程核心价值:反馈(Feedback ...