vuex实现购物车案例

Vuex购物车案例(完整实例下载)

搭建基本环境

• 前台环境

  使用vue脚手架 ， 先全局安装vuecli npm i vue-cli -g

  使用vuecli创建项目 vue create cart-example cart-example是项目名字

  此时会提示，使用vue2版本的还是vue3版本，这里选择的是vue 2.x

• 后台环境

  直接使用node运行根目录下的server.js就可以。

  const express = require('express')
  const cors = require('cors')
  const app = express()
  
  app.use(cors())
  
  const hostname = '127.0.0.1'
  const port = 3000
  //这里假装有三个产品信息
  const _products = [
    {
        id: 1, title: 'iPad Pro', price: 500.01 },
    {
        id: 2, title: 'H&M T-Shirt White', price: 10.99 },
    {
        id: 3, title: 'Charli XCX - Sucker CD', price: 19.99 }
  ]
  
  app.use(express.json())
  
  app.get('/products', (req, res) => {
       
    res.status(200).json(_products)
  })
  
  app.post('/checkout', (req, res) => {
       
    res.status(200).json({
       
      success: Math.random() > 0.5
    })
  })
  
  app.listen(port, hostnam