【Vue】后台管理系统

O 项目说明

1.脚手架

• vite
• vue-cli ==》 webpack

2.vite脚手架使用

官网：https://vitejs.cn/

Vue3 vite官网：https://cn.vitejs.dev/

Vite下一代的前端工具链，为开发者提供急速响应

# 安装
$ cnpm i vite -g
$ vite -v
vite/4.0.3 darwin-x64 node-v16.13.1复制

windows注意处理 ****/vite.psl文件

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

2.1 如何搭建vue3项目

• 使用npm

# 如果选择npm创建项目再执行
$ npm create vite@latest复制

• 使用yarn，如果电脑没有安装yarn cnpm i yarn -g

$ yarn create vite复制

• 使用pnpm：如果电脑尚未安装 pnpm cnpm i pnpm -g

$ pnpm create vite复制

1.创建项目

$ npm init vue@latest复制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSvR3gWm-1672888918411)(assets/image-20221226093812541.png)]

|- vue3-admin-app  # 项目名称
	|- node_modules  # 项目依赖包
  |- public
  	favicon.ico 	 # 网页图标
  |- src					 # 写代码的主场
  	|- assets			 # 资源文件
  		base.css     # 基础样式
  		logo.svg     # logo
  		main.css     # 项目样式
		|- components  # 自定义组件
    	|- icons     # 图标组件
  		HelloWorld.vue # 自定义组件
  		TheWelcome.vue # 自定义组件
  		welcomeItem.vue # 自定义组件
  	|-router       # 路由文件夹
  		index.ts     # 路由配置
  	|- stores      # 状态管理器文件夹
  		counter.ts   # 状态管理器模块
  	|- views       # 项目页面组件
  		AboutView.vue # 页面
  		HomeView.vue  # 页面
  	App.vue         # 项目跟组件
  	main.ts         # 项目入口文件
  .eslintrc.cjs     # 代码格式化说明
  .gitignore        # git上传忽略文件
  .prettierrc.json  # 格式化配置
  env.d.ts 					# 环境配置声明文件 - ts 中
  index.html        # 页面模版
  package.json      # 项目依赖说明以及运行命令
  README.md 				# 说明文档
  tsconfig.config.json # ts的配置文件说明 - 本项目部分
  tsconfig.json				 # ts的配置文件说明 - 公共部分
  vite.config.ts			 # vite的配置文件复制

1.1 Vue3 单文件组件 SFC

一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

每一个 *.vue 文件都由三种顶层语言块构成：<template>、<script> 和 <style>

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>
复制

打开src/mian.ts发现在引入 App.vue中画红线，说明项目中没有.vue的声明文件，需要自行补充一下

// env.d.ts
/// <reference types="vite/client" />
 
// 简单版本
// declare module '*.vue'
 
// 推荐
declare module '*.vue' {
  // 引入vue模块中ts的方法
  import type { DefineComponent } from 'vue'
  // 定义vue组件以及类型注解
  const component: DefineComponent<{}, {}, any>
  export default component
}
 复制

再次打开 src/main.ts发现红线丢失

复制src文件夹，保留App.vue以及main.ts基本内容

// src/main.ts
import { createApp } from 'vue'
 
import App from './App.vue'
 
const app = createApp(App)
 
app.mount('#app')
 复制

如何使用选项式API

<!-- src/App.vue -->
<template>
  <div class="example">
    {{  msg  }} - {{ count }}
    <button @click="count++">加1</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent} from 'vue'
  export default defineComponent({
    data () {
      return {
        msg: 'hello sfc',
        count: 10
      }
    }
  })
</script>
<!-- 如果样式只针对当前组件是有效的，只要给style 添加 scoped 属性即可 -->
<style>
  .example {
    color: #f66
  }
</style>
复制

如果使用组合式API

<!-- src/App.vue -->
<template>
  <div class="example">
    {{  msg  }} - {{ count }}
    <button @click="count++">加1</button>
  </div>
</template>
 
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup () {
      const msg = ref('hello sfc!!!!')
      const count = ref(10)
 
      return {
        msg, count
      }
    }
  })
</script>
<!-- 如果样式只针对当前组件是有效的，只要给style 添加 scoped 属性即可 -->
<style>
  .example {
    color: #f66
  }
</style>复制

• 组合式API简写形式

<!-- src/App.vue -->
<template>
  <div class="example">
    {{  msg  }} - {{ count }}
    <button @click="count++">加1</button>
  </div>
</template>

<!-- 采用简写形式 -->
<script lang="ts" setup>

  import { ref } from 'vue'

  const msg = ref('hello sfc!!!!')
  const count = ref(10)

</script>
<!-- 如果样式只针对当前组件是有效的，只要给style 添加 scoped 属性即可 -->
<style>
  .example {
    color: #f66
  }
</style>
复制

预习：https://cn.vuejs.org/guide/typescript/composition-api.html

2.准备工作

？样式处理 css、sass、less 、stylus

sass、less、stylus 为 css 预处理器

.contianer {}
.container .box {}
.container .box .header {}
.container .box .content {}
.container .box .footer {}复制

// scss
.contianer {
  width: 100%
	.box {
    width: 100%
		.header {
      width: 100%
    }
		.content {
    	width: 100%  
    }
		.footer {
      width: 100%
    }
	}
}复制

// .less
.contianer {
  width: 100%
	.box {
    width: 100%
		.header {
      width: 100%
    }
		.content {
    	width: 100%  
    }
		.footer {
      width: 100%
    }
	}
}复制

// stylus
.container
  width 100%
  .box
    width 100%
    .header
      width 100%
    .content
      width 100%
    .footer
      width 100%
复制

?? 本项目用什么，建议大家先选择UI组件库（element-plus / ant-design-vue）

• 样式 css - sass - 可以重新创建项目

  # 需要安装
  $ cnpm i sass -D复制

  使用重置样式表

  # 需要安装
  $ cnpm i normalize.css -D复制

  // src/main.ts
  import { createApp } from 'vue'
  import { createPinia } from 'pinia'
   
  import App from './App.vue'
  import router from './router'
   
  // 重置样式表
  import 'normalize.css/normalize.css'
   
  // import './assets/main.css' // 不使用默认样式
   
  const app = createApp(App)
   
  app.use(createPinia())
  app.use(router)
   
  app.mount('#app')
   复制

• 路由 vue-router

  # 创建项目时已经选择了，此处不需要安装
  $ cnpm i vue-router -S复制

• 状态管理 pinia / vuex

  # 创建项目时已经选择了，此处不需要安装
  $ cnpm i pinia -S复制

• 数据请求方案 axios / fetch

  # 需要安装
  $ cnpm i axios -S复制

• 组件库 element plus

  # 需要安装(如果安装失败， 更新cnpm）  
  # npm install -g cnpm --registry=https://registry.npmmirror.com
  $ cnpm i element-plus -S复制

  Element-plus 默认使用英文，如果需要使用中文包，如下操作

  // src/main.ts
  import { createApp } from 'vue'
  import { createPinia } from 'pinia'
   
  // 引入UI库 ++++++
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
   
  import App from './App.vue'
  import router from './router'
   
  // 重置样式表
  import 'normalize.css/normalize.css'
   
  // import './assets/main.css' // 不使用默认样式
   
  const app = createApp(App)
   
  // 配置UI库  ++++++
  app.use(ElementPlus, { locale: zhCn })
  app.use(createPinia())
  app.use(router)
   
  app.mount('#app')
   复制

  // env.d.ts
  /// <reference types="vite/client" />
   
  // declare module '*.vue'
  declare module '*.vue' {
  import type { DefineComponent, defineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
  }
   
  declare module 'element-plus/dist/locale/zh-cn.mjs'复制

• 本地存储 localStorage / store2 /

  # 安装
  $ cnpm i store2 -S复制

• 数据可视化 ECharts

  # 安装
  $ cnpm i echarts -S复制

3.创建主布局文件

https://element-plus.gitee.io/zh-CN/component/container.html#常见页面布局

<!-- src/App.vue -->
<script lang="ts" setup>
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
/* 审查元素从而设定样式 */
html, body, #app, .common-layout, .el-container {
  height: 100%;
}
.common-layout {
  .el-container {
    background-color: #efefef;
    .el-aside {
      background-color: #001529;
    }
    .el-container {
      .el-header {
        background-color: #fff;
      }
      .el-main {
        background-color: #fff;
        margin: 16px;
      }
      .el-footer {
        background-color: #fff;
      }
    }
  }
}
</style>
复制

4.对于整个系统的设计思路

4.1 系统的默认设置

https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=/dashboard

// src/settings.ts
// 参考项目链接
// https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=/dashboard
export default {
 
  title: '嗨购管理系统',
 
  // 主题等的设置
  showSetting: true,
 
  // 快捷导航的提示
  tagsView: true,
 
  // 头部是否固定
  fixedHeader: true,
 
  // 左侧菜单logo显示
  sideBarLogo: true
}复制

4.2 设置页面的标题

// src/utils/get-page-title.ts
import defaultSettings from '../settings'
 
const title = defaultSettings.title || '嗨购后台管理系统'
 
// 系统首页 - 嗨购后台管理系统
// 添加轮播图 - 嗨购后台管理系统
export default function getPageTitle (pageTitle: string) {
  if (pageTitle) {
    // 当前页面标识 + 应用的标题
    return `${ pageTitle } - ${ title }`
  } else {
    return `${ title }`
  }
}
 
 复制

页面标题的修改需要配合路由使用

5.设置路由

5.1 设置基本布局组件

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

<!-- src/App.vue -->
<!-- 组合式API中如何使用 组件 -->
<script lang="ts" setup>
  import Layout from './layout/index.vue'
</script>

<template>
  <Layout />
</template>

