Start from scratch, build a simple shopping platform (thirteen) front-end mall part: blog.csdn.net/time_____/a… Project source code (continuously updated) : gitee.com/DieHunter/m…

This article introduces the realization of some components and the home page, the home page components are as follows, the data in the home page through batch asynchronous loading, that is, the data of each component separate request, reduce the data request jam, the realization process is introduced below

PageTitle (pageTitle)

  • First of all, consider the return function of the header. Write a route return function in methods

     methods: {
    goBack() {
      this.$router.go(-1); }}Copy the code

     

  • Parameters (title content, return button or not) are then passed through component properties, and component properties are placed in the current data via props

    props: ["title"."isBack"].Copy the code

     

  • The tag determines whether there is a back button based on isBack and displays the title value

    <template>
  <div id="top">
    <span v-if="isBack" class="back iconfont icon-fanhui" @click="goBack"></span>
    <span class="title">{{title}}</span>
  </div>
</template>
Copy the code

     

Banner (Home page rotation)

  • The picture in the rotation diagram component is requested separately, so the model is used to manage data, bussiness is requested, and the data request interaction of the following components is written in this way

  • Model.js content, save banner list, vue instance, page configuration information

    export default class BannerModel {//banner data access
  constructor() {
    this._bannerList = []
    this._pageConfig = {}
  }
  static getInstance() { // singleton
    if(! BannerModel._instance) {Object.defineProperty(BannerModel, "_instance", {
        value: new BannerModel()
      })
    }
    return BannerModel._instance;
  }
  set vueComponent(val) {
    this._vueComponent = val
  }
  get vueComponent() {
    return this._vueComponent
  }
  set pageConfig(val) {
    this._pageConfig = val
    this._pageConfig.picType = 1
  }
  get pageConfig() {
    return this._pageConfig
  }
  set bannerList(val) {
    this._bannerList = val
    this._vueComponent.list = this.bannerList
  }
  get bannerList() {
    return this._bannerList
  }
}
Copy the code

  • Bussiness. Js does request and logic processing

    import Vue from 'vue'
import config from ".. /.. /config/config"
import BannerModel from "./model";
import Clone from ".. /.. /utils/clone"
const {
  DefaultPageConfig,
  ServerApi
} = config
export default class BannerBussiness extends Vue {// Business processing
  constructor(_vueComponent) {
    super()
    BannerModel.getInstance().vueComponent = _vueComponent// Get the display layer Vue instance
    this.initPageConfig()
    this.getBanner()
  }
  initPageConfig() {// Copy the default paging configuration and leave it unchanged
    BannerModel.getInstance().pageConfig = Clone.shallowClone(DefaultPageConfig)
  }
  getBanner() {// Request processing, this.$crypto.setcrypto
    this.$axios
      .get(ServerApi.shop.shopList, {
        params: {
          crypto: this.$crypto.setCrypto(BannerModel.getInstance().pageConfig)
        },
      }).then(res= > {
        switch (res.result) {
          case 1:
            BannerModel.getInstance().bannerList = res.data.list
            break;
          default:
            break; }}}})Copy the code

  • Banner. Vue page is displayed

    <template>
  <div class="swiper">
    <mt-swipe :auto="3000">
      <mt-swipe-item v-for="(item,index) in list" :key="index">
        <img class="imgs" :src="imgPath+item.shopPic" @click="clickHandler(item)" />
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "mint-ui";
import Config from ".. /.. /config/config";
import BannerBussiness from "./bussiness";
export default {
  name: "banner".data() {
    return {
      list: [].// List of images
      imgPath: Config.RequestPath// Image root path
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      new BannerBussiness(this);// Initialize the banner request
    },
    clickHandler(_shop) {//banner click jump
      this.$router.push({
        name: "ShopTheme".query: { _type: _shop.shopType, _shopName: _shop.shopName } }); }}};</script>

<style lang="less" scoped>
@import ".. /.. /style/init.less";
.imgs {
  .h(500);
  width: 100%;
}
.swiper {
  width: 100%;
  .h(500);
}
</style>
Copy the code

TableBar (Navigation bar)

  • Download the corresponding iconfont resources in iconfont, I directly download in hereStyle directoryCreate model.js in tabbar folder to fetch data (this can be placed in config).

    export default class TableBarModel {
  static MenuList = [{
      name: "Home page".path: "/Home".icon: "icon-shouye li iconfont"
    },
    {
      name: "Classification".path: "/Kind".icon: "icon-fenlei li iconfont"
    },
    {
      name: "Shopping cart".path: "/ShopCar".icon: "icon-daohang-gouwuche li iconfont"
    },
    {
      name: "I".path: "/Info".icon: "icon-wode li iconfont"}}]Copy the code

  • Tabbar.vue, via the list

    <template>
  <ul id="tab">
    <router-link
      v-for="(item, index) in menuList"
      :key="index"
      :to="item.path"
      tag="li"
      :class="item.icon"
      active-class="change"
      replace
    >
      <br />
      {{item.name}}
    </router-link>
  </ul>
</template>

<script>
import tableBarModel from "./model";
export default {
  name: "tabBar".data() {
    return {
      menuList: tableBarModel.MenuList }; }};</script>

