相关推荐recommended
SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计
作者:mmseoamin日期:2023-12-05

系列文章:

SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计

SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接

SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接

SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现

SpringBoot + Vue前后端分离项目实战 || 五:用户管理功能后续

文章目录

    • 环境配置
    • 开发工具
    • 下载Vue前端模板
    • 前端项目启动
    • 前端说明及修改
      • 修改导航栏
      • 自定义菜单与子菜单
      • 增加导航标签功能
      • 前端数据格式

        B站视频讲解:2023全网最简单但实用的SpringBoot+Vue前后端分离项目实战

        不想看视频可浏览此文章笔记,比较详细

        环境配置

        Nodejs: 8.17.0

        Vue: 3.11.0

        Maven: 3.6.0

        Java版本: 1.8.0_371

        MySQL: 5.5_56

        Redis: 5.0.14

        一般推荐使用低版本,因为高版本兼容低版本,反之不行

        开发工具

        IDEA 2021(后端)

        VScode(前端)

        下载Vue前端模板

        https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第1张

        此处建议下载1和2,项目主要基于2开发,但是会拓展一个前端功能需要用到1里面的代码

        选择2后,可下载其他版本,此处我下载的是v3.0.0

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第2张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第3张

        下载完成后将第2个基础模版解压到任意能找到的目录(不推荐目录中包含中文字符)

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第4张

        打开VScode,选择 文件 -> 打开文件夹

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第5张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第6张

        如下图 打开成功

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第7张

        前端项目启动

        打开集成终端,一定要定位到package.json级别的目录

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第8张

        然后终端输入命令 npm install

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第9张

        会自动下载项目的依赖

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第10张

        依赖下载完毕后 启动项目,运行命令npm run dev

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第11张

        出现以下信息表示成功

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第12张

        打开链接即可

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第13张

        前端说明及修改

        前端的总体配置在文件vue.config.js中

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第14张

        第16行 是端口号,可修改,此处我修改为8888

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第15张

        第34行 为是否启动项目就默认打开浏览器,因为vue支持热修改,并不用每次改完前端就需要重新启动,改完保存后前端页面就自动修改,所以此处设为false

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第16张

        所有的页面保存在src/views文件夹中,此处的view文件夹被我修改过,稍后说明修改流程

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第17张

        先修改登录页面src/views/login/index.vue

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第18张

        定位到第6行,修改title

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第19张

        定位到 187行,修改背景图,此时你需要找到一张背景图片,放在src/assets文件夹中

        background-image: url(../../assets/bg.png); //背景图
        background-size: 100%;
        

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第20张

        保存后页面会同步修改

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第21张

        为什么要在此处才能修改背景图?

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第22张

        我们在浏览器中按F12打开开发者模式,选择1,然后鼠标移动到整个页面都被选择,此时左下角出现了一个类名.login.container,记住该名称

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第23张

        打开VScode搜索.login-container ,注意页面显示的.login.container中第二个.替换为-变为.login-container,此处就是我们需要修改的样式的地方

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第24张

        其他的修改:

        1. 将英文变中文,其实就是找到对应的英文修改为中文,可在页面记住英文单词,然后进代码查找对应的英文在哪儿,然后打上中文即可

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第25张

        2. 修改登录表单为半透明,同样查找元素然后搜索login-form

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第26张

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第27张

          .login-form {
              position: relative;
              width: 520px;
              max-width: 100%;
              padding: 30px 35px 0;
              margin: 0 auto;
              overflow: hidden;
              background-color: #2d3a4b;  // 背景颜色
              border-radius: 5px;             // 表单圆角
              opacity: 0.85;                  // 透明度,值越小越越透明,取值为[0,1]
          }
          
        3. 附上我的src\views\login\inde.vue文件的全部代码
          
          
          
          
          复制代码后注意背景图的链接地址下要有文件存在

        修改 页面标签 找到src\settings.js文件,然后修改第3行title

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第28张

        修改完毕后浏览器标签会改变

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第29张

        修改导航栏

        点击此处会有导航窗口

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第30张

        可自定义修改,找到scr\layout\components\Navbar.vue文件,修改红框处的代码

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第31张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第32张

        
          
             
               个人信息
             
           
           
             公司主页
           
           
             学校主页
           
           
             退出登录
           
         
        

        自定义菜单与子菜单

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第33张

        首先,在src\views\下新建文件夹sys和test,然后再分别在这两个文件夹中新建role.vue、user.vue、test1.vue、test2.vue、test3.vue文件,如下图所示

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第34张

        进入role.vue写代码

        在VScode中输入vue会自动代码提示(需在VScode中安装vue插件),回车即可

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第35张

        会自动生成模板

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第36张

        此时写上一些代码

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第37张

        其他新建的vue文件如法炮制

        然后我们在src\router\index.js中路由链接这些新建的vue文件

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第38张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第39张

        新增代码及注释

        {
            path: '/sys',       // 浏览器访问路径
            component: Layout,
            redirect: '/sys',   // 本地views下的sys文件夹
            name: 'sysManage',  // 名字,唯一标识
            meta: { title: '系统管理', icon: '1' },   // 标题和图标
            children: [       // 子菜单   
              {
                path: 'user',   // 子菜单的浏览器访问路径,与父菜单结合 /sys/user 最终形成http://localhost:8888/#/sys/user
                name: 'user',   // 名字,唯一标识
                component: () => import('@/views/sys/user'),   // 新建views下的user.vue文件,该文件一定要存在
                meta: { title: '用户管理', icon: '个人中心'}    // 标题和图标
              },
              {
                path: 'role',   // 子菜单的浏览器访问路径,与父菜单结合 /sys/role
                name: 'role',
                component: () => import('@/views/sys/role'),  // 新建view下的user.vue界面,必须存在
                meta: { title: '角色管理', icon: '新增组织' }
              }
            ]
         },
        

        注意该代码中的icon:'1',这是自定义的图标,可在阿里巴巴矢量图标库中下载自己喜欢的图标

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第40张

        找到喜欢的图标后点击SVG下载

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第41张

        下好的图标重命名后保存在src\icons\svg文件夹中

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第42张

        然后就可以在代码中用上该图标了,不用写路径和后缀名

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第43张

        图标效果如下

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第44张

        我的src\router\index.js全部代码

        import Vue from 'vue'
        import Router from 'vue-router'
        Vue.use(Router)
        /* Layout */
        import Layout from '@/layout'
        /**
         * Note: sub-menu only appear when route children.length >= 1
         * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
         *
         * hidden: true                   if set true, item will not show in the sidebar(default is false)
         * alwaysShow: true               if set true, will always show the root menu
         *                                if not set alwaysShow, when item has more than one children route,
         *                                it will becomes nested mode, otherwise not show the root menu
         * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
         * name:'router-name'             the name is used by  (must set!!!)
         * meta : {
            roles: ['admin','editor']    control the page roles (you can set multiple roles)
            title: 'title'               the name show in sidebar and breadcrumb (recommend set)
            icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
            breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
            activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
          }
         */
        /**
         * constantRoutes
         * a base page that does not have permission requirements
         * all roles can be accessed
         */
        export const constantRoutes = [
          {
            path: '/login',
            component: () => import('@/views/login/index'),
            hidden: true
          },
          {
            path: '/404',
            component: () => import('@/views/404'),
            hidden: true
          },
          {
            path: '/',
            component: Layout,
            redirect: '/dashboard',
            children: [{
              path: 'dashboard',
              name: 'Dashboard',
              component: () => import('@/views/dashboard/index'),
              meta: { title: '首页', icon: 'dashboard' , affix:true}
            }]
          },
          {
            path: '/sys',       // 浏览器访问路径
            component: Layout,
            redirect: '/sys',   // 本地views下的sys文件夹
            name: 'sysManage',  // 名字,唯一标识
            meta: { title: '系统管理', icon: '1' },   // 标题和图标
            children: [       // 子菜单,此子菜单   
              {
                path: 'user',   // 子菜单的浏览器访问路径,与父菜单结合 /sys/user 最终形成http://localhost:8888/#/sys/user
                name: 'user',   // 名字,唯一标识
                component: () => import('@/views/sys/user'),   // 新建views下的user.vue文件,该文件一定要存在
                meta: { title: '用户管理', icon: '个人中心'}    // 标题和图标
              },
              {
                path: 'role',   // 子菜单的浏览器访问路径,与父菜单结合 /sys/role
                name: 'role',
                component: () => import('@/views/sys/role'),  // 新建view下的user.vue界面,必须存在
                meta: { title: '角色管理', icon: '新增组织' }
              }
            ]
          },
          {
            path: '/test',
            component: Layout,
            redirect: '/test',
            name: 'test',
            meta: { title: '功能模块', icon: 'tree' },
            children: [   //子菜单
              {
                path: 'test1',
                name: 'test1',
                component: () => import('@/views/test/test1'),   // 新建view下的user.vue界面
                meta: { title: '功能1', icon: '维护管理' }
              },
              {
                path: 'test2',
                name: 'test2',
                component: () => import('@/views/test/test2'),  // 新建view下的user.vue界面,必须存在
                meta: { title: '功能2', icon: '维护管理' }
              },
              {
                path: 'test3',
                name: 'test3',
                component: () => import('@/views/test/test3'),  // 新建view下的user.vue界面,必须存在
                meta: { title: '功能3', icon: '维护管理' }
              }
            ]
          },
          // 404 page must be placed at the end !!!
          { path: '*', redirect: '/404', hidden: true }
        ]
        const createRouter = () => new Router({
          // mode: 'history', // require service support
          scrollBehavior: () => ({ y: 0 }),
          routes: constantRoutes
        })
        const router = createRouter()
        // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
        export function resetRouter() {
          const newRouter = createRouter()
          router.matcher = newRouter.matcher // reset router
        }
        export default router
        

        注意复制代码时,确认好自己的icon图标文件

        增加导航标签功能

        如下图所示需要新增一个功能

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第45张

        此功能的代码在之前介绍的第一个项目中,现在需要将代码copy过来

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第46张

        下载好最新的一个压缩包后,解压缩,找到以下三个文件,注意这些文件复制到正在开发的项目中对应的路径中去,两个项目的路径设置是一样的

        src/layout/components/TagsView

        src/store/modules/tagsView.js

        src/store/modules/permission.js

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第47张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第48张

        然后进入VScode中添加代码:

        1. 进入src/layout/components/AppMain.vue文件修改红框代码

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第49张

          
              
          
          export default {
            name: 'AppMain',
            computed: {
              key() {
                return this.$route.path
              },
              cachedViews() {
                  return this.$store.state.tagsView.cachedViews
              }
            }
          }
          
        2. 修改文件src/store/getters.js

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第50张

            visitedViews: state => state.tagsView.visitedViews,
            cachedViews: state => state.tagsView.cachedViews,   
            permission_routes: state => state.permission.routes
          
        3. 修改文件src/store/index.js

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第51张

          import Vue from 'vue'
          import Vuex from 'vuex'
          import getters from './getters'
          import app from './modules/app'
          import settings from './modules/settings'
          import user from './modules/user'
          import tagsView from './modules/tagsView'
          Vue.use(Vuex)
          const store = new Vuex.Store({
            modules: {
              app,
              settings,
              user,
              tagsView
            },
            getters
          })
          export default store
          
        4. 修改文件src\layout\index.vue

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第52张

        5. 修改文件src\layout\components\index.js

          SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第53张

          export { default as TagsView } from './TagsView'
          

        大功告成!重新启动项目npm run dev

        如果我们想要设置某个标签不可关闭,如下图中首页标签,此时需要在src\router\index.js文件中找到首页然后添加属性affix:true

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第54张

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第55张

        另外,标签导航是可以右击的,此处我将英文修改为了中文

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第56张

        大家可以在VScode中全局搜索浏览器弹出来的英文,然后查找,再将其修改为对应中文即可,此处修改路径为src\layout\components\TagsView\index.vue中第20行

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第57张

        此时前端页面修改就大差不差了

        前端数据格式

        前后端对接需要知道前端登录的json数据传递格式

        打开浏览器界面,按F12选择网络

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第58张

        然后点击登录,此时浏览器会记录状态

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第59张

        单击login会出现数据响应格式,如红框所示,这个格式后端写代码会用到

        SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计,在这里插入图片描述,第60张

        {"code":20000,"data":{"token":"admin-token"}}