vue-resource + json-server模拟数据的方法

本文介绍了vue-resource + json-server模拟数据，分享给大家，具体如下：

一、安装

npm install vue-resource --save
npm install json-server --save

二、配置与使用vue-resource

// main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)
   this.$http.get('api/getNewsList')
    .then(function (data) {
     console.log(data)
    }, function (err) {
     console.log(err)
    })

三、配置 json-server

// dev-server.js
var jsonServer = require('json-server')
var apiServer = jsonServer.create()
var apiRouter = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()

apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(port + 1, function () {
 console.log('JSON Server is running')
})
// config/index.js
dev:{
  ...
  proxyTable: {
   '/api/': 'http://localhost:8081/'
  },
  ...
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

    最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观

  • Vue请求JSON Server服务器数据的实现方法

    Vue请求JSON Server服务器数据的实现方法

    由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据.此处的后台服务器中的数据由JSON Server所提供. 注意事项 json的数据结构 这是之前所请求的json数据: { "status":0 ,"message":[ { "id":1 ,"name":"张三" } ,{ "i

  • Vue2.5通过json文件读取数据的方法

    1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require('portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取对应的本地数据 var 数据名称 = app

  • 在vue里面设置全局变量或数据的方法

    实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像

  • Vue实现用户自定义字段显示数据的方法

    如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q

  • php从数据库读取数据,并以json格式返回数据的方法

    php中,从数据库读取数据,并以json格式返回数据.具体方法如下: 第一步,定义相关变量 $servername = "localhost"; $username = "root"; $password = "root"; $mysqlname = "datatest"; $json = ''; $data = array(); class User { public $id; public $fname; public $

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • jQuery访问json文件中数据的方法示例

    本文实例讲述了jQuery访问json文件中数据的方法.分享给大家供大家参考,具体如下: 有时候我们可能需要用到json文件存储数据,然后通过前台语言直接进行访问. 首先是json文件: { "管道": [ { "ElementId": "标识号", "GISID": "GISID", "Label": "编号", "StartNodeID":&q

  • AJAX实现JSON与XML数据交换方法详解

    目录 1.JS中如何创建和访问JSON对象 2.基于JSON的数据交换 3.基于XML的数据交换 1.JS中如何创建和访问JSON对象 (1)在javascript语言中怎么创建一个json对象,语法是什么? "属性名" : 属性值,"属性名" : 属性值.........的格式! 注意:属性值的数据类型随意:可能是数字,可能是布尔类型,可能是字符串,可能是数组,也可能是一个json对象..... <!DOCTYPE html> <html lan

  • SQL Server解析/操作Json格式字段数据的方法实例

    SQL Server解析/操作Json格式字段数据的方法实例

    目录 1 json存储 2 json操作 3其他 总结 1 json存储 在sqlserver 中存储json ,需要用字符串类型进行存储,一般用nvarchar()或 varchar()进行存储,不要用text进行存储,用text时候,json的函数不支持. 2 json操作 主要介绍5个函数: (1)openJson:打开Json字符串 (2)IsJson:判断一个字符串是不是合法的Json格式.是返回1,否返回0,null返回null. (3)Json_Value:从Json字符串中提取值

  • vue-resource + json-server模拟数据的方法

    本文介绍了vue-resource + json-server模拟数据,分享给大家,具体如下: 一.安装 npm install vue-resource --save npm install json-server --save 二.配置与使用vue-resource // main.js import VueResource from 'vue-resource' Vue.use(VueResource) this.$http.get('api/getNewsList') .then(fun

随机推荐