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的内容

3.在views中新建book目录

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

BookList.vue

AddBook.vue

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中的内容

#原来的Main替换成 

 三、书籍管理数据表格

1.修改BookList.vue中的内容

 四、登录接口

请求地址

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
}