<style lang="scss">
/* 审查元素从而设定样式 */
html, body, #app, .common-layout, .el-container {
  height: 100%;
}
.common-layout {
  .el-container {
    background-color: #efefef;
    .el-aside {
      background-color: #001529;
    }
    .el-container {
      .el-header {
        background-color: #fff;
      }
      .el-main {
        background-color: #fff;
        margin: 16px;
      }
      .el-footer {
        background-color: #fff;
      }
    }
  }
}
</style>
复制

5.2 设置基本页面

5.2.1 系统首页

<!-- src/views/home/index.vue -->
<script lang="ts" setup></script>

<template>
  <div>系统首页</div>
</template>
复制

5.2.2 轮播图管理

• 轮播图列表

  • <!-- src/views/banner/list.vue -->
    <script lang="ts" setup>
    </script>
    
    <template>
      <div>轮播图列表</div>
    </template>
    
    复制

  • <!-- src/views/banner/components/home.vue -->
    <script lang="ts" setup>
    </script>
    
    <template>
      <div>首页轮播图列表</div>
    </template>
    
    复制

  • <!-- src/views/banner/components/kind.vue -->
    <script lang="ts" setup>
    </script>
    
    <template>
      <div>分类轮播图列表</div>
    </template>
    
    复制

• 添加轮播图

  <!-- src/views/banner/add.vue -->
  <script lang="ts" setup>
  </script>
  
  <template>
    <div>添加轮播图</div>
  </template>
  
  复制

5.2.3 产品管理

<!-- src/views/pro/list.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>产品列表</div>
</template>

复制

<!-- src/views/pro/search.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>筛选列表</div>
</template>


复制

5.2.4 账户管理

<!-- src/views/account/admin.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>管理员列表</div>
</template>

复制

<!-- src/views/account/user.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>用户列表</div>
</template>

复制

5.2.5 登录页面

<!-- src/views/login/index.vue -->
<script lang="ts" setup>
</script>

<template>
  <div>登录页面</div>
</template>

复制

5.3 设置路由模块

https://router.vuejs.org/zh/introduction.html

左侧菜单渲染结构(这些页面应该都是主界面结构)

|- 系统首页            # 只有一级路由
|- 轮播图管理    			# 三级路由
	|- 轮播图列表
		|- 首页轮播图
		|- 分类页轮播图
	|- 添加轮播图
|- 产品管理						# 二级路由
	|- 产品列表
	|- 筛选列表
|- 账户管理						# 二级路由
	|- 管理员列表
	|- 用户列表复制

真实项目开发时，可能 轮播图 产品 账户是不同的人开发以及维护的，所以建议将这几个路由的配置分离开来

然后再统一整合管理即可

5.3.1 账户管理路由

// src/router/modules/account.ts
// @符号代表 src 目录结构
import Layout from '@/layout/index.vue'
import User from '@/views/account/user.vue'
import Admin from '@/views/account/Admin.vue'
export default {
  path: '/account', // 地址栏显示的路径
  redirect: '/account/user', // 当用户输入 /account 路由时，自动跳转到 /account/user 路由
  component: Layout, // 账户管理使用主界面布局结构
  name: 'account', // 给路由起名字 - 命名路由 - 具有唯一性 - 后期会使用
  meta: {
    title: '账户管理', // 左侧菜单栏显示的名字
    icon: 'User' // 左侧菜单栏显示的图标
  },
  children: [ // 代表账户管理下有二级路由
    {
      path: '/account/user',
      component: User,
      meta: {
        title: '用户列表'
      }
    },
    {
      path: '/account/admin',
      component: Admin,
      meta: {
        title: '管理员列表'
      }
    }
  ]
}复制

5.3.2 轮播图路由

// src/router/modules/banner.ts
import Layout from '@/layout/index.vue'
import BannerAdd from '@/views/banner/add.vue'
import BannerList from '@/views/banner/list.vue'
import BannerHomeList from '@/views/banner/components/home.vue'
import BannerKindList from '@/views/banner/components/kind.vue'
export default {
  path: '/banner',
  name: 'banner',
  redirect: '/banner/list',
  component: Layout,
  meta: {
    title: '轮播图管理',
    icon: 'PictureFilled'
  },
  children: [
    {
      path: '/banner/list',
      component: BannerList,
      redirect: '/banner/list/home',
      meta: {
        title: '轮播图列表'
      },
      children: [
        {
          path: '/banner/list/home',
          component: BannerHomeList,
          meta: {
            title: '首页轮播图'
          },
        },
        {
          path: '/banner/list/kind',
          component: BannerKindList,
          meta: {
            title: '分类页轮播图'
          },
        }
      ]
    },
    {
      path: '/banner/add',
      component: BannerAdd,
      meta: {
        title: '添加轮播图'
      }
    }
  ]
}复制

5.3.3 产品管理路由

// src/router/modules/pro.ts
import Layout from '@/layout/index.vue'
import ProList from '@/views/pro/list.vue'
import ProSearch from '@/views/pro/search.vue'
export default {
  path: '/pro',
  redirect: '/pro/list',
  component: Layout,
  meta: {
    title: '产品管理',
    icon: 'Fries'
  },
  children: [
    {
      path: '/pro/list',
      component: ProList,
      meta: {
        title: '产品列表'
      }
    },
    {
      path: '/pro/search',
      component: ProSearch,
      meta: {
        title: '筛选列表'
      }
    }
  ]
}复制

5.3.4 整合路由

// src/router/index.ts
 
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 1.引入自定义分模块的路由
import bannerRoutes from './modules/banner'
import proRoutes from './modules/pro'
import accountRoutes from './modules/account'
 
// 2.引入主界面布局，生成 首页和登录的路由 -- 常规路由 -- 任何人都可以访问路由
import Layout from '@/layout/index.vue'
import Home from '@/views/home/index.vue'
import Login from '@/views/login/index.vue'
 
// 3.定义常规路由-任何人可以访问的路由
export const constantRoutes: RouteRecordRaw[] = [
  { // 地址栏输入 /login, 整个页面展示登录页面
    path: '/login',
    component: Login
  },
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: '系统首页',
          icon: 'HomeFilled'
        }
      }
    ]
  }
]
 
// 4.整合模块路由
export const asyncRoutes = [
  bannerRoutes,
  proRoutes,
  accountRoutes
]
 
// 5.合并路由
const router = createRouter({
  // createWebHistory http://localhost:5173/home
  // createWebHashHistory   http://localhost:5173/#/home
  history: createWebHistory(import.meta.env.BASE_URL),
  // routes: constantRoutes.concat(asyncRoutes)
  routes: [...constantRoutes, ...asyncRoutes]
})
 
export default router
 复制

5.3.5 入口文件配置路由

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
// 引入UI库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
import App from './App.vue'
import router from './router'
 
// 重置样式表
import 'normalize.css/normalize.css'
 
// import './assets/main.css' // 不使用默认样式
 
const app = createApp(App)
 
// 配置UI库
app.use(ElementPlus, { locale: zhCn })
app.use(createPinia())
app.use(router)
 
app.mount('#app')
 复制

5.3.6 App.vue使用路由

<!-- src/App.vue -->
<!-- 组合式API中如何使用 组件 -->
<script lang="ts" setup>
</script>

<template>
  <!-- 路由映射的组件  
    /login   Login
    /pro/list  Layout
  -->
  <RouterView/>
</template>

<style lang="scss">
/* 审查元素从而设定样式 */
html, body, #app, .common-layout, .el-container {
  height: 100%;
}
.common-layout {
  .el-container {
    background-color: #efefef;
    .el-aside {
      background-color: #001529;
    }
    .el-container {
      .el-header {
        background-color: #fff;
      }
      .el-main {
        background-color: #fff;
        margin: 16px;
      }
      .el-footer {
        background-color: #fff;
      }
    }
  }
}
</style>
复制

5.3.7 主界面设置路由视图

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!--  内容区域变化 -->
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

5.3.8 轮播图列表视图

<!-- src/views/banner/list.vue -->
<script lang="ts" setup></script>

<template>
  <div>轮播图列表</div>
  <RouterView />
</template>
复制

6.渲染左侧菜单栏

6.1 重新设置路由表

页面展示靠路由，但是左侧菜单并不见得所有的路由都得出现

将不需要出现在左侧菜单栏的数据 做一个标识hidden: true

扩展了类型注解

// src/router/index.ts
// type RouteRecordRaw 定义路由规则的变量的类型注解
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 1.引入自定义分模块的路由
import bannerRoutes from './modules/banner'
import proRoutes from './modules/pro'
import accountRoutes from './modules/account'
 
// 2.引入主界面布局，生成 首页和登录的路由 -- 常规路由 -- 任何人都可以访问路由
import Layout from '@/layout/index.vue'
import Home from '@/views/home/index.vue'
import Login from '@/views/login/index.vue'
 
// 扩展 类型注解
type MyRouteRecordRaw = RouteRecordRaw & {
  hidden?: boolean
}
 
// 3.定义常规路由-任何人可以访问的路由
export const constantRoutes: MyRouteRecordRaw[] = [
  { // 地址栏输入 /login, 整个页面展示登录页面
    path: '/login',
    component: Login,
    hidden: true
  },
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: '系统首页',
          icon: 'HomeFilled'
        }
      }
    ]
  }
]
 
// 4.整合模块路由
export const asyncRoutes: MyRouteRecordRaw[] = [
  bannerRoutes,
  proRoutes,
  accountRoutes
]
 
// 5.合并路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoutes.concat(asyncRoutes)
})
 
export default router
 复制

