Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）

系列文章目录

项目资源下载

文章目录

系列文章目录
项目资源下载
前言
一、Aside.vue
二、Header.vue
三、Home.vue
四、About.vue
五、User.vue
六、Manage.vue
七、安装Vuex
八、store.js
九、index.js
十、在main.js中引入Vuex
十一、在main.js中引入Vuex
总结

前言

今天给大家带来的主要内容包括：侧边栏、头部栏、用户页、主界面等页面的制作，Vuex的安装与路由的使用，Vue项目引入Vuex，测试路由功能等内容。今天的内容主要集中在前端，代码和示例我都放在下面了。下面就开始今天的内容！

一、Aside.vue

我们将侧边栏抽离当作一个组件使用，在components中新建Aside.vue，在其中输入如下内容


<template>
    <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
             background-color="rgb(48, 65, 86)"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse-transition="false"
             :collapse="isCollapse"
             router
    >
        <div style="height: 60px; line-height: 60px; text-align: center">
            <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
            <b style="color: white" v-show="logoTextShow">后台管理系统b>
        div>
        <el-menu-item index="/home">
            <template slot="title">
                <i class="el-icon-house">i>
                <span slot="title">主页span>
            template>
        el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-menu">i>
                <span slot="title">系统管理span>
            template>
            <el-menu-item index="/user">
                <i class="el-icon-s-custom">i>
                <span slot="title">用户管理span>
            el-menu-item>
        el-submenu>
    el-menu>
template>

<script>
    export default {
        name: "Aside",
        props: {
            isCollapse: Boolean,
            logoTextShow: Boolean
        }
    }
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

二、Header.vue

我们将页面头部抽离当作一个组件使用，在components中新建Header.vue，在其中输入如下内容

<template>
  <div style="line-height: 60px; display: flex">
    <div style="flex: 1;">
      <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px" @click="collapse">span>

      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
        <el-breadcrumb-item :to="'/'">首页el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}el-breadcrumb-item>
      el-breadcrumb>
    div>
    <el-dropdown style="width: 70px; cursor: pointer">
      <span>王小虎span><i class="el-icon-arrow-down" style="margin-left: 5px">i>
      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息el-dropdown-item>
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出el-dropdown-item>
      el-dropdown-menu>
    el-dropdown>
  div>
template>

<script>
  export default {
    name: "Header",
    props: {
      collapseBtnClass: String,
      collapse: Boolean,
    },
    computed: {
      currentPathName () {
        return this.$store.state.currentPathName;　　//需要监听的数据
      }
    }
  }
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

三、Home.vue

因为我们要使用路由控制页面的定向，当选择主页的时候要出现主页的界面，所以在views下新建Home.vue，在Home.vue中输入如下内容

<template>
    <div>
        <b>这是主页b>
    div>
template>

<script>
    export default {
        name: "Home"
    }
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四、About.vue

我们还要展示页面的关于页面，所以在views下新建About.vue，在About.vue中输入如下内容

<template>
  <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
           background-color="rgb(48, 65, 86)"
           text-color="#fff"
           active-text-color="#ffd04b"
           :collapse-transition="false"
           :collapse="isCollapse"
           router
  >
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
      <b style="color: white" v-show="logoTextShow">后台管理系统b>
    div>
    <el-menu-item index="/home">
      <template slot="title">
        <i class="el-icon-house">i>
        <span slot="title">主页span>
      template>
    el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu">i>
        <span slot="title">系统管理span>
      template>
      <el-menu-item index="/user">
        <i class="el-icon-s-custom">i>
        <span slot="title">用户管理span>
      el-menu-item>
    el-submenu>
  el-menu>
template>

<script>
  export default {
    name: "Aside",
    props: {
      isCollapse: Boolean,
      logoTextShow: Boolean
    }
  }
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

五、User.vue

我们还要处理用户的有关操作，所以在views下新建User.vue，在User.vue中输入如下内容

<template>
    
    <div>
        
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                      v-model="username">el-input>
            <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"
                      v-model="email">el-input>
            <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"
                      v-model="address">el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索el-button>
            <el-button type="warning" @click="reset">重置el-button>
        div>

        
        <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline">i>el-button>
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定批量删除这些数据吗？"
                    @confirm="delBatch"
            >
                <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline">i>el-button>
            el-popconfirm>
            <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom">i>el-button>
            <el-button type="primary">导出 <i class="el-icon-top">i>el-button>
        div>

        
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">el-table-column>
            <el-table-column prop="id" label="ID" width="80">el-table-column>
            <el-table-column prop="username" label="用户名" width="140">el-table-column>
            <el-table-column prop="nickname" label="昵称" width="120">el-table-column>
            <el-table-column prop="email" label="邮箱">el-table-column>
            <el-table-column prop="phone" label="电话">el-table-column>
            <el-table-column prop="address" label="地址">el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit">i>el-button>
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='确定'
                            cancel-button-text='我再想想'
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline">i>el-button>
                    el-popconfirm>
                template>
            el-table-column>
        el-table>

        
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            el-pagination>
        div>

        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="80px" size="small">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off">el-input>
                el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickname" autocomplete="off">el-input>
                el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" autocomplete="off">el-input>
                el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" autocomplete="off">el-input>
                el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off">el-input>
                el-form-item>
            el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消el-button>
                <el-button type="primary" @click="save">确 定el-button>
            div>
        el-dialog>
    div>
