1.路由配置

1.1路由组件的雏形

<code>src\views\home\index.vue（以home组件为例）

1.2路由配置

1.2.1路由index文件

<code>src\router\index.ts

//通过vue-router插件实现模板路由配置

import { createRouter, createWebHashHistory } from 'vue-router'

import { constantRoute } from './router'

//创建路由器

const router = createRouter({

//路由模式hash

history: createWebHashHistory(),

routes: constantRoute,

//滚动行为

scrollBehavior() {

return {

left: 0,

top: 0,

}

},

})

export default router

1.2.2路由配置

src\router\router.ts

//对外暴露配置路由(常量路由)

export const constantRoute = [

{

//登录路由

path: '/login',

component: () => import('@/views/login/index.vue'),

name: 'login', //命名路由

},

{

//登录成功以后展示数据的路由

path: '/',

component: () => import('@/views/home/index.vue'),

name: 'layout',

},

{

path: '/404',

component: () => import('@/views/404/index.vue'),

name: '404',

},

{

//重定向

path: '/:pathMatch(.*)*',

redirect: '/404',

name: 'Any',

},

]

1.3路由出口

src\App.vue

2.登录模块

2.1 登录路由静态组件

<code>src\views\login\index.vue

<template>

<div >

<el-row>

<el-col :span="12" :xs="0"></el-col>code>

<el-col :span="12" :xs="24">code>

<el-form >

<h1>Hello</h1>

<h2>欢迎来到硅谷甄选</h2>

<el-form-item>

<el-input

:prefix-icon="User"code>

v-model="loginForm.username"code>

></el-input>

</el-form-item>

<el-form-item>

<el-input

type="password"code>

:prefix-icon="Lock"code>

v-model="loginForm.password"code>

show-password

></el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" size="default">code>

登录

</el-button>

</el-form-item>

</el-form>

</el-col>

</el-row>

</div>

</template>

<script setup lang="ts">code>

import { User, Lock } from '@element-plus/icons-vue'

import { reactive } from 'vue'

//收集账号与密码数据

let loginForm = reactive({ username: 'admin', password: '111111' })

</script>

<style lang="scss" scoped>code>

.login_container {

width: 100%;

height: 100vh;

background: url('@/assets/images/background.jpg') no-repeat;

background-size: cover;

.login_form {

position: relative;

width: 80%;

top: 30vh;

background: url('@/assets/images/login_form.png') no-repeat;

background-size: cover;

padding: 40px;

h1 {

color: white;

font-size: 40px;

}

h2 {

color: white;

font-size: 20px;

margin: 20px 0px;

}

.login_btn {

width: 100%;

}

}

}

</style>

注意：el-col是24份的，在此左右分为了12份。我们在右边放置我们的结构。:xs="0"code>是为了响应式。el-form下的element-plus元素都用el-form-item包裹起来。

2.2 登陆业务实现

2.2.1 登录按钮绑定回调

回调应该做的事情

<code>const login = () => {

//点击登录按钮以后干什么

//通知仓库发起请求

//请求成功->路由跳转

//请求失败->弹出登陆失败信息

}

2.2.2 仓库store初始化

1. 大仓库（笔记只写一次）

安装pinia：pnpm i pinia@2.0.34

src\store\index.ts

//仓库大仓库

import { createPinia } from 'pinia'

//创建大仓库

const pinia = createPinia()

//对外暴露：入口文件需要安装仓库

export default pinia

2. 用户相关的小仓库

<code>src\store\modules\user.ts

//创建用户相关的小仓库

import { defineStore } from 'pinia'

//创建用户小仓库

const useUserStore = defineStore('User', {

//小仓库存储数据地方

state: () => {},

//处理异步|逻辑地方

actions: {},

getters: {},

})

//对外暴露小仓库

export default useUserStore

2.2.3 按钮回调

//登录按钮的回调

const login = async () => {

//按钮加载效果

loading.value = true

//点击登录按钮以后干什么

//通知仓库发起请求

//请求成功->路由跳转

//请求失败->弹出登陆失败信息

try {

//也可以书写.then语法

await useStore.userLogin(loginForm)

//编程式导航跳转到展示数据的首页

$router.push('/')

//登录成功的提示信息

ElNotification({

type: 'success',

message: '登录成功！',

})

//登录成功,加载效果也消失

loading.value = false

} catch (error) {

//登陆失败加载效果消失

loading.value = false

//登录失败的提示信息

ElNotification({

type: 'error',

message: (error as Error).message,

})

}

}

2.2.4 用户仓库

//创建用户相关的小仓库

import { defineStore } from 'pinia'

//引入接口

import { reqLogin } from '@/api/user'

//引入数据类型

import type { loginForm } from '@/api/user/type'

//创建用户小仓库

const useUserStore = defineStore('User', {

//小仓库存储数据地方

state: () => {

return {

token: localStorage.getItem('TOKEN'), //用户唯一标识token

}

},

//处理异步|逻辑地方

actions: {

//用户登录的方法

async userLogin(data: loginForm) {

//登录请求

const result: any = await reqLogin(data)

if (result.code == 200) {

//pinia仓库存储token

//由于pinia|vuex存储数据其实利用js对象

this.token = result.data.token

//本地存储持久化存储一份

localStorage.setItem('TOKEN', result.data.token)

//保证当前async函数返回一个成功的promise函数

return 'ok'

} else {

return Promise.reject(new Error(result.data.message))

}

},

},

getters: {},

})

//对外暴露小仓库

export default useUserStore

2.2.5 小结

1. Element-plus中ElNotification用法（弹窗）：

引入：import { ElNotification } from 'element-plus'

使用：

//登录失败的提示信息

ElNotification({

type: 'error',

message: (error as Error).message,

})

2. Element-plus中el-button的loading属性。
3. pinia使用actions、state的方式和vuex不同：需要引入函数和创建实例
4. $router的使用：也需要引入函数和创建实例
5. 在actions中使用state的token数据:this.token
6. 类型定义需要注意。
7. promise的使用和vue2现在看来是一样的。

2.3模板封装登陆业务

2.3.1 result返回类型封装

<code>interface dataType {

token?: string

message?: string

}

//登录接口返回的数据类型

export interface loginResponseData {

code: number

data: dataType

}

2.3.2 State仓库类型封装

//定义小仓库数据state类型

export interface UserState {

token: string | null

}

2.3.3 本地存储封装

将本地存储的方法封装到一起

//封装本地存储存储数据与读取数据方法

export const SET_TOKEN = (token: string) => {

localStorage.setItem('TOKEN', token)

}

export const GET_TOKEN = () => {

return localStorage.getItem('TOKEN')

}

2.4 登录时间的判断

1. 封装函数

//封装函数：获取当前时间段

export const getTime = () => {

let message = ''

//通过内置构造函数Date

const hour = new Date().getHours()

if (hour <= 9) {

message = '早上'

} else if (hour <= 14) {

message = '上午'

} else if (hour <= 18) {

message = '下午'

} else {

message = '晚上'

}

return message

}

2. 使用（引入后）

3. 效果

2.5 表单校验规则

2.5.1 表单校验

1. 表单绑定项

:model：绑定的数据

<code>//收集账号与密码数据

let loginForm = reactive({ username: 'admin', password: '111111' })

:rules：对应要使用的规则

//定义表单校验需要的配置对象

const rules = {}

ref="loginForms"：获取表单元素

<code>//获取表单元素

let loginForms = ref()

2. 表单元素绑定项

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可

3. 使用规则rules

<code>//定义表单校验需要的配置对象

const rules = {

username: [

//规则对象属性:

{

required: true, // required,代表这个字段务必要校验的

min: 5, //min:文本长度至少多少位

max: 10, // max:文本长度最多多少位

message: '长度应为6-10位', // message:错误的提示信息

trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则

},

],

password: [

{

required: true,

min: 6,

max: 10,

message: '长度应为6-15位',

trigger: 'change',

},

],

}

4. 校验规则通过后运行

<code>const login = async () => {

//保证全部表单项校验通过

await loginForms.value.validate()

。。。。。。

}

2.5.2自定义表单校验

1. 修改使用规则rules

使用自己编写的函数作为规则校验。

//定义表单校验需要的配置对象

const rules = {

username: [

//规则对象属性:

/* {

required: true, // required,代表这个字段务必要校验的

min: 5, //min:文本长度至少多少位

max: 10, // max:文本长度最多多少位

message: '长度应为6-10位', // message:错误的提示信息

trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则

}, */

{ trigger: 'change', validator: validatorUserName },

],

password: [

{ trigger: 'change', validator: validatorPassword },

],

}

2. 自定义校验规则函数

<code>//自定义校验规则函数

const validatorUserName = (rule: any, value: any, callback: any) => {

//rule：校验规则对象

//value:表单元素文本内容

//callback:符合条件，callback放行通过，不符合：注入错误提示信息

if (value.length >= 5) {

callback()

} else {

callback(new Error('账号长度至少5位'))

}

}

const validatorPassword = (rule: any, value: any, callback: any) => {

if (value.length >= 6) {

callback()

} else {

callback(new Error('密码长度至少6位'))

}

}

3. Layout模块（主界面）

3.1 组件的静态页面

3.1.1 组件的静态页面

注意：我们将主界面单独放一个文件夹（顶替原来的home路由组件）。注意修改一下路由配置

<template>

<div >

<!-- 左侧菜单 -->

<div ></div>

<!-- 顶部导航 -->

<div ></div>

<!-- 内容展示区域 -->

<div >

<p ></p>

</div>

</div>

</template>

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

<style lang="scss" scoped>code>

