【第1到23讲】 基于vue + spring boot学生宿舍管理系统（文末附项目完整源代码+万字文档）
基于vue + spring boot学生宿舍管理
1、环境准备
1、安装node.js
2、安装vue-cli
3、安装 vs code开发工具
2、下载node.js
浏览器打开 https://nodejs.org/zh-cn/download/ 进入下载
1.2点击【以往的版本】进入所示列表界面，选择自己所需要的版本进行下载安装
3、vue-cli安装
1.2.1检查node.js是否安装
通过命令提示符，node -v npm -v查看，如果没有请先安装node.js,如下图，说明已经安装node.js
1.2.2.把npm换成cnpm
命令工具输入 npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成 输入 cnpm -v 查看是否安装成功
卸载cnpm npm uninstall cnpm -g
1.2.3.安装vue-cli
cnpm install -g @vue/cli
1.2.4.查看vue-cli是否安装成功
vue -V
注意 V是大写的
4、vs code安装
第03讲 vue-admin-template下载
1、vue-element-admin介绍
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
建议
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
- 集成方案: vue-element-admin
- 基础模板: vue-admin-template
- 桌面终端: electron-vue-admin
- Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
- Others: awesome-project
vue-element-admin和vue-admin-template区别
1、vue-admin-template是vue-element-admin的简化版，适合企业搭建项目；并且简化版有两个版本，注意选择；
2、vue-element-admin 定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余
2、vue-admin-template下载
在线演示地址
https://panjiachen.github.io/vue-admin-template/#/login?redirect=%2Fdashboard
下载地址
https://gitee.com/panjiachen/vue-admin-template/blob/master/README-zh.md
3、运行项目
1.安装依赖 npm install
2.运行项目 npm run dev
4、运行项目报错解决
1. error Multiple spaces found before '//需要添加该项，否则上级不...' no-multi-spaces错误
找到项目的.eslintrc.js配置文件把rules:中的 'no-multi-spaces': 'off' //关闭空格的检查
2. error Trailing spaces not allowed no-trailing-spaces错误
找到项目的.eslintrc.js配置文件在rules:中添加 'no-trailing-spaces': 'error', // 行末不要空格
第04讲 配置左侧导航菜单
1、修改应用的名称
找到src目录下的settings.js配置文件，修改为如下所示
module.exports = {
title: '学生宿舍管理系统',
/**
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: true, //固定头部
/**
* @type {boolean} true | false
* @description Whether show the logo in sidebar
*/
sidebarLogo: true //显示图标
}
2、修改右侧的下拉菜单
找到src/layout/components下的Navbar.vue文件，把el-dropdown-menu修改为如下所示代码
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item divided>
<span style="display:block;">重置密码</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
3、修改Dashboard为首页
3.1、修改router下的router.js里面的dashboard的title为 首页
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'dashboard' }
}]
}
3.2、修改components/Breadcrumb/index.vue中的 title 为首页
if (!this.isDashboard(first)) {
matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
}
4、新建模块页面，并创建页面对应的路由
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' }
}]
}
]
/**
* asyncRoutes
* the routes htat need to be dynamically loaded based on user roles
*/
export const asyncRoutes ='/system [
{
component:Layout,
alwaysShowh:true,
{
path: '/colloge',
icomponent:dLayout,
alwaysShow1,true name: 'colloge',
meta: da{ ti:l "2'学院管理', icon: 'el-icon5s2help' },
children: [
{
path: '/collogeList',
pa'/sysRoleLth:'用户管理's'icon:,
'table' }
children: [
{
path: '/sysUserList',
name
'sysRoleList' path: '/sysMenuList',
name: 'collogeList',
component: () => import('@/views/system/sysMenuList'),
meta: { title: '菜单管理', icon: 'tree' }
}
]
{
path: '/majorList',
name: 'majorList'
component: () => import('@/views/colloge/majorList'),
meta: { title: '专业管理', icon: 'tree' }
},
{
path: '/classList',
name: 'classList',
component: () => import('@/views/colloge/collogeList'),
},
mett: '学院管理', icoa: {
'table' }
},
}
</script>
<style lang="scss" scoped>
</style>
3.2、在src/views下新建colloge文件夹，并新建如下页面
1、collogeList.vue页面
<template>
<div>学院管理</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
2、majorList.vue页面
<template>
<div>专业管理</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
3、classList.vue页面
<template>
<div>班级管理</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
constantRoutes
})
constroutes:
#router#=#cre# "Router()
// Detail see20https://github.com/vuejs/vue-router/issues/0234#issuecomment-31794
465efunctionxresetRouter()port {
const newRoutern=acreateRouter()
merouter.matcher:= newRouter.matcher"// reset王router
}
export def虎ult router
##### 4、新建上面路由中对应的组件页面
###### 4.1、在src/views下新建syste"目录
1.新建sysM,nuList.vue组件
```js
菜单管理component: () => import('@/views/colloge/classList'),
meta: { title: '班级管理', icon: 'tree' }
}
]
children: [
用理
3.新建sysUserList.vue组件
<template>
date: 5、菜单改为打开一个
找到src/layout下的components目录，修改SideBar目录下的index.vue中的 :unique-opened="true"
#### 第05讲 项目添加添加tagsview选项卡
###### 1、添加TagsView文件
把vue-element-admin项目中的src\layout\components下的TagsView文件夹复制到vue-admin-template的 src\layout\components下
把vue-element-admin\src\store\modules\tagsView.js 复制到vue-admin-template\srcstore\modules\
###### 2、修改 vue-admin-template\src\layout\components\AppMain.vue文件
```js
<template>
<section class="app-main">
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
{
id: 4,
date: "2016-05-03",
<transition name="fade-transform":"mode=王out-in,>