<style lang='less' scoped>
@import ".. /.. /style/init.less";
#tab {
  display: flex;
  
  box-shadow: -1px 0 8px # 999;
  z-index: 100;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .h(130);
  .bcolor(a);.li {
    .h(130);
    box-sizing: border-box;
    padding-top: unit(10 / @pxtorem, rem);
    width: 25%;
    text-align: center;
    .fontColorOff(a); }.li::before {
    .f_s(58);
  }
  .li {
    .f_s(26);
  }
  .change {
    .fontColorOn();
  }
}
</style>
Copy the code

Title (Title)

  • Title made a simple style change with H2

    <template>
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
  props: ["title"]};</script>

<style lang="less" scoped>
@import ".. /.. /style/init.less";
h2 {
  .h2Font(a); }</style>
Copy the code

A shopItem

  • Create a new model.js to hold the list of read and write items, vUE component instances, and the default paging configuration

    export default class ItemModel {// Stores the list of read/write items, vUE component instances, and default paging configuration
  constructor() {
    this._shopList = []// List of items
    this._pageConfig = {}// Default paging configuration
  }
  static getInstance() { // singleton
    if(! ItemModel._instance) {Object.defineProperty(ItemModel, "_instance", {
        value: new ItemModel()
      })
    }
    return ItemModel._instance;
  }
  set vueComponent(val) {
    this._vueComponent = val
  }
  get vueComponent() {
    return this._vueComponent
  }
  set pageConfig(val) {
    this._pageConfig = val
    this._pageConfig.picType = 0// Default item type: single item
  }
  get pageConfig() {
    return this._pageConfig
  }
  set shopList(val) {
    this._shopList = val
    this._vueComponent.list = this._shopList// Get the item list and render it again
  }
  get shopList() {
    return this._shopList
  }
}
Copy the code

  • Create bussiness. Js for business processing

    import Vue from 'vue';
import config from ".. /.. /config/config";
import ItemModel from "./model";
import Clone from ".. /.. /utils/clone";
const {
  DefaultPageConfig,
  ServerApi
} = config
export default class ItemBussiness extends Vue {
  constructor(_vueComponent) {
    super()
    ItemModel.getInstance().vueComponent = _vueComponent//Vue component instance
    this.initPageConfig(_vueComponent.shopType)
    this.getShopItem()
  }
  initPageConfig(_shopType) {// Get the default paging configurationItemModel.getInstance().pageConfig = Clone.shallowClone(DefaultPageConfig) ItemModel.getInstance().pageConfig.shopType =  _shopType }getShopItem() {// Get the list of items
    this.$axios
      .get(ServerApi.shop.shopList, {
        params: {
          crypto: this.$crypto.setCrypto(ItemModel.getInstance().pageConfig)
        },
      }).then(res= > {
        switch (res.result) {
          case 1:
            ItemModel.getInstance().shopList = res.data.list// Render the page
            break;
          default:
            break; }}}})Copy the code

  • Render the list in shopitem. vue and add click events to jump to the product details page

    <template>
  <ul class="more">
    <li v-for="(item,index) in list" :key="index" @click="clickHandler(item)">
      <img :src="imgPath+item.shopPic" alt :class="'imgs'+index" />
      <span>{{item. ShopName}} {{item. ShopScale}}</span>
      <div>${{item. ShopPrice}}</div>
    </li>
  </ul>
</template>
<script>
import ShopBussiness from "./bussiness";
import Config from ".. /.. /config/config";
export default {
  name: "shopItem".props: ["shopType"].data() {
    return {
      list: [].imgPath: Config.RequestPath
    };
  },
  mounted() {
    new ShopBussiness(this);
  },
  methods: {
    clickHandler(data) {
      this.$router.push({ name: "ShopInfo".query: {... data } }); }}};</script>

<style lang="less" scoped>
@import ".. /.. /style/init.less";
.more {
  li {
    .shopItem();
  }
}
</style>
Copy the code

The final item theme component is similar to the item list, adding a click event to jump to the topic details page

The home page

Create a new home folder and a home.vue file under the Page folder. Add the above components to home and create a page as follows

home.vue

<template>
  <div>
    <Top title="Snack vendors"></Top>
    <div class="content">
      <Banner></Banner>
      <H2 title="Selected Topics"></H2>
      <Theme></Theme>
      <H2 title="Recent arrivals"></H2>
      <ShopItem :shopType="shopType"></ShopItem>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from ".. /.. /components/tabBar/tabBar";
import Top from ".. /.. /components/top/top";
import Banner from ".. /.. /components/banner/banner";
import Theme from ".. /.. /components/theme/theme";
import ShopItem from ".. /.. /components/shopItem/shopItem";
import H2 from ".. /.. /components/h2/h2";
export default {
  name: "Home".data() {
    return {
      shopType: ""
    };
  },
  components: {
    Top,
    H2,
    Banner,
    Theme,
    ShopItem,
    TabBar
  }
};
</script>

<style lang="less" scoped>
@import ".. /.. /style/init.less";
</style>
Copy the code

The above is the realization of the home page function and some common components, the next article will be on the commodity classification list, commodity theme interface and functions are introduced