// src/router/modules/banner.ts
import Layout from '@/layout/index.vue'
import BannerAdd from '@/views/banner/add.vue'
import BannerList from '@/views/banner/list.vue'
import BannerHomeList from '@/views/banner/components/home.vue'
import BannerKindList from '@/views/banner/components/kind.vue'
export default {
  path: '/banner',
  name: 'banner',
  redirect: '/banner/list',
  component: Layout,
  meta: {
    title: '轮播图管理',
    icon: 'PictureFilled'
  },
  children: [
    {
      path: '/banner/list',
      component: BannerList,
      redirect: '/banner/list/home',
      meta: {
        title: '轮播图列表'
      },
      children: [
        {
          path: '/banner/list/home',
          component: BannerHomeList,
          meta: {
            title: '首页轮播图'
          },
        },
        {
          path: '/banner/list/kind',
          component: BannerKindList,
          meta: {
            title: '分类页轮播图'
          },
        }
      ]
    },
    {
      path: '/banner/add',
      component: BannerAdd,
      meta: {
        title: '添加轮播图'
      },
      hidden: true
    }
  ]
}复制

6.2 构建左侧菜单的组件

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup></script>
<template>
  <el-aside width="200px">
    <div class="logo"></div>
    <div>左侧菜单</div>
  </el-aside>
</template>
复制

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
import SideBar from './components/Sidebar/index.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-aside width="200px">Aside</el-aside> -->
      <SideBar />
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!--  内容区域变化 -->
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

左侧菜单对应的每个数据的菜单项

<!-- src/layout/components/Sidebar/SidebarItem.vue -->
<script lang="ts" setup></script>

<template>
  <div>左侧菜单选项</div>
</template>
复制

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import SidebarItem from './SidebarItem.vue'
 
  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
 
  const menuList = constantRoutes.concat(asyncRoutes)
  console.log(menuList)
</script>
<template>
  <el-aside width="200px">
    <div class="logo"></div>
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#侧栏
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu>
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
  </el-aside>
</template>复制

渲染子组件

分析数据结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itlMnTal-1672888918413)(assets/image-20221227160845689.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8CRy9Iq-1672888918414)(assets/image-20221227160905511.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQBUyTgw-1672888918414)(assets/image-20221227161017853.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ryAgzwzg-1672888918415)(assets/image-20221227161042917.png)]

6.3 渲染左侧菜单的数据

说明：需要使用图标

$ cnpm install @element-plus/icons-vue复制

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
// 引入UI库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
// 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
import App from './App.vue'
import router from './router'
 
// 重置样式表
import 'normalize.css/normalize.css'
 
// import './assets/main.css' // 不使用默认样式
 
const app = createApp(App)
// 配置图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
 
// 配置UI库
app.use(ElementPlus, { locale: zhCn })
app.use(createPinia())
app.use(router)
 
app.mount('#app')
 复制

<!-- src/layout/components/Sidebar/SidebarItem.vue -->
<script lang="ts" setup>
  // 1.接收父组件所传递的数据 item 并且加以验证
  // https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
  const props = defineProps({
    // item 为父组件传递给子组件的标识
    item: { type: Object, required: true }
  })
</script>
<!-- 
  遇到 类似登录的路由含有 hidden：true  不希望出现左侧菜单栏
 -->
<template>
  <!-- 过滤了 含有 hidden：true 的数据 -->
  <div v-if="!item.hidden">
    <!-- 系统首页的路由 children 的长度只为1，认为只需要写一个一级路由即可 
    index属性代表唯一标志 -->
    <el-menu-item :index="item.path" v-if="item.children && item.children.length === 1">
      <el-icon>
        <!-- 动态组件 -->
        <component :is="item.children[0].meta.icon"></component>
      </el-icon>
      <span>{{ item.children[0].meta.title }}</span>
    </el-menu-item>
    <!-- 路由选项既没有 children 也没有 hidden 时候
      {
        path: '/setting',
        component: Setting,
        meta: {
          title: '设置',
          icon: 'Setting'
        }
      },
      { // 二级菜单子菜单
        path: '/account/user',
        component: User,
        meta: {
          title: '用户列表'
        }
      },
    -->
    <el-menu-item :index="item.path" v-else-if="!item.children">
      <el-icon>
        <!-- 动态组件 -->
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
    <!-- 剩余的包含有多级菜单的数据
      函数 - 函数递归
      组件 - 组件递归
        组合式API的组件递归，自己调用自己的组件，必须确保组件的名字和组件的文件名字保持一致
        假设组件文件名为 TestCom.vue ，那么递归调用时   <test-com></text-com>
        递归目的：自动渲染多级菜单

    -->
    <el-sub-menu :index="item.path" v-else>
      <!-- 插槽实现一级菜单 -->
      <template #title>
        <el-icon>
          <!-- 动态组件 -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归组件 -->
      <sidebar-item v-for="itm of item.children" :key="item.path" :item="itm"></sidebar-item>
    </el-sub-menu>
  </div>
</template>
复制

6.4 点击左侧菜单切换路由

<!-- src/layout/components/Sidebar/SidebarItem.vue -->
<script lang="ts" setup>
  import { useRouter } from 'vue-router';

  const props = defineProps({
    item: { type: Object, required: true }
  })
  // https://router.vuejs.org/zh/guide/advanced/composition-api.html
  // router.push()       从A push 到B，从B push 到C，C可以返回到B，B可以返回到A
  // router.replace()    从A push 到B，从B replace 到C， C返回的实际上是 A
  // router.back()       返回
  // router.go(num)       num为正，前进几步，num为负，后退几步
  // 选项式API  this.$router.push()  .replace()
  const router = useRouter()
  const changeUrl = (path: string) => {
    console.log(path)
    router.push(path) // js 跳转页面 ---- 编程式导航跳转
  }
</script>
<template>
  <div v-if="!item.hidden">
    <el-menu-item @click="changeUrl(item.path)" :index="item.path" v-if="item.children && item.children.length === 1">
      <el-icon>
        <component :is="item.children[0].meta.icon"></component>
      </el-icon>
      <span>{{ item.children[0].meta.title }}</span>
    </el-menu-item>
    <el-menu-item @click="changeUrl(item.path)" :index="item.path" v-else-if="!item.children">
      <el-icon>
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
    <el-sub-menu :index="item.path" v-else>
      <template #title>
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <sidebar-item v-for="itm of item.children" :key="item.path" :item="itm"></sidebar-item>
    </el-sub-menu>
  </div>
</template>
复制

6.5 只展开一个以及刷新选中

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import SidebarItem from './SidebarItem.vue'

  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
  import { useRoute } from 'vue-router';

  const menuList = constantRoutes.concat(asyncRoutes)
  console.log(menuList)

  // 获取路由地址
  // 选项式API  this.$route
  const route = useRoute()
  console.log(route)
</script>
<template>
  <el-aside width="200px">
    <div class="logo"></div>
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#侧栏
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu
      :unique-opened="true"
      :default-active="route.path"
      background-color="#001529"
      text-color="#fff"
      :collapse-transition="false"
    >
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
  </el-aside>
</template>
复制

6.6 logo

<!-- src/layout/components/logo/index.vue -->
<script lang="ts" setup>
  import { computed } from 'vue'
  import logo from '@/assets/logo.svg'
  import settings from '@/settings'

  const title = computed(() => settings.title)
</script>

<template>
  <div class="logo">
    <el-image style="width: 40px; height: 40px" :src="logo" fit="fill" />
    <span>{{  title  }}</span>
  </div>
</template>

<style lang="scss">
.logo {
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  align-items: center;
}
</style>
复制

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import SidebarItem from './SidebarItem.vue'
  import Logo from './../logo/index.vue'

  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
  import { useRoute } from 'vue-router';

  const menuList = constantRoutes.concat(asyncRoutes)
  console.log(menuList)

  // 获取路由地址
  // 选项式API  this.$route
  const route = useRoute()
  console.log(route) // route.path.value
</script>
<template>
  <el-aside width="200px">
    <!-- <div class="logo"></div> -->
    <Logo />
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#侧栏
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu
      :unique-opened="true"
      :default-active="route.path"
    >
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
  </el-aside>
</template>
复制

6.7 左侧菜单的收缩

logo组件接收变量，控制文件的显示

<!-- src/layout/components/logo/index.vue -->
<script lang="ts" setup>
  import { computed } from 'vue'
  import logo from '@/assets/logo.svg'
  import settings from '@/settings'

  const props = defineProps({
    collapse: { type: Boolean, required: true }
  })

  const title = computed(() => settings.title)
</script>

<template>
  <div class="logo">
    <el-image style="width: 40px; height: 40px" :src="logo" fit="fill" />
    <span v-if="!collapse">{{  title  }}</span>
  </div>
</template>

<style lang="scss">
.logo {
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  align-items: center;
}
</style>
复制

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import { ref } from 'vue'
  import SidebarItem from './SidebarItem.vue'
  import Logo from './../logo/index.vue'

  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
  import { useRoute } from 'vue-router';

  const menuList = constantRoutes.concat(asyncRoutes)
  console.log(menuList)

  // 获取路由地址
  // 选项式API  this.$route
  const route = useRoute()
  console.log(route) // route.path.value

  const collapse = ref(false)
</script>
<template>
  <el-aside :width="collapse ? '50px' : '200px'">
    <!-- <div class="logo"></div> -->
    <Logo :collapse="collapse"/>
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#侧栏
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu
      :collapse="collapse"
      :unique-opened="true"
      :default-active="route.path"
    >
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
    <div class="changeIcon" :style="{ width: collapse ? '50px' : '200px'}">
      <el-icon color="#fff" v-if="collapse" @click="collapse = !collapse"><ArrowRight /></el-icon>
      <el-icon color="#fff" v-else @click="collapse=!collapse"><ArrowLeft /></el-icon>
    </div>
  </el-aside>
</template>

<style lang="scss">
.changeIcon {
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: center;
}
</style>
复制