.layout_container {

width: 100%;

height: 100vh;

.layout_slider {

width: $base-menu-width;

height: 100vh;

background: $base-menu-background;

}

.layout_tabbar {

position: fixed;

width: calc(100% - $base-menu-width);

height: $base-tabbar-height;

background: cyan;

top: 0;

left: $base-menu-width;

}

.layout_main {

position: absolute;

width: calc(100% - $base-menu-width);

height: calc(100vh - $base-tabbar-height);

background-color: yellowgreen;

left: $base-menu-width;

top: $base-tabbar-height;

padding: 20px;

overflow: auto;

}

}

</style>

3.1.2定义部分全局变量&滚动条

scss全局变量

//左侧菜单宽度

$base-menu-width :260px;

//左侧菜单背景颜色

$base-menu-background: #001529;

//顶部导航的高度

$base-tabbar-height:50px;

滚动条

//滚动条外观设置

::-webkit-scrollbar{

width: 10px;

}

::-webkit-scrollbar-track{

background: $base-menu-background;

}

::-webkit-scrollbar-thumb{

width: 10px;

background-color: yellowgreen;

border-radius: 10px;

}

3.2 Logo子组件的搭建

页面左上角的这部分，我们将它做成子组件，并且封装方便维护以及修改。

3.2.1 Logo子组件

在这里我们引用了封装好的setting

<code><template>

<div v-if="setting.logoHidden">code>

<img :src="setting.logo" alt="" />code>

<p>{{ setting.title }}</p>

</div>

</template>

<script setup lang="ts">code>

//引入设置标题与logo配置文件

import setting from '@/setting'

</script>

<style lang="scss" scoped>code>

.logo {

width: 100%;

height: $base-menu-logo-height;

color: white;

display: flex;

align-items: center;

padding: 20px;

img {

width: 40px;

height: 40px;

}

p {

font-size: $base-logo-title-fontSize;

margin-left: 10px;

}

}

</style>

3.2.2 封装setting

为了方便我们以后对logo以及标题的修改。

//用于项目logo|标题配置

export default {

title: '硅谷甄选运营平台', //项目的标题

logo: '/public/logo.png', //项目logo设置

logoHidden: true, //logo组件是否隐藏

}

3.2.3 使用

在layout组件中引入并使用

3.3 左侧菜单组件

3.3.1静态页面（未封装）

主要使用到了element-plus的menu组件。附带使用了滚动组件

<!-- 左侧菜单 -->

<div >

<Logo></Logo>

<!-- 展示菜单 -->

<!-- 滚动组件 -->

<el-scrollbar >

<!-- 菜单组件 -->

<el-menu background-color="#001529" text-color="white">code>

<el-menu-item index="1">首页</el-menu-item>code>

<el-menu-item index="2">数据大屏</el-menu-item>code>

<!-- 折叠菜单 -->

<el-sub-menu index="3">code>

<template #title>

<span>权限管理</span>

</template>

<el-menu-item index="3-1">用户管理</el-menu-item>code>

<el-menu-item index="3-2">角色管理</el-menu-item>code>

<el-menu-item index="3-3">菜单管理</el-menu-item>code>

</el-sub-menu>

</el-menu>

</el-scrollbar>

</div>

3.3.2 递归组件生成动态菜单

在这一部分，我们要根据路由生成左侧的菜单栏

1. 将父组件中写好的子组件结构提取出去

<!-- 展示菜单 -->

<!-- 滚动组件 -->

<el-scrollbar >

<!-- 菜单组件 -->

<el-menu background-color="#001529" text-color="white">code>

<!-- 更具路由动态生成菜单 -->

<Menu></Menu>

</el-menu>

</el-scrollbar>

2. 动态菜单子组件：src\layout\menu\index.vue
3. 处理路由

因为我们要根据路由以及其子路由作为我们菜单的一级|二级标题。因此我们要获取路由信息。

给路由中加入了路由元信息meta：它包含了2个属性：title以及hidden

<code>{

//登录路由

path: '/login',

component: () => import('@/views/login/index.vue'),

name: 'login', //命名路由

meta: {

title: '登录', //菜单标题

hidden: true, //路由的标题在菜单中是否隐藏

},

},

4. 仓库引入路由并对路由信息类型声明（vue-router有对应函数）

<code>//引入路由（常量路由）

import { constantRoute } from '@/router/routes'

。。。。。

//小仓库存储数据地方

state: (): UserState => {

return {

token: GET_TOKEN(), //用户唯一标识token

menuRoutes: constantRoute, //仓库存储生成菜单需要数组（路由）

}

5. 父组件拿到仓库路由信息并传递给子组件

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

。。。。。。

//引入菜单组件

import Menu from './menu/index.vue'

//获取用户相关的小仓库

import useUserStore from '@/store/modules/user'

let userStore = useUserStore()

</script>

6. 子组件prps接收并且处理结构

<code><template>

<template v-for="(item, index) in menuList" :key="item.path">code>

<!-- 没有子路由 -->

<template v-if="!item.children">code>

<el-menu-item v-if="!item.meta.hidden" :index="item.path">code>

<template #title>

<span>标</span>

<span>{{ item.meta.title }}</span>

</template>

</el-menu-item>

</template>

<!-- 有且只有一个子路由 -->

<template v-if="item.children && item.children.length == 1">code>

<el-menu-item

index="item.children[0].path"code>

v-if="!item.children[0].meta.hidden"code>

>

<template #title>

<span>标</span>

<span>{{ item.children[0].meta.title }}</span>

</template>

</el-menu-item>

</template>

<!-- 有子路由且个数大于一个 -->

<el-sub-menu

:index="item.path"code>

v-if="item.children && item.children.length >= 2"code>

>

<template #title>

<span>{{ item.meta.title }}</span>

</template>

<Menu :menuList="item.children"></Menu>code>

</el-sub-menu>

</template>

</template>

<script setup lang="ts">code>

//获取父组件传递过来的全部路由数组

defineProps(['menuList'])

</script>

<script lang="ts">code>

export default {

name: 'Menu',

}

</script>

<style lang="scss" scoped></style>code>

注意：

1：因为每一个项我们要判断俩次（是否要隐藏，以及子组件个数），所以在el-menu-item外面又套了一层模板

2：当子路由个数大于等于一个时，并且或许子路由还有后代路由时。这里我们使用了递归组件。递归组件需要命名（另外使用一个script标签，vue2格式）。

3.3.3 菜单图标

1. 注册图标组件

因为我们要根据路由配置对应的图标，也要为了后续方便更改。因此我们将所有的图标注册为全局组件。（使用之前将分页器以及矢量图注册全局组件的自定义插件）（所有图标全局注册的方法element-plus文档中已给出）

<code>。。。。。。

//引入element-plus提供全部图标组件

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

。。。。。。

//对外暴露插件对象

export default {

//必须叫做install方法

//会接收我们的app

。。。。。。

//将element-plus提供全部图标注册为全局组件

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

},

}

2. 给路由元信息添加属性：icon

以laytou和其子组件为例：首先在element-puls找到你要使用的图标的名字。将它添加到路由元信息的icon属性上

<code> {

//登录成功以后展示数据的路由

path: '/',

component: () => import('@/layout/index.vue'),

name: 'layout',

meta: {

title: 'layout',

hidden: false,

icon: 'Avatar',

},

children: [

{

path: '/home',

component: () => import('@/views/home/index.vue'),

meta: {

title: '首页',

hidden: false,

icon: 'HomeFilled',

},

},

],

},

3. 菜单组件使用

以只有一个子路由的组件为例：

<code><!-- 有且只有一个子路由 -->

<template v-if="item.children && item.children.length == 1">code>

<el-menu-item

index="item.children[0].path"code>

v-if="!item.children[0].meta.hidden"code>

>

<template #title>

<el-icon>

<component :is="item.children[0].meta.icon"></component>code>

</el-icon>

<span>{{ item.children[0].meta.title }}</span>

</template>

</el-menu-item>

</template>

3.3.4 项目全部路由配置

