vue2.0项目使用vue-resource实现简单的post和get(实例详解)

匿名 (未验证) 提交于 2019-12-03 00:32:02

本文只展示vue-resource实现的相关代码,对于页面的实现和数据渲染就不多加解释了。

一、安装

1、下载并安装vue-resource

npm install vue-resource --save


查看依赖文件存在vue-resource说明安装成功

2、vue项目中引入vue-resource

在main.js函数中引入,如下图


二、应用

我使用了“JSONPlaceholder”网站提供的API接口来模拟post和get。

1、post数据到服务器:

定义了一个blog对象,用于存放用户输入的值,然后把blog对象传输到服务器。

JSONPlaceholder提供的数据:


1)定义一个blog对象(初始化为空):


2)post方法:把blog对象传输到服务器


按钮被点击后触发post方法:


测试

前端页面展示:


点击添加博客按钮后,查看后台数据如下:


(用户输入的数据已经传输到后台服务器,完成)

2、get服务器的数据

读取JSONPlaceholder上面的数据,并在前端页面中展示

1)声明一个空数组来存放从服务器读取的数据:


2)get方法读取服务器里的数据:


3)页面渲染数据


测试

页面展示的结果:共有十条数据


(完成)

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!