6.8 面包屑

<!-- src/layout/components/breadcrumb/index.vue -->
<script lang="ts" setup></script>

<template>
  <div>面包屑</div>
</template>
复制

// src/router/index.ts
// type RouteRecordRaw 定义路由规则的变量的类型注解
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 1.引入自定义分模块的路由
import bannerRoutes from './modules/banner'
import proRoutes from './modules/pro'
import accountRoutes from './modules/account'
 
// 2.引入主界面布局，生成 首页和登录的路由 -- 常规路由 -- 任何人都可以访问路由
import Layout from '@/layout/index.vue'
import Home from '@/views/home/index.vue'
import Login from '@/views/login/index.vue'
 
// 扩展 类型注解（interface） 暴露出去，供需要的使用 ++++++++++++++++++++++++++++++++++++++++
// export declare 暴露类型
export declare type MyRouteRecordRaw = RouteRecordRaw & {
  hidden?: boolean
}
 
// 3.定义常规路由-任何人可以访问的路由
export const constantRoutes: MyRouteRecordRaw[] = [
  { // 地址栏输入 /login, 整个页面展示登录页面
    path: '/login',
    component: Login,
    hidden: true
  },
  // {
  //   path: '/setting',
  //   component: Setting,
  //   meta: {
  //     title: '设置',
  //     icon: 'Setting'
  //   }
  // },
  {
    path: '/',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: '系统首页',
          icon: 'HomeFilled'
        }
      }
    ]
  }
]
 
// 4.整合模块路由
export const asyncRoutes: MyRouteRecordRaw[] = [
  bannerRoutes,
  proRoutes,
  accountRoutes
]
 
// 5.合并路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoutes.concat(asyncRoutes)
})
 
export default router
 复制

获取需要的对象数据

<!-- src/layout/components/breadcrumb/index.vue -->
<script lang="ts" setup>
  // 准备数据
  // const breadcrumbNameMap = {
  //   '/home': '系统首页',
  //   '/banner': '轮播图管理',
  //   '/banner/list': '轮播图列表',
  //   '/banner/list/home': '首页轮播图',
  //   '/banner/list/kind': '分类轮播图',
  //   '/banner/add': '添加轮播图',
  //   '/pro': '产品管理',
  //   '/pro/list': '产品列表',
  //   '/pro/search': '筛选列表',
  //   '/account': '账户管理',
  //   '/account/user': '用户列表',
  //   '/account/admin': '管理员列表' 
  // }
  import { constantRoutes, asyncRoutes, type MyRouteRecordRaw } from '@/router'
  
  const menuList = [...constantRoutes, ...asyncRoutes]

  let breadcrumbNameMap: Record<string, string> = {}

  function getBreadcrumbNameMap (menuList: MyRouteRecordRaw[]) {
    menuList.forEach(item => {
      if (item.path !== '/login') {
        if (item.children) {
          if (item.children.length === 1) {
            // 如果遇到 ** 可能未定义 使用 ！解决
            // 因为路由meta 的属性的类型注解 不明确，此处上面定义为 string，使用类型推断为string即可
            breadcrumbNameMap[item.children[0].path] = item.children[0].meta!.title as string
          } else {
            breadcrumbNameMap[item.path] = item.meta!.title as string
            getBreadcrumbNameMap(item.children)
          }
        } else {
          breadcrumbNameMap[item.path] = item.meta!.title as string
        }
      }
    })
  }
  getBreadcrumbNameMap(menuList)
  console.log(breadcrumbNameMap) // 需要准备的数据

  // /banner/list/kind 
  // breadcrumbNameMap['/banner']  breadcrumbNameMap['/banner/list'] breadcrumbNameMap['/banenr/list/kind']
  // 轮播图管理 轮播图列表 分类轮播图
</script>

<template>
  <div>面包屑</div>
</template>
复制

根据地址栏获取路由

<!-- src/layout/components/breadcrumb/index.vue -->
<script lang="ts" setup>
  // 准备数据
  // const breadcrumbNameMap = {
  //   '/home': '系统首页',
  //   '/banner': '轮播图管理',
  //   '/banner/list': '轮播图列表',
  //   '/banner/list/home': '首页轮播图',
  //   '/banner/list/kind': '分类轮播图',
  //   '/banner/add': '添加轮播图',
  //   '/pro': '产品管理',
  //   '/pro/list': '产品列表',
  //   '/pro/search': '筛选列表',
  //   '/account': '账户管理',
  //   '/account/user': '用户列表',
  //   '/account/admin': '管理员列表' 
  // }
  import { constantRoutes, asyncRoutes, type MyRouteRecordRaw } from '@/router'
  import { watchEffect, ref } from 'vue';
  import { useRoute } from 'vue-router';
  
  const menuList = [...constantRoutes, ...asyncRoutes]

  let breadcrumbNameMap: Record<string, string> = {}

  function getBreadcrumbNameMap (menuList: MyRouteRecordRaw[]) {
    menuList.forEach(item => {
      if (item.path !== '/login') {
        if (item.children) {
          if (item.children.length === 1) {
            // 如果遇到 ** 可能未定义 使用 ！解决
            // 因为路由meta 的属性的类型注解 不明确，此处上面定义为 string，使用类型推断为string即可
            breadcrumbNameMap[item.children[0].path] = item.children[0].meta!.title as string
          } else {
            breadcrumbNameMap[item.path] = item.meta!.title as string
            getBreadcrumbNameMap(item.children)
          }
        } else {
          breadcrumbNameMap[item.path] = item.meta!.title as string
        }
      }
    })
  }
  getBreadcrumbNameMap(menuList)
  // console.log(breadcrumbNameMap) // 需要准备的数据

  // /banner/list/kind 
  // breadcrumbNameMap['/banner']  breadcrumbNameMap['/banner/list'] breadcrumbNameMap['/banenr/list/kind']
  // 轮播图管理 轮播图列表 分类轮播图

  const route = useRoute()
  // const url = route.path
  // console.log(url) // /banner/list/kind 

  function getData () {
    const arr = route.path.split('/') // ['', 'banner', 'list', 'kind']
    arr.shift() // ['banner', 'list', 'kind']
    // ['/banner', '/banner/list', '/banner/list/kind']

    const newArr: string[] = []
    arr.map((_, index) => {
      // join('/') 拼接时使用 / 拼接，默认是 ，
      const newUrl = '/' + arr.slice(0, index + 1).join('/')
      console.log(newUrl)
      newArr.push(newUrl)
    })
    // console.log(newArr)
    return newArr
  }
  let breadcrumbArr = ref<string[]>([])

  watchEffect(() => { // 路由变化时 重新获取面包屑 ---- 保证数据的双向绑定
    console.log(11111)
    breadcrumbArr.value = getData() // 修改使用 value 保证响应式
    console.log('66', breadcrumbArr)
  })
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) of breadcrumbArr" :key="index">
      <a :href="item">{{ breadcrumbNameMap[item] }}</a>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
复制

垂直居中显示面包屑

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
import SideBar from './components/Sidebar/index.vue'
import Breadcrumb from './components/breadcrumb/index.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-aside width="200px">Aside</el-aside> -->
      <SideBar />
      <el-container>
        <el-header :style="{ display: 'flex', alignItems: 'center'}">
          <Breadcrumb />
        </el-header>
        <el-main>
          <!--  内容区域变化 -->
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

7.封装数据请求

axios https://www.axios-http.cn/docs/intro

// restful api
// get
// post
// put    更新
// patch  更新
// delete 删除
 
// get
fetch('url?a=1&b=2').then(res => res.json()).then(res => { console.log(res) })
axios.get('url?a=1&b=2').then(res => { console.log(res) })
axios.get('url', {  params: { a: 1, b: 2} }).then(res => { console.log(res) })
axios({
  url: 'url?a=1&b=2',
  method: 'get'
}).then(res => { console.log(res) })
axios({
  url: 'url',
  method: 'get',
  params: { a: 1, b: 2}
}).then(res => { console.log(res) })
 
// post
axios.post('url', { a: 1, b: 2 }).then(res => { console.log(res) })
axios({
  url: 'url',
  method: 'post',
  data: { a: 1, b: 2}
}).then(res => { console.log(res) })
 
// axios 拦截器
// 请求拦截器
// 响应拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
  	// 显示loading动画效果
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
  	// loading动画消失
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });复制

一般项目中都需要重新定义axios，需要对axios进行配置

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// https://api.example.com/api/pro/list
instance.get('/api/pro/list')复制

接口文档：http://121.89.205.189:3000/admindoc/

// src/utils/request.ts
// 1.引入axios
import axios from 'axios'
// 因为router 是单独暴露的，此处可以直接引入使用
import router from '@/router'
// 2.自定义axios 
// 接口文档： http://121.89.205.189:3000/admindoc/
const ins = axios.create({
  baseURL: 'http://121.89.205.189:3000/admin'
})
 
// 3.配置拦截器
// 请求拦截器
ins.interceptors.request.use((config) => {
  // 请求之前干什么
  // 后台管理系统所有的页面都需要从服务器获取数据
  // 思考：要数据就必须是登录才可以
  // 请求数据时需要将 是否 登录的标识传递给 服务器，服务器判断登录标识 是否可用，
  // 如果可以使用，返回你要的数据，如果不可以使用，告诉用户，登录失效，用户重新登录
  // 登录标识：token 登录以后后端返回给前端，前端一般会将其存入到本地存储
  // 如何将 token 传递给服务器，一般从本地存储提取，然后在 头信息（请求头） 中传递
 
  config.headers!.token = localStorage.getItem('token') || ''
 
  return config
}, (error) => {
  return Promise.reject(error)
})
 