1. 全部路由配置(以权限管理为例）

<code>{

path: '/acl',

component: () => import('@/layout/index.vue'),

name: 'Acl',

meta: {

hidden: false,

title: '权限管理',

icon: 'Lock',

},

children: [

{

path: '/acl/user',

component: () => import('@/views/acl/user/index.vue'),

name: 'User',

meta: {

hidden: false,

title: '用户管理',

icon: 'User',

},

},

{

path: '/acl/role',

component: () => import('@/views/acl/role/index.vue'),

name: 'Role',

meta: {

hidden: false,

title: '角色管理',

icon: 'UserFilled',

},

},

{

path: '/acl/permission',

component: () => import('@/views/acl/permission/index.vue'),

name: 'Permission',

meta: {

hidden: false,

title: '菜单管理',

icon: 'Monitor',

},

},

],

},

2. 添加路由跳转函数

第三种情况我们使用组件递归，所以只需要给前面的2个添加函数

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

。。。。。。

//获取路由器对象

let $router = useRouter()

const goRoute = (vc: any) => {

//路由跳转

$router.push(vc.index)

}

</script>

3. layout组件

3.3.5 Bug&&总结

在这部分对router-link遇到一些bug，理解也更深了，特意写一个小结总结一下

bug：router-link不生效。

描述：当我点击跳转函数的时候，直接跳转到一个新页面，而不是layout组件展示的部分更新。

思路：首先输出了一下路径，发现路径没有错。其次，因为跳转到新页面，代表layout组件中的router-link不生效，删除router-link，发现没有影响。所以确定了是router-link没有生效。

解决：仔细检查了<code>src\router\routes.ts文件，最后发现一级路由的component关键字写错。导致下面的二级路由没有和以及路由构成父子关系。所以会跳转到APP组件下的router-link

总结：router-link会根据下面的子路由来进行展示。如果发生了路由跳转不对的情况，去仔细检查一下路由关系有没有写对。APP是所有一级路由组件的父组件

3.3.6 动画 && 自动展示

1. 将router-link封装成单独的文件并且添加一些动画

<template>

<!-- 路由组件出口的位置 -->

<router-view v-slot="{ Component }">code>

<transition name="fade">code>

<!-- 渲染layout一级路由的子路由 -->

<component :is="Component" />code>

</transition>

</router-view>

</template>

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

<style lang="scss" scoped>code>

.fade-enter-from {

opacity: 0;

}

.fade-enter-active {

transition: all 0.3s;

}

.fade-enter-to {

opacity: 1;

}

</style>

2. 自动展示

当页面刷新时，菜单会自动收起。我们使用element-plus的**default-active **处理。$router.path为当前路由。

<code>src\layout\index.vue

3.4 顶部tabbar组件

3.4.1静态页面

element-plus：breadcrumb el-button el-dropdown

<code><template>

<div >

<div >

<!-- 顶部左侧的图标 -->

<el-icon >

<Expand></Expand>

</el-icon>

<!-- 左侧的面包屑 -->

<el-breadcrumb separator-icon="ArrowRight">code>

<el-breadcrumb-item>权限挂历</el-breadcrumb-item>

<el-breadcrumb-item>用户管理</el-breadcrumb-item>

</el-breadcrumb>

</div>

<div >

<el-button size="small" icon="Refresh" circle></el-button>code>

<el-button size="small" icon="FullScreen" circle></el-button>code>

<el-button size="small" icon="Setting" circle></el-button>code>

<img

src="../../../public/logo.png"code>

/>

<!-- 下拉菜单 -->

<el-dropdown>

<span >

admin

<el-icon >

<arrow-down />

</el-icon>

</span>

<template #dropdown>

<el-dropdown-menu>

<el-dropdown-item>退出登陆</el-dropdown-item>

</el-dropdown-menu>

</template>

</el-dropdown>

</div>

</div>

</template>

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

<style lang="scss" scoped>code>

.tabbar {

width: 100%;

height: 100%;

display: flex;

justify-content: space-between;

background-image: linear-gradient(

to right,

rgb(236, 229, 229),

rgb(151, 136, 136),

rgb(240, 234, 234)

);

.tabbar_left {

display: flex;

align-items: center;

margin-left: 20px;

}

.tabbar_right {

display: flex;

align-items: center;

}

}

</style>

组件拆分：

<template>

<!-- 顶部左侧的图标 -->

<el-icon >

<Expand></Expand>

</el-icon>

<!-- 左侧的面包屑 -->

<el-breadcrumb separator-icon="ArrowRight">code>

<el-breadcrumb-item>权限挂历</el-breadcrumb-item>

<el-breadcrumb-item>用户管理</el-breadcrumb-item>

</el-breadcrumb>

</template>

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

<style lang="scss" scoped></style>code>

<template>

<el-button size="small" icon="Refresh" circle></el-button>code>

<el-button size="small" icon="FullScreen" circle></el-button>code>

<el-button size="small" icon="Setting" circle></el-button>code>

<img

src="../../../../public/logo.png"code>

/>

<!-- 下拉菜单 -->

<el-dropdown>

<span >

admin

<el-icon >

<arrow-down />

</el-icon>

</span>

<template #dropdown>

<el-dropdown-menu>

<el-dropdown-item>退出登陆</el-dropdown-item>

</el-dropdown-menu>

</template>

</el-dropdown>

</template>

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

<style lang="scss" scoped></style>code>

3.4.2 菜单折叠

1. 折叠变量

定义一个折叠变量来判断现在的状态是否折叠。因为这个变量同时给breadcrumb组件以及父组件layout使用，因此将这个变量定义在pinia中

//小仓库：layout组件相关配置仓库

import { defineStore } from 'pinia'

let useLayOutSettingStore = defineStore('SettingStore', {

state: () => {

return {

fold: false, //用户控制菜单折叠还是收起的控制

}

},

})

export default useLayOutSettingStore

2. 面包屑组件点击图标切换状态

<code><template>

<!-- 顶部左侧的图标 -->

<el-icon @click="changeIcon">code>

<component :is="LayOutSettingStore.fold ? 'Fold' : 'Expand'"></component>code>

</el-icon>

。。。。。。。

</template>

<script setup lang="ts">code>

import useLayOutSettingStore from '@/store/modules/setting'

//获取layout配置相关的仓库

let LayOutSettingStore = useLayOutSettingStore()

//点击图标的切换

const changeIcon = () => {

//图标进行切换

LayOutSettingStore.fold = !LayOutSettingStore.fold

}

</script>

。。。。。。

3. layout组件根据fold状态来修改个子组件的样式（以左侧菜单为例）

绑定动态样式修改scss

4. 左侧菜单使用element-plus折叠collapse属性

效果图：

注意：折叠文字的时候会把图标也折叠起来。在menu组件中吧图标放到template外面就可以。

3.4.3 顶部面包屑动态展示

1. 引入$route

注意$router和$route是不一样的

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

import { useRoute } from 'vue-router'

//获取路由对象

let $route = useRoute()

//点击图标的切换

</script>

2. 结构展示

注意：使用了$route.matched函数，此函数能得到当前路由的信息

3. 首页修改

访问首页时，因为它是二级路由，会遍历出layout面包屑，处理：删除layout路由的title。再加上一个判断

4. 面包屑点击跳转

注意：将路由中的一级路由权限管理以及商品管理重定向到第一个孩子，这样点击跳转的时候会定向到第一个孩子。

3.4.4 刷新业务的实现

1. 使用pinia定义一个变量作为标记

2. 点击刷新按钮，修改标记

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

//使用layout的小仓库

import useLayOutSettingStore from '@/store/modules/setting'

let layoutSettingStore = useLayOutSettingStore()

//刷新按钮点击的回调

const updateRefresh = () => {

layoutSettingStore.refresh = !layoutSettingStore.refresh

}

</script>

3. main组件检测标记销毁&重加载组件（nextTick）

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

import { watch, ref, nextTick } from 'vue'

//使用layout的小仓库

import useLayOutSettingStore from '@/store/modules/setting'

let layOutSettingStore = useLayOutSettingStore()

//控制当前组件是否销毁重建

let flag = ref(true)

//监听仓库内部的数据是否发生变化，如果发生变化，说明用户点击过刷新按钮

watch(

() => layOutSettingStore.refresh,

() => {

//点击刷新按钮：路由组件销毁

flag.value = false

nextTick(() => {

flag.value = true

})

},

)

</script>

3.4.5 全屏模式的实现

1. 给全屏按钮绑定函数

2. 实现全屏效果（利用docment根节点的方法）

<code>//全屏按钮点击的回调

const fullScreen = () => {

//DOM对象的一个属性：可以用来判断当前是不是全屏的模式【全屏：true，不是全屏：false】

let full = document.fullscreenElement

//切换成全屏

if (!full) {

//文档根节点的方法requestFullscreen实现全屏

document.documentElement.requestFullscreen()

} else {

//退出全屏

document.exitFullscreen()

}

4.部分功能处理完善

登录这一块大概逻辑，前端发送用户名密码到后端，后端返回token，前端保存，并且请求拦截器，请求头有token就要携带token

4.1 登录获取用户信息（TOKEN）

登录之后页面（home）上来就要获取用户信息。并且将它使用到页面中

1. home组件挂载获取用户信息

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

//引入组合是API生命周期函数

import { onMounted } from 'vue'

import useUserStore from '@/store/modules/user'

let userStore = useUserStore()

onMounted(() => {

userStore.userInfo()

})

</script>

2. 小仓库中定义用户信息以及type声明

<code>import type { RouteRecordRaw } from 'vue-router'

//定义小仓库数据state类型

export interface UserState {

token: string | null

menuRoutes: RouteRecordRaw[]

username: string

avatar: string

}

3. 请求头添加TOKEN

<code>//引入用户相关的仓库

import useUserStore from '@/store/modules/user'

。。。。。。

//请求拦截器

request.interceptors.request.use((config) => {

//获取用户相关的小仓库，获取token，登录成功以后携带个i服务器

const userStore = useUserStore()

if (userStore.token) {

config.headers.token = userStore.token

}

//config配置对象，headers请求头，经常给服务器端携带公共参数

//返回配置对象

return config

})

4. 小仓库发请求并且拿到用户信息

<code> //获取用户信息方法

async userInfo() {

//获取用户信息进行存储

let result = await reqUserInfo()

if (result.code == 200) {

this.username = result.data.checkUser.username

this.avatar = result.data.checkUser.avatar

}

},

5. 更新tabbar的信息（记得先引入并创建实例）

<code>src\layout\tabbar\setting\index.vue

4.2 退出功能

1. 退出登录绑定函数，调用仓库函数

<code>//退出登陆点击的回调

const logout = () => {

//第一件事：需要项服务器发请求【退出登录接口】（我们这里没有）

//第二件事：仓库当中和关于用户的相关的数据清空

userStore.userLogout()

//第三件事：跳转到登陆页面

}

2. pinia仓库

<code> //退出登录

userLogout() {

//当前没有mock接口（不做）：服务器数据token失效

//本地数据清空

this.token = ''

this.username = ''

this.avatar = ''

REMOVE_TOKEN()

},

3. 退出登录，路由跳转

注意:携带的query参数方便下次登陆时直接跳转到当时推出的界面

个人觉得这个功能没什么作用。但是可以学习方法

<code>//退出登陆点击的回调

const logout = () => {

//第一件事：需要项服务器发请求【退出登录接口】（我们这里没有）

//第二件事：仓库当中和关于用户的相关的数据清空

userStore.userLogout()

//第三件事：跳转到登陆页面

$router.push({ path: '/login', query: { redirect: $route.path } })

}

4. 登录按钮进行判断

4.3 路由守卫

<code>src\permisstion.ts（新建文件）

main.ts引入

4.3.1 进度条

1. 安装

<code> pnpm i nprogress

2. 引入并使用

<code>//路由鉴权：鉴权：项目当中路由能不能被访问的权限

import router from '@/router'

import nprogress from 'nprogress'

//引入进度条样式

import 'nprogress/nprogress.css'

//全局前置守卫

router.beforeEach((to: any, from: any, next: any) => {

//访问某一个路由之前的守卫

nprogress.start()

next()

})

//全局后置守卫

router.afterEach((to: any, from: any) => {

// to and from are both route objects.

nprogress.done()

})

//第一个问题：任意路由切换实现进度条业务 ----nprogress

4.3.2 路由鉴权

//路由鉴权：鉴权：项目当中路由能不能被访问的权限

import router from '@/router'

import setting from './setting'

import nprogress from 'nprogress'

//引入进度条样式

import 'nprogress/nprogress.css'

//进度条的加载圆圈不要

nprogress.configure({ showSpinner: false })

//获取用户相关的小仓库内部token数据，去判断用户是否登陆成功

import useUserStore from './store/modules/user'

//为什么要引pinia

import pinia from './store'

const userStore = useUserStore(pinia)

//全局前置守卫

router.beforeEach(async (to: any, from: any, next: any) => {

//网页的名字

document.title = `${setting.title}-${to.meta.title}`

//访问某一个路由之前的守卫

nprogress.start()

//获取token，去判断用户登录、还是未登录

const token = userStore.token

//获取用户名字

let username = userStore.username

//用户登录判断

if (token) {

//登陆成功，访问login。指向首页

if (to.path == '/login') {

next('/home')

} else {

//登陆成功访问其余的，放行

//有用户信息

if (username) {

//放行

next()

} else {

//如果没有用户信息，在收尾这里发请求获取到了用户信息再放行

try {

//获取用户信息

await userStore.userInfo()

next()

} catch (error) {

//token过期|用户手动处理token

//退出登陆->用户相关的数据清空

userStore.userLogout()

next({ path: '/login', query: { redirect: to.path } })

}

}

}

} else {

//用户未登录

if (to.path == '/login') {

next()

} else {

next({ path: '/login', query: { redirect: to.path } })

}

}

next()

})

//全局后置守卫

router.afterEach((to: any, from: any) => {

// to and from are both route objects.

nprogress.done()

})

//第一个问题：任意路由切换实现进度条业务 ----nprogress

//第二个问题：路由鉴权

//全部路由组件 ：登录|404|任意路由|首页|数据大屏|权限管理（三个子路由）|商品管理（4个子路由）

//用户未登录 ：可以访问login 其余都不行

//登陆成功：不可以访问login 其余都可以

路由鉴权几个注意点：

1. 获取用户小仓库为什么要导入pinia？

个人理解：之前在app中是不需要导入pinia的，是因为我们这次的文件时写在和main.ts同级的下面，所以我们使用的时候是没有pinia的。而之前使用时app已经使用了pinia了，所以我们不需要导入pina。

2. 全局路由守卫将获取用户信息的请求放在了跳转之前。实现了刷新后用户信息丢失的功能。

4.4 真实接口替代mock接口

接口文档：

http://139.198.104.58:8209/swagger-ui.html

http://139.198.104.58:8212/swagger-ui.html#/

1. 修改服务器域名

将.env.development，.env.production .env.test，三个环境文件下的服务器域名写为：

2. 代理跨域

<code>import { loadEnv } from 'vite'

。。。。。。

export default defineConfig(({ command, mode }) => {

//获取各种环境下的对应的变量

let env = loadEnv(mode, process.cwd())

return {

。。。。。。。

//代理跨域

server: {

proxy: {

[env.VITE_APP_BASE_API]: {

//获取数据服务器地址的设置

target: env.VITE_SERVE,

//需要代理跨域

changeOrigin: true,

//路径重写

rewrite: (path) => path.replace(/^\/api/, ''),

},

},

},

}

})

3. 修改api

在这里退出登录有了自己的api

<code>//统一管理项目用户相关的接口

import request from '@/utils/request'

//项目用户相关的请求地址

enum API {

LOGIN_URL = '/admin/acl/index/login',

USERINFO_URL = '/admin/acl/index/info',

LOGOUT_URL = '/admin/acl/index/logout',

}

//对外暴露请求函数

//登录接口方法

export const reqLogin = (data: any) => {

return request.post<any, any>(API.LOGIN_URL, data)

}

//获取用户信息接口方法

export const reqUserInfo = () => {

return request.get<any, any>(API.USERINFO_URL)

}

//退出登录

export const reqLogout = () => {

return request.post<any, any>(API.LOGOUT_URL)

}

4. 小仓库（user）

替换原有的请求接口函数，以及修改退出登录函数。以及之前引入的类型显示我们展示都设置为any

<code>//创建用户相关的小仓库

import { defineStore } from 'pinia'

//引入接口

import { reqLogin, reqUserInfo, reqLogout } from '@/api/user'

import type { UserState } from './types/type'

//引入操作本地存储的工具方法

import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'

//引入路由（常量路由）

import { constantRoute } from '@/router/routes'

//创建用户小仓库

const useUserStore = defineStore('User', {

//小仓库存储数据地方

state: (): UserState => {

return {

token: GET_TOKEN(), //用户唯一标识token

menuRoutes: constantRoute, //仓库存储生成菜单需要数组（路由）

username: '',

avatar: '',

}

},

//处理异步|逻辑地方

actions: {

//用户登录的方法

async userLogin(data: any) {

//登录请求

const result: any = await reqLogin(data)

if (result.code == 200) {

//pinia仓库存储token

//由于pinia|vuex存储数据其实利用js对象

this.token = result.data as string

//本地存储持久化存储一份

SET_TOKEN(result.data as string)

//保证当前async函数返回一个成功的promise函数

return 'ok'

} else {

return Promise.reject(new Error(result.data))

}

},

//获取用户信息方法

async userInfo() {

//获取用户信息进行存储

const result = await reqUserInfo()

console.log(result)

if (result.code == 200) {

this.username = result.data.name

this.avatar = result.data.avatar

return 'ok'

} else {

return Promise.reject(new Error(result.message))

}

},

//退出登录

async userLogout() {

const result = await reqLogout()

if (result.code == 200) {

//本地数据清空

this.token = ''

this.username = ''

this.avatar = ''

REMOVE_TOKEN()

return 'ok'

} else {

return Promise.reject(new Error(result.message))

}

},

},

getters: {},

})

//对外暴露小仓库

export default useUserStore

5. 退出登录按钮的点击函数修改

退出成功后再跳转

6. 路由跳转判断条件修改

<code>src\permisstion.ts

也是退出成功后再跳转

4.5 接口类型定义

<code>//登录接口需要携带参数类型

export interface loginFormData {

username: string

password: string

}

//定义全部接口返回数据都有的数据类型

export interface ResponseData {

code: number

message: string

ok: boolean

}

//定义登录接口返回数据类型

export interface loginResponseData extends ResponseData {

data: string

}

//定义获取用户信息返回的数据类型

export interface userInfoResponseData extends ResponseData {

data: {

routes: string[]

button: string[]

roles: string[]

name: string

avatar: string

}

}

注意：在src\store\modules\user.ts以及src\api\user\index.ts文件中对发请求时的参数以及返回的数据添加类型定义

5.品牌管理模块

5.1 静态组件

使用element-plus。

<template>

<el-card >

<!-- 卡片顶部添加品牌按钮 -->

<el-button type="primary" size="default" icon="Plus">添加品牌</el-button>code>

<!-- 表格组件，用于展示已有的数据 -->

<!--

table

---border:是否有纵向的边框

table-column

---lable：某一个列表

---width：设置这一列的宽度

---align：设置这一列对齐方式

-->

<el-table border>

<el-table-column

label="序号"code>

width="80px"code>

align="center"code>

></el-table-column>

<el-table-column label="品牌名称"></el-table-column>code>

<el-table-column label="品牌LOGO"></el-table-column>code>

<el-table-column label="品牌操作"></el-table-column>code>

</el-table>

<!-- 分页器组件 -->

<!--

pagination

---v-model:current-page：设置当前分页器页码

---v-model:page-size:设置每一也展示数据条数

---page-sizes：每页显示个数选择器的选项设置

---background:背景颜色

---layout：分页器6个子组件布局的调整 "->"把后面的子组件顶到右侧

-->

<el-pagination

v-model:current-page="pageNo"code>

v-model:page-size="limit"code>

:page-sizes="[3, 5, 7, 9]"code>

:background="true"code>

layout=" prev, pager, next, jumper,->,total, sizes,"code>

:total="400"code>

/>

</el-card>

</template>

<script setup lang="ts">code>

//引入组合式API函数

import { ref } from 'vue'

//当前页码

let pageNo = ref<number>(1)

//每一页展示的数据

let limit = ref<number>(3)

</script>

<style lang="scss" scoped></style>code>

5.2 数据模块

5.2.1 API

1. api函数

//书写品牌管理模块接口

import request from '@/utils/request'

//品牌管理模块接口地址

enum API {

//获取已有品牌接口

TRADEMARK_URL = '/admin/product/baseTrademark/',

}

//获取一样偶品牌的接口方法

//page:获取第几页 ---默认第一页

//limit:获取几个已有品牌的数据

export const reqHasTrademark = (page: number, limit: number) =>

request.get<any, any>(API.TRADEMARK_URL + `${page}/${limit}`)

2. 获取数据

我们获取数据没有放在pinia中，二是放在组件中挂载时获取数据

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

import { reqHasTrademark } from '@/api/product/trademark'

//引入组合式API函数

import { ref, onMounted } from 'vue'

//当前页码

let pageNo = ref<number>(1)

//每一页展示的数据

let limit = ref<number>(3)

//存储已有品牌数据总数

let total = ref<number>(0)

//存储已有品牌的数据

let trademarkArr = ref<any>([])

//获取已有品牌的接口封装为一个函数:在任何情况下向获取数据,调用次函数即可

const getHasTrademark = async (pager = 1) => {

//当前页码

pageNo.value = pager

let result = await reqHasTrademark(pageNo.value, limit.value)

console.log(result)

if (result.code == 200) {

//存储已有品牌总个数

total.value = result.data.total

trademarkArr.value = result.data.records

console.log(trademarkArr)

}

}

//组件挂载完毕钩子---发一次请求,获取第一页、一页三个已有品牌数据

onMounted(() => {

getHasTrademark()

})

</script>

5.2.2 数据展示

在数据展示模块，我们使用了element-plus的el-table，下面组要讲解属性和注意点。

1. data属性：显示的数据

比如我们这里绑定的trademarkArr是个三个对象的数组，就会多出来3行。

2. el-table-column的type属性：对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮

3. el-table-column的prop属性：字段名称 对应列内容的字段名， 也可以使用 property属性

注意：因为我们之前已经绑定了数据，所以在这里直接使用数据的属性tmName

4. el-table-column的插槽

为什么要使用插槽呢？因为prop属性虽然能够展示数据，但是他默认是div，如果我们的图片使用prop展示的话，会展示图片的路径。因此如果想展示图片或者按钮，我们就要使用插槽

注意：row就是我们的trademarkArr的每一个数据（对象)

5.3 品牌类型定义

API中的以及组件中。

<code>export interface ResponseData {

code: number

message: string

ok: boolean

}

//已有的品牌的ts数据类型

export interface TradeMark {

id?: number

tmName: string

logoUrl: string

}

//包含全部品牌数据的ts类型

export type Records = TradeMark[]

//获取的已有全部品牌的数据ts类型

export interface TradeMarkResponseData extends ResponseData {

data: {

records: Records

total: number

size: number

current: number

searchCount: boolean

pages: number

}

}

5.4 分页展示数据

此部分主要是俩个功能，第一个是当点击分页器页数时能跳转到对应的页数。第二个是每页展示的数据条数能正确显示

5.4.1 跳转页数函数

这里我们绑定的点击回调直接用的是之前写好的发送请求的回调。可以看出，发送请求的回调函数是有默认的参数：1.

注意：因为current-change方法时element-plus封装好的，它会给父组件传递并注入一个参数（点击的页码），所以相当于把这个参数传递给了getHasTrademark函数，因此能够跳转到正确的页码数

<code>//获取已有品牌的接口封装为一个函数:在任何情况下向获取数据,调用次函数即可

const getHasTrademark = async (pager = 1) => {

//当前页码

pageNo.value = pager

let result: TradeMarkResponseData = await reqHasTrademark(

pageNo.value,

limit.value,

)

if (result.code == 200) {

//存储已有品牌总个数

total.value = result.data.total

trademarkArr.value = result.data.records

}

}

5.4.2 每页展示数据条数

<code>//当下拉菜单发生变化的时候触发此方法

//这个自定义事件,分页器组件会将下拉菜单选中数据返回

const sizeChange = () => {

//当前每一页的数据量发生变化的时候，当前页码归1

getHasTrademark()

console.log(123)

}

同样的这个函数也会返回一个参数。但是我们不需要使用这个参数，因此才另外写一个回调函数。

5.5 dialog对话框静态搭建

1. 对话框的标题&&显示隐藏

v-model:属性用户控制对话框的显示与隐藏的 true显示 false隐藏

title:设置对话框左上角标题

2. 表单项

<code> <el-form >

<el-form-item label="品牌名称" label-width="100px" prop="tmName">code>

<el-input

placeholder="请您输入品牌名称"code>

v-model="trademarkParams.tmName"code>

></el-input>

</el-form-item>

<el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">code>

<!-- upload组件属性:action图片上传路径书写/api,代理服务器不发送这次post请求 -->

<el-upload

action="/api/admin/product/fileUpload"code>

:show-file-list="false"code>

:on-success="handleAvatarSuccess"code>

:before-upload="beforeAvatarUpload"code>

>

<img

v-if="trademarkParams.logoUrl"code>

:src="trademarkParams.logoUrl"code>

/>

<el-icon v-else >

<Plus />

</el-icon>

</el-upload>

</el-form-item>

</el-form>

3. 确定与取消按钮

<code><template #footer>

<el-button type="primary" size="default" @click="cancel">取消</el-button>code>

<el-button type="primary" size="default" @click="confirm">确定</el-button>code>

</template>

5.5 新增品牌数据

5.4.1 API（新增与修改品牌）

因为这2个接口的携带的数据差不多，我们将其写为一个方法

//书写品牌管理模块接口

import request from '@/utils/request'

import type { TradeMarkResponseData, TradeMark } from './type'

//品牌管理模块接口地址

enum API {

。。。。。。

//添加品牌

ADDTRADEMARK_URL = '/admin/product/baseTrademark/save',

//修改已有品牌

UPDATETRADEMARK_URL = '/admin/product/baseTrademark/update',

}

。。。。。。

//添加与修改已有品牌接口方法

export const reqAddOrUpdateTrademark = (data: TradeMark) => {

//修改已有品牌的数据

if (data.id) {

return request.put<any, any>(API.UPDATETRADEMARK_URL, data)

} else {

//新增品牌

return request.post<any, any>(API.ADDTRADEMARK_URL, data)

}

}

5.4.2 收集新增品牌数据

1. 定义数据

import type {

。。。。。。。

TradeMark,

} from '@/api/product/trademark/type'

//定义收集新增品牌数据

let trademarkParams = reactive<TradeMark>({

tmName: '',

logoUrl: '',

})

2. 收集品牌名称

3. upload组件的属性介绍

<code><el-upload

action="/api/admin/product/fileUpload"code>

:show-file-list="false"code>

:on-success="handleAvatarSuccess"code>

:before-upload="beforeAvatarUpload"code>

>

<img

v-if="trademarkParams.logoUrl"code>

:src="trademarkParams.logoUrl"code>

/>

<el-icon v-else >

<Plus />

</el-icon>

</el-upload>

class：带的一些样式，需复制到style中

action：图片上传路径需要书写/api,否则代理服务器不发送这次post请求

:show-file-list：是否展示已经上传的文件

:before-upload：上传图片之前的钩子函数

//上传图片组件->上传图片之前触发的钩子函数

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {

//钩子是在图片上传成功之前触发,上传文件之前可以约束文件类型与大小

//要求:上传文件格式png|jpg|gif 4M

if (

rawFile.type == 'image/png' ||

rawFile.type == 'image/jpeg' ||

rawFile.type == 'image/gif'

) {

if (rawFile.size / 1024 / 1024 < 4) {

return true

} else {

ElMessage({

type: 'error',

message: '上传文件大小小于4M',

})

return false

}

} else {

ElMessage({

type: 'error',

message: '上传文件格式务必PNG|JPG|GIF',

})

return false

}

}

:on-success：图片上传成功钩子（收集了上传图片的地址）

在这里，你将本地的图片上传到之前el-upload组件的action="/api/admin/product/fileUpload"这个地址上，然后on-success钩子会将上传后图片的地址返回

//图片上传成功钩子

const handleAvatarSuccess: UploadProps['onSuccess'] = (

response,

uploadFile,

) => {

//response:即为当前这次上传图片post请求服务器返回的数据

//收集上传图片的地址,添加一个新的品牌的时候带给服务器

trademarkParams.logoUrl = response.data

//图片上传成功,清除掉对应图片校验结果

formRef.value.clearValidate('logoUrl')

}

4. 上传图片后，用图片代替加号

5.4.3 添加品牌

1. 点击确定按钮回调

<code>const confirm = async () => {

//在你发请求之前,要对于整个表单进行校验

//调用这个方法进行全部表单相校验,如果校验全部通过，在执行后面的语法

// await formRef.value.validate()

let result: any = await reqAddOrUpdateTrademark(trademarkParams)

//添加|修改已有品牌

if (result.code == 200) {

//关闭对话框

dialogFormVisible.value = false

//弹出提示信息

ElMessage({

type: 'success',

message: trademarkParams.id ? '修改品牌成功' : '添加品牌成功',

})

//再次发请求获取已有全部的品牌数据

getHasTrademark(trademarkParams.id ? pageNo.value : 1)

} else {

//添加品牌失败

ElMessage({

type: 'error',

message: trademarkParams.id ? '修改品牌失败' : '添加品牌失败',

})

//关闭对话框

dialogFormVisible.value = false

}

}

2. 每次点击添加品牌的时候先情况之前的数据

<code>//添加品牌按钮的回调

const addTrademark = () => {

//对话框显示

dialogFormVisible.value = true

//清空收集数据

trademarkParams.tmName = ''

trademarkParams.logoUrl = ''

}

5.6 修改品牌数据

1. 绑定点击函数

其中的row就是当前的数据

2. 回调函数

<code>//修改已有品牌的按钮的回调

//row:row即为当前已有的品牌

const updateTrademark = (row: TradeMark) => {

//对话框显示

dialogFormVisible.value = true

//ES6语法合并对象

Object.assign(trademarkParams, row)

}

3. 对确认按钮回调修改

<code>const confirm = async () => {

。。。。。。。

if (result.code == 200) {

。。。

//弹出提示信息

ElMessage({

。。。。

message: trademarkParams.id ? '修改品牌成功' : '添加品牌成功',

})

//再次发请求获取已有全部的品牌数据

getHasTrademark(trademarkParams.id ? pageNo.value : 1)

} else {

//添加品牌失败

ElMessage({

。。。。

message: trademarkParams.id ? '修改品牌失败' : '添加品牌失败',

})

。。。。

}

}

4. 设置对话框标题

5. 小问题

当我们修改操作之后再点击添加品牌，对话框的title依旧是修改品牌。怎么是因为对话框的title是根据trademarkParams.id来的，我们之前添加品牌按钮操作没有对id进行清除。修改为如下就可

<code>//添加品牌按钮的回调

const addTrademark = () => {

//对话框显示

dialogFormVisible.value = true

//清空收集数据

trademarkParams.id = 0

trademarkParams.tmName = ''

trademarkParams.logoUrl = ''

}

5.7 品牌管理模块表单校验

5.7.1 表单校验（自定义规则校验，可以简略堪称三步走）

1. 绑定参数

:model：校验的数据

:rules：校验规则

ref="formRef"：表单实例

prop：表单元素校验的数据，可以直接使用表单绑定的数据。

2. Rules

<code>//表单校验规则对象

const rules = {

tmName: [

//required:这个字段务必校验,表单项前面出来五角星

//trigger:代表触发校验规则时机[blur、change]

{ required: true, trigger: 'blur', validator: validatorTmName },

],

logoUrl: [{ required: true, validator: validatorLogoUrl }],

}

3. Rules中写的方法

<code>//品牌自定义校验规则方法

const validatorTmName = (rule: any, value: any, callBack: any) => {

//是当表单元素触发blur时候,会触发此方法

//自定义校验规则

if (value.trim().length >= 2) {

callBack()

} else {

//校验未通过返回的错误的提示信息

callBack(new Error('品牌名称位数大于等于两位'))

}

}

//品牌LOGO图片的自定义校验规则方法

const validatorLogoUrl = (rule: any, value: any, callBack: any) => {

//如果图片上传

if (value) {

callBack()

} else {

callBack(new Error('LOGO图片务必上传'))

}

}

5.7.2 存在的一些问题

1. 图片校验时机

因为img是图片，不好判断。因此使用表单的validate属性，全部校验，放在确认按钮的回调函数中

const confirm = async () => {

//在你发请求之前,要对于整个表单进行校验

//调用这个方法进行全部表单相校验,如果校验全部通过，在执行后面的语法

await formRef.value.validate()

。。。。。。

}

2. 清除校验信息

当图片没有上传点击确认后会出来校验的提示信息，我们上传图片后校验信息应该消失。使用表单的clearValidate属性

<code>//图片上传成功钩子

const handleAvatarSuccess: UploadProps['onSuccess'] = (

。。。。。。

) => {

。。。。。。。

//图片上传成功,清除掉对应图片校验结果

formRef.value.clearValidate('logoUrl')

}

3. 清除校验信息2

当我们未填写信息去点击确认按钮时，会弹出2个校验信息。当我们关闭后再打开，校验信息还在。因为，我们需要在添加品牌按钮时清除校验信息。但是因为点击添加品牌，表单还没有加载，所以我们需要换个写法。

<code>//添加品牌按钮的回调

const addTrademark = () => {

//对话框显示

dialogFormVisible.value = true

//清空收集数据

trademarkParams.id = 0

trademarkParams.tmName = ''

trademarkParams.logoUrl = ''

//第一种写法:ts的问号语法

formRef.value?.clearValidate('tmName')

formRef.value?.clearValidate('logoUrl')

/* nextTick(() => {

formRef.value.clearValidate('tmName')

formRef.value.clearValidate('logoUrl')

}) */

}

同理修改按钮

//修改已有品牌的按钮的回调

//row:row即为当前已有的品牌

const updateTrademark = (row: TradeMark) => {

//清空校验规则错误提示信息

nextTick(() => {

formRef.value.clearValidate('tmName')

formRef.value.clearValidate('logoUrl')

})

。。。。。。

}

5.8删除业务

删除业务要做的事情不多，包括API以及发请求。不过有些点要注意

1. API

//书写品牌管理模块接口

import request from '@/utils/request'

import type { TradeMarkResponseData, TradeMark } from './type'

//品牌管理模块接口地址

enum API {

。。。。。。。

//删除已有品牌

DELETE_URL = '/admin/product/baseTrademark/remove/',

}

。。。。。。

//删除某一个已有品牌的数据

export const reqDeleteTrademark = (id: number) =>

request.delete<any, any>(API.DELETE_URL + id)

2. 绑定函数

这里使用了一个气泡组件，@confirm绑定的就是回调函数

3. 回调函数

<code>//气泡确认框确定按钮的回调

const removeTradeMark = async (id: number) => {

//点击确定按钮删除已有品牌请求

let result = await reqDeleteTrademark(id)

if (result.code == 200) {

//删除成功提示信息

ElMessage({

type: 'success',

message: '删除品牌成功',

})

//再次获取已有的品牌数据

getHasTrademark(

trademarkArr.value.length > 1 ? pageNo.value : pageNo.value - 1,

)

} else {

ElMessage({

type: 'error',

message: '删除品牌失败',

})

}

}

6 属性管理模块

6.1 属性管理模块的静态组件

属性管理分为上面部分的三级分类模块以及下面的添加属性部分。我们将三级分类模块单独提取出来做成全局组件

6.1.1 三级分类全局组件（静态）

注意：要在<code>src\components\index.ts下引入。

<template>

<el-card>

<el-form inline>

<el-form-item label="一级分类">code>

<el-select>

<el-option label="北京"></el-option>code>

<el-option label="深圳"></el-option>code>

<el-option label="广州"></el-option>code>

</el-select>

</el-form-item>

<el-form-item label="二级分类">code>

<el-select>

<el-option label="北京"></el-option>code>

<el-option label="深圳"></el-option>code>

<el-option label="广州"></el-option>code>

</el-select>

</el-form-item>

<el-form-item label="三级分类">code>

<el-select>

<el-option label="北京"></el-option>code>

<el-option label="深圳"></el-option>code>

<el-option label="广州"></el-option>code>

</el-select>

</el-form-item>

</el-form>

</el-card>

</template>

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

<style lang="" scoped></style>code>

6.1.2 添加属性模块（静态）

<template>

<!-- 三级分类全局组件-->

<Category></Category>

<el-card >

<el-button type="primary" size="default" icon="Plus">添加属性</el-button>code>

<el-table border >

<el-table-column

label="序号"code>

type="index"code>

align="center"code>

width="80px"code>

></el-table-column>

<el-table-column label="属性名称" width="120px"></el-table-column>code>

<el-table-column label="属性值名称"></el-table-column>code>

<el-table-column label="操作" width="120px"></el-table-column>code>

</el-table>

</el-card>

</template>

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

<style lang="scss" scoped></style>code>

6.2 一级分类数据

一级分类的流程时：API->pinia->组件

为什么要使用pinia呢？因为在下面的添加属性那部分，父组件要用到三级分类组件的信息（id），所以将数据放在pinia中是最方便的。

6.2.1 API

//这里书写属性相关的API文件

import request from '@/utils/request'

//属性管理模块接口地址

enum API {

//获取一级分类接口地址

C1_URL = '/admin/product/getCategory1',

//获取二级分类接口地址

C2_URL = '/admin/product/getCategory2/',

//获取三级分类接口地址

C3_URL = '/admin/product/getCategory3/',

}

//获取一级分类的接口方法

export const reqC1 = () => request.get<any, any>(API.C1_URL)

//获取二级分类的接口方法

export const reqC2 = (category1Id: number | string) => {

return request.get<any, any>(API.C2_URL + category1Id)

}

//获取三级分类的接口方法

export const reqC3 = (category2Id: number | string) => {

return request.get<any, any>(API.C3_URL + category2Id)

}

6.2.2 pinia

//商品分类全局组件的小仓库

import { defineStore } from 'pinia'

import { reqC1, } from '@/api/product/attr'

const useCategoryStore = defineStore('Category', {

state: () => {

return {

//存储一级分类的数据

c1Arr: [],

//存储一级分类的ID

c1Id: '',

}

},

actions: {

//获取一级分类的方法

async getC1() {

//发请求获取一级分类的数据

const result = await reqC1()

if (result.code == 200) {

this.c1Arr = result.data

}

},

},

getters: {},

})

export default useCategoryStore

6.2.3 Category组件

注意：el-option中的:value属性，它将绑定的值传递给el-select中的v-model绑定的值

<template>

<el-card>

<el-form inline>

<el-form-item label="一级分类">code>

<el-select v-model="categoryStore.c1Id">code>

<!-- label:即为展示数据 value:即为select下拉菜单收集的数据 -->

<el-option

v-for="(c1, index) in categoryStore.c1Arr"code>

:key="c1.id"code>

:label="c1.name"code>

:value="c1.id"code>

></el-option>

</el-select>

</el-form-item>

。。。。。。

</template>

<script setup lang="ts">code>

//引入组件挂载完毕方法

import { onMounted } from 'vue'

//引入分类相关的仓库

import useCategoryStore from '@/store/modules/category'

let categoryStore = useCategoryStore()

//分类全局组件挂载完毕,通知仓库发请求获取一级分类的数据

onMounted(() => {

getC1()

})

//通知仓库获取一级分类的方法

const getC1 = () => {

//通知分类仓库发请求获取一级分类的数据

categoryStore.getC1()

}

</script>

<style lang="" scoped></style>code>

6.3 分类数据ts类型

6.3.1 API下的type

//分类相关的数据ts类型

export interface ResponseData {

code: number

message: string

ok: boolean

}

//分类ts类型

export interface CategoryObj {

id: number | string

name: string

category1Id?: number

category2Id?: number

}

//相应的分类接口返回数据的类型

export interface CategoryResponseData extends ResponseData {

data: CategoryObj[]

}

使用：仓库中的result，API中的接口返回的数据

6.3.2 组件下的type

import type { CategoryObj } from '@/api/product/attr/type'

。。。。。

//定义分类仓库state对象的ts类型

export interface CategoryState {

c1Id: string | number

c1Arr: CategoryObj[]

c2Arr: CategoryObj[]

c2Id: string | number

c3Arr: CategoryObj[]

c3Id: string | number

}

使用：仓库中的state数据类型

6.4 完成分类组件业务

分类组件就是以及组件上来就拿到数据，通过用户选择后我们会拿到id，通过id发送请求之后二级分类就会拿到数据。以此类推三级组件。我们以二级分类为例。

6.4.1 二级分类流程

1. 绑定函数

二级分类不是一上来就发生变化，而是要等一级分类确定好之后再发送请求获得数据。于是我们将这个发送请求的回调函数绑定在了一级分类的change属性上

2. 回调函数

<code>//此方法即为一级分类下拉菜单的change事件(选中值的时候会触发,保证一级分类ID有了)

const handler = () => {

//通知仓库获取二级分类的数据

categoryStore.getC2()

}

3. pinia

<code>//获取二级分类的数据

async getC2() {

//获取对应一级分类的下二级分类的数据

const result: CategoryResponseData = await reqC2(this.c1Id)

if (result.code == 200) {

this.c2Arr = result.data

}

},

4. 组件数据展示

5. 三级组件同理

6.4.2 小问题

当我们选择好三级菜单后，此时修改一级菜单。二、三级菜单应该清空

清空id之后就不会显示了。

<code>//此方法即为一级分类下拉菜单的change事件(选中值的时候会触发,保证一级分类ID有了)

const handler = () => {

//需要将二级、三级分类的数据清空

categoryStore.c2Id = ''

categoryStore.c3Arr = []

categoryStore.c3Id = ''

//通知仓库获取二级分类的数据

categoryStore.getC2()

}

//此方法即为二级分类下拉菜单的change事件(选中值的时候会触发,保证二级分类ID有了)

const handler1 = () => {

//清理三级分类的数据

categoryStore.c3Id = ''

categoryStore.getC3()

}

6.4.3 添加属性按钮禁用

在我们没选择好三级菜单之前，添加属性按钮应该处于禁用状态

src\views\product\attr\index.vue（父组件）

6.5 已有属性与属性值展示

6.5.1 返回type类型

<code>//属性值对象的ts类型

export interface AttrValue {

id?: number

valueName: string

attrId?: number

flag?: boolean

}

//存储每一个属性值的数组类型

export type AttrValueList = AttrValue[]

//属性对象

export interface Attr {

id?: number

attrName: string

categoryId: number | string

categoryLevel: number

attrValueList: AttrValueList

}

//存储每一个属性对象的数组ts类型

export type AttrList = Attr[]

//属性接口返回的数据ts类型

export interface AttrResponseData extends ResponseData {

data: Attr[]

}

6.5.2 API发送请求

//这里书写属性相关的API文件

import request from '@/utils/request'

import type { CategoryResponseData, AttrResponseData, Attr } from './type'

//属性管理模块接口地址

enum API {

。。。。。。。

//获取分类下已有的属性与属性值

ATTR_URL = '/admin/product/attrInfoList/',

}

。。。。。。

//获取对应分类下已有的属性与属性值接口

export const reqAttr = (

category1Id: string | number,

category2Id: string | number,

category3Id: string | number,

) => {

return request.get<any, AttrResponseData>(

API.ATTR_URL + `${category1Id}/${category2Id}/${category3Id}`,

)

}

6.5.3 组件获取返回数据并存储数据

注意：通过watch监听c3Id，来适时的获取数据。

<script setup lang="ts">code>

//组合式API函数

import { watch, ref } from 'vue'

//引入获取已有属性与属性值接口

import { reqAttr } from '@/api/product/attr'

import type { AttrResponseData, Attr } from '@/api/product/attr/type'

//引入分类相关的仓库

import useCategoryStore from '@/store/modules/category'

let categoryStore = useCategoryStore()

//存储已有的属性与属性值

let attrArr = ref<Attr[]>([])

//监听仓库三级分类ID变化

watch(

() => categoryStore.c3Id,

() => {

//获取分类的ID

getAttr()

},

)

//获取已有的属性与属性值方法

const getAttr = async () => {

const { c1Id, c2Id, c3Id } = categoryStore

//获取分类下的已有的属性与属性值

let result: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)

console.log(result)

if (result.code == 200) {

attrArr.value = result.data

}

}

</script>

6.5.4 将数据放入模板中

<el-card >

<el-button

type="primary"code>

size="default"code>

icon="Plus"code>

:disabled="categoryStore.c3Id ? false : true"code>

>

添加属性

</el-button>

<el-table border :data="attrArr">code>

<el-table-column

label="序号"code>

type="index"code>

align="center"code>

width="80px"code>

></el-table-column>

<el-table-column

label="属性名称"code>

width="120px"code>

prop="attrName"code>

></el-table-column>

<el-table-column label="属性值名称">code>

<!-- row：已有的属性对象 -->

<template #="{ row, $index }">

<el-tag

v-for="(item, index) in row.attrValueList"code>

:key="item.id"code>

>

{{ item.valueName }}

</el-tag>

</template>

</el-table-column>

<el-table-column label="操作" width="120px">code>

<!-- row：已有的属性对象 -->

<template #="{ row, $index }">

<!-- 修改已有属性的按钮 -->

<el-button type="primary" size="small" icon="Edit"></el-button>code>

<el-button type="primary" size="small" icon="Delete"></el-button>code>

</template>

</el-table-column>

</el-table>

</el-card>

6.5.5 小问题

当我们获取数据并展示以后，此时修改一级分类或者二级分类，由于watch的存在，同样会发送请求。但是此时没有c3Id，请求会失败。因此将watch改为如下

//监听仓库三级分类ID变化

watch(

() => categoryStore.c3Id,

() => {

//清空上一次查询的属性与属性值

attrArr.value = []

//保证三级分类得有才能发请求

if (!categoryStore.c3Id) return

//获取分类的ID

getAttr()

},

)

6.6 添加属性页面的静态展示

当点击添加属性后：

6.6.1 定义变量控制页面展示与隐藏

<code>//定义card组件内容切换变量

let scene = ref<number>(0) //scene=0,显示table,scene=1,展示添加与修改属性结构

6.6.2 表单

6.6.3 按钮

6.6.4 表格

6.6.5按钮

6.6.6 三级分类禁用

当点击添加属性之后，三级分类应该被禁用。因此使用props给子组件传参

子组件：

二三级分类同理。

6.7 添加属性&&修改属性的接口类型

6.7.1修改属性

6.7.2 添加属性

6.7.3 type

<code>//属性值对象的ts类型

export interface AttrValue {

id?: number

valueName: string

attrId?: number

flag?: boolean

}

//存储每一个属性值的数组类型

export type AttrValueList = AttrValue[]

//属性对象

export interface Attr {

id?: number

attrName: string

categoryId: number | string

categoryLevel: number

attrValueList: AttrValueList

}

6.7.4 组件收集新增的属性的数据

