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

让我们来详细讲解“vue-resource + json-server模拟数据的方法”完整攻略。

首先，我们需要先了解一下Vue.js的两个插件：vue-resource和json-server。

vue-resource是Vue.js官方提供的一个轻量级的ajax库，用于发送http请求和处理响应数据。使用该库可以方便地处理跨域请求、请求头设置和拦截器等常用功能。

json-server是一个可以快速搭建本地RESTful API服务器的库，它可以从JSON文件或JavaScript对象中创建一个RESTful API服务器，支持各种HTTP方法（GET、POST、PUT、PATCH、DELETE等）。

下面是“vue-resource + json-server模拟数据的方法”的完整攻略：

1. 安装vue-resource和json-server

我们可以使用npm来安装这两个库：

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

其中，--save表示将vue-resource添加到项目的依赖中，--save-dev表示将json-server添加到项目的开发依赖中。

2. 创建数据文件和json-server启动文件

我们先在项目的根目录下创建一个data.json文件，用于存储模拟数据。该文件内容可以根据需要自行编辑。

{
  "users": [
    {"id": 1, "name": "张三"},
    {"id": 2, "name": "李四"},
    {"id": 3, "name": "王五"}
  ]
}

接着，我们需要在项目的根目录下创建一个server.js文件，用于启动json-server服务器。该文件内容如下：

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('data.json')
const middlewares = jsonServer.defaults()

const port = process.env.PORT || 3000

server.use(middlewares)
server.use(router)
server.listen(port, () => {
  console.log(`JSON Server is running on port ${port}`)
})

其中，router指定json-server的数据来源（我们的例子中是data.json文件），middlewares指定json-server的中间件（如CORS、静态文件等），port指定服务器端口。

3. 配置vue-resource

我们需要在Vue.js中显式使用vue-resource插件。可以在入口文件（如main.js）中添加以下代码：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

这样就可以在Vue.js中使用this.$http语法调用http请求了。

4. 发送http请求获取数据

我们在Vue.js组件中使用this.$http.get方法获取json-server模拟的数据。例如：

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.$http.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.body
      })
  }
}

该例子中，我们通过this.$http.get('http://localhost:3000/users')请求获取http://localhost:3000地址下的users数据，并将请求结果回填到users变量中。

这是一个基本的示例，你可以在Vue.js组件中根据需要定制各种HTTP请求，如POST、PUT、DELETE等。

5. 使用模拟数据运行项目

为了使用json-server模拟数据，我们需要先启动server.js文件以启动服务器，然后再启动Vue.js项目。

可以在package.json中添加以下脚本命令：

{
  "scripts": {
    "dev": "node server.js & npm run serve",
    "serve": "vue-cli-service serve"
  }
}

其中，npm run dev表示同时启动json-server和Vue.js项目，npm run serve表示只启动Vue.js项目。

现在我们可以使用npm run dev命令打开项目，json-server服务器会在http://localhost:3000地址下启动，Vue.js项目会在http://localhost:8080地址下启动，并能够从json-server模拟的数据中获取数据。

以上就是“vue-resource + json-server模拟数据的方法”的完整攻略。