// 响应拦截器
ins.interceptors.response.use((response) => {
  // 判断登录标识 是否有效，如果无效跳转至登录页面，如果有效，不做操作
  if (response.data.code === '10119') {
    // 没有传递token 或者 token过期
    // 跳转到登录页面 重新登录
    router.push('/login')
 
  } 
  return response
}, (error) => {
  return Promise.reject(error)
})
 
// 暴露自定义的 axios
export default ins复制

所有的数据请求都要先登录，登录状态在非常多的页面都需要使用

• 多个视图需要依赖同一个状态
• 来自不同视图的行为需要变更同一个状态
• 首选状态管理器

8.pinia状态管理器

https://pinia.vuejs.org/zh/

8.1 入口注册pinia

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
// 引入UI库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
// 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
import App from './App.vue'
import router from './router'
 
// 重置样式表
import 'normalize.css/normalize.css'
 
// import './assets/main.css' // 不使用默认样式
 
const app = createApp(App)
// 配置图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
 
// 配置UI库
app.use(ElementPlus, { locale: zhCn })
app.use(createPinia())
app.use(router)
 
app.mount('#app')
 复制

8.2 定义状态管理器模块

// src/store/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
 
// 选项式API
// export const useCounterStore = defineStore('counter', {
//   state () { // 初始化数据 -- data
//     return {
//       count: 99
//     }
//   },
//   getters: { // 计算属性
//     doubleCount: state => { // state 即为 当前状态管理器中的 所有的状态
//       return state.count * 2
//     } 
//   },
//   actions: { // 事件  ----  methods
//     increment () {
//       this.count += 10
//     },
//     decrement () {
//       this.count -= 10
//     }
//   }
 
// })
 
// 组合式API
export const useCounterStore = defineStore('counter', () => {
  // 初始化
  const count = ref(0)
  // 计算属性
  const doubleCount = computed(() => count.value * 2)
  // 方法
  function increment() {
    count.value += 10
  }
  function decrement() {
    count.value -= 10
  }
  // 返回˙状态和方法
  return { count, doubleCount, increment, decrement }
})
 复制

8.3 组件中使用

8.3.1 模版中使用对象渲染

<!-- src/views/home/index.vue -->
<script lang="ts" setup>
  import { computed } from 'vue'
  import { useCounterStore } from '@/stores/counter'

  const counter = useCounterStore()

  // 提取模版中需要使用的数据
  const count = computed(() => counter.count)
  const doubleCount = computed(() => counter.doubleCount)

  const reduce = () => {
    counter.decrement()
  }
  const add = () => {
    counter.increment()
  }
</script>

<template>
  <div>系统首页</div>
  <button @click="reduce">-10</button> 
  {{ count }} - {{ counter.count }}  - {{ counter.doubleCount }} - {{  doubleCount }}
  <button @click="add">+10</button>
</template>
复制

<!-- src/views/account/user.vue -->
<script lang="ts" setup>
  import { useCounterStore } from '@/stores/counter'

  const counter = useCounterStore()

  const reduce = () => {
    counter.decrement()
  }
  const add = () => {
    counter.increment()
  }
</script>

<template>
  <div>用户列表</div>
  <button @click="reduce">-10</button> 
  {{ counter.count }} - {{ counter.doubleCount }}
  <button @click="add">+10</button>
</template>
复制

9登录功能实现

9.1 构建登录页面

<!-- src/views/login/index.vue -->
<script lang="ts" setup>
  import { ref, computed } from 'vue';

  const adminname = ref('')
  const password = ref('')

  // 按钮是否可点
  const flag = computed(() => { return adminname.value === '' || password.value === ''})
</script>

<template>
  <div class="loginBox">
    <div class="loginForm">
      <div class="loginTitle">系统登录</div>
      <div class="loginInput">
        <el-input v-model="adminname" placeholder="管理员账户" clearable prefix-icon="User"/>
      </div>
      <div class="loginInput">
        <el-input type="password" v-model="password" clearable placeholder="管理员密码" show-password prefix-icon="Lock"/>
      </div>
      <el-button type="primary" :disabled="flag" class="loginBtn">登录</el-button>

      <span>默认账户名：admin 默认密码：123456</span>
    </div>
  </div>
</template>

<style lang="scss">
  .loginBox {
    width: 100%;
    height: 100%;
    background-color: #2b2b2b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    .loginForm {
      width: 500px;
      min-height: 300px;
      /* background-color: #fff; */
      .loginTitle {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }
      .loginInput {
        margin: 20px 0;
        .el-input {
          height: 40px;
          .el-input__wrapper {
            background-color: #2b2b2b;
            .el-input__inner {
              background-color: #2b2b2b;
            }
          }
          
        }
      }
      .loginBtn {
        width: 100%;
        height: 36px;
        margin-bottom: 20px;
      }
    }
  }
</style>
复制

9.2 封装管理员登录的数据请求

// src/api/admin.ts
import request from '@/utils/request'
 
// interface IAdminLoginParams {
//   adminname: string
//   password: string
// }
 
type TAdminLoginParams = {
  adminname: string
  password: string
}
 
export function adminLogin (params: TAdminLoginParams) {
  return request.post('/admin/login', params)
}复制

9.3 登录页面调用登录接口

<!-- src/views/login/index.vue -->
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { ElMessage } from 'element-plus'
  import { adminLogin } from '@/api/admin'
  import { useRouter } from 'vue-router';
  const adminname = ref('')
  const password = ref('')

  // 按钮是否可点
  const flag = computed(() => { return adminname.value === '' || password.value === ''})

  const router = useRouter()
  const login = () => {
    adminLogin({
      adminname: adminname.value,
      password: password.value
    }).then(res => {
      console.log(res)
      if (res.data.code === '10005') {
        console.log('账户未注册')
        ElMessage.error('账户未注册.')
      } else if (res.data.code === '10003') {
        ElMessage.warning('密码错误')
      } else {
        ElMessage.success('登录成功')

        // 将登陆信息保存到本地
        localStorage.setItem('adminname', res.data.data.adminname)
        localStorage.setItem('checkedkeys', res.data.data.checkedkeys)
        localStorage.setItem('role', res.data.data.role)
        localStorage.setItem('token', res.data.data.token)

        router.replace('/')
      }
    })
  }
</script>

<template>
  <div class="loginBox">
    <div class="loginForm">
      <div class="loginTitle">系统登录</div>
      <div class="loginInput">
        <el-input v-model="adminname" placeholder="管理员账户" clearable prefix-icon="User"/>
      </div>
      <div class="loginInput">
        <el-input type="password" v-model="password" clearable placeholder="管理员密码" show-password prefix-icon="Lock"/>
      </div>
      <el-button type="primary" @click="login" :disabled="flag" class="loginBtn">登录</el-button>

      <span>默认账户名：admin 默认密码：123456</span>
    </div>
  </div>
</template>

<style lang="scss">
  .loginBox {
    width: 100%;
    height: 100%;
    background-color: #2b2b2b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    .loginForm {
      width: 500px;
      min-height: 300px;
      /* background-color: #fff; */
      .loginTitle {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }
      .loginInput {
        margin: 20px 0;
        .el-input {
          height: 40px;
          .el-input__wrapper {
            background-color: #2b2b2b;
            .el-input__inner {
              background-color: #2b2b2b;
            }
          }
          
        }
      }
      .loginBtn {
        width: 100%;
        height: 36px;
        margin-bottom: 20px;
      }
    }
  }
</style>
复制

9.4 退出登录

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
  import SideBar from './components/Sidebar/index.vue'
  import Breadcrumb from './components/breadcrumb/index.vue'
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';

  const router = useRouter()
  const adminname = localStorage.getItem('adminname')

  const logout = () => {
    localStorage.removeItem('adminname')
    localStorage.removeItem('token')
    localStorage.removeItem('checkedkeys')
    localStorage.removeItem('role')

    router.push('/login')
  }
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-aside width="200px">Aside</el-aside> -->
      <SideBar />
      <el-container>
        <el-header :style="{ display: 'flex', alignItems: 'center'}">
          <Breadcrumb />
          <el-dropdown :style="{ position: 'absolute', right: '16px'}">
            <span class="el-dropdown-link">
              欢迎您，{{  adminname  }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--  内容区域变化 -->
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

9.5 登录信息状态管理

// src/store/admins.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
 
// 组合式API
export const useAdminStore = defineStore('admin', () => {
  // 初始化
  const adminname = ref(localStorage.getItem('adminname') || '')
  const token = ref(localStorage.getItem('token') || '')
  
  const changeAdminname = (val: string) => {
    adminname.value = val
  }
 
  const changeToken = (val: string) => {
    token.value = val
  }
 
  // 返回˙状态和方法
  return { adminname, token, changeAdminname, changeToken }
})
 复制

9.6 登录页面修改 状态以及布局页面使用状态

<!-- src/views/login/index.vue -->
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { ElMessage } from 'element-plus'
  import { adminLogin } from '@/api/admin'
  import { useRouter } from 'vue-router';
  import { useAdminStore } from '@/stores/admins';
  const adminname = ref('admin')
  const password = ref('123456')

  const admin = useAdminStore()

  // 按钮是否可点
  const flag = computed(() => { return adminname.value === '' || password.value === ''})

  const router = useRouter()
  const login = () => {
    // 正则验证
    adminLogin({
      adminname: adminname.value,
      password: password.value
    }).then(res => {
      // console.log(res)
      if (res.data.code === '10005') {
        console.log('账户未注册')
        ElMessage.error('账户未注册.')
      } else if (res.data.code === '10003') {
        ElMessage.warning('密码错误')
      } else {
        ElMessage.success('登录成功')

        // 将登陆信息保存到本地
        localStorage.setItem('adminname', res.data.data.adminname)
        localStorage.setItem('checkedkeys', res.data.data.checkedkeys)
        localStorage.setItem('role', res.data.data.role)
        localStorage.setItem('token', res.data.data.token)

        // 可以将数据保存到状态管理器
        admin.changeAdminname(res.data.data.adminname)
        admin.changeToken(res.data.data.token)

        router.replace('/')
      }
    })
  }
</script>

<template>
  <div class="loginBox">
    <div class="loginForm">
      <div class="loginTitle">系统登录</div>
      <div class="loginInput">
        <el-input v-model="adminname" placeholder="管理员账户" clearable prefix-icon="User"/>
      </div>
      <div class="loginInput">
        <el-input type="password" v-model="password" clearable placeholder="管理员密码" show-password prefix-icon="Lock"/>
      </div>
      <el-button type="primary" @click="login" :disabled="flag" class="loginBtn">登录</el-button>

      <span>默认账户名：admin 默认密码：123456</span>
    </div>
  </div>
</template>

<style lang="scss">
  .loginBox {
    width: 100%;
    height: 100%;
    background-color: #2b2b2b;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    .loginForm {
      width: 500px;
      min-height: 300px;
      /* background-color: #fff; */
      .loginTitle {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }
      .loginInput {
        margin: 20px 0;
        .el-input {
          height: 40px;
          .el-input__wrapper {
            background-color: #2b2b2b;
            .el-input__inner {
              background-color: #2b2b2b;
            }
          }
          
        }
      }
      .loginBtn {
        width: 100%;
        height: 36px;
        margin-bottom: 20px;
      }
    }
  }
