vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面

字数 390阅读 173

在写商品页面product.vue之前,我应该思考一下,商品页面要实现那些功能,该不如布局?

要实现的功能

  • 1、所有商品列表的展示
  • 2、分类商品的列表展示
  • 3、搜索商品或得列表展示
  • 4、单一商品的详细页面
  • 5、商品列表分页功能
  • 6、还没想到的..................

预想页面布局

  • 1、product.vue页面分左右两边,左边放商品的分类的类型(如:所有商品、石榴、松子、火腿、其它....),写成fixed的样式,右边一个搜索框,下面放各类列表
  • 2、product-content.vue就是一个商品的详情展示页面

准备工作

先模拟数据

打开data.js


Image 131.png
添加一个路由来实现商品分类
Image 132.png

检查才发现图上的:class写错了,多写了一个s,当然这个命名随意,但需要使用这个来获取需要的数据,还是写个容易记的

把相应的组件创建出来并引入

创建一个productlist.vue


Image 133.png
编写product.vue的基本结构
<template>
<div class="container">
  <el-row>
    <el-col :span="6">
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      active-background-color="#ffd04b">
      
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
      </el-menu>  
    </el-col>
    <el-col :span="18">
      <el-input 
      type="text"
      class="el-input"
      placeholder="请输入商品名"
      v-model="searchName">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button 
        type="primary"
        @click="search">
        搜索
      </el-button>
      <router-view></router-view>
    </el-col>
  </el-row>
</div>

</template>
<script>
export default {
  data () {
    return {
      searchName: ''
    }
  },
  methods: {
    search () {
      console.log('search')
    }
  }
}
</script>
<style scoped>
.el-input {
  margin: 20px 0;
  width: 80%;
}

</style>

这样谢了个大体样子了

把分类商品路由挂到侧边栏

改写product.vue


Image 135.png
Image 136.png

当然我这样写相当于把分类的项全部写死了,但目前我并没有想到更合理的办法,所以也只能先这样了

查看效果
Image 137.png
Image 138.png

可以看出动态路由是匹配到了的

推荐阅读更多精彩内容