Vue.js 电子购物商城商品信息动态展示实现

<template>
  <div id="app">
    <Top/>
    <router-view :products="products"/>
  </div>
</template>
<script>
  import Top from '@/components/Top'
  import axios from 'axios'
  export default {
    name: 'app',
    components: {
      Top
    },
    data() {
      return {
        products: []
      }
    },
    mounted() {
      axios.get('/api/products') // 假设后端提供了/products的API
        .then(response => {
          this.products = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
</script>
<style lang="scss">
@import "./assets/css/basic.css";
@import "./assets/css/admin.css";
@import "./assets/css/demo.css";
@import "./assets/css/hmstyle.css";
</style>
<h2>改进设计与实现：</h2>
<ol>
<li>
<p>在 <code>mounted</code> 钩子函数中使用 <code>axios</code> 发送请求，获取后端提供的商品信息数据，并将数据保存在本地的 <code>products</code> 属性中。</p>
</li>
<li>
<p>在 <code>router-view</code> 中传递 <code>products</code> 属性，以便在子组件中动态展示商品信息。</p>
</li>
<li>
<p>在后端使用 Koa 或 SpringBoot 框架开发 API，提供商品信息数据的接口。</p>
</li>
</ol>
<p><strong>具体实现步骤：</strong></p>
<ol>
<li>
<p><strong>后端 API 开发：</strong></p>
<ul>
<li>
<p>使用 Koa 或 SpringBoot 框架创建一个 API 接口，用于返回商品信息数据。</p>
</li>
<li>
<p>例如，可以使用以下代码创建一个简单的 Koa API：</p>
<pre><code class="language-javascript">const Koa = require('koa');
const app = new Koa();

app.use(async (ctx) =&gt; {
  ctx.body = [ // 商品信息数据
    { id: 1, name: '商品1', price: 100 },
    { id: 2, name: '商品2', price: 200 },
    { id: 3, name: '商品3', price: 300 }
  ];
});

app.listen(3000, () =&gt; {
  console.log('Server listening on port 3000');
});
</code></pre>
</li>
</ul>
</li>
<li>
<p><strong>Vue.js 前端代码：</strong></p>
<ul>
<li>在 <code>mounted</code> 钩子函数中使用 <code>axios</code> 发送请求，获取后端 API 返回的商品信息数据。</li>
<li>将获取到的数据保存到 <code>products</code> 属性中。</li>
<li>在 <code>router-view</code> 中传递 <code>products</code> 属性，以便子组件使用该数据进行动态展示。</li>
</ul>
<pre><code class="language-javascript">// ... (Vue.js 代码)

mounted() {
  axios.get('/api/products')
    .then(response =&gt; {
      this.products = response.data;
    })
    .catch(error =&gt; {
      console.log(error);
    });
}
</code></pre>
</li>
<li>
<p><strong>子组件：</strong></p>
<ul>
<li>在子组件中接收 <code>products</code> 属性，并根据该属性动态展示商品信息。</li>
</ul>
<pre><code class="language-html">&lt;template&gt;
  &lt;div v-for=&quot;product in products&quot; :key=&quot;product.id&quot;&gt;
    &lt;p&gt;{{ product.name }}&lt;/p&gt;
    &lt;p&gt;{{ product.price }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
</li>
</ol>
<p>通过以上步骤，即可实现电子购物商城商品信息的动态展示功能。</p>