对于
一个初学者来说，写
一个商城是
一个非常有挑战性的任务。以下是
一个简单的
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应用程序，您应该能够在浏览器中看到
一个简单的商城页面，其中包含三个产品的列表。
最低0.47元/天 解锁文章
788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
