Layout-静态模板结构搭建、字体图标引入、一级导航渲染、吸顶导航交互实现、Pinia优化重复请求【小兔鲜Vue3】

Posted on by hackdl

Layout-静态模板结构搭建

Layout模块静态模板搭建

LayoutNav.vue

script setup>

/script>

template>
  nav class="app-topnav">
    div class="container">
      ul>
        template v-if="true">
          li>a href="javascript:;"">-user">/i>周杰伦/a>/li>
          li>
            el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
              template #reference>
                a href="javascript:;">退出登录/a>
              /template>
            /el-popconfirm>
          /li>
          li>a href="javascript:;">我的订单/a>/li>
          li>a href="javascript:;">会员中心/a>/li>
        /template>
        template v-else>
          li>a href="javascript:;">请先登录/a>/li>
          li>a href="javascript:;">帮助中心/a>/li>
          li>a href="javascript:;">关于我们/a>/li>
        /template>
      /ul>
    /div>
  /nav>
/template>


style scoped lang="scss">
.app-topnav {
  background: #333;
  ul {
    display: flex;
    height: 53px;
    justify-content: flex-end;
    align-items: center;
    li {
      a {
        padding: 0 15px;
        color: #cdcdcd;
        line-height: 1;
        display: inline-block;

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

        &:hover {
          color: $xtxColor;
        }
      }

      ~li {
        a {
          border-left: 2px solid #666;
        }
      }
    }
  }
}
/style>

LayoutHeader.vue

script setup>

/script>

template>
  header class='app-header'>
    div class="container">
      h1 class="logo">
        RouterLink to="/">小兔鲜/RouterLink>
      /h1>
      ul class="app-header-nav">
        li class="home">
          RouterLink to="/">首页/RouterLink>
        /li>
        li> RouterLink to="/">居家/RouterLink> /li>
        li> RouterLink to="/">美食/RouterLink> /li>
        li> RouterLink to="/">服饰/RouterLink> /li>
      /ul>
      div class="search">
        i class="iconfont icon-search">/i>
        input type="text" placeholder="搜一搜">
      /div>
      !-- 头部购物车 -->
      
    /div>
  /header>
/template>


style scoped lang='scss'>
.app-header {
  background: #fff;

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;

    a {
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }

  .app-header-nav {
    width: 820px;
    display: flex;
    padding-left: 40px;
    position: relative;
    z-index: 998;
  
    li {
      margin-right: 40px;
      width: 38px;
      text-align: center;
  
      a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
  
        &:hover {
          color: $xtxColor;
          border-bottom: 1px solid $xtxColor;
        }
      }
  
      .active {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }
  }

  .search {
    width: 170px;
    height: 32px;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
    line-height: 32px;

    .icon-search {
      font-size: 18px;
      margin-left: 5px;
    }

    input {
      width: 140px;
      padding-left: 5px;
      color: #666;
    }
  }

  .cart {
    width: 50px;

    .curr {
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: relative;
      display: block;

      .icon-cart {
        font-size: 22px;
      }

      em {
        font-style: normal;
        position: absolute;
        right: 0;
        top: 0;
        padding: 1px 6px;
        line-height: 1;
        background: $helpColor;
        color: #fff;
        font-size: 12px;
        border-radius: 10px;
        font-family: Arial;
      }
    }
  }
}
/style>

LayoutFooter.vue

template>
  footer class="app_footer">
    !-- 联系我们 -->
    div class="contact">
      div class="container">
        dl>
          dt>客户服务/dt>
          dd>i class="iconfont icon-kefu">/i> 在线客服/dd>
          dd>i class="iconfont icon-question">/i> 问题反馈/dd>
        /dl>
        dl>
          dt>关注我们/dt>
          dd>i class="iconfont icon-weixin">/i> 公众号/dd>
          dd>i class="iconfont icon-weibo">/i> 微博/dd>
        /dl>
        dl>
          dt>下载APP/dt>
          dd class="qrcode">img src="@/assets/images/qrcode.jpg" />/dd>
          dd class="download">
            span>扫描二维码/span>
            span>立马下载APP/span>
            a href="javascript:;">下载页面/a>
          /dd>
        /dl>
        dl>
          dt>服务热线/dt>
          dd class="hotline">400-0000-000 small>周一至周日 8:00-18:00/small>/dd>
        /dl>
      /div>
    /div>
    !-- 其它 -->
    div class="extra">
      div class="container">
        div class="slogan">
          a href="javascript:;">
            i class="iconfont icon-footer01">/i>
            span>价格亲民/span>
          /a>
          a href="javascript:;">
            i class="iconfont icon-footer02">/i>
            span>物流快捷/span>
          /a>
          a href="javascript:;">
            i class="iconfont icon-footer03">/i>
            span>品质新鲜/span>
          /a>
        /div>
        !-- 版权信息 -->
        div class="copyright">
          p>
            a href="javascript:;">关于我们/a>
            a href="javascript:;">帮助中心/a>
            a href="javascript:;">售后服务/a>
            a href="javascript:;">配送与验收/a>
            a href="javascript:;">商务合作/a>
            a href="javascript:;">搜索推荐/a>
            a href="javascript:;">友情链接/a>
          /p>
          p>CopyRight © 小兔鲜儿/p>
        /div>
      /div>
    /div>
  /footer>
