Cara membangunkan platform e-dagang mudah menggunakan Node.js-tutorial js-php.cn

Cara membangunkan platform e-dagang mudah menggunakan Node.js

WBOY

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

asal

1240 orang telah melayarinya

Cara membangunkan platform e-dagang mudah menggunakan Node.js

Dengan perkembangan pesat e-dagang, semakin ramai orang memberi perhatian kepada cara membina platform e-dagang mereka sendiri melalui cara teknikal. Sebagai persekitaran berjalan JavaScript yang pantas, cekap dan ringan, Node.js secara beransur-ansur menjadi teknologi pilihan untuk membangunkan platform e-dagang. Jadi, bagaimana untuk membangunkan platform e-dagang mudah menggunakan Node.js? Artikel ini akan memperkenalkan anda kepada langkah pelaksanaan khusus dan memberikan contoh kod yang berkaitan.

Penyediaan dan pembinaan persekitaran pembangunan

Pertama sekali, kita perlu menyediakan persekitaran pembangunan Node.js. Anda boleh memuat turun pakej pemasangan daripada tapak web rasmi (https://nodejs.org/) untuk pemasangan, atau anda boleh memasangnya melalui pengurus pakej (contohnya, gunakan arahan npm install node untuk memasang).

Selepas pemasangan selesai, anda perlu menyemak sama ada pemasangan berjaya. Masukkan arahan nod -v pada baris arahan Jika pemasangan berjaya, maklumat versi akan dikeluarkan. Seterusnya, kita boleh menggunakan npm (Pengurus Pakej Node) yang disertakan dengan Node.js untuk memasang perpustakaan dan rangka kerja pihak ketiga yang diperlukan, seperti Express, Mongoose, dsb., yang akan membantu kita membangun dengan lebih mudah.

Membina bahagian belakang platform e-dagang

Apabila membina bahagian belakang platform e-dagang, kami boleh menggunakan rangka kerja Express untuk membina API RESTful dengan cepat. Berikut ialah kod sampel ringkas:

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}`);
});

Salin selepas log masuk

Dalam kod ini, kami mula-mula menggunakan rangka kerja Express untuk membina API RESTful yang mudah dan mentakrifkan model produk. Seterusnya, kami menentukan dua laluan API, yang digunakan untuk mendapatkan senarai produk dan mencipta produk baharu. Akhir sekali, kami menentukan nombor port pelayan dan mendengar nombor port itu untuk memulakan pelayan.

Membina bahagian hadapan platform e-dagang

Apabila membina bahagian hadapan platform e-dagang, kita boleh gunakan Vue.js sebagai rangka kerja bahagian hadapan Panggil API bahagian belakang melalui Axios. Berikut ialah kod contoh mudah:

<!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>

Salin selepas log masuk

Dalam kod ini, kami menggunakan Vue.js untuk membina halaman hadapan yang ringkas dan memanggil API yang disediakan oleh bahagian belakang melalui Axios. Halaman ini mengandungi senarai produk dan borang untuk menambah produk baharu Apabila pengguna menyerahkan borang, kami menghantar data ke bahagian belakang melalui permintaan POST dan memaparkan produk yang ditambahkan dalam senarai produk.

Pada ketika ini, kami telah menyelesaikan pembangunan platform e-dagang dengan senarai produk mudah dan menambah fungsi produk. Sudah tentu, anda boleh mengembangkan lebih banyak fungsi berdasarkan ini, seperti carian, butiran produk, troli beli-belah, dsb. Saya harap artikel ini dapat memberi inspirasi kepada anda, dan saya berharap anda berjaya dalam membangunkan platform e-dagang Node.js!

Atas ialah kandungan terperinci Cara membangunkan platform e-dagang mudah menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!