ElementUI动态树+数据表格+分页+接口文档

目录

一、准备

1.改dev.env.js的配置

2.修改Login.vue中的doSubmit()方法

3.测试接口能否正常返回数据

 二、ElementUI之动态树(动态菜单实现)

1.修改api/action.js的内容

2.修改LeftNav.vue的内容

3.在views中新建book目录

4.在book目录中新建BookList.vue和AddBook.vue

BookList.vue

5.修改router/index.js中的内容

6.修改AppMain中的内容

 三、书籍管理数据表格

1.修改BookList.vue中的内容

 四、登录接口

---

一、准备

1.改dev.env.js的配置

在config/dev.env.js将MOCK的值修改为false

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'false'
})

2.修改Login.vue中的doSubmit()方法

doSubmit: function () {
    let params = {
        username: this.username,
        password: this.password
    };
    console.log(params);
    let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    this.axios.post(url, params).then(response => {
        console.log(response);
        if (response.data.success) {
            this.$message({
                message: response.data.msg,
                type: 'success'
            })
            this.$router.push({path:'/appMain'});
        } else {
            this.$message({
                message: response.data.msg,
                type: 'error'
            })
        }
    }).catch(error => {
        console.log(error);
});

3.测试接口能否正常返回数据

注：建议浏览器下载一个json插件

 二、ElementUI之动态树(动态菜单实现)

1.修改api/action.js的内容

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm', //服务器
	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
  'SYSTEM_MENU': '/module/queryRootNode', //系统菜单
  'BOOK_LIST': '/book/queryBookPager', //数据查询
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

2.修改LeftNav.vue的内容

<template>
  <el-menu
    router :default-active="$route.path"
    default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu v-for="m in menus"
                :index="'index_'+m.id"
                :key="'key_'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span>{{ m.text }}</span>
      </template>
      <el-menu-item
        v-for="m2 in m.modules"
        :index="m2.url"
        :key="'key_' + m2.id">
        <i :class="m2.icon"></i>
        <span>{{m2.text}}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      menus: []
    }
  },
  created() {
    this.$root.Bus.$on('doCollapsed', v => {
      //v指的是topNav传递过来的this.collapsed
      this.collapsed = v;
    });
    //往后台发送请求,获取菜单数据
    let url = this.axios.urls.SYSTEM_MENU;
    this.axios.get(url,{}).then(resp=>{
      this.menus = resp.data.rows;
    }).catch(error=>{

    });
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}
</style>

3.在views中新建book目录

4.在book目录中新建BookList.vue和AddBook.vue

BookList.vue

<template>
  <div>书籍管理</div>
</template>

<script>
export default {
  name: "BookList"
}
</script>

<style scoped>

</style>

AddBook.vue

<template>
  <div>书籍新增</div>
</template>

<script>
export default {
  name: "addBook"
}
</script>

<style scoped>

</style>

5.修改router/index.js中的内容

#添加
import BookList from '@/views/book/BookList'
import AddBook from '@/views/book/AddBook'

#在appMain的children中添加
{
    path: '/book/BookList',
	name: 'BookList',
	component: BookList
}, {
    path: '/book/AddBook',
	name: 'AddBook',
	component: AddBook
},

6.修改AppMain中的内容

#<el-main></el-main>原来的Main替换成 
<router-view></router-view>

 三、书籍管理数据表格

1.修改BookList.vue中的内容

<template>
  <div style="padding: 20px">
    <!--搜索框-->
    <el-form :inline="true" class="form-search">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column prop="booktype" label="书籍类别"></el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="rows"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BookList",
  data() {
    return {
      bookname: '',
      tableData: [],
      page: 1,
      rows: 10,
      total: 0
    }
  },
  created() {
    let params = {
      bookname: this.bookname
    }
    this.query(params);
  },
  methods: {
    query(params){
      //搜索方法
      let url = this.axios.urls.BOOK_LIST;

      this.axios.get(url, {params: params}).then(resp => {
        this.tableData = resp.data.rows;
        this.total = resp.data.total;
      }).catch(err=>{

      });
    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      this.query(params);
    },
    handleSizeChange(r) {
      let params = {
        bookname: this.bookname,
        rows: r
      }
      this.query(params)
    },
    handleCurrentChange(p) {
      let params = {
        bookname: this.bookname,
        page: p
      }
      this.query(params)
    }
  }
}
</script>

<style scoped>

</style>

 四、登录接口

请求地址

POST http://localhost:8080/ssm/user/userLogin

请求参数

属性	类型	默认值	必填	说明
username	String		是	用户名
password	String		是	密码

返回值

Object

返回的JSON数据包

属性	类型	说明
msg	String	返回信息
rows	array
success	Boolean	是否登录成功
total	int

请求数据示例 

{
    username: admin
	password: 1234
}

返回数据示例

{
	"msg": "用户登陆成功！",
	"success": true,
	"total": 0,
	"rows": null
}