Spring Boot + Vue.js 实现 EAM 企业资产管理系统之 03-开发笔记（3）

开发笔记

修改资产列表视图页面组件（src/views/List.vue），编写资产搜索的表单组件。

<el-form :inline="true">
    <el-form-item label="资产名称">
        <el-input v-model="searchName" placeholder="请输入资产名称"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
    </el-form-item>
</el-form>

修改资产列表视图页面组件（src/views/List.vue），编写获取资产列表的方法。

data() {
    return {
        // ...
        searchName: ''
    }
},
methods: {
    // 定义获取资产列表的方法
    getList() {
        axios.get('/api/zichan/getList?name=' + this.searchName)
        // ...
    },
    // ...
}

修改 Mock.js 配置文件（src/mock/index.js），编写获取资产列表的接口。

// 获取资产列表
Mock.mock(new RegExp('/api/zichan/getList'), 'get', function (options) {
    let params = parseUrlParams(options.url)

    // 模糊查询，过滤出模糊查询后的资产列表
    let filterDatabase = []
    if(params.name) {
        // 使用filter过滤不满足条件的方法
        filterDatabase = zichanDatabase.filter(item => item.name.indexOf(params.name) !== -1)
    } else {
        // 无查询条件时返回全部数据
        filterDatabase = zichanDatabase
    }

    return {
        code: 200,
        message: 'success',
        data: filterDatabase
    }
})

运行项目，查看效果。

修改 Mock.js 配置文件（src/mock/index.js），编写获取资产列表的接口。

// 获取资产列表
Mock.mock(new RegExp('/api/zichan/getList'), 'get', function (options) {
    // ...

    // 分页
    let pageNo = params.pageNo // 获取页码
    let pageSize = 5    // 设置页大小
    // 使用数组的slice函数截取数组，得到分页后的资产数据列表
    // 参数1：数据起始下标，（页码-1)*页大小
    // 参数2：数据结束下标，页码*页大小
    let pageDatabase = filterDatabase.slice((pageNo - 1) * pageSize, pageNo * pageSize)

    return {
        code: 200,
        message: 'success',
        data: {
            list: pageDatabase,   // 分页数据列表
        pageNo: pageNo, // 页码
            pageSize: pageSize, // 页大小
            total: zichanDatabase.length,   // 数据总数
            pages: Math.ceil(zichanDatabase.length / pageSize)  // 页码总数，向上取整
        }
    }
})

修改资产列表视图页面组件（src/views/List.vue），编写获取资产列表的方法。

data() {
    return {
        // ...
        searchName: '',
        pager: {
            pageNo: 1,   // 页码
        pageSize: 5,    // 页大小
            total: 0,    // 数据总数
            pages: 0    // 页码总数
        }
    }
},
methods: {
    // 定义获取资产列表的方法
    getList() {
        axios.get('/api/zichan/getList?name=' + this.searchName + '&pageNo=' + this.pager.pageNo)
            .then(ret => {
                // 保存分页信息
                this.zichanList = ret.data.data.list
        this.pager.pageSize = ret.data.data.pageSize
                this.pager.total = ret.data.data.total
                this.pager.pages = ret.data.data.pages
            })
            .catch(error => {
                this.$message.error('请求失败')
            })
    },
    // ...
}

修改资产列表视图页面组件（src/views/List.vue），编写资产列表的分页组件。

<!-- ... -->
<!--
    page-size：页大小
    total：数据总数
    page-count：页码总数
    current-page：当前页码
    sync：修饰符，用于同步页码的变化
    current-change：页码改变时触发事件
-->
<el-pagination background layout="prev, pager, next"
   :page-size="pager.pageSize"
   :total="pager.total"
   :page-count="pager.pages"
   :current-page.sync="pager.pageNo"
   @current-change="getList">
</el-pagination>

运行项目，查看效果。