</style>
复制

<!-- src/layout/index.vue -->
<!-- 后台管理系统两种布局：登录布局 + 其他布局 -->
<script lang="ts" setup>
  import SideBar from './components/Sidebar/index.vue'
  import Breadcrumb from './components/breadcrumb/index.vue'
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';
  import { useAdminStore } from '@/stores/admins'
  import { computed } from 'vue';

  const router = useRouter()
  // const adminname = localStorage.getItem('adminname')
  const admin = useAdminStore()
  const adminname = computed(() => admin.adminname)

  const logout = () => {
    localStorage.removeItem('adminname')
    localStorage.removeItem('token')
    localStorage.removeItem('checkedkeys')
    localStorage.removeItem('role')

    router.push('/login')
  }
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-aside width="200px">Aside</el-aside> -->
      <SideBar />
      <el-container>
        <el-header :style="{ display: 'flex', alignItems: 'center'}">
          <Breadcrumb />
          <el-dropdown :style="{ position: 'absolute', right: '16px'}">
            <span class="el-dropdown-link">
              欢迎您1，{{  adminname  }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--  内容区域变化 -->
          <RouterView />
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
复制

10 管理员的操作

10.1 渲染管理员列表

封装获取管理员信息的接口

// src/api/admin.ts
import request from '@/utils/request'
 
// interface IAdminLoginParams {
//   adminname: string
//   password: string
// }
 
type TAdminLoginParams = {
  adminname: string
  password: string
}
 
export function adminLogin (params: TAdminLoginParams) {
  return request.post('/admin/login', params)
}
 
export function getAdminList () {
  return request.get('/admin/list')
}复制

<!-- src/views/account/Admin.vue -->
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getAdminList } from '@/api/admin'

  interface IAdminInfo {
    adminid: string
    adminname: string
    role: number
  }

  const adminList = ref<IAdminInfo[]>([])

  onMounted(() => {
    getAdminList().then(res => {
      console.log('admin', res.data)
      adminList.value = res.data.data
    })
  })
</script>

<template>
  <el-table :data="adminList" style="width: 100%">
    <el-table-column label="序号">
      <template #default="scope">
        <!-- scope.$index 代表索引值 -->
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员账户" width="180" />
    <el-table-column prop="role" label="角色" width="180" >
      <template #default="scope">
        <!-- scope.row 代表一条数据 -->
        <el-tag v-if="scope.row.role === 2" class="ml-2" type="success">超级管理员</el-tag>
        <el-tag v-else class="ml-2" type="info">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
复制

10.2 分页实现

<!-- src/views/account/Admin.vue -->
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { getAdminList } from '@/api/admin'

  interface IAdminInfo {
    adminid: string
    adminname: string
    role: number
  }

  // 将展示数据adminList 变为了 计算属性的数据
  // 将依据原始数据 originalList 以及 页码currentPage  和每页显示个数pageSize 一起计算出来显示的数据adminList
  // const adminList = ref<IAdminInfo[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const originalList = ref<IAdminInfo[]>([])
  const changeCurrentPage = (val: number) => { // 页码改变函数
    currentPage.value = val
  }
  const changeSize = (val: number) => { // 每页显示个数改变的函数
    pageSize.value = val
  }

  const adminList = computed(() => {
    // 截取数组的某一些项
    // 深拷贝数据作为备份
    const arr = JSON.parse(JSON.stringify(originalList.value))
    const newArr = arr.splice((currentPage.value - 1) * pageSize.value, pageSize.value)
    // console.log(originalList.value)
    return newArr
  })

  onMounted(() => {
    getAdminList().then(res => {
      // console.log('admin', res.data)
      originalList.value = res.data.data
    })
  })


</script>

<template>
  <el-table :data="adminList" style="width: 100%">
    <el-table-column label="序号">
      <template #default="scope">
        <!-- scope.$index 代表索引值 -->
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员账户" width="180" />
    <el-table-column prop="role" label="角色" width="180" >
      <template #default="scope">
        <!-- scope.row 代表一条数据 -->
        <el-tag v-if="scope.row.role === 2" class="ml-2" type="success">超级管理员</el-tag>
        <el-tag v-else class="ml-2" type="info">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    background 
    layout="sizes, prev, pager, next" 
    :page-sizes="[5, 10, 20, 30]"
    :total="originalList.length" 
    @current-change="changeCurrentPage"
    @size-change="changeSize"
    />
</template>
复制

filter处理数据

const adminList = computed(() => {
    const newArr = originalList.value.filter((item, index) => {
      return index >= (currentPage.value - 1) * pageSize.value && index < (currentPage.value - 1) * pageSize.value + pageSize.value
    })
    return newArr
  })复制

10.3 删除管理员

// src/api/admin.ts
import request from '@/utils/request'
 
// interface IAdminLoginParams {
//   adminname: string
//   password: string
// }
 
type TAdminLoginParams = {
  adminname: string
  password: string
}
 
export function adminLogin (params: TAdminLoginParams) {
  return request.post('/admin/login', params)
}
 
export function getAdminList () {
  return request.get('/admin/list')
}
 
export function deleteAdmin (params: { adminid: string }) {
  return request.post('/admin/delete', params)
}复制

<!-- src/views/account/Admin.vue -->
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { getAdminList, deleteAdmin } from '@/api/admin'

  interface IAdminInfo {
    adminid: string
    adminname: string
    role: number
  }

  // 将展示数据adminList 变为了 计算属性的数据
  // 将依据原始数据 originalList 以及 页码currentPage  和每页显示个数pageSize 一起计算出来显示的数据adminList
  // const adminList = ref<IAdminInfo[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const originalList = ref<IAdminInfo[]>([])
  const changeCurrentPage = (val: number) => { // 页码改变函数
    currentPage.value = val
  }
  const changeSize = (val: number) => { // 每页显示个数改变的函数
    pageSize.value = val
  }

  const adminList = computed(() => {
    // 截取数组的某一些项
    // 深拷贝数据作为备份
    // const arr = JSON.parse(JSON.stringify(originalList.value))
    // const newArr = arr.splice((currentPage.value - 1) * pageSize.value, pageSize.value)
    const newArr = originalList.value.filter((item, index) => {
      return index >= (currentPage.value - 1) * pageSize.value && index < (currentPage.value - 1) * pageSize.value + pageSize.value
    })
    // console.log(originalList.value)
    return newArr
  })
  const getAdminListData = () => {
    getAdminList().then(res => {
      // console.log('admin', res.data)
      originalList.value = res.data.data
    })
  }
  onMounted(() => {
    getAdminListData()
  })

  const removeItem = (adminid: string) => {
    deleteAdmin({ adminid }).then(() => {
      getAdminListData()
    })
  }
</script>

<template>
  <el-table :data="adminList" style="width: 100%">
    <el-table-column label="序号">
      <template #default="scope">
        <!-- scope.$index 代表索引值 -->
        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员账户" width="180" />
    <el-table-column prop="role" label="角色" width="180" >
      <template #default="scope">
        <!-- scope.row 代表一条数据 -->
        <el-tag v-if="scope.row.role === 2" class="ml-2" type="success">超级管理员</el-tag>
        <el-tag v-else class="ml-2" type="info">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          >编辑</el-button
        >
        <el-popconfirm title="确定删除吗?" @confirm="removeItem(scope.row.adminid)">
          <template #reference>
            <el-button
              size="small"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-popconfirm>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    background 
    layout="sizes, prev, pager, next" 
    :page-sizes="[5, 10, 20, 30]"
    :total="originalList.length" 
    @current-change="changeCurrentPage"
    @size-change="changeSize"
    />
</template>
复制

10.4 添加管理员

10.4.1 封装添加管理员接口

// src/api/admin.ts
import request from '@/utils/request'
 
// interface IAdminLoginParams {
//   adminname: string
//   password: string
// }
 
type TAdminLoginParams = {
  adminname: string
  password: string
}
 
export function adminLogin (params: TAdminLoginParams) {
  return request.post('/admin/login', params)
}
 
export function getAdminList () {
  return request.get('/admin/list')
}
 
export function deleteAdmin (params: { adminid: string }) {
  return request.post('/admin/delete', params)
}
 