//收集新增的属性的数据

let attrParams = reactive<Attr>({

attrName: '', //新增的属性的名字

attrValueList: [

//新增的属性值数组

],

categoryId: '', //三级分类的ID

categoryLevel: 3, //代表的是三级分类

})

6.8 添加属性值

一个操作最重要的是理清楚思路。添加属性值的总体思路是：收集表单的数据（绑定对应的表单项等）->发送请求（按钮回调函数，携带的参数）->更新页面

6.8.1 收集表单的数据（attrParams）

1. 属性名称（attrName）

2. 属性值数组（attrValueList）

我们给添加属性值按钮绑定一个回调，点击的时候会往attrParams.attrValueList中添加一个空数组。我们根据空数组的数量生成input框，再将input的值与数组中的值绑定。

<code>//添加属性值按钮的回调

const addAttrValue = () => {

//点击添加属性值按钮的时候,向数组添加一个属性值对象

attrParams.attrValueList.push({

valueName: '',

flag: true, //控制每一个属性值编辑模式与切换模式的切换

})

}

3. 三级分类的id（categoryId）

三级分类的id（c3Id）在页面1的添加属性按钮之前就有了，因此我们把它放到添加属性按钮的回调身上

注意：每一次点击的时候,先清空一下数据再收集数据。防止下次点击时会显示上次的数据

