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

IronmanJay

已于 2022-11-22 09:01:29 修改

阅读量2.1k

点赞数 3

分类专栏：基于SpringBoot和Vue的后台管理系统项目系列博客文章标签： vue.js spring boot 前端后端 java

于 2022-11-11 09:54:51 首次发布

本文链接：https://blog.csdn.net/IronmanJay/article/details/127800494

版权

基于SpringBoot和Vue的后台管理系统项目系列博客专栏收录该内容

23 篇文章 51 订阅

订阅专栏

系列文章目录

项目资源下载

前言

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

一、基础环境的搭建

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

二、前端头部页面的编写

学生角色不应该允许进入后台，而是进入前台系统，只有老师和管理员可以进入后台系统。为了完成这个功能，我们首先在Login.vue中加入如下内容，用来判断不同的角色进入不同的系统
然后我们可以测试一下，发现以“沙僧”学生角色进入的就是前台页面，以“admin”管理员角色进入的就是后台页面
先在这里解决一个小Bug，在Aside.vue中加入如下内容，解决收缩菜单文字不消失的问题
然后此时来到前端发现，侧边栏收缩的时候，文字也消失了
然后随便找一个图片作为我们这个子项目的一个图标，放在assets中
然后将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>选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="2-4-1">选项1</el-menu-item>
                            <el-menu-item index="2-4-2">选项2</el-menu-item>
                            <el-menu-item index="2-4-3">选项3</el-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>

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

三、前端主体页面的编写

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

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

总结

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

IronmanJay

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）

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

扫一扫