跳到主要内容

Vue 求知书场项目实例 (下)

· 阅读需 4 分钟
Yancy Qi
Yancy Qi
Front End Engineer

Vue 前端框架基础课练习

十五、 图书栏目界面组件构成​

顶部： 标题栏 AppHeader.vue

中部： 左侧： 书籍类别 CategoryList.vue

中部： 右侧： 搜索栏 CategorySearch.vue

中部： 右侧： 显示书目 CategoryShowBooks.vue 商品操作 GoodsAction.vue

底部： 导航栏 AppTabBar.vue

十六、书籍类别​

组件网址： https://youzan.github.io/vant/#/zh-CN/sidebar

思路：

  • 使用组件库中组件封装成自己的组件，文件： CategoryList.vue
  • 在 Category.vue 中使用组件 CategoryList.vue
  • 选中类别后，向父组件 Category.vue 传递数据找到的图书 books
  • 父组件 Category.vue 接受传递过来的数据 books ，并显示

显示图书类别：

axios 请求图书类别数据，mounted 中实现：

this.axios.post("/category").then( (res) => {
	this.list=res.data.categoryList;
	this.onChange(this.activeKey)  // 查询当前类别的图书
}).catch( (error) => { console.log(error); } );

CategoryList.vue

  • template
  • data
    • activeKey：当前栏目索引

methods：模拟返回此种类别的图书，传递给父组件 Category.vue

mock：返回此种类别的图书数据

Mock.mock("/booktype")

父组件Category.vue：暂时不考虑布局

  • import categorylist from './part/CategoryList.vue'

  • components

  • <categorylist @show-books="showBooks"></categorylist>

  • data

    • books：当前所有图书

  • showBooks(val)：接受传递过来的图书。结果暂时不显示。

十七、图书查询​

组件网址： https://youzan.github.io/vant/#/zh-CN/field

思路：

  • 使用组件库中组件封装成自己的组件，文件： CategorySearch.vue
  • 在 Category.vue 中使用组件 CategorySearch.vue
  • 查询后，向父组件 Category.vue 传递数据找到的图书 books
  • 父组件 Category.vue 接受传递过来的数据 books，并显示

CategorySearch.vue

  • template
  • data
    • value：输入内容，可以是书名、作者、介绍
  • style

methods：模拟返回查询结果，传递给父组件 Category.vue

  • searchBook

  • Mock.mock("/books")

父组件Category.vue：暂时不考虑布局

  • import searchbook from './part/CategorySearch.vue'

  • components

  • <searchbook @show-books="showBooks"></searchbook>

  • showBooks(val)：接受传递过来的图书，与 CategoryList.vue 共用。结果暂时不显示。

十八、图书列表​

组件网址： https://youzan.github.io/vant/#/zh-CN/card

思路：

  • 使用组件库中组件封装成自己的组件，文件： CategoryShowBooks.vue
  • CategoryShowBooks.vue 包含组件 GoodsAction.vue
  • 在 Category.vue 中使用组件 CategoryShowBooks.vue

CategoryShowBooks.vue

  • template：暂时忽略 goodsaction
  • props：从父组件传递过来的图书
  • style
  • methods：头部显示当前图书

GoodsAction.vue

  • template
  • props：暂时无用

CategoryShowBooks.vue：加入商品操作组件

  • template

    <template #footer>
      <goodsaction :id="item.id" :amount="1" />
    </template>

父组件Category.vue：暂时不考虑布局

  • import showbooks from './part/CategoryShowBooks.vue'

  • components

  • <showbooks :books="books"></showbooks>

十九、图书栏目界面布局​

组件网址： https://youzan.github.io/vant/#/zh-CN/col

思路：

  • 类似 Bootstrap 栅格布局
  • 行：van-row
  • 列：van-col

二十、空状态​

组件网址： https://youzan.github.io/vant/#/zh-CN/empty

思路：

  • 没有数据时显示空状态

Category.vue

<van-empty v-if="0==books.length" description="空空如也" />

二十一、小结​

项目仓库地址：点此访问