vue3第五阶段开发文档，后台管理系统

1

5.1 案例——后台管理系统

5.1.1 准备工作

1. 创建项目

打开命令行工具，切换到 D:\vue\chapter05 目录，使用 npm 包管理工具创建一个名称

为 manage-system 的项目，具体命令如下。

npm create vite@4.1.0 manage-system -- --template vue

上述命令中， manage-system 表示项目名称。

在命令行工具中，切换到 manage-system 目录，启动项目。

cd manage-system

npm install

npm run dev

项目启动后，会默认开启一个本地服务 http://127.0.0.1:5173/ 。

2. 安装 Vue Router 4

在 manage-system 目录下，安装 Vue Router 4 ，具体命令如下。

yarn add vue-router@4 --save

安装成功后，在 src 目录下，新建 router.js 文件，具体代码如下。

1 import { createRouter, createWebHashHistory } from "vue-router";

2 const router = createRouter({

3 history: createWebHashHistory(),

4 routes: []

5 })

6 export default router

在 src\main.js 文件中，导入并挂载路由模块，具体代码如下。

1 import { createApp } from 'vue'

2 import './style.css'

3 import App from './App.vue'

4 import router from './router'

5 const app = createApp(App)

6 app.use(router)

7 app.mount('#app')

3. 安装 Less 依赖包

在 manage-system 目录下，安装 Less 依赖包，具体命令如下。 2

yarn add --save-dev less-loader less

5.1.2 渲染登录组件

在 src/components 目录下创建 Login.vue 组件，然后在 router.js 中导入 Login.vue 组件，

并声明路由规则，最后在 App.vue 组件中声明路由视图。

导入 Login.vue 组件，并声明对应的路由规则，具体代码如下。

routes: [

{ path: '/', redirect:'/login' },

{ path: '/login', component: ()=> import ('./components/Login.vue') },

]

在 App.vue 组件中声明路由视图，清空 App.vue 的默认内容，并编写如下代码。

1 <template>

2 <div id="app">

3 <router-view></router-view>

4 </div>

5 </template>

6 <script>

7

8 </script>

在上述代码中，第 3 行代码声明路由视图。

5.1.3 实现登录功能

用户第一次登录时，前端需要调用后端的接口，并将用户名和密码传给后端，后端收

到请求后，验证用户名和密码，如果验证成功，则返回给前端一个 token 值，前端收到后

端传给的 token 值后，将 token 存储到本地 localStorage 中，前端每次路由跳转，只需判断

localStorage 中是否存在 token ，如果没有则跳转到登录页面，如果存在则跳转到后台页面。

在 src/components 目录下创建 Login.vue 组件，模拟并实现登录功能，具体实现步骤

如下。

① 显示用户头像，引入 assets 目录下的 logo.png 图片，具体代码如下。

1 <template>

2 <div class="login-container">

3 <div class="login-box">

4 <!-- 头像区域 -->

5 <div class="avatar-box"> 3

6 <img class="avatar" src="../assets/logo.png" />

7 </div>

8 <!-- 表单区域 -->

9 <div class="form-login">

10 </div>

11 </div>

12 </div>

13 </template>

14 <script>

15

16 </script>

上述代码中，第 6 行代码使用 <img> 标签引入 logo.png 图片。

② 编写表单区域内容，为登录名称和登录密码的文本框进行双向数据绑定，具体代

码如下。

1 <!-- 表单区域 -->

2 <div class="form-login">

3 <!-- 登录名称 -->

4 <div class="form-group">

5 <label for="username"> 登录名称： </label>

6 <input

7 type="text"

8 class="form-control"

9 id="username"

10 placeholder=" 请输入登录名称 "

11 autocomplete="off"

12 v-model.trim="username"

13 />

14 </div>

15 <!-- 登录密码 -->

16 <div class="form-group">

17 <label for="password"> 登录密码： </label>

18 <input

19 type="password"

20 class="form-control"

21 id="password"

22 placeholder=" 请输入登录密码 "

23 v-model="password"

24 /> 4

25 </div>

26 <!-- 登录按钮 -->

27 <div class="form-group">

28 <button type="button" class="btn"> 登录 </button>

29 </div>

30 </div>

上述代码中，第 12 行代码通过 v-model 指令绑定 username ，第 23 行代码通过 v-model

指令绑定 password 。

③ 声明 username 和 password 数据，具体代码如下。

1 <script setup>

2 import { ref } from 'vue'

3 const username = ref('')

4 const password = ref('')

5 </script>

④ 为登录按钮绑定单击事件处理函数，具体代码如下。

1 <!-- 登录按钮 -->

