用vue和node写的简易购物车实现

下面我将为大家介绍用Vue和Node.js写的简易购物车实现的完整攻略。

准备工作

环境要求

Node.js
Vue.js
基本的HTML和CSS知识

项目结构

├── client # 前端代码
│   ├── node_modules # 依赖
│   ├── public # 静态资源
│   ├── src # 源代码
│   ├── .gitignore # git忽略文件配置
│   ├── package.json # 依赖配置
│   ├── package-lock.json # 依赖锁定
│   ├── README.md # 项目说明
│   └── yarn.lock # 依赖锁定
├── server # 后端代码
│   ├── node_modules # 依赖
│   ├── bin # 可执行文件
│   ├── config # 配置文件
│   ├── controllers # 控制器
│   ├── libs # 工具库
│   ├── models # 数据模型
│   ├── routes # 路由
│   ├── app.js # 入口文件
│   ├── .gitignore # git忽略文件配置
│   ├── package.json # 依赖配置
│   ├── package-lock.json # 依赖锁定
│   ├── README.md # 项目说明
│   └── yarn.lock # 依赖锁定
├── .gitignore # git忽略文件配置
└── README.md # 项目说明

开始构建

创建Vue应用

vue create client

安装ElementUI

cd client
yarn add element-ui -S

在main.js里面引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

编写商品列表

<template>
  <el-table :data="products" style="width: 100%;">
    <el-table-column prop="name" label="商品名称"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="primary" @click="addToCart(scope.row)">加入购物车</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          name: '商品A',
          price: 10,
        },
        {
          name: '商品B',
          price: 20,
        },
      ],
    };
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    },
  },
};
</script>

编写购物车列表

<template>
  <el-table :data="cart" style="width: 100%;">
    <el-table-column prop="name" label="商品名称"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column label="数量">
      <template slot-scope="scope">
        <el-input-number v-model="scope.row.quantity" :min="1"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column label="总价">
      <template slot-scope="scope">
        {{ (scope.row.price * scope.row.quantity).toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="danger" @click="removeFromCart(scope.row)">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    cart: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    removeFromCart(product) {
      this.$emit('remove-from-cart', product);
    },
  },
};
</script>

创建Node.js应用

mkdir server && cd server
npm init -y

安装Express

npm install express

安装MongoDB

brew install mongodb

在app.js里面添加以下内容

const express = require('express');
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const port = 3000;

// 连接数据库
mongoose.connect('mongodb://localhost/vue-shopping-cart', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 定义数据模型
const Product = mongoose.model('Product', {
  name: String,
  price: Number,
});

// 跨域配置
app.use(cors());

// 解析请求体
app.use(bodyParser.json());

// 获取商品列表
app.get('/api/products', async (req, res) => {
  const products = await Product.find();
  res.json(products);
});

// 生成订单
app.post('/api/orders', (req, res) => {
  console.log(req.body);
  res.send('Create order success.');
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

示例说明1：获取商品列表

在client里面的ProductList.vue里面添加以下代码

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:3000/api/products').then((res) => {
        this.products = res.data;
      });
    },
    addToCart(product) {
      const cart = JSON.parse(localStorage.getItem('cart')) || [];
      let item = cart.find((el) => el._id === product._id);

      if (!item) {
        item = {
          _id: product._id,
          name: product.name,
          price: product.price,
          quantity: 1,
        };
        cart.push(item);
      } else {
        item.quantity++;
      }

      localStorage.setItem('cart', JSON.stringify(cart));

      this.$emit('cart-updated', cart);
    },
  },
};
</script>

示例说明2：生成订单

在client里面的Checkout.vue里面添加以下代码

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cart: [],
      order: {},
    };
  },
  created() {
    this.cart = JSON.parse(localStorage.getItem('cart')) || [];
  },
  computed: {
    total() {
      let sum = 0;

      this.cart.forEach((item) => {
        sum += item.price * item.quantity;
      });

      return sum.toFixed(2);
    },
  },
  methods: {
    submitOrder() {
      axios
        .post('http://localhost:3000/api/orders', {
          cart: this.cart,
          order: this.order,
          total: this.total,
        })
        .then((res) => {
          localStorage.removeItem('cart');
          this.cart = [];
          this.order = {};
          this.$message.success('订单创建成功!');
        });
    },
  },
};
</script>

代码演示

完整的代码可在以下仓库中查看：

Vue Shopping Cart

你可以按照以下步骤运行代码：

克隆仓库到本地

bash git clone https://github.com/baykier/vue-shopping-cart.git

进入client目录，安装依赖并启动前端应用

bash cd vue-shopping-cart/client yarn yarn serve

进入server目录，安装依赖并启动后端应用

bash cd vue-shopping-cart/server npm install npm start

或者使用nodemon来启动

bash nodemon bin/www

打开浏览器，访问 http://localhost:8080/，开始使用购物车应用。

以上就是用Vue和Node.js写的简易购物车实现的完整攻略，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用vue和node写的简易购物车实现 - Python技术站