/template>

style scoped lang='scss'>
.app_footer {
  overflow: hidden;
  background-color: #f5f5f5;
  padding-top: 20px;

  .contact {
    background: #fff;

    .container {
      padding: 60px 0 40px 25px;
      display: flex;
    }

    dl {
      height: 190px;
      text-align: center;
      padding: 0 72px;
      border-right: 1px solid #f2f2f2;
      color: #999;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        border-right: none;
        padding-right: 0;
      }
    }

    dt {
      line-height: 1;
      font-size: 18px;
    }

    dd {
      margin: 36px 12px 0 0;
      float: left;
      width: 92px;
      height: 92px;
      padding-top: 10px;
      border: 1px solid #ededed;

      .iconfont {
        font-size: 36px;
        display: block;
        color: #666;
      }

      &:hover {
        .iconfont {
          color: $xtxColor;
        }
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .qrcode {
      width: 92px;
      height: 92px;
      padding: 7px;
      border: 1px solid #ededed;
    }

    .download {
      padding-top: 5px;
      font-size: 14px;
      width: auto;
      height: auto;
      border: none;

      span {
        display: block;
      }

      a {
        display: block;
        line-height: 1;
        padding: 10px 25px;
        margin-top: 5px;
        color: #fff;
        border-radius: 2px;
        background-color: $xtxColor;
      }
    }

    .hotline {
      padding-top: 20px;
      font-size: 22px;
      color: #666;
      width: auto;
      height: auto;
      border: none;

      small {
        display: block;
        font-size: 15px;
        color: #999;
      }
    }
  }

  .extra {
    background-color: #333;
  }

  .slogan {
    height: 178px;
    line-height: 58px;
    padding: 60px 100px;
    border-bottom: 1px solid #434343;
    display: flex;
    justify-content: space-between;

    a {
      height: 58px;
      line-height: 58px;
      color: #fff;
      font-size: 28px;

      i {
        font-size: 50px;
        vertical-align: middle;
        margin-right: 10px;
        font-weight: 100;
      }

      span {
        vertical-align: middle;
        text-shadow: 0 0 1px #333;
      }
    }
  }

  .copyright {
    height: 170px;
    padding-top: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;

    p {
      line-height: 1;
      margin-bottom: 20px;
    }

    a {
      color: #999;
      line-height: 1;
      padding: 0 10px;
      border-right: 1px solid #999;

      &:last-child {
        border-right: none;
      }
    }
  }
}
/style>

index.vue

script setup>
import LayoutNav from './components/LayoutNav.vue'
import LayoutHeader from './components/LayoutHeader.vue'
import LayoutFooter from './components/LayoutFooter.vue'
/script>

template>
  LayoutNav />
  LayoutHeader />
  RouterView />
  LayoutFooter />
/template>

字体图标引入

如何引入
阿里的字体图标库支持多种引入方式，小兔鲜项目里采用的是 font-class引用 的方式

Layout-一级导航渲染

功能描述
使用后端接口渲染一级路由导航
实现步骤：

  1. 根据接口文档封装接口函数
  2. 发送请求获取数据列表
  3. v-for渲染页面
import httpInstance from '@/utils/http'

export function getCategoryAPI () {
  return httpInstance({
    url: '/home/category/head'
  })
}

script setup>
  import { getCategoryAPI } from '@/apis/layout'
  import { onMounted, ref } from 'vue'

  const categoryList = ref([])
  const getCategory = async () => {
    const res = await getCategoryAPI()
    categoryList.value = res.result
  }

  onMounted(() => getCategory())

/script>

template>
  header class='app-header'>
    div class="container">
      h1 class="logo">
        RouterLink to="/">小兔鲜/RouterLink>
      /h1>
      ul class="app-header-nav">
        li class="home" v-for="item in categoryList" :key="item.id">
          RouterLink to="/">{{ item.name }}/RouterLink>
        /li>
      /ul>
      div class="search">
        i class="iconfont icon-search">/i>
        input type="text" placeholder="搜一搜">
        /div>
      !-- 头部购物车 -->
    /div>
  /header>
/template>

Layout-吸顶导航交互实现

要求：浏览器在上下滚动的过程中，如果距离顶部的滚动距离大于78px，吸顶导航显示，小于78px隐藏

Layout-Pinia优化重复请求

为什么要优化

结论：俩个导航中的列表是完全一致的，但是要发送俩次网络请求，存在浪费。通过Pinia集中管理数据，再把数据给组件使用

如何优化

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 「Python实用秘技15」pandas中基于范围条件进行表连接

本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 　　这是我的系列文章「Python实用秘技」的第15期，本系列立足于笔者日常工作中使用Python积累的心得…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: