【Vue】后台管理系统

【课堂笔记】vue-pro-PC端

GreatWillSSS

3591人浏览 · 2023-01-05 11:27:18

GreatWillSSS · 2023-01-05 11:27:18 发布

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

对比	yarn	npm	pnpm
初始化	yarn init	npm init	利用硬链接和符号连接来避免复制所有本地缓存资源文件
安装依赖	yarn install 或者yarn	npm install 或 npm i	pnpm install
新增依赖	yarn add vant	npm i vant -S	pnpm i vant
删除依赖	yarn remove vant	npm uninstall vant -S
删除devDependencies 依赖		npm uninstall vant -D
更新依赖	yarn upgrade	npm update	pnpm update
全局安装或者删除	yarn global remove vue-cli	npm uninstall vue-cli -g
同时下载多个	yarn add axios vue-axios	npm i axis vue-axios -S

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#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

<!-- 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=%2Fdashboard

// src/settings.ts
// 参考项目链接
// https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
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#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <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#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <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#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <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#%E4%BE%A7%E6%A0%8F
    -->
    <!-- <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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Vue里echarts根据页面大小动态调整/自适应

Vue

所有评论(0)

查看更多评论

GreatWillSSS

@qq_62417130

已为社区贡献2条内容

【Vue】后台管理系统

GreatWillSSS

O 项目说明

1.脚手架

2.vite脚手架使用

2.1 如何搭建vue3项目

1.创建项目

1.1 Vue3 单文件组件 SFC

2.准备工作

3.创建主布局文件

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

4.1 系统的默认设置

4.2 设置页面的标题

5.设置路由

5.1 设置基本布局组件

5.2 设置基本页面

5.2.1 系统首页

5.2.2 轮播图管理

5.2.3 产品管理

5.2.4 账户管理

5.2.5 登录页面

5.3 设置路由模块

5.3.1 账户管理路由

5.3.2 轮播图路由

5.3.3 产品管理路由

5.3.4 整合路由

5.3.5 入口文件配置路由

5.3.6 App.vue使用路由

5.3.7 主界面设置路由视图

5.3.8 轮播图列表视图

6.渲染左侧菜单栏

6.1 重新设置路由表

6.2 构建左侧菜单的组件

6.3 渲染左侧菜单的数据

6.4 点击左侧菜单切换路由

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

6.6 logo

6.7 左侧菜单的收缩

6.8 面包屑

7.封装数据请求

8.pinia状态管理器

8.1 入口注册pinia

8.2 定义状态管理器模块

8.3 组件中使用

8.3.1 模版中使用对象渲染

9登录功能实现

9.1 构建登录页面

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

9.3 登录页面调用登录接口

9.4 退出登录

9.5 登录信息状态管理

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

10 管理员的操作

10.1 渲染管理员列表

10.2 分页实现

10.3 删除管理员

10.4 添加管理员

10.4.1 封装添加管理员接口

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

10.3.4 添加管理员

10.5 编辑管理员

11.左侧菜单栏动态渲染

11.1 处理左侧菜单数据

11.2 动态渲染左侧菜单

11.2 动态渲染左侧菜单

所有评论(0)

GreatWillSSS

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