vue-app项目知识点总结（三）_vue app 分类页面的设计方案-优快云博客

本文链接：https://blog.youkuaiyun.com/ShangMY97/article/details/105970265

本文是Vue App项目的第三部分总结，涵盖分类页面的构建，包括页面结构、网络请求和组件使用；用户登录功能的实现，涉及路由、登录页面布局及前端验证；以及商品详情页的图片点击放大功能预告。项目源码可在GitHub找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本项目GitHub地址：https://github.com/Yue-Shang/shop-app
vue-app项目知识点总结（一）
vue-app项目知识点总结（二）

一.分类页面

1.页面结构

在这里插入图片描述

2.新建文件夹

主页面：Category.vue
分类列表：CategoryList.vue
对应商品：CategoryGoods.vue
在这里插入图片描述
网络请求都写到Category.js中

3.我们先写分页主页面大框

这里我们先把左侧列表引到里面来了
Category.vue

<template>
  <div id="category">
    <nav-bar class="category-nav"><div slot="center">分类</div></nav-bar>
    <div class="content">
        <category-list :category="category" @selectUtem="selectUtem"/>
    </div>
  </div>
</template>

<script>
    import CategoryList from "./childComps/CategoryList";

    import Scroll from "components/common/scroll/Scroll";
    import NavBar from "components/common/navbar/NavBar";

    import {
   getCategoryList} from "network/Category";

    export default {
   
        name: "Category.vue",
        components:{
   Scroll,CategoryList,NavBar},
        data (){
   
            return{
   
               scroll:null,
                category:[],
            }
        },
        created() {
   
            this.getCategoryList()
        },
        methods:{
   
            getCategoryList(){
   
                getCategoryList().then(res =>{
   
                    this.category = res.data.category.list
                })
            }
        }
    }
</script>
css样式代码里看

4.左侧分类列表

1）请求网络数据
Category.js

import {
   request} from "./request";

export function getCategoryList() {
   
  return request({
   
    url:'/category'
  })
}

2)分类列表

<template>
   <scroll>
     <div id="category-list">
       <div class="category-title"
            :class="{active: index === isAction}"
            v-for="(item,index) in category"
            :key="index"
            @click="itemClick(index)"
       >
         {
   {
   item.title}}
       </div>
     </div>
   </scroll>
</template>

<script>
    import Scroll from "components/common/scroll/Scroll";
    export default {
   
        name: "CategoryList",
        components: {
   Scroll},
        data(){
   
            return {
   
                isAction:0
            }
        },
        props:{
   
            category:Array
        },
        methods:{
   
            itemClick(index){
   
                this.isAction = index
                this.$emit('selectUtem',index)
            }
        }
    }
</script>

<style scoped>
  #category-list{
   
    width: 30%;
    height: 100%;
    box-sizing: border-box;
  }
  .category-title{
   
    height: 44px;
    width: 100%;
    text-align: center;
    line-height: 44px;
  }
  .category-title.active {
   
    font-weight: 700;
    color: var(--color-high-text);
    background-color: #fff;
    border-left: 3px solid var(--color-high-text);
  }
</style>

box-sizing: border-box;https://www.w3school.com.cn/cssref/pr_box-sizing.asp
效果：
在这里插入图片描述

5.左侧对应商品展示

1）请求网络数据
Category.js

export function getSubcategory(maitKey) {
   
  return request({
   
    url:'http://152.136.185.210:80