<code>//添加属性按钮的回调

const addAttr = () => {

//每一次点击的时候,先清空一下数据再收集数据

Object.assign(attrParams, {

attrName: '', //新增的属性的名字

attrValueList: [

//新增的属性值数组

],

categoryId: categoryStore.c3Id, //三级分类的ID

categoryLevel: 3, //代表的是三级分类

})

//切换为添加与修改属性的结构

scene.value = 1

}

4. categoryLevel（固定的，无需收集）

6.8.2 发送请求&&更新页面

<code>//保存按钮的回调

const save = async () => {

//发请求

let result: any = await reqAddOrUpdateAttr(attrParams)

//添加属性|修改已有的属性已经成功

if (result.code == 200) {

//切换场景

scene.value = 0

//提示信息

ElMessage({

type: 'success',

message: attrParams.id ? '修改成功' : '添加成功',

})

//获取全部已有的属性与属性值（更新页面）

getAttr()

} else {

ElMessage({

type: 'error',

message: attrParams.id ? '修改失败' : '添加失败',

})

}

}

6.9 属性值的编辑与查看模式

6.9.1 模板的切换

在input下面添加了一个div，使用flag来决定哪个展示。

注意：flag放在哪？由于每一个属性值对象都需要一个flag属性，因此将flag的添加放在添加属性值的按钮的回调上。（注意修改属性值的type)

<code>//添加属性值按钮的回调

const addAttrValue = () => {

//点击添加属性值按钮的时候,向数组添加一个属性值对象

attrParams.attrValueList.push({

valueName: '',

flag: true, //控制每一个属性值编辑模式与切换模式的切换

})

}

