node+vue写一个商城

对于一个初学者来说，写一个商城是一个非常有挑战性的任务。以下是一个简单的Node.js和Vue.js商城教程：

1. 创建一个新的Node.js项目

首先，我们需要安装Node.js和npm。然后创建一个新的Node.js项目，可以使用以下命令：

mkdir my-shop
cd my-shop
npm init

这将创建一个新的npm项目，并要求您填写一些基本信息。按照提示输入即可。

2. 安装和配置Express.js

在Node.js中，Express.js是一个非常流行的Web框架。我们将使用Express.js来构建我们的商城应用程序。首先，我们需要安装Express.js和其他一些必要的库：

npm install express body-parser cors

接下来，在项目的根目录中创建一个新的文件app.js，然后添加以下内容：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.json());
app.use(cors());

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

这将创建一个新的Express.js应用程序，并将其监听在3000端口上。

3. 创建Vue.js应用程序

现在，我们需要创建一个Vue.js应用程序，用于构建我们的商城前端。您可以使用Vue CLI快速创建Vue.js应用程序。首先，确保已经安装了Vue CLI：

npm install -g @vue/cli

然后，在项目的根目录中使用Vue CLI创建一个新的Vue.js应用程序：

vue create client

按照提示输入即可，然后等待安装完成。

4. 配置Vue.js应用程序

现在，我们需要配置Vue.js应用程序，以便它可以与我们的Node.js后端通信。首先，打开client/src/main.js文件，并添加以下内容：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$http = axios.create({
  baseURL: 'http://localhost:3000/api'
})

new Vue({
  render: h => h(App),
}).$mount('#app')

这将配置Vue.js应用程序以使用axios库进行HTTP请求，并将其基本URL设置为http://localhost:3000/api。

接下来，我们需要在client/src/components目录中创建一个名为ProductList.vue的新组件。该组件将显示商城中的产品列表，并使用我们的Node.js后端与服务器通信。

5. 创建Node.js API

现在，我们需要为商城创建一些Node.js API。首先，我们需要在项目的根目录中创建一个名为routes.js的新文件，然后添加以下内容：

const express = require('express');
const router = express.Router();

router.get('/products', (req, res) => {
  const products = [
    { id: 1, name: 'Product 1', price: 10 },
    { id: 2, name: 'Product 2', price: 20 },
    { id: 3, name: 'Product 3', price: 30 },
  ];
  res.json(products);
});

module.exports = router;

这将创建一个新的Express.js路由器，并为/products路径添加一个GET请求处理程序。该处理程序将返回一个包含三个产品的JSON数组。

接下来，我们需要在app.js文件中添加以下内容，以将我们的路由器添加到应用程序中：

const routes = require('./routes');

app.use('/api', routes);

现在，我们的Node.js后端应该已经准备好了，可以使用以下命令启动它：

node app.js

6. 显示产品列表

现在，我们需要在Vue.js应用程序中显示产品列表。首先，打开client/src/components/ProductList.vue文件，并添加以下内容：

<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    this.$http.get('/products').then(response => {
      this.products = response.data;
    });
  },
};
</script>

这将创建一个新的Vue.js组件，并使用我们之前定义的API从服务器获取产品列表。然后，我们可以在App.vue文件中使用该组件，如下所示：

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList,
  },
};
</script>

现在，运行Vue.js应用程序，您应该能够在浏览器中看到一个简单的商城页面，其中包含三个产品的列表。