黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

这篇具有很好参考价值的文章主要介绍了黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

路由配置

模板代码

创建 src\views\Detail\index.vue 文件,添加以下代码:

<script setup>

</script>

<template>
    <div class="xtx-goods-page">
        <div class="container">
            <div class="bread-container">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/' }">母婴
                    </el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/' }">跑步鞋
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>抓绒保暖,毛毛虫子儿童运动鞋</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 商品信息 -->
            <div class="info-container">
                <div>
                    <div class="goods-info">
                        <div class="media">
                            <!-- 图片预览区 -->

                            <!-- 统计数量 -->
                            <ul class="goods-sales">
                                <li>
                                    <p>销量人气</p>
                                    <p> 100+ </p>
                                    <p><i class="iconfont icon-task-filling"></i>销量人气</p>
                                </li>
                                <li>
                                    <p>商品评价</p>
                                    <p>200+</p>
                                    <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
                                </li>
                                <li>
                                    <p>收藏人气</p>
                                    <p>300+</p>
                                    <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
                                </li>
                                <li>
                                    <p>品牌信息</p>
                                    <p>400+</p>
                                    <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
                                </li>
                            </ul>
                        </div>
                        <div class="spec">
                            <!-- 商品信息区 -->
                            <p class="g-name"> 抓绒保暖,毛毛虫儿童鞋 </p>
                            <p class="g-desc">好穿 </p>
                            <p class="g-price">
                                <span>200</span>
                                <span> 100</span>
                            </p>
                            <div class="g-service">
                                <dl>
                                    <dt>促销</dt>
                                    <dd>12月好物放送,App领券购买直降120元</dd>
                                </dl>
                                <dl>
                                    <dt>服务</dt>
                                    <dd>
                                        <span>无忧退货</span>
                                        <span>快速退款</span>
                                        <span>免费包邮</span>
                                        <a href="javascript:;">了解详情</a>
                                    </dd>
                                </dl>
                            </div>
                            <!-- sku组件 -->

                            <!-- 数据组件 -->

                            <!-- 按钮组件 -->
                            <div>
                                <el-button size="large" class="btn">
                                    加入购物车
                                </el-button>
                            </div>

                        </div>
                    </div>
                    <div class="goods-footer">
                        <div class="goods-article">
                            <!-- 商品详情 -->
                            <div class="goods-tabs">
                                <nav>
                                    <a>商品详情</a>
                                </nav>
                                <div class="goods-detail">
                                    <!-- 属性 -->
                                    <ul class="attrs">
                                        <li v-for="item in 3" :key="item.value">
                                            <span class="dt">白色</span>
                                            <span class="dd">纯棉</span>
                                        </li>
                                    </ul>
                                    <!-- 图片 -->

                                </div>
                            </div>
                        </div>
                        <!-- 24热榜+专题推荐 -->
                        <div class="goods-aside">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