src\api\product\attr\type.ts

6.9.2 切换的回调

<code>//属性值表单元素失却焦点事件回调

const toLook = (row: AttrValue, $index: number) => {

。。。。。。

//相应的属性值对象flag:变为false,展示div

row.flag = false

}

//属性值div点击事件

const toEdit = (row: AttrValue, $index: number) => {

//相应的属性值对象flag:变为true,展示input

row.flag = true

。。。。。。

}

6.9.3 处理非法属性值

//属性值表单元素失却焦点事件回调

const toLook = (row: AttrValue, $index: number) => {

//非法情况判断1

if (row.valueName.trim() == '') {

//删除调用对应属性值为空的元素

attrParams.attrValueList.splice($index, 1)

//提示信息

ElMessage({

type: 'error',

message: '属性值不能为空',

})

return

}

//非法情况2

let repeat = attrParams.attrValueList.find((item) => {

//切记把当前失却焦点属性值对象从当前数组扣除判断

if (item != row) {

return item.valueName === row.valueName

}

})

if (repeat) {

//将重复的属性值从数组当中干掉

attrParams.attrValueList.splice($index, 1)

//提示信息

ElMessage({

type: 'error',

message: '属性值不能重复',

})

return

}

//相应的属性值对象flag:变为false,展示div

row.flag = false

}

6.10 表单聚焦&&删除按钮

表单聚焦可以直接调用input提供foces方法：当选择器的输入框获得焦点时触发

6.10.1 存储组件实例

使用ref的函数形式，每有一个input就将其存入inputArr中

//准备一个数组:将来存储对应的组件实例el-input

let inputArr = ref<any>([])

6.10.2 点击div转换成input框后的自动聚焦

注意：使用nextTick是因为点击后，组件需要加载，没办法第一时间拿到组件实例。所以使用nextTick会等到组件加载完毕后才调用，达到聚焦效果。

<code>//属性值div点击事件

const toEdit = (row: AttrValue, $index: number) => {

//相应的属性值对象flag:变为true,展示input

row.flag = true

//nextTick:响应式数据发生变化,获取更新的DOM(组件实例)

nextTick(() => {

inputArr.value[$index].focus()

})

}

6.10.3 添加属性值自动聚焦

//添加属性值按钮的回调

const addAttrValue = () => {

//点击添加属性值按钮的时候,向数组添加一个属性值对象

attrParams.attrValueList.push({

valueName: '',

flag: true, //控制每一个属性值编辑模式与切换模式的切换

})

//获取最后el-input组件聚焦

nextTick(() => {

inputArr.value[attrParams.attrValueList.length - 1].focus()

})

}

6.10.4 删除按钮

6.11属性修改业务

6.11.1属性修改业务

修改业务很简单：当我们点击修改按钮的时候，将修改的实例（row）传递给回调函数。回调函数：首先跳转到第二页面，第二页面是根据attrParams值生成的，我们跳转的时候将实例的值传递给attrParams

<code>//table表格修改已有属性按钮的回调

const updateAttr = (row: Attr) => {

//切换为添加与修改属性的结构

scene.value = 1

//将已有的属性对象赋值给attrParams对象即为

//ES6->Object.assign进行对象的合并

Object.assign(attrParams, JSON.parse(JSON.stringify(row)))

}

6.11.2 深拷贝与浅拷贝

深拷贝和浅拷贝的区别

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

这里存在一个问题，也就是当我们修改属性值后，并没有保存（发请求），但是界面还是改了。这是因为我们的赋值语句：Object.assign(attrParams, row)是浅拷贝。相当于我们在修改服务器发回来的数据并展示在页面上。服务器内部并没有修改。

解决：将浅拷贝改为深拷贝：Object.assign(attrParams, JSON.parse(JSON.stringify(row)))

6.12 删除按钮&&清空数据

6.12.1删除按钮

1. API

//这里书写属性相关的API文件

import request from '@/utils/request'

import type { CategoryResponseData, AttrResponseData, Attr } from './type'

//属性管理模块接口地址

enum API {

。。。。。。

//删除某一个已有的属性

DELETEATTR_URL = '/admin/product/deleteAttr/',

}

。。。。。。

//删除某一个已有的属性业务

export const reqRemoveAttr = (attrId: number) =>

request.delete<any, any>(API.DELETEATTR_URL + attrId)

2. 绑定点击函数&&气泡弹出框

3. 回调函数（功能实现&&刷新页面）

<code>//删除某一个已有的属性方法回调

const deleteAttr = async (attrId: number) => {

//发相应的删除已有的属性的请求

let result: any = await reqRemoveAttr(attrId)

//删除成功

if (result.code == 200) {

ElMessage({

type: 'success',

message: '删除成功',

})

//获取一次已有的属性与属性值

getAttr()

} else {

ElMessage({

type: 'error',

message: '删除失败',

})

}

}

6.12.2路由跳转前清空数据

//路由组件销毁的时候，把仓库分类相关的数据清空

onBeforeUnmount(() => {

//清空仓库的数据

categoryStore.$reset()

})

7. Spu模块

SPU(Standard Product Unit)：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。

7.1 Spu模块的静态页面

<code><template>

<div>

<!-- 三级分类 -->

<Category :scene="scene"></Category>code>

<el-card >

<el-button type="primary" size="default" icon="Plus">添加SPU</el-button>code>

<el-table border >

<el-table-column

label="序号"code>

type="index"code>

align="center"code>

width="80px"code>

></el-table-column>

<el-table-column label="SPU名称"></el-table-column>code>

<el-table-column label="SPU描述"></el-table-column>code>

<el-table-column label="SPU操作"></el-table-column>code>

</el-table>

</el-card>

<!-- 分页器 -->

<el-pagination

v-model:current-page="pageNo"code>

v-model:page-size="pageSize"code>

:page-sizes="[3, 5, 7, 9]"code>

:background="true"code>

layout=" prev, pager, next, jumper,->, sizes,total"code>

:total="400"code>

/>

</div>

</template>

<script setup lang="ts">code>

import { ref, watch, onBeforeUnmount } from 'vue'

//场景的数据

let scene = ref<number>(0)

//分页器默认页码

let pageNo = ref<number>(1)

//每一页展示几条数据

let pageSize = ref<number>(3)

</script>

<style lang="scss" scoped></style>code>

7.2 Spu模块展示已有数据

7.2.1 API

//SPU管理模块的接口

import request from '@/utils/request'

import type { HasSpuResponseData } from './type'

enum API {

//获取已有的SPU的数据

HASSPU_URL = '/admin/product/',

}

//获取某一个三级分类下已有的SPU数据

export const reqHasSpu = (

page: number,

limit: number,

category3Id: string | number,

) => {

return request.get<any, HasSpuResponseData>(

API.HASSPU_URL + `${page}/${limit}?category3Id=${category3Id}`,

)

}

7.2.2 type

//服务器全部接口返回的数据类型

export interface ResponseData {

code: number

message: string

ok: boolean

}

//SPU数据的ts类型:需要修改

export interface SpuData {

category3Id: string | number

id?: number

spuName: string

tmId: number | string

description: string

spuImageList: null

spuSaleAttrList: null

}

//数组:元素都是已有SPU数据类型

export type Records = SpuData[]

//定义获取已有的SPU接口返回的数据ts类型

export interface HasSpuResponseData extends ResponseData {

data: {

records: Records

total: number

size: number

current: number

searchCount: boolean

pages: number

}

}

7.2.3 添加SPU按钮

7.2.4 表单数据

<code><el-table border :data="records">code>

<el-table-column

label="序号"code>

type="index"code>

align="center"code>

width="80px"code>

></el-table-column>

<el-table-column label="SPU名称" prop="spuName"></el-table-column>code>

<el-table-column

label="SPU描述"code>

prop="description"code>

show-overflow-tooltip

></el-table-column>

<el-table-column label="SPU操作">code>

<!-- row:即为已有的SPU对象 -->

<template #="{ row, $index }">

<el-button

type="primary"code>

size="small"code>

icon="Plus"code>

title="添加SKU"code>

></el-button>

<el-button

type="primary"code>

size="small"code>

icon="Edit"code>

title="修改SPU"code>

></el-button>

<el-button

type="primary"code>

size="small"code>

icon="View"code>

title="查看SKU列表"code>

></el-button>

<el-popconfirm :title="`你确定删除${row.spuName}?`" width="200px">code>

<template #reference>

<el-button

type="primary"code>

size="small"code>

icon="Delete"code>

title="删除SPU"code>

></el-button>

</template>

</el-popconfirm>

</template>

</el-table-column>

</el-table>

7.2.5 分页器

注意getHasSpu函数携带的参数。默认为1

<!-- 分页器 -->

<el-pagination

v-model:current-page="pageNo"code>

v-model:page-size="pageSize"code>

:page-sizes="[3, 5, 7, 9]"code>

:background="true"code>

layout=" prev, pager, next, jumper,->, sizes,total"code>

:total="total"code>

@current-change="getHasSpu"code>

@size-change="changeSize"code>

/>

//此方法执行:可以获取某一个三级分类下全部的已有的SPU

const getHasSpu = async (pager = 1) => {

//修改当前页码

pageNo.value = pager

let result: HasSpuResponseData = await reqHasSpu(

pageNo.value,

pageSize.value,

categoryStore.c3Id,

)

if (result.code == 200) {

records.value = result.data.records

total.value = result.data.total

}

}

//分页器下拉菜单发生变化的时候触发

const changeSize = () => {

getHasSpu()

}

7.2.6 watch监听

//监听三级分类ID变化

watch(

() => categoryStore.c3Id,

() => {

//当三级分类发生变化的时候清空对应的数据

records.value = []

//务必保证有三级分类ID

if (!categoryStore.c3Id) return

getHasSpu()

},