携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

首页布局 和 Pinia 的使用

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

首页布局

通过上面的几个文章，我们将 前后端 等于 token 的处理，以及存在的问题，都已经解决完毕。

接下来进行我们首页中页面的展示，效果图如下。

可以看到主要是三大部分组成：

• 侧边栏

• 页头

• 主要内容区域

• 页尾

页面结构代码

<template>
  <div class="common-layout">
    <el-container>
      <!--      侧边菜单栏start-->
      <LayoutAside></LayoutAside>
      <!--      侧边菜单栏end-->

      <el-container>
        <!--      页头 start-->
        <LayoutHeader></LayoutHeader>
        <!--      页头end-->

        <!--      内容区域start-->
        <el-main id="elmain">
          <transition name="main" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
        <!--      内容区域end-->

        <!--      页脚start-->
        <el-footer>
          <LayoutFooter></LayoutFooter>
        </el-footer>
        <!--      页脚end-->
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import LayoutAside from './aside/index.vue'
import LayoutHeader from './header/index.vue'
import LayoutFooter from './footer/index.vue'
</script>

<style lang="scss" scoped>
body {
  background-color: #f2f2f2;
  font-size: 14px;
  color: #333333;
}

.common-layout,
.el-container {
  height: 100%;
}

.main-enter,
.main-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.main-enter-active {
  transition: all 0.2s;
}
.main-leave-active {
  position: absolute;
  transition: all 0.3s;
}
</style>

由于代码量较多，这里先将 页头 和 页尾 代码进行展示

页尾

<template>
  <div>
    <p>Copyright © 2022 wangzaimisu.</p>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
p {
  height: 60px;
  line-height: 60px;
  text-align: left;
  font-size: 12px;
  color: #999999;
}
</style>

页头

页头 主要是一个 控制菜单伸缩 的 icon 图标，由于我们还没有引入 icon 图标库，这里先用一个 button 代替

个人 这一块，也先用 button 代替

<template>
  <div>
    <el-header id="header">
      <div>
        <el-button @click="collapse">控制菜单伸缩</el-button>
      </div>
      <div>
        <el-button>个人</el-button>
      </div>
    </el-header>
    <tabNav></tabNav>
  </div>
</template>
<script setup lang="ts">
import { useLayoutStore } from '@/store'
import { storeToRefs } from 'pinia'
import tabNav from './tabnav.vue'

const layoutStore = useLayoutStore()

const collapse = () => {
  layoutStore.collapse()
}
</script>

<style lang="scss" scoped>
#header {
  max-height: 50px;
  line-height: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

Pinia 的使用

从上面的 页头 代码中，可以看到我们使用到了 Pinia ，

即 import { useLayoutStore } from '@/store' 那么这行代码具体内部是什么。

接下来将我们将目光移到 Pinia 的使用上面

先看下 store 的目录结构

// store/index.ts

import { createPinia } from 'pinia'
import { App } from 'vue'

const pinia = createPinia()

export function setupStore(app: App) {
  app.use(pinia)
}

export * from './modules/user'
export * from './modules/layout'
export * from './modules/login'

其中 modules 下的 layout 文件内容如下，往后的模板，都是下面的格式

// store/modules/layout.ts

import { defineStore } from 'pinia'

export const useLayoutStore = defineStore('layout', {
  state: () => {
    return {
      logoShow: false, // 是否显示logo
      isCollapse: false, // 菜单的收缩
      uniquerouter: true // 只展示一个菜单
    }
  },
  getters: {},
  actions: {
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.logoShow) {
        setTimeout(() => {
          this.logoShow = false
        }, 300)
      } else {
        this.logoShow = true
      }
    }
  }
})

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

将页面首页布局结构进行书写，以及 使用状态管理库 Pinia