How to develop a simple e-commerce platform using Node.js-JS Tutorial-php.cn

How to develop a simple e-commerce platform using Node.js

WBOY

Release： 2023-11-08 17:42:49

Original

1237 people have browsed it

How to develop a simple e-commerce platform using Node.js

With the rapid development of e-commerce, more and more people are paying attention to how to build their own e-commerce platform through technical means. As a fast, efficient and lightweight JavaScript running environment, Node.js has gradually become the preferred technology for developing e-commerce platforms. So, how to develop a simple e-commerce platform using Node.js? This article will introduce you to the specific implementation steps and provide relevant code examples.

Preparation and establishment of development environment

First, we need to prepare the Node.js development environment. You can download the installation package from the official website (https://nodejs.org/) for installation, or you can install it through the package manager (for example, use the npm install node command to install).

After the installation is completed, you need to check whether the installation was successful. Enter the node -v command on the command line. If the installation is successful, the version information will be output. Next, we can use the npm (Node Package Manager) that comes with Node.js to install the required third-party libraries and frameworks, such as Express, Mongoose, etc., which will help us develop more conveniently.

Building the backend of the e-commerce platform

When building the backend of the e-commerce platform, we can use the Express framework to quickly build a RESTful API. The following is a simple sample code:

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

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/e-commerce', { useNewUrlParser: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('MongoDB connected!');
});

// 定义商品模型
const productSchema = new mongoose.Schema({
  name: String,
  price: Number,
  image: String
});
const Product = mongoose.model('Product', productSchema);

// API路由
app.get('/products', (req, res) => {
  Product.find((err, products) => {
    if (err) return console.error(err);
    res.send(products);
  });
});

app.post('/products', (req, res) => {
  const newProduct = new Product(req.body);
  newProduct.save((err, product) => {
    if (err) return console.error(err);
    res.send(product);
  });
});

// 服务器端口号
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Copy after login

In this code, we first use the Express framework to build a simple RESTful API and define a product model. Next, we defined two API routes, which are used to obtain the product list and create new products. Finally, we specify the port number of the server and listen on that port number to start the server.

Building the front-end of the e-commerce platform

When building the front-end of the e-commerce platform, we can use Vue.js as the front-end framework and call the back-end through Axios API. The following is a simple sample code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>电商平台</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>商品列表</h1>
      <ul>
        <li v-for="product in products">
          <img :src="product.image" :alt="product.name"    style="max-width:90%">
          <h2>{{ product.name }}</h2>
          <p>价格: ¥{{ product.price }}</p>
        </li>
      </ul>
      <form v-on:submit.prevent="addProduct">
        <h1>添加新商品</h1>
        <label>商品名称：</label>
        <input type="text" v-model="newProduct.name"><br>
        <label>商品价格：</label>
        <input type="number" v-model="newProduct.price"><br>
        <label>商品图片：</label>
        <input type="text" v-model="newProduct.image"><br>
        <button type="submit">添加</button>
      </form>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          products: [],
          newProduct: {
            name: '',
            price: '',
            image: ''
          }
        },
        created() {
          axios.get('/products')
            .then(response => {
              this.products = response.data;
            })
            .catch(error => {
              console.error(error);
            });
        },
        methods: {
          addProduct() {
            axios.post('/products', this.newProduct)
              .then(response => {
                this.products.push(response.data);
                this.newProduct = {
                  name: '',
                  price: '',
                  image: ''
                };
              })
              .catch(error => {
                console.error(error);
              });
          }
        }
      });
    </script>
  </body>
</html>

Copy after login

In this code, we use Vue.js to build a simple front-end page and call the API provided by the backend through Axios. The page contains a product list and a form for adding new products. When the user submits the form, we send data to the backend through a POST request and display the added products in the product list.

So far, we have completed the development of an e-commerce platform with simple product lists and product addition functions. Of course, you can expand more functions on this basis, such as search, product details, shopping cart, etc. I hope this article can bring you some inspiration, and I wish you success in developing a Node.js e-commerce platform!

The above is the detailed content of How to develop a simple e-commerce platform using Node.js. For more information, please follow other related articles on the PHP Chinese website!