interface IAdminAddParams {
  adminname: string
  password: string
  role: number
  checkedKeys: any  // 因为开放，索引设置为any
}
export function addAdmin (params: IAdminAddParams) {
  return request.post('/admin/add', params)
}复制

10.4.2 封装获取树形控件数据方法

// src/utils/get-routes.ts
 
import type { MyRouteRecordRaw } from "@/router";
 
interface Tree {
  id: string
  label: string
  children?: Tree[]
}
 
export function getRoutes (menuList: MyRouteRecordRaw[]) {
  const arr: Tree[] = []
  menuList.forEach((item) => {
    let obj: Tree = {
      id: '',
      label: ''
    }
    if (item.meta) {
      if (item.children) { // 动态那些数据
        obj = {
          id: item.path,
          label: String(item.meta.title),
          children: getRoutes(item.children)
        }
      } else {
        obj = {
          id: item.path,
          label: String(item.meta.title)
        }
      }
    } else {
      if (item.children) { // 系统首页
        obj = {
          id: item.children[0].path,
          label: String(item.children[0].meta!.title)
        }
      }
    }
    // arr.push(obj)
    obj.id !== '' && arr.push(obj)
  });
  return arr
}
 
// getRoutes(menuList)复制

10.3.4 添加管理员

<!-- src/views/account/Admin.vue -->
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { getAdminList, deleteAdmin, addAdmin } from '@/api/admin'
  import { constantRoutes, asyncRoutes } from '@/router'
  import { getRoutes } from '@/utils/get-routes'
  interface IAdminInfo {
    adminid: string
    adminname: string
    role: number
  }

  // 将展示数据adminList 变为了 计算属性的数据
  // 将依据原始数据 originalList 以及 页码currentPage  和每页显示个数pageSize 一起计算出来显示的数据adminList
  // const adminList = ref<IAdminInfo[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const originalList = ref<IAdminInfo[]>([])
  const changeCurrentPage = (val: number) => { // 页码改变函数
    currentPage.value = val
  }
  const changeSize = (val: number) => { // 每页显示个数改变的函数
    pageSize.value = val
  }

  const adminList = computed(() => {
    // 截取数组的某一些项
    // 深拷贝数据作为备份
    // const arr = JSON.parse(JSON.stringify(originalList.value))
    // const newArr = arr.splice((currentPage.value - 1) * pageSize.value, pageSize.value)
    const newArr = originalList.value.filter((item, index) => {
      return index >= (currentPage.value - 1) * pageSize.value && index < (currentPage.value - 1) * pageSize.value + pageSize.value
    })
    // console.log(originalList.value)
    return newArr
  })
  const getAdminListData = () => {
    getAdminList().then(res => {
      // console.log('admin', res.data)
      originalList.value = res.data.data
    })
  }
  onMounted(() => {
    getAdminListData()
  })

  const removeItem = (adminid: string) => {
    deleteAdmin({ adminid }).then(() => {
      getAdminListData()
    })
  }

  // 添加管理员
  const drawer = ref(false)
  const adminname = ref('')
  const password = ref('')
  const role = ref(1)
  const checkedKeys = ref<string[]>([])
  const menuList = [...constantRoutes, ...asyncRoutes]
  const treeData = getRoutes(menuList)
  const onTreeCheck = (_: any, obj: { halfCheckedKeys: string[]; checkedKeys: string[]
  }) => {
    checkedKeys.value = [...obj.halfCheckedKeys, ...obj.checkedKeys].sort()
  }
  const addAdminFn = () => {
    addAdmin({
      adminname: adminname.value,
      password: password.value,
      role: role.value,
      checkedKeys: checkedKeys.value
    }).then(() => {
      // 重置表单状态
      adminname.value = ''
      password.value = ''
      role.value = 1
      checkedKeys.value = []
      // 关闭抽屉效果
      drawer.value = false
      getAdminListData()
    })
  }
  const closeDrawer = () => {
    // 重置表单状态
    adminname.value = ''
    password.value = ''
    role.value = 1
    checkedKeys.value = []
    // 关闭抽屉效果
    drawer.value = false
  }
</script>

<template>
  <el-button type="primary" @click="drawer=true">添加管理员</el-button>
  <el-table :data="adminList" style="width: 100%">
    <el-table-column label="序号">
      <template #default="scope">
        <!-- scope.$index 代表索引值 -->
        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员账户" width="180" />
    <el-table-column prop="role" label="角色" width="180" >
      <template #default="scope">
        <!-- scope.row 代表一条数据 -->
        <el-tag v-if="scope.row.role === 2" class="ml-2" type="success">超级管理员</el-tag>
        <el-tag v-else class="ml-2" type="info">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          >编辑</el-button
        >
        <el-popconfirm title="确定删除吗?" @confirm="removeItem(scope.row.adminid)">
          <template #reference>
            <el-button
              size="small"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-popconfirm>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    background 
    layout="sizes, prev, pager, next" 
    :page-sizes="[5, 10, 20, 30]"
    :total="originalList.length" 
    @current-change="changeCurrentPage"
    @size-change="changeSize"
    />
    <!-- 添加管理员  抽屉效果 -->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" @close="closeDrawer">
      <h1>添加管理员</h1>
      <el-input v-model="adminname" placeholder="管理员账户" clearable/>
      <el-input v-model="password" placeholder="密码" clearable />
      <el-select v-model="role" placeholder="管理员角色" >
        <el-option
          label="管理员"
          :value="1"
        />
        <el-option
          label="超级管理员"
          :value="2"
        />
      </el-select>
      <el-tree
        ref="treeRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        @check="onTreeCheck"
      />
      <el-button type="primary" @click="addAdminFn">添加</el-button>
    </el-drawer>
</template>
复制

10.5 编辑管理员

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Py3yNhxo-1672888918417)(assets/image-20221230153508095.png)]

// src/api/admin.ts
import request from '@/utils/request'
 
// interface IAdminLoginParams {
//   adminname: string
//   password: string
// }
 
type TAdminLoginParams = {
  adminname: string
  password: string
}
 
export function adminLogin (params: TAdminLoginParams) {
  return request.post('/admin/login', params)
}
 
export function getAdminList () {
  return request.get('/admin/list')
}
 
export function deleteAdmin (params: { adminid: string }) {
  return request.post('/admin/delete', params)
}
 
interface IAdminAddParams {
  adminname: string
  password: string
  role: number
  checkedKeys: any  // 因为开放，索引设置为any
}
export function addAdmin (params: IAdminAddParams) {
  return request.post('/admin/add', params)
}
 
interface IAdminUpdateParams {
  adminname: string
  role: number
  checkedKeys: any  // 因为开放，索引设置为any
}
export function updateAdmin (params: IAdminUpdateParams) {
  return request.post('/admin/update', params)
}t复制

<!-- src/views/account/Admin.vue -->
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { getAdminList, deleteAdmin, addAdmin, updateAdmin } from '@/api/admin'
  import { constantRoutes, asyncRoutes } from '@/router'
  import { ElTree } from 'element-plus'
  import { getRoutes } from '@/utils/get-routes'
  interface IAdminInfo {
    adminid: string
    adminname: string
    role: number
  }

  // 将展示数据adminList 变为了 计算属性的数据
  // 将依据原始数据 originalList 以及 页码currentPage  和每页显示个数pageSize 一起计算出来显示的数据adminList
  // const adminList = ref<IAdminInfo[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const originalList = ref<IAdminInfo[]>([])
  const changeCurrentPage = (val: number) => { // 页码改变函数
    currentPage.value = val
  }
  const changeSize = (val: number) => { // 每页显示个数改变的函数
    pageSize.value = val
  }

  const adminList = computed(() => {
    // 截取数组的某一些项
    // 深拷贝数据作为备份
    // const arr = JSON.parse(JSON.stringify(originalList.value))
    // const newArr = arr.splice((currentPage.value - 1) * pageSize.value, pageSize.value)
    const newArr = originalList.value.filter((item, index) => {
      return index >= (currentPage.value - 1) * pageSize.value && index < (currentPage.value - 1) * pageSize.value + pageSize.value
    })
    // console.log(originalList.value)
    return newArr
  })
  const getAdminListData = () => {
    getAdminList().then(res => {
      console.log('admin', res.data)
      originalList.value = res.data.data
    })
  }
  onMounted(() => {
    getAdminListData()
  })

  const removeItem = (adminid: string) => {
    deleteAdmin({ adminid }).then(() => {
      getAdminListData()
    })
  }

  // 添加管理员
  const drawer = ref(false)
  const adminname = ref('')
  const password = ref('')
  const role = ref(1)
  const checkedKeys = ref<string[]>([])
  const menuList = [...constantRoutes, ...asyncRoutes]
  const treeData = getRoutes(menuList)
  const onTreeCheck = (_: any, obj: { halfCheckedKeys: string[]; checkedKeys: string[]
  }) => {
    checkedKeys.value = [...obj.halfCheckedKeys, ...obj.checkedKeys].sort()
  }
  const addAdminFn = () => {
    addAdmin({
      adminname: adminname.value,
      password: password.value,
      role: role.value,
      checkedKeys: checkedKeys.value
    }).then(() => {
      // 重置表单状态
      adminname.value = ''
      password.value = ''
      role.value = 1
      checkedKeys.value = []
      // 关闭抽屉效果
      drawer.value = false
      getAdminListData()
    })
  }
  const closeDrawer = () => {
    // 重置表单状态
    adminname.value = ''
    role.value = 1
    checkedKeys.value = []
    // 关闭抽屉效果
    drawer.value = false
  }

  // 修改管理员
  const treeUpdateRef = ref<InstanceType<typeof ElTree>>()
  const dialog = ref(false)
  const updateAdminInfo = (item: any) => {
    dialog.value = true
    adminname.value = item.adminname
    role.value = item.role
    // console.log(item)
    // checkedKeys.value = item.checkedKeys
    // 添加延时器确保DOM加载完毕， 否则显示 setCheckedKeys 未定义
    setTimeout(() => {
      treeUpdateRef.value!.setCheckedKeys(item.checkedKeys, false)
    }, 0)
  }
  const updateAdminInfoFn = () => {
    // console.log('111', {
    //   adminname: adminname.value,
    //   role: role.value,
    //   checkedKeys: checkedKeys.value
    // })
    updateAdmin({
      adminname: adminname.value,
      role: role.value,
      checkedKeys: checkedKeys.value
    }).then((res) => {
      // console.log('22222', res.data)
      // 重置表单状态
      adminname.value = ''
      role.value = 1
      checkedKeys.value = []
      // 关闭抽屉效果
      dialog.value = false
      getAdminListData()
    })
  }
