详解vue中使用express+fetch获取本地json文件

下面就详细讲解如何在vue中使用express+fetch获取本地json文件的完整攻略。

简介

Vue.js是一款极易上手的渐进式JavaScript框架，而Express是一款基于Node.js的快速、灵活的Web应用开发框架。在vue中使用express+fetch获取本地json文件，可以极大地方便我们的前端开发工作，特别是在开发中使用到模拟数据以及前后端分离方面，更是非常重要。

安装Express依赖

要在vue中使用express，首先需要安装express依赖。在你的项目目录下，使用以下命令安装：

npm install express --save

安装完成后，在项目package.json文件的依赖列表中，你会发现 express 已被成功添加。

创建本地JSON文件

接下来，我们将在项目根目录下创建一个本地JSON文件，模拟一个假数据。假设这个文件名为 movies.json ，并且内容如下：

{
  "movies": [
    {
      "id": 1,
      "name": "The Shawshank Redemption",
      "year": 1994,
      "director": "Frank Darabont",
      "rating": 9.2
    },
    {
      "id": 2,
      "name": "The Godfather",
      "year": 1972,
      "director": "Francis Ford Coppola",
      "rating": 9.1
    },
    {
      "id": 3,
      "name": "The Dark Knight",
      "year": 2008,
      "director": "Christopher Nolan",
      "rating": 9.0
    }
  ]
}

添加Express中间件

我们已经安装好了express，接下来将要创建一个Express中间件，用于读取json文件并返回给客户端。在项目根目录下，创建一个名为 server.js 的文件，并添加以下代码：

const express = require('express');
const app = express();

app.get('/movies', (req, res) => {
  res.sendFile(__dirname + '/movies.json');
});

app.listen(3000, () => {
  console.log('express listening on port 3000');
});

这段代码创建了一个Express实例，并在 app 中添加了一个路由句柄，当客户端发起 /movies 的请求时，服务端将读取 movies.json 并将其返回给客户端。

在Vue中使用Fetch API来获取本地JSON文件

接下来我们要在Vue中使用Fetch API来获取本地JSON文件。在 App.vue 中添加以下代码：

<template>
  <div>
    <h1>Movies List</h1>
    <ul>
      <li v-for="movie in movies" :key="movie.id">
        {{ movie.name }} ({{ movie.year}})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      movies: []
    };
  },
  mounted() {
    fetch('/movies')
      .then(response => response.json())
      .then(data => {
        this.movies = data.movies;
      })
      .catch(error => console.error(error));
  }
};
</script>

这部分代码包括了一个 ul 列表，用于显示从服务端获取的电影数据。我们通过在 mounted 钩子内使用 Fetch API 来获取本地文件，并在获取数据成功后将其添加到 movies 属性中。

示例解释

我们已经了解了如何在Vue中使用express+fetch获取本地json文件，下面将提供两个示例来展示这个过程。

示例1：获取学生列表

在这个示例中，我们将要创建一个名为 students.json 的本地json文件，模拟一个假数据，内容如下：

{
  "students": [
    {
      "id": 1,
      "name": "Tom",
      "age": 12,
      "gender": "male",
      "score": 85
    },
    {
      "id": 2,
      "name": "Kate",
      "age": 13,
      "gender": "female",
      "score": 97
    },
    {
      "id": 3,
      "name": "Jack",
      "age": 11,
      "gender": "male",
      "score": 78
    }
  ]
}

然后，我们将使用以上教程中的方法来创建Express中间件，并使用 Fetch API 来获取本地JSON文件。模板代码可以如下：

<template>
  <div>
    <h1>Student List</h1>
    <ul>
      <li v-for="student in students" :key="student.id">
        {{ student.name }} ({{ student.score}})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      students: []
    };
  },
  mounted() {
    fetch('/students')
      .then(response => response.json())
      .then(data => {
        this.students = data.students;
      })
      .catch(error => console.error(error));
  }
};
</script>

示例2：获取文章列表

在这个示例中，我们将要创建一个名为 articles.json 的本地json文件，模拟一个假数据，内容如下：

{
  "articles": [
    {
      "id": 1,
      "title": "How to Build a Blog",
      "author": "John Doe",
      "date": "2022-07-01",
      "content": "..."
    },
    {
      "id": 2,
      "title": "10 Tips for Better Time Management",
      "author": "Jane Smith",
      "date": "2022-07-05",
      "content": "..."
    },
    {
      "id": 3,
      "title": "Why Study Abroad?",
      "author": "Bob Johnson",
      "date": "2022-07-10",
      "content": "..."
    }
  ]
}

同样，我们将使用以上教程中的方法来创建Express中间件，并使用 Fetch API 来获取本地JSON文件。模板代码可以如下：

<template>
  <div>
    <h1>Article List</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }} ({{ article.date}})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    fetch('/articles')
      .then(response => response.json())
      .then(data => {
        this.articles = data.articles;
      })
      .catch(error => console.error(error));
  }
};
</script>

以上两个示例都是基于Vue.js框架而展开，但实际上，在其他JavaScript框架或纯JavaScript项目中，这种方法同样适用。