Vue-cli 使用json server在本地模拟请求数据的示例代码

下面为你详细讲解“Vue-cli 使用json server在本地模拟请求数据的示例代码”的完整攻略，包含两条示例说明。

1. 安装json server

在终端使用npm全局安装json server：

npm install -g json-server

安装成功后，可以在终端使用json-server命令启动一个简单的服务器。

2. 创建json数据文件

在项目的根目录下，可以创建一个db.json文件，用于存储各种数据。以下是一个示例：

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "age": 22
    },
    {
      "id": 2,
      "name": "Bob",
      "age": 30
    }
  ]
}

3. 配置Vue cli项目与请求json数据

可以修改Vue cli项目的配置文件，从而在本地启动服务器，请求这些json数据。

在项目的vue.config.js文件中添加以下代码：

const path = require('path')
const jsonServer = require('json-server')

module.exports = {
  devServer: {
    before(app) {
      app.use(jsonServer.defaults())
      const router = jsonServer.router(path.join(__dirname, 'db.json'))
      app.use(router)
    }
  }
}

这将会在开发时启动一个json-server的示例，并从db.json文件中提供模拟数据。修改src/App.vue文件，从server请求数据：

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.age }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    fetch('/users')
      .then(response => response.json())
      .then(data => {
        this.users = data
      })
  }
}
</script>

默认情况下，json server将会提供一些常用的api，例如/users可以获得所有用户列表，/users/:id可以根据ID获得用户详情。如果需要其他更高级的自定义内容，可以参考json server文档进行调整。

示例1：简单演示

以下是简单的演示代码：

// db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

// vue.config.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

// App.vue
<template>
  <div>
    <h1>{{profile.name}}的日志</h1>
    <h2>所有博客文章：</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} 作者：{{ post.author }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      posts: [],
      profile: {}
    }
  },
  async mounted() {
    const resProfile = await fetch('/profile')
    const profile = await resProfile.json()
    this.profile = profile

    const resPosts = await fetch('/posts')
    const posts = await resPosts.json()
    this.posts = posts
  }
}
</script>

示例2：添加请求头

以下是在请求中添加Headers的示例代码：

// vue.config.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use((req, res, next) => {
  res.header('X-Hello', 'World')
  next()
})
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

// App.vue
<template>
  <div>
    <h1>{{profile.name}}的日志</h1>
    <div>X-Hello: {{hello}}</div>
    <h2>所有博客文章：</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} 作者：{{ post.author }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      posts: [],
      profile: {},
      hello: null
    }
  },
  async mounted() {
    const resProfile = await fetch('/profile')
    const profile = await resProfile.json()
    this.profile = profile

    const resPosts = await fetch('/posts')
    const posts = await resPosts.json()
    this.posts = posts

    this.hello = resPosts.headers.get('X-Hello')
  }
}
</script>

以上是“Vue-cli 使用json server在本地模拟请求数据的示例代码”的完整攻略，希望能对你有所帮助。