Vue中使用Axios从JSON Server获取数据：无后端实现产品详情页动态数据展示方法咨询

当然可以实现啦！你已经用JSON Server搭好了数据来源，只需要做几个小调整就能让详情页动态展示对应产品的数据，甚至还能做到完全不需要运行后端服务的版本，下面一步步来：

1. 配置带参数的详情页路由 #

首先要确保你的Vue路由能接收产品ID参数，这样详情页才能知道要展示哪款产品。在路由配置文件中修改：

const routes = [
  { path: '/', component: Home }, // 你的首页路由
  { path: '/product/:id', component: ProductDetail } // 新增带id参数的详情页路由
];

2. 首页跳转时传递产品ID #

在首页的产品列表中，给每个产品添加跳转链接，把对应产品的ID传递到详情页路由。推荐用<router-link>来实现：

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <!-- 通过路由参数传递product.id -->
      <router-link :to="`/product/${product.id}`">
        <h3>{{ product.title }}</h3>
        <!-- 其他产品展示内容 -->
      </router-link>
    </div>
  </div>
</template>

3. 详情页动态获取对应产品数据 #

方式一：基于JSON Server接口（需要运行JSON Server） #

JSON Server默认支持通过/products/:id接口返回单条产品数据，在详情页组件的created钩子中请求该接口：

export default {
  data() {
    return {
      product: null
    };
  },
  async created() {
    try {
      // 从路由参数中获取产品ID
      const productId = this.$route.params.id;
      // 请求JSON Server的单条产品接口
      const response = await axios.get(`http://localhost:3000/products/${productId}`);
      this.product = response.data;
    } catch (err) {
      console.error('加载产品详情失败:', err);
    }
  }
};

方式二：完全无后端（读取本地JSON文件） #

如果不想依赖运行中的JSON Server，可以把products.json文件放到项目的public目录下，直接读取本地文件：

1. 先把JSON文件放在public/products.json
2. 首页请求改为本地文件：

async created() {
  try {
    const products = await axios.get('/products.json');
    this.products = products.data;
  } catch(err) {
    console.log(err);
  }
}

3. 详情页通过读取全部数据后筛选对应ID的产品：

export default {
  data() {
    return {
      product: null
    };
  },
  async created() {
    try {
      const productId = this.$route.params.id;
      // 读取本地JSON文件
      const response = await axios.get('/products.json');
      // 根据ID筛选对应产品
      this.product = response.data.find(item => item.id == productId);
    } catch (err) {
      console.error('加载产品详情失败:', err);
    }
  }
};

4. 详情页模板动态渲染数据 #

最后在详情页模板中根据获取到的product数据动态渲染内容即可：

<template>
  <div class="product-detail">
    <div v-if="product">
      <h1>{{ product.title }}</h1>
      <p>{{ product.description }}</p>
      <span>价格：{{ product.price }}</span>
      <!-- 根据你的JSON数据结构渲染其他字段 -->
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Edin Osmic