用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天的主要内容包括：基础环境的搭建、前端头部页面的编写、前端主体页面的编写等，今天的内容学起来会比较轻松，加油！下面就开始今天的学习！

---

一、基础环境的搭建

1. 首先在views下新建front文件夹
   
2. 然后在front中新建Home.vue，在其中输入如下的简单内容即可
   
3. 然后在index.js中给它配个路由
   
4. 然后来到前端访问，发现可以成功访问到刚才新建的页面。到目前为止我们这里已经脱离了之前的后台框架，也和之前做的前端不在一个框架内，可以认为是两套系统，所以我们接下来要做新的内容了
   
5. 然后在front内新建Front.vue，并输入以下简单内容
   
6. Front.vue作为主路由，然后刚才写的Home.vue作为其子路由，这个就和之前写的Manage.vue和Home.vue一样。所以我们需要在index.js中给其配一个路由
   
7. 然后来到前端发现可以正常访问
   

二、前端头部页面的编写

1. 学生角色不应该允许进入后台，而是进入前台系统，只有老师和管理员可以进入后台系统。为了完成这个功能，我们首先在Login.vue中加入如下内容，用来判断不同的角色进入不同的系统
   
2. 然后我们可以测试一下，发现以“沙僧”学生角色进入的就是前台页面，以“admin”管理员角色进入的就是后台页面
   
   
3. 先在这里解决一个小Bug，在Aside.vue中加入如下内容，解决收缩菜单文字不消失的问题
   
4. 然后此时来到前端发现，侧边栏收缩的时候，文字也消失了
   
5. 然后随便找一个图片作为我们这个子项目的一个图标，放在assets中
   
6. 然后将Front.vue中的全部内容替换为如下内容，读者注意图标的地址要换成自己的地址

<template>
    <div>
        
        <div style="display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid #eee">
            <div style="width: 300px; display: flex; padding-left: 30px">
                <div style="width: 60px">
                    <img src="../../assets/logoSub.png" alt=""
                         style="width: 50px; position: relative; top: 5px; right: 0">
                div>
                <div style="flex: 1">欢迎来到xx系统div>
            div>
            <div style="flex: 1">
                <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" router>
                    <el-menu-item index="/front/home">首页el-menu-item>
                    <el-menu-item>视频播放el-menu-item>
                    <el-menu-item>文章列表el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台template>
                        <el-menu-item>选项1el-menu-item>
                        <el-menu-item index="2-2">选项2el-menu-item>
                        <el-menu-item index="2-3">选项3el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4template>
                            <el-menu-item index="2-4-1">选项1el-menu-item>
                            <el-menu-item index="2-4-2">选项2el-menu-item>
                            <el-menu-item index="2-4-3">选项3el-menu-item>
                        el-submenu>
                    el-submenu>
                el-menu>
            div>
            <div style="width: 200px">
                <div v-if="!user.username" style="text-align: right; padding-right: 30px">
                    <el-button @click="$router.push('/login')">登录el-button>
                    <el-button @click="$router.push('/register')">注册el-button>
                div>
                <div v-else>
                    <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
                        <div style="display: inline-block">
                            <img :src="user.avatar" alt=""
                                 style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
                            <span>{{ user.nickname }}span><i class="el-icon-arrow-down" style="margin-left: 5px">i>
                        div>
                        <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <router-link to="/password" style="text-decoration: none">修改密码router-link>
                            el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <router-link to="/person" style="text-decoration: none">个人信息router-link>
                            el-dropdown-item>
                            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                                <span style="text-decoration: none" @click="logout">退出span>
                            el-dropdown-item>
                        el-dropdown-menu>
                    el-dropdown>
                div>
            div>
        div>

        <div style="width: 1000px; margin: 0 auto">
            <router-view/>
        div>
    div>
template>

<script>
    export default {
        name: "Front",
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            }
        },
        created() {

        },
        methods: {
            logout() {
                this.$store.commit("logout")
                this.$message.success("退出成功")
            }
        }
    }
script>

<style>
    .item {
        display: inline-block;
        width: 100px;

        text-align: center;
        cursor: pointer
    }

    .item a {
        color: #1E90FF;
    }

    .item:hover {
        background-color: LightPink;
    }
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

7. 此时的子项目主页如下图所示
   

三、前端主体页面的编写

1. 为了让不登陆的用户也可以访问前台内容，所以我们要对不敏感的数据不设置登陆验证。首先在config中新建一个自定义注解AuthAccess.java，并输入如下内容
   
2. 然后修改一下拦截器的拦截规则
   
3. 然后在EchartsController.java中新增如下函数，查询所有的文件
   
4. 然后将Home.vue中的全部内容替换为如下内容

<template>
    <div>
        <div style="margin: 10px 0">
            <el-carousel height="450px" :interval="10000">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <img :src="item" alt="" style="width: 100%">
                el-carousel-item>
            el-carousel>
        div>

        <div style="margin: 10px 0">
            <el-row :gutter="10">
                <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">
                    <div style="border: 1px solid #ccc; padding-bottom: 10px">
                        <img :src="item.url" alt="" style="width: 100%">
                        <div style="color: #666; padding: 10px">{{ item.name }}div>
                        <div style="padding: 10px">
                            <el-button type="primary">购买el-button>
                        div>
                    div>
                el-col>
            el-row>
        div>
    div>
template>

<script>
    export default {
        name: "FrontHome",
        data() {
            return {
                imgs: [
                    'https://img30.360buyimg.com/babel/s1580x830_jfs/t1/109361/24/22897/74054/621ede58E099d37e3/f12730c81df6046a.jpg!cc_1580x830.webp',
                    'https://img13.360buyimg.com/babel/s1580x830_jfs/t1/96398/30/23715/70228/6221e9d0Ec1b9fe65/f66e2ad76314d6cd.jpg!cc_1580x830.webp'
                ],
                files: []
            }
        },
        created() {
            this.request.get("/echarts/file/front/all").then(res => {
                console.log(res.data)
                this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
            })
        },
        methods: {}
    }
script>

<style>

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

5. 然后我们来到前端测试，发现所有功能均完好，即实现了轮播图，又实现了下方的文件展示
   

---

总结

  以上就是今天学习的全部内容，明天将会给大家带来关于SpringBoot集成Redis实现缓存的相关内容。明天见！