How to write a static mall in vue

With the rapid development of e-commerce, online shopping has become the norm for people. Therefore, there are more and more various mall websites. How to build a good mall website has become the focus of many people's attention. In this process, the Vue framework has become one of the first choices for more and more front-end developers, and static mall websites are no exception. This article will start from the perspective of Vue and introduce how to use the Vue framework to develop a static mall.

1. Project Overview
In this article, we will use the Vue framework to build a simple static mall. This mall website includes the following interfaces:

• product list page, which displays all products.
• The product details page displays detailed information about a product.
• The shopping cart page displays the products selected by the user.
• The settlement page displays settlement details.

2. Preparation work
Before we start, we need to install the Vue framework and prepare relevant development tools. We can use the Vue CLI to create a project named "mall" and use the Vue Router plugin to manage routing. We also need to use the axios library to handle the interaction of the front end sending information to the server.

3. Product List Page
In Vue, we usually use components to build pages and implement communication between components. Therefore, we will create a component called "GoodsList" that will display a list of all products. In order to simplify our development process, we can create a data.json file in the src directory to store information about all products.

The following is the code of a simple GoodsList component:

<template>
  <div>
    <h2>所有商品</h2>
    <ul>
      <li v-for="item in goodsList" :key="item.id">
        <router-link :to="'/detail/'+item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import goodsData from '@/data.json'

export default {
  data () {
    return {
      goodsList: goodsData.goodsList
    }
  }
}
</script>

In this component, we use Vue's two-way data binding to render the product data in the data.json file to the page superior. At the same time, we also used the to command of Vue Router to jump to the product details page after clicking the product name.

4. Product details page
In the product details page, we will display the detailed information of a specific product. We can use routing parameters to render page content dynamically. The following is the code of a simple GoodsDetail component:

<template>
  <div>
    <h2>{{ goodsInfo.name }}</h2>
    <p>商品编号：{{ goodsInfo.id }}</p>
    <p>价格：{{ goodsInfo.price }}</p>
    <p>库存：{{ goodsInfo.stock }}</p>
  </div>
</template>

<script>
import goodsData from '@/data.json'

export default {
  data () {
    return {
      goodsInfo: {}
    }
  },
  created () {
    const { id } = this.$route.params
    this.goodsInfo = goodsData.goodsList.find(item => item.id === id)
  }
}
</script>

In this component, we obtain routing parameters through the $route object provided by Vue Router, select the corresponding product information and display it on the page using two-way data binding superior.

5. Implementation of shopping cart page and settlement page
In the shopping cart page and settlement page, we need to display the products and price totals that the user has selected. To achieve these requirements, we can use Vuex to manage communication and state between components. We first create a Vuex module named "Cart" to manage shopping cart information.

The following is the code of the Cart module:

const state = {
  cartList: [] // 存放商品信息的数组
}

const mutations = {
  // 向购物车列表中添加商品
  addToCart (state, goodsItem) {
    const item = state.cartList.find(item => item.id === goodsItem.id)
    if (item) {
      item.quantity++
    } else {
      state.cartList.push({
        ...goodsItem,
        quantity: 1
      })
    }
  },
  // 从购物车列表中删除商品
  removeFromCart (state, id) {
    const index = state.cartList.findIndex(item => item.id === id)
    state.cartList.splice(index, 1)
  },
  // 清空购物车列表
  clearCartList (state) {
    state.cartList = []
  }
}

const actions = {
  addToCart ({ commit }, goodsItem) {
    commit('addToCart', goodsItem)
  },
  removeFromCart ({ commit }, id) {
    commit('removeFromCart', id)
  },
  clearCartList ({ commit }) {
    commit('clearCartList')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

In this module, we define three mutation functions, which are used to add products to the shopping cart list and delete them from the shopping cart list. Items and empty shopping cart list. At the same time, we also defined three action functions, which are used to trigger the above three mutation functions.

We also need to introduce this Cart module in the src/store/index.js file and use the Vuex plug-in in the Vue instance.

The following is the code for a simple shopping cart page:

<template>
  <div>
    <h2>购物车列表</h2>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <p>{{ item.name }}</p>
        <button @click="removeFromCart(item.id)">删除</button>
      </li>
    </ul>
    <button @click="clearCartList">清空购物车</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('cart', {
      cartList: state => state.cartList
    })
  },
  methods: {
    ...mapActions('cart', [
      'addToCart',
      'removeFromCart',
      'clearCartList'
    ])
  }
}
</script>

In this component, we use Vuex’s modular introduction method to integrate the status and operations in Vuex through mapState and mapActions Map to the component's data and methods.

For the checkout page, we can use the same method to display the user's selected products and total price. However, the difference between this page and the shopping cart page is that users need to make payment on the checkout page. For the implementation of this function, we need to send requests to the server to process payment and order information. For specific implementation methods, please refer to other related articles.

To sum up, the Vue framework allows us to easily build a static mall website, and use Vuex and Vue Router to better manage status and routing. Through the use of these tools, we can not only better understand the characteristics of the Vue framework, but also develop a more complete mall website.

The above is the detailed content of How to write a static mall in vue. For more information, please follow other related articles on the PHP Chinese website!