2 <div class="form-group">

3 <button type="button" class="btn" @click="onLogin"> 登录 </button>

4 </div>

上述代码中，为登录按钮绑定 onLogin 事件处理函数。

⑤ 声明 onLogin 事件处理函数，具体代码如下。

1 <script setup>

2 ……（原有代码）

3 import { useRouter } from 'vue-router'

4 const router = useRouter()

5 ……（原有代码）

6 const onLogin = () => {

7 if (username.value === 'admin' && password.value === '123456') {

8 router.push('/home')

9 return localStorage.setItem('token', 'Bearer xxx')

10 } else {

11 alert(' 用户名或密码输入错误 ')

12 localStorage.removeItem('token')

13 }

14 }

15 </script>

上述代码中，第 7 行代码使用 if 语句进行判断，当 username.value 为 admin 且

password.value 为 123456 时表示登录成功，执行第 8~9 行代码，跳转到后台首页，并保存 5

token （这里使用的模拟数据，实际项目中需要获取的 token 由后端返回）；如果登录失败

则执行第 11~12 行代码，给出错误提示信息，并清除 token 。

5.1.4 渲染后台主页组件

在 src/components 目录下创建 Home.vue 组件，然后在 router.js 中导入 Home.vue 组件，

并声明路由规则，最后在 App.vue 组件中渲染 Login.vue 组件，具体实现步骤如下。

① 导入 Home.vue 组件，并声明对应的路由规则，具体代码如下。

routes: [

{ path: '/', redirect:'/login' },

{ path: '/login', component: ()=> import ('./components/Login.vue') },

{ path: '/home', component: ()=> import ('./components/Home.vue') },

]

② 渲染 Home.vue 组件的基本结构，具体代码如下。

1 <template>

2 <div class="home-container">

3 <!-- 头部区域 -->

4 <my-header></my-header>

5 <!-- 主体区域 -->

6 <div class="home-main-box">

7 <!-- 左侧边栏区域 -->

8 <my-aside></my-aside>

9 <!-- 右侧内容主体区域 -->

10 <div class="home-main-body">

11 <!-- 路由的视图 -->

12 <router-view></router-view>

13 </div>

14 </div>

15 </div>

16 </template>

17 <script setup>

18 // 头部组件

19 import MyHeader from './subcomponents/MyHeader.vue'

20 // 左侧边导航组件

21 import MyAside from './subcomponents/MyAside.vue'

22 </script> 6

上述代码中，第 19 行代码导入 MyHeader 组件，第 4 行代码在模板中以 <my-header>

标签的形式使用注册的 MyHeader 组件；第 21 行代码导入 MyAside 组件，第 8 行代码在

模板中以 <my-aside> 标签的形式使用注册的 MyAside 组件。第 12 行代码使用 <router-view>

标签声明路由视图。

③ 在 src/components/subcomponents 目录下新建 MyHeader.vue 组件，实现公共头部

效果，具体代码如下。

1 <template>

2 <div class="layout-header-container">

3 <div class="layout-header-left">

4 <img class="layout-header-left-img" src="../../assets/logo.png"

alt="">

5 <h4 class="layout-header-left-title ml-3"> 商城后台管理系统 </h4>

6 </div>

7 <div class="layout-header-right">

8 <button type="button" class="btn btn-light" @click="onLogout"> 退出

</button>

9 </div>

10 </div>

11 </template>

上述代码中，第 4 行代码使用 <img> 标签引入 logo.png 图片，第 5 行代码定义标题名

称，第 8 行代码为退出按钮绑定 onLogout 事件处理函数。

④ 在 src/components/subcomponents 目录下，新建 MyAside.vue 组件，实现左侧边栏

导航效果，具体代码如下。

1 <template>

2 <div class="layout-aside-container">

3 <ul class="menu">

4 <li class="menu-item">

5 <router-link to="/home/users"> 用户管理 </router-link>

6 </li>

7 <li class="menu-item">

8 <router-link to="/home/rights"> 权限管理 </router-link>

9 </li>

10 <li class="menu-item">

11 <router-link to="/home/goods"> 商品管理 </router-link>

12 </li>

13 <li class="menu-item">

14 <router-link to="/home/orders"> 订单管理 </router-link>

15 </li> 7

16 <li class="menu-item">

17 <router-link to="/home/settings"> 系统设置 </router-link>

18 </li>

19 </ul>

20 </div>

21 </template>

上述代码中，第 5 、 8 、 11 、 14 、 17 行代码使用 <router-link> 的 to 属性跳转到指定目标

地址。

⑤ 在 src/router.js 文件中导入左侧边导航对应的组件，具体代码如下。

