ssm+elementUI综合练习03-vue-element-admin按照maven多模块后端接口文档真实crud

1、接口文档

2、vue-element-admin

    官网地址https://panjiachen.github.io/vue-element-admin-site/zh/

2.1、介绍：

    vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

2.2、建议：

    本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

• 集成方案: vue-element-admin
• 基础模板: vue-admin-template
• 桌面终端:electron-vue-admin
• Typescript 版: vue-typescript-admin-template (鸣谢:@Armour)
• Others: awesome-project

2.3、本项目使用：

    本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

2.4、安装

Github地址：https://github.com/PanJiaChen/vue-element-admin

2.5、解压、启动

直接解压，启动项目

• npm install 安装依赖前端js库
• npm run dev 运行前端项目
• npm run build 打包–先不管 发布时候使用

2.6、登录页面

3、实现crud（department为例）

3.1、新建vue

新建一个department.vue

3.2、导入vue组件

在routes.js中

	import department from './views/sevens/department.vue'

3.3、配置路由

	{
   
        path: '/',
        component: Home,
        name: '导航一',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            {
   path: '/main', component: Main, name: '主页', hidden: true},
            {
   path: '/table', component: Table, name: 'Table'},
            {
   path: '/department', component: department, name: '部门'},
            {
   path: '/form', component: Form, name: 'Form'},
            {
   path: '/user', component: user, name: '列表'},
        ]
    }

3.4、关闭mock模拟数据，引入axios

联合后台使用真实数据，将mock模拟数据关闭

3.5、分页查询

department.vue

 <!--列表-->
        <el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="name" label="名称" sortable>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>