template>


<script>
    export default {
        name: "User",
        data() {
            return {
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 2,
                username: "",
                email: "",
                address: "",
                form: {},
                dialogFormVisible: false,
                multipleSelection: []
            }
        },
        // 请求分页查询数据
        created() {
            this.load()
        },
        methods: {
            // 将数据库查询操作封装
            load() {
                this.request.get("/user/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        username: this.username,
                        email: this.email,
                        address: this.address,
                    }
                }).then(res => {
                    console.log(res)

                    this.tableData = res.records
                    this.total = res.total

                })
            },
            save() {
                this.request.post("/user", this.form).then(res => {
                    if (res) {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error("保存失败")
                    }
                })
            },
            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
            },
            handleEdit(row) {
                this.form = row
                this.dialogFormVisible = true
            },
            del(id) {
                this.request.delete("/user/" + id).then(res => {
                    if (res) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            delBatch() {
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                this.request.post("/user/del/batch", ids).then(res => {
                    if (res) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            reset() {
                this.username = ""
                this.email = ""
                this.address = ""
                this.load()
            },
            // 动态分页请求
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            }
        }
    }
script>


<style>
    .headerBg {
        background: #eee !important;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212

六、Manage.vue

我们还需要一个页面管理所有的路由，所以在views下新建Manage.vue，在Manage.vue中输入如下内容

<template>
    <el-container style="min-height: 100vh">

        <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
        el-aside>

        <el-container>
            <el-header style="border-bottom: 1px solid #ccc;">
                <Header :collapseBtnClass="collapseBtnClass" :collapse="isCollapse" />
            el-header>

            <el-main>
                
                <router-view />
            el-main>

        el-container>
    el-container>
template>

<script>

    import Aside from "@/components/Aside";
    import Header from "@/components/Header";

    export default {
        name: 'Home',
        data() {
            return {
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
            }
        },
        components: {
            Aside,
            Header
        },
        methods: {
            collapse() {  // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {  // 收缩
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else {   // 展开
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            }
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

七、安装Vuex

在cmd中输入npm install vuex@3.6.2 --save，注意要在前端项目内打开cmd，注意一定要安装3.6.2，因为这是Vue2的项目，如果使用其他版本可能会报错

八、store.js

在前端项目中新建store文件夹，在此目录下新建store.js，在其中输入如下内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        currentPathName: ''
    },
    mutations: {
        setPath (state) {
            state.currentPathName = localStorage.getItem("currentPathName")
        }
    }
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

九、index.js

在router/index.js中输入如下内容，在这里配置我们的路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store/store";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect: "/home",
    children: [
      //  首页
      { path: 'home', name: '首页', component: () => import('../views/Home.vue')},
      //  用户管理
      { path: 'user', name: '用户管理', component: () => import('../views/User.vue')},
    ]
  },
  //  关于页面
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName", to.name)  // 设置当前的路由名称，为了在Header组件中去使用
  store.commit("setPath")  // 触发store的数据更新
  next()  // 放行路由
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

十、在main.js中引入Vuex

在main.js中加入如下代码，引入Vuex

十一、在main.js中引入Vuex

最后分别启动前端和后台，测试一下路由配置是否成功。可以发现我们的路由配置成功，各功能完好

总结

以上就是今天这篇博文的全部内容，可以看到我们正在一步一步完成我们整个系统，分成一篇一篇博文发布的目的就是细水长流，每天做一点，也不会觉得累，最后也就需要20天左右就可以完成整个项目了。那么今天的内容就结束了，明天将给大家带来关于SpringBoot和Vue实现导入导出的内容！

相关阅读:
基于SpringBoot+Vue+微信小程序的电影平台
怎么办理工程监理资质，工程监理资质申请办理条件
Java代码审计sql注入基础
Vue-axios的get、post请求
你所不知道的实用类
湖北省科技企业孵化器和众创空间申报奖励补贴标准，2022年认定条件汇总
Flink-使用流批一体API统计单词数量
Navicat使用HTTP通道服务器进行连接mysql数据库（超简单三分钟完成），centos安装nginx和php，docker安装nginx+php合并版
LeetCode220814-20_84、最长连续序列
JS 清理 iframe 回收内存

原文地址：https://blog.csdn.net/IronmanJay/article/details/127664426