routes: [

{ path: '/', redirect: '/login' },

{ path: '/login', component: () => import ('./components/Login.vue') },

{

path: '/home',

component: () => import ('./components/Home.vue'),

redirect: '/home/users',

children: [

{

path: 'users',

component: () => import ('./components/subcomponents/MyUsers.vue

')

},

{

path: 'rights',

component: () => import ('./components/subcomponents/MyRights.vue

')

},

{

path: 'goods',

component: () => import ('./components/subcomponents/MyGoods.vue

')

},

{

path: 'orders',

component: () => import ('./components/subcomponents/MyOrders.vue

')

},

{ 8

path: 'settings',

component: () => import ('./components/subcomponents/MySettings.

vue')

},

{

path: 'menu',

component: () => import ('./components/subcomponents/MyMenu.vue')

}

]

},

]

上述代码中，导入了 MyUsers 、 MyRights 、 MyGoods 、 MyOrders 、 MySettings 和 MyMenu

组件。在路由匹配规则中，在 home 父路由链接中，使用 redirect 属性将后台主页重定向到

MyUsers 组件；使用 children 属性声明 Home 组件下的子路由匹配规则。

5.1.5 实现退出登录功能

用户想要离开后台主页时，处于安全性考虑，需要退出登录状态，此时单击头部区域

右侧的“退出”按钮，退出后台主页。具体实现步骤如下。

① 在 MyHeader.vue 组件，为登录链接绑定单击事件处理函数，具体代码如下。

<div class="layout-header-right">

<button type="button" class="btn btn-light" @click="onLogout"> 退 出

</button>

</div>

上述代码中，为“退出”链接绑定 onLogout 事件处理函数。

② 声明 onLogout 事件处理函数，具体代码如下。

1 <script setup>

2 import { useRouter } from 'vue-router'

3 const router = useRouter()

4 const onLogout = () => {

5 localStorage.removeItem('token')

6 router.push('/login')

7 }

8 </script>

上述代码中，第 5 行代码使用 localStorage.removeItem() 方法移除 token ，第 6 行代码

强制跳转到登录页面。 9

5.1.6 全局控制路由的访问权限

当访问后台主页时，使用全局路由导航守卫控制每个路由的访问权限。如果用户访问

的是登录页面，则执行下一个钩子函数并获取 token 值，如果 token 值不存在或为空，则

强制跳转到登录页面；如果 token 值存在，则跳转到后台主页。

在 src/router.js 文件中，注册全局导航守卫，具体代码如下。

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

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

3 return next()

4 }

5 const token = localStorage.getItem('token')

6 if (!token) {

7 return next('/login')

8 }

9 next()

10 })

上述代码中，第 2~4 行代码如果进入的目标路由对象为 login 时，则调用 next() 执行下

一个钩子函数；第 5 行代码获取用户信息 token 值；第 6~8 行代码对 token 值进行判断，

如果 token 值不存在，则强制跳转到 login 组件，如果 token 值存在，则调用 next() 执行下

一个钩子函数。

5.1.7 渲染用户管理页面的数据

用户在登录页面输入正确的用户名和密码后，会跳转到后台管理页面。此时，后台管

理页面会默认显示 MyUsers 组件，在右侧内容部分会显示对应的页面效果。

① 在 src/components/subcomponents 目录下新建 MyUsers.vue 组件，循环用户列表的

数据，具体代码如下。

1 <template>

2 <h4 class="text-center"> 用户管理 </h4>

3 <!-- 用户列表 -->

4 <table border style="width: 100%">

5 <thead>

6 <tr>

7 <th> 编号 </th>

8 <th> 姓名 </th>

9 <th> 等级 </th> 10

10 <th> 操作 </th>

11 </tr>

12 </thead>

13 <tbody>

14 <tr v-for="(item, i) in userlist" :key="item.id">

15 <td>{{ item.id }}</td>

16 <td>{{ item.name }}</td>

17 <td>{{ item.level }}</td>

18 <td> 详情 </td>

19 </tr>

20 </tbody>

21 </table>

22 </template>

上述代码中，第 14~19 行代码使用 v-for 指令循环渲染 userlist 数组中的数据，绑定 key

属性的属性值是 userlist 数组对象中的 id 属性。

② 定义 userlist 数组，具体代码如下。

1 <script setup>

2 const userlist = [

3 { id: '1', name: ' 小明 ', level: ' 一级客户 ' },

4 { id: '2', name: ' 小红 ', level: ' 二级客户 ' },

5 { id: '3', name: ' 小兰 ', level: ' 三级客户 ' },

6 { id: '4', name: ' 小芳 ', level: ' 四级客户 ' }

7 ]

8 </script>

上述代码中，第 2~7 行代码定义 userlist 数组对象，该数组对象中包括 id 、 name 和 level

属性，其中 id 表示用户编号， name 表示用户名称， level 表示用户等级。

5.1.8 实现跳转到用户详情页的功能

在用户管理页面单击“详情”链接，跳转到用户详情页面，并传递用户编号值，具体

实现步骤如下。

① 在 MyUser.vue 组件中，渲染详情页的路由链接，具体代码如下。

<td>

<router-link :to="'/home/users/' + item.id"> 详情 </router-link>

</td>

在上述代码中， <router-link> 中的 to 属性表示要跳转的路由规则，传递的参数值为数

组对象中的 id 属性。 11

② 首 先 在 src/components 目 录 下 新 建 user 文 件 夹 ， 用 于 存 放 用 户 详 情 页

（ MyUserDetail.vue ）组件；然后在 src/router.js 文件中导入 MyUserDetail.vue 组件；最后

在路由匹配规则中，新建 UserDetail 路由，具体代码如下。

routes: [

{ path: '/', redirect:'/login' },

{ path: '/login', component: ()=> import ('./components/Login.vue') },

{

path: '/home',

component: ()=> import ('./components/Home.vue'),

redirect:'/home/users',

children: [

……（原有代码）

{

path: 'users/:id',

component: ()=> import ('./components/user/MyUserDetail.vue')

}

]

},

]

在上述代码中，在 children 属性中声明路由详情页的路由规则，使用 : 号声明动态参数

名称为 id ，对应的组件名称为 UserDetail 。

5.1.9 使用 props 获取用户编号值

当用户单击“详情”链接时，仅实现了跳转到用户详情页面的功能，此时，在用户详

情页面还不能获取到传递的用户编号值，下面选择使用 props 获取用户编号值。

① 在路由匹配规则中，为用户详情页的路由规则开启 props 传参，具体代码如下。

{

path: 'users/:id',

component: ()=> import ('./components/user/MyUserDetail.vue'), props:

true

}

② 在 MyUserDetail.vue 组件，使用 props 接收路由规则中匹配到的参数项，具体代码

如下。

1 <script setup>

2 const props = defineProps({

3 id: String 12

4 })

5 </script>

上述代码中，第 2~4 行代码接收路由规则中匹配到的参数项 id 。

③ 在 MyUserDetail.vue 组件的模板中，直接使用路由参数，具体代码如下。

1 <template>

2 <button> 后退 </button>

3 <h4> 用户 {{ id }} 的详情页面 </h4>

4 </template>

上述代码中，第 3 行代码用于在页面中显示 id 值。

5.1.10 解决详情页左侧菜单激活问题

当进入到详情页后，左侧菜单“用户管理”激活状态消失，应该将“用户管理”菜单

项激活，具体步骤如下。

① 打开 src\router.js ，在文件开头导入 RouterView 和 h 渲染器，具体代码如下。

1 import { RouterView, createRouter, createWebHashHistory } from

'vue-router'

2 import { h } from 'vue'

② 修改 routes 数组中的“ users ”路径的路由，添加 component 和 children ，具体代

码如下。

1 {

2 path: 'users',

3 component: { render: () => h(RouterView) },

4 children: [

5 {

6 path: '',

7 component: () => import ('./components/subcomponents/MyUsers.vue')

8 },

9 {

10 path: ':id',

11 name:'details',

12 component: () => import ('./components/user/MyUserDetail.vue'), props:

true

13 }

14 ]

15 }, 13

③ 删除原来的“ user/:id ”路由配置，需要删除的代码如下。

1 {

2 path: 'users/:id',

3 component: ()=> import ('./components/user/MyUserDetail.vue'), props:

true

4 }

④ 访问测试，观察进入用户详情页后，左侧菜单中的“用户管理”是否已被激活

5.1.11 实现后退功能

用户成功跳转到详情页面时，如果想退出当前详情页，则可以单击“后退”按钮，具

体实现步骤如下。

① 在 MyUserDetail.vue 组件，为后退按钮绑定单击事件处理函数，具体代码如下。

<button @click="goBack"> 后退 </button>

上述代码中，为“后退”按钮绑定 goBack 事件处理函数

② 在 methods 中声明 goBack 事件处理函数，具体代码如下。

<script setup>

import { useRouter } from 'vue-router'

const props = defineProps({

id: String

})

const router = useRouter()

const goBack = () => {

router.back()

}

</script>

上述代码中，使用 router.back() 后退到上一个组件页面。