.xtx-goods-page {
    .goods-info {
        min-height: 600px;
        background: #fff;
        display: flex;

        .media {
            width: 580px;
            height: 600px;
            padding: 30px 50px;
        }

        .spec {
            flex: 1;
            padding: 30px 30px 30px 0;
        }
    }

    .goods-footer {
        display: flex;
        margin-top: 20px;

        .goods-article {
            width: 940px;
            margin-right: 20px;
        }

        .goods-aside {
            width: 280px;
            min-height: 1000px;
        }
    }

    .goods-tabs {
        min-height: 600px;
        background: #fff;
    }

    .goods-warn {
        min-height: 600px;
        background: #fff;
        margin-top: 20px;
    }

    .number-box {
        display: flex;
        align-items: center;

        .label {
            width: 60px;
            color: #999;
            padding-left: 10px;
        }
    }

    .g-name {
        font-size: 22px;
    }

    .g-desc {
        color: #999;
        margin-top: 10px;
    }

    .g-price {
        margin-top: 10px;

        span {
            &::before {
                content: "¥";
                font-size: 14px;
            }

            &:first-child {
                color: $priceColor;
                margin-right: 10px;
                font-size: 22px;
            }

            &:last-child {
                color: #999;
                text-decoration: line-through;
                font-size: 16px;
            }
        }
    }

    .g-service {
        background: #f5f5f5;
        width: 500px;
        padding: 20px 10px 0 10px;
        margin-top: 10px;

        dl {
            padding-bottom: 20px;
            display: flex;
            align-items: center;

            dt {
                width: 50px;
                color: #999;
            }

            dd {
                color: #666;

                &:last-child {
                    span {
                        margin-right: 10px;

                        &::before {
                            content: "•";
                            color: $xtxColor;
                            margin-right: 2px;
                        }
                    }

                    a {
                        color: $xtxColor;
                    }
                }
            }
        }
    }

    .goods-sales {
        display: flex;
        width: 400px;
        align-items: center;
        text-align: center;
        height: 140px;

        li {
            flex: 1;
            position: relative;

            ~li::after {
                position: absolute;
                top: 10px;
                left: 0;
                height: 60px;
                border-left: 1px solid #e4e4e4;
                content: "";
            }

            p {
                &:first-child {
                    color: #999;
                }

                &:nth-child(2) {
                    color: $priceColor;
                    margin-top: 10px;
                }

                &:last-child {
                    color: #666;
                    margin-top: 10px;

                    i {
                        color: $xtxColor;
                        font-size: 14px;
                        margin-right: 2px;
                    }

                    &:hover {
                        color: $xtxColor;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.goods-tabs {
    min-height: 600px;
    background: #fff;

    nav {
        height: 70px;
        line-height: 70px;
        display: flex;
        border-bottom: 1px solid #f5f5f5;

        a {
            padding: 0 40px;
            font-size: 18px;
            position: relative;

            >span {
                color: $priceColor;
                font-size: 16px;
                margin-left: 10px;
            }
        }
    }
}

.goods-detail {
    padding: 40px;

    .attrs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;

        li {
            display: flex;
            margin-bottom: 10px;
            width: 50%;

            .dt {
                width: 100px;
                color: #999;
            }

            .dd {
                flex: 1;
                color: #666;
            }
        }
    }

    >img {
        width: 100%;
    }
}

.btn {
    margin-top: 20px;

}

.bread-container {
    padding: 25px 0;
}
</style>

配置路由

在 src\router\index.js 中添加对应路由【/detail/{goodId}】:

routes: [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: 'category/sub/:id',
        component: SubCategory
      },
      {
        path: "/detail/:id",
        component: Detail
      }
    ]
  }
]

链接跳转

对 src\views\Home\components\HomeNew.vue 文件及其他涉及商品信息的页面修改路由跳转:

<RouterLink :to="`/detail/${item.id}`">
  <img v-img-lazy="item.picture" alt="" />
  <p class="name">{{ item.name }}</p>
  <p class="price">&yen;{{ item.price }}</p>
</RouterLink>

渲染基础数据

封装接口

在 src\apis\detail.js 文件中封装接口用于获取商品信息:

import http from "@/utils/http"

//获取商品信息
export const getDetail = (id) => {
    return http({
        url: '/goods',
        params: {
            id
        }
    })
}

渲染数据

在 src\views\Detail\index.vue 文件中编写方法用于接收商品信息数据:

<script setup>
import { getDetail } from '@/apis/detail';

import { ref, onMounted } from 'vue'
import { useRoute } from "vue-router";

const route = useRoute()
const goods = ref({})
const getGoods = async () => {
    const res = await getDetail(route.params.id)
    goods.value = res.result
}

onMounted(() => {
    getGoods()
})
</script>

修改模板代码,渲染数据:

<!-- v-if 条件渲染 -->
<div class="container" v-if="goods.details">
  <div class="bread-container">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{ goods.categories[1].name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{
        goods.categories[0].name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ goods.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 商品信息 -->
  <div class="info-container">
    <div>
      <div class="goods-info">
        <div class="media">

          <!-- 统计数量 -->
          <ul class="goods-sales">
            <li>
              <p>销量人气</p>
              <p>{{ goods.salesCount }}+</p>
              <p><i class="iconfont icon-task-filling"></i>销量人气</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>{{ goods.commentCount }}+</p>
              <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>{{ goods.collectCount }}+</p>
              <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
            </li>
            <li>
              <p>品牌信息</p>
              <p>{{ goods.brand.name }}</p>
              <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
            </li>
          </ul>
        </div>
				...
      </div>
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品详情 -->
          <div class="goods-tabs">
            <nav>
              <a>商品详情</a>
            </nav>
            <div class="goods-detail">
              <!-- 属性 -->
              <ul class="attrs">
                <li v-for="item in goods.details.properties" :key="item.value">
                  <span class="dt">{{ item.name }}</span>
                  <span class="dd">{{ item.value }}</span>
                </li>
              </ul>
              <!-- 图片 -->
              <img v-for="img in goods.details.pictures" v-img-lazy="img" :key="img" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

热榜区域

模板代码

创建 src\views\Detail\components\DetailHot.vue 文件,将榜单的代码粘贴进去,方便日榜和周榜进行复用:

<script setup>

</script>

<template>
<div class="goods-hot">
  <h3>周日榜单</h3>
  <!-- 商品区块 -->
  <RouterLink to="/" class="goods-item" v-for="item in 3" :key="item.id">
    <img :src="item.picture" alt="" />
    <p class="name ellipsis">一双男鞋</p>
    <p class="desc ellipsis">一双好穿的男鞋</p>
    <p class="price">&yen;200.00</p>
  </RouterLink>
  </div>
</template>

<style scoped lang="scss">
  .goods-hot {
    h3 {
      height: 70px;
      background: $helpColor;
      color: #fff;
      font-size: 18px;
      line-height: 70px;
      padding-left: 25px;
      margin-bottom: 10px;
      font-weight: normal;
    }

    .goods-item {
      display: block;
      padding: 20px 30px;
      text-align: center;
      background: #fff;
      width: 280px;

      img {
        width: 160px;
        height: 160px;
      }

      p {
        padding-top: 10px;
      }

      .name {
        font-size: 16px;
      }

      .desc {
        color: #999;
        height: 29px;
      }

      .price {
        color: $priceColor;
        font-size: 20px;
      }
    }
  }
</style>

封装接口

在 src\apis\detail.js 文件中,封装 API,获取热榜商品,通过 type 参数进行区分日榜和周榜数据:

/**
 * 获取热榜商品
 * @param {Number} id - 商品id
 * @param {Number} type - 1代表24小时热销榜 2代表周热销榜
 * @param {Number} limit - 获取个数
 */
export const getHotGoodsAPI = ({ id, type, limit = 3 }) => {
    return http({
        url: '/goods/hot',
        params: {
            id,
            type,
            limit
        }
    })
}

渲染数据

定义 props 参数,接收传入的 type 参数,导入封装好的方法,获取对应 type 榜单的数据:

<script setup>
import { getHotGoodsAPI } from '@/apis/detail'
import { ref, onMounted,computed } from 'vue'
import { useRoute } from 'vue-router'

// type适配不同类型热榜数据
const props = defineProps({
    type: {
        type: Number, // 1代表24小时热销榜 2代表周热销榜 3代表总热销榜 可以使用type去适配title和数据列表
        default: 1
    }
})

const TITLEMAP = {
    1: '24小时热榜',
    2: '周热榜',
}
const title = computed(() => TITLEMAP[props.type])

const route = useRoute()
const hotList = ref([])

const getHostList = async () => {
    const res = await getHotGoodsAPI({
        id: route.params.id,
        type: props.type
    })
    hotList.value = res.result
}
onMounted(() => {
    getHostList()
})
</script>

将获取到的榜单商品渲染到页面中:

<template>
  <div class="goods-hot">
    <h3>{{ title }}</h3>
    <!-- 商品区块 -->
    <RouterLink :to="`/detail/${item.id}`" class="goods-item" v-for="item in hotList" :key="item.id">
      <img :src="item.picture" alt="" />
      <p class="name ellipsis">{{ item.name }}</p>
      <p class="desc ellipsis">{{ item.desc }}</p>
      <p class="price">&yen;{{ item.price }}</p>
    </RouterLink>
  </div>
</template>

src\views\Detail\index.vue 中使用组件传入不同的 type:

import GoodHot from '@/views/Detail/components/DetailHot.vue'

<!-- 24热榜+专题推荐 -->
<div class="goods-aside">
  <!-- 24小时热榜 -->
  <GoodHot :type="1" />
  <!-- 周热榜 -->
  <GoodHot :type="2" />
</div>

图片预览组件封装

小图切换大图显示

思路:维护一个数组图片列表,鼠标划入小图记录当前小图下标值,通过下标值在数组中取对应图片,显示到大图位置。

模版代码

创建 src\components\ImageView\index.vue 文件,添加代码:

<script setup>
// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
]
</script>

<template>
  <div class="goods-image">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[0]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `0px`, top: `0px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img, i) in imageList" :key="i">
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large" :style="[
      {
        backgroundImage: `url(${imageList[0]})`,
        backgroundPositionX: `0px`,
        backgroundPositionY: `0px`,
      },
    ]" v-show="false"></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
绑定事件

为小图绑定事件,记录当前激活下标值,通过下标切换大图显示:

//记录激活下标
const activeIndex = ref(0)
//鼠标划过事件
const enterhandler=(i)=>{
    activeIndex.value=i
}

修改模板代码,通过判断图片下标与当前激活图片的下标是否相等来添加激活样式:

<!-- 左侧大图-->
<div class="middle" ref="target">
  <img :src="imageList[activeIndex]" alt="" />
  <!-- 蒙层小滑块 -->
  <div class="layer" :style="{ left: `0px`, top: `0px` }"></div>
</div>
<!-- 小图列表 -->
<ul class="small">
  <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{active:i===activeIndex}">
    <img :src="img" alt="" />
  </li>
</ul>

放大镜效果

使用 VueUse 提供的 useMouselnElement() 获取到当前的鼠标在盒子内的相对位置,控制滑块跟随鼠标移动(left/top):

  • 有效移动范围内的计算逻辑:

    横向:100<elementX<300,left=elementX-小滑块宽度一半

    纵向:100<elementY<300,top=elementY-小滑块高度一半

  • 边界距离控制

    横向:elementX>300(left=200) elementX<100(left=0)

    纵向:elementY>300(top=200) elementY<100(top=0=)

  1. src\components\ImageView\index.vue 中导入 useMouseInElement 组件:

    import { ref,watch } from 'vue'
    import { useMouseInElement } from '@vueuse/core'
    
  2. 处理逻辑如下:

    // 2. 获取鼠标相对位置
    const target = ref(null)
    const { elementX, elementY, isOutside } = useMouseInElement(target)
    
    // 3. 控制滑块跟随鼠标移动(监听elementX/Y变化,一旦变化 重新设置left/top)
    const left = ref(0)
    const top = ref(0)
    
    const positionX = ref(0)
    const positionY = ref(0)
    
    watch([elementX, elementY, isOutside], () => {
      console.log('xy变化了')
      // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
      if (isOutside.value) return
      console.log('后续逻辑执行了')
      // 有效范围内控制滑块距离
      // 横向
      if (elementX.value > 100 && elementX.value < 300) {
        left.value = elementX.value - 100
      }
      // 纵向
      if (elementY.value > 100 && elementY.value < 300) {
        top.value = elementY.value - 100
      }
    
      // 处理边界
      if (elementX.value > 300) { left.value = 200 }
      if (elementX.value < 100) { left.value = 0 }
    
      if (elementY.value > 300) { top.value = 200 }
      if (elementY.value < 100) { top.value = 0 }
    
      // 控制大图的显示
      positionX.value = -left.value * 2
      positionY.value = -top.value * 2
    }
    
  3. 修改模板代码调用

    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    </div>
    ...
    <!-- 放大镜大图 -->
    <div class="large" :style="[
                               {
                               backgroundImage: `url(${imageList[activeIndex]})`,
                               backgroundPositionX: `${positionX}px`,
                               backgroundPositionY: `${positionY}px`,
                               },
                               ]" v-show="!isOutside"></div>
    

图片优化

在 src\components\ImageView\index.vue 中定义 props 参数,接收图片列表:

// 图片列表
defineProps({
    imageList: {
        type: Array,
        default: () => []
    }
})

修改 src\views\Detail\index.vue 中图片预览部分:

<!-- 图片预览区 -->
<ImageView :image-list="goods.mainPictures"/>

SKU组件熟悉

SKU:存货单位(英语:stock keeping unit,SKU/,es,keju:/),也翻译为库存单元,是一个会计学名词,定义为库存管理
中的最小可用单元,例如纺织品中一个SKU通常表示规格、颜色、款式,而在连锁零售门店中有时称单品为一个 SKU。

SKU组件的作用:产出当前用户选择的商品规格,为加入购物车操作提供数据信息。

  1. 导入 src\components\XtxSku 组件:

    黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

  2. 在 src\views\Detail\index.vue 中引入 XtxSku 组件:

    import XtxSku from '@/components/XtxSku/index.vue'
    
  3. 在 Html 代码中插入组件:

    <!-- sku组件 -->
    <XtxSku :goods="goods"/>
    

全局组件统一插件化

背景:components 目录下有可能还会有很多其他通用型组件,有可能在多个业务模块中共享,所有统一进行全局组件注册比较好。

插件化开发

新建 src\components\index.js 文件,在其中进行封装 components 目录下的所有组件:

// 把components中的所组件都进行全局化注册
// 通过插件的方式
import ImageView from './ImageView/index.vue'
import Sku from './XtxSku/index.vue'
export const componentPlugin = {
  install (app) {
    // app.component('组件名字',组件配置对象)
    app.component('XtxImageView', ImageView)
    app.component('XtxSku', Sku)
  }
}

插件注册

在 main.js 文件中进行注册插件即可:

// 引入全局组件插件
import { componentPlugin } from '@/components'

app.use(componentPlugin)

修改 src\views\Detail\index.vue 中的代码,替换插件的方式:文章来源地址https://www.toymoban.com/news/detail-498400.html

<!-- 图片预览区 -->
<XtxImageView :image-list="goods.mainPictures"/>

<!-- sku组件 -->
<XtxSku :goods="goods"/>

到了这里,关于黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

    通过 Counter 案例 体验Vue3新引入的组合式API 特点: 代码量变少 分散式维护变成集中式维护 ![image.png]( create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应 ![image.png]( 前置条件 - 已安装16.0或更高版本的Node.js 执行如下命令,这一指

    2024年03月17日
    浏览(54)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇:什么是pinia,1. 创建空Vue项目【附代码文档】

    Pinia 是 Vue 的专属状态管理库,可以实现跨组件或页面共享状态,是 vuex 状态管理工具的替代品,和 Vuex相比,具备以下优势 提供更加简单的API (去掉了 mutation ) 提供符合组合式API风格的API (和 Vue3 新语法统一) 去掉了modules的概念,每一个store都是一个独立的模块 搭配

    2024年03月21日
    浏览(45)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(46)
  • 购物车功能实现(小兔鲜儿)【Vue3】

    购物车业务逻辑梳理拆解 整个购物车的实现分为两个大分支, 本地购物车操作和接口购物车操作 由于购物车数据的特殊性, 采取Pinia管理购物车列表数据并添加持久化缓存 本地购物车 - 加入购物车实现 添加购物车 基础思想:如果已经添加过相同的商品,就在其数量count上加一

    2024年02月15日
    浏览(44)
  • 黑马程序员前端学习接口变更

    VUE 刘老师离职了,VUE的接口失效的,一律换为黑马官方接口 axios.defaults.baseURL = \\\'https://www.escook.cn\\\' 换成 axios.defaults.baseURL = \\\'https://applet-base-api-t.itheima.net\\\'    微信小程序 https://api-ugo-web.itheima.net https://www.uinav.com 刘老师博客简介为不再讲课的程序员,但他真的是一位不错的老师

    2024年02月09日
    浏览(51)
  • 登录页的具体实现 (小兔鲜儿)【Vue3】

    整体认识 登录页面的主要功能就是 表单校验和登录登出业务 准备模板 配置路由跳转 为什么需要校验 作用:前端提前校验可以 省去一些错误的请求提交 ,为后端节省接口压力 表单如何进行校验 ElementPlus表单组件内置了表单校验功能,只需要 按照组件要求配置必要参数 即

    2024年02月15日
    浏览(52)
  • CSS笔记(黑马程序员pink老师前端)定位

    定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子。 定位 = 定位模式 + 边偏移 定位模式 说明 static 静态定位,按标准流特性摆放,没有边偏移,很少用 relative 相对定位,相对自身原有位置移动,原有位置继续占有(不脱标) absolute 绝

    2024年02月09日
    浏览(52)
  • 小程序入门笔记(一) 黑马程序员前端微信小程序开发教程

    微信小程序基本介绍 小程序和普通网页有以下几点区别: 运行环境:小程序可以在手机的操作系统上直接运行,如微信、支付宝等;而普通网页需要在浏览器中打开才能运行。 开发技术:小程序采用前端技术进行开发,如HTML、CSS、JavaScript等;而普通网页也是使用类似的前

    2024年02月08日
    浏览(62)
  • CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

    浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用. 网页布局第一准则 :多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 1.浮动元素

    2024年02月09日
    浏览(49)
  • 《JavaScript前端开发案例教程》课后习题及答案(黑马程序员编著)

    一、填空题 1.window.document.body可以简写为______。 2.console.log(alert(‘Hello’))在控制台的输出结果是______。 3.编辑器中“以UTF-8无BOM格式编码”中的BOM指的是______。 4.alert(‘测试’.length)的输出结果是______。 二、判断题 1.JavaScript是Java语言的脚本形式。( ) 2.JavaScript中的方法名不

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包