前后端分离项目Vue+node.js二手商品交易系统74qb3

前后端分离项目通常涉及到前端和后端的并行开发。前端使用Vue.js框架，后端使用node.js。以下是一个简化的例子，展示了如何创建一个简单的二手商品列表接口。

后端 (node.js 和 Express):

const express = require('express');
const app = express();
const port = 3000;
 
// 假设我们有一个简单的商品列表
const items = [
  { id: 1, name: '旧手机', price: 50 },
  { id: 2, name: '旧笔记本电脑', price: 100 }
];
 
app.get('/items', (req, res) => {
  res.json(items); // 返回JSON格式的商品列表
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

确保你已经安装了express (npm install express)。

前端 (Vue.js):

<template>
  <div>
    <h1>二手商品列表</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - 价格: {{ item.price }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await fetch('http://localhost:3000/items');
        this.items = await response.json();
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    }
  }
};
</script>

确保你已经安装了Vue (npm install vue).

在这个例子中，前端Vue应用通过Ajax (使用Fetch API) 从后端node.js服务器获取商品列表数据，并将其渲染到页面上。

请注意，这只是一个简化的示例，实际项目中会涉及更复杂的逻辑，例如用户认证、订单处理、支付系统等。