</script>

<template>
  <el-button type="primary" @click="drawer=true">添加管理员</el-button>
  <el-table :data="adminList" style="width: 100%">
    <el-table-column label="序号">
      <template #default="scope">
        <!-- scope.$index 代表索引值 -->
        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员账户" width="180" />
    <el-table-column prop="role" label="角色" width="180" >
      <template #default="scope">
        <!-- scope.row 代表一条数据 -->
        <el-tag v-if="scope.row.role === 2" class="ml-2" type="success">超级管理员</el-tag>
        <el-tag v-else class="ml-2" type="info">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="updateAdminInfo(scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除吗?" @confirm="removeItem(scope.row.adminid)">
          <template #reference>
            <el-button
              size="small"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-popconfirm>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    background 
    layout="sizes, prev, pager, next" 
    :page-sizes="[5, 10, 20, 30]"
    :total="originalList.length" 
    @current-change="changeCurrentPage"
    @size-change="changeSize"
    />
    <!-- 添加管理员  抽屉效果 -->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" @close="closeDrawer">
      <h1>添加管理员</h1>
      <el-input v-model="adminname" placeholder="管理员账户" clearable/>
      <el-input v-model="password" placeholder="密码" clearable />
      <el-select v-model="role" placeholder="管理员角色" >
        <el-option
          label="管理员"
          :value="1"
        />
        <el-option
          label="超级管理员"
          :value="2"
        />
      </el-select>
      <el-tree
        ref="treeAddRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        @check="onTreeCheck"
      />
      <el-button type="primary" @click="addAdminFn">添加</el-button>
    </el-drawer>
    <!-- 编辑管理员 -->
    <el-dialog v-model="dialog" title="编辑管理员信息">
      <el-input v-model="adminname" readonly placeholder="管理员账户" clearable/>
      <el-select v-model="role" placeholder="管理员角色" >
        <el-option
          label="管理员"
          :value="1"
        />
        <el-option
          label="超级管理员"
          :value="2"
        />
      </el-select>
      <el-tree
        ref="treeUpdateRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        @check="onTreeCheck"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updateAdminInfoFn">
            修改
          </el-button>
        </span>
      </template>
    </el-dialog>
</template>
复制

11.左侧菜单栏动态渲染

11.1 处理左侧菜单数据

此算法建议直接拿来使用

// src/utils/get-menu-list.ts
import type { MyRouteRecordRaw } from "@/router";
 
export function getMenuList (menus: MyRouteRecordRaw[], checkedkeys: string[]) {
  if (checkedkeys.length === 0) { // 如果没有设置权限，那么即将拥有所有的权限
    checkedkeys = ['/home', '/banner', '/banner/list', '/banner/list/home', '/banner/list/kind', '/banner/add', '/pro', '/pro/list', '/pro/search', '/account', '/account/user', '/account/admin']
  }
  let result = getResult(menus)
 
  function getResult(menus: MyRouteRecordRaw[]) {
    let arr: MyRouteRecordRaw[]= []
    menus.forEach(item => {
      if (item.meta) {
        if (checkedkeys.includes(item.path)) {
          arr.push({...item})
          
          if (item.children) {
            arr[arr.length - 1].children = getResult(item.children)
          }
        }
      } else { // 系统首页
        arr.push(item)
      }
    });
    return arr 
  }
  return result
} 
 复制

11.2 动态渲染左侧菜单

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import { ref } from 'vue'
  import SidebarItem from './SidebarItem.vue'
  import Logo from './../logo/index.vue'
  import { getMenuList } from '@/utils/get-menu-list'
 
  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
  import { useRoute } from 'vue-router';
  // /banner,/banner/add,/banner/list,/banner/list/home,/banner/list/kind,/home
  const checkedkeys = localStorage.getItem('adminname') !== 'admin' ? localStorage.getItem('checkedkeys')!.split(',') : []
  console.log('checkedkeys', checkedkeys)
  // const menuList = constantRoutes.concat(asyncRoutes) // 所有数据
  const menuList = getMenuList(constantRoutes.concat(asyncRoutes), checkedkeys) // 真实数据
  // console.log(menuList)
 
  // 获取路由地址
  // 选项式API  this.$route
  const route = useRoute()
  // console.log(route) // route.path.value
 
  const collapse = ref(false)
</script>
<template>
  <el-aside :width="collapse ? '50px' : '200px'">
    <!-- <div class="logo"></div> -->
    <Logo :collapse="collapse"/>
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu
      :collapse="collapse"
      :unique-opened="true"
      :default-active="route.path"
      background-color="#001529"
      text-color="#fff"
      :collapse-transition="false"
    >
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
    <div class="changeIcon" :style="{ width: collapse ? '50px' : '200px'}">
      <el-icon color="#fff" v-if="collapse" @click="collapse = !collapse"><ArrowRight /></el-icon>
      <el-icon color="#fff" v-else @click="collapse=!collapse"><ArrowLeft /></el-icon>
    </div>
  </el-aside>
</template>
 
<style lang="scss">
.changeIcon {
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: center;
}
</style>复制

ckbox
node-key=“id”
@check=“onTreeCheck”
/>
<template #footer>

<el-button type=“primary” @click=“updateAdminInfoFn”>
修改

 
 
 
# 11.左侧菜单栏动态渲染
 
## 11.1 处理左侧菜单数据
 
此算法建议直接拿来使用
 
```ts
// src/utils/get-menu-list.ts
import type { MyRouteRecordRaw } from "@/router";
 
export function getMenuList (menus: MyRouteRecordRaw[], checkedkeys: string[]) {
  if (checkedkeys.length === 0) { // 如果没有设置权限，那么即将拥有所有的权限
    checkedkeys = ['/home', '/banner', '/banner/list', '/banner/list/home', '/banner/list/kind', '/banner/add', '/pro', '/pro/list', '/pro/search', '/account', '/account/user', '/account/admin']
  }
  let result = getResult(menus)
 
  function getResult(menus: MyRouteRecordRaw[]) {
    let arr: MyRouteRecordRaw[]= []
    menus.forEach(item => {
      if (item.meta) {
        if (checkedkeys.includes(item.path)) {
          arr.push({...item})
          
          if (item.children) {
            arr[arr.length - 1].children = getResult(item.children)
          }
        }
      } else { // 系统首页
        arr.push(item)
      }
    });
    return arr 
  }
  return result
} 
 复制

11.2 动态渲染左侧菜单

<!-- src/layout/components/Sidebar/index.vue -->
<script lang="ts" setup>
  import { ref } from 'vue'
  import SidebarItem from './SidebarItem.vue'
  import Logo from './../logo/index.vue'
  import { getMenuList } from '@/utils/get-menu-list'
 
  // 整合路由
  import { constantRoutes, asyncRoutes } from '@/router'
  import { useRoute } from 'vue-router';
  // /banner,/banner/add,/banner/list,/banner/list/home,/banner/list/kind,/home
  const checkedkeys = localStorage.getItem('adminname') !== 'admin' ? localStorage.getItem('checkedkeys')!.split(',') : []
  console.log('checkedkeys', checkedkeys)
  // const menuList = constantRoutes.concat(asyncRoutes) // 所有数据
  const menuList = getMenuList(constantRoutes.concat(asyncRoutes), checkedkeys) // 真实数据
  // console.log(menuList)
 
  // 获取路由地址
  // 选项式API  this.$route
  const route = useRoute()
  // console.log(route) // route.path.value
 
  const collapse = ref(false)
</script>
<template>
  <el-aside :width="collapse ? '50px' : '200px'">
    <!-- <div class="logo"></div> -->
    <Logo :collapse="collapse"/>
    <!-- 菜单组件
    https://element-plus.gitee.io/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <div>左侧菜单</div> -->
    <el-menu
      :collapse="collapse"
      :unique-opened="true"
      :default-active="route.path"
      background-color="#001529"
      text-color="#fff"
      :collapse-transition="false"
    >
      <!-- 路由中的每一个选项都需要单独去渲染菜单项
      有的不需要出现在左侧的菜单栏
      有的只有一个菜单项
      有的有二级菜单和三级菜单
      建议把每个菜单项单独封装成一个组件  SidebarItem
      登录  系统首页   产品管理   账户管理  轮播图管理
      将每一项数据 item 传输到子组件，子组件接收数据，并且渲染
      -->
      <SidebarItem 
        v-for="item of menuList"
        :key="item.path"
        :item = "item"
      ></SidebarItem>
    </el-menu>
    <div class="changeIcon" :style="{ width: collapse ? '50px' : '200px'}">
      <el-icon color="#fff" v-if="collapse" @click="collapse = !collapse"><ArrowRight /></el-icon>
      <el-icon color="#fff" v-else @click="collapse=!collapse"><ArrowLeft /></el-icon>
    </div>
  </el-aside>
</template>
 
<style lang="scss">
.changeIcon {
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: center;
}
</style>复制