Vue Element前端应用开发之根据ABP后端接口实现前端展示

一、背景介绍

ABP（AspNet Boilerplate）是一个基于ASP.NET Core 3.0 + Angular 8.0 的模块化Web应用程序框架。Vue Element是Vue.js的一套UI组件库。本篇攻略将介绍如何通过调用ABP后端接口实现Vue Element前端应用开发。

二、环境要求

1. 安装Vue CLI ：npm install -g @vue/cli

2. 安装Vue Element：npm i element-ui -S

3. 搭建ABP后端

三、根据ABP后端接口实现前端展示

1. 创建Vue项目，进入项目文件夹

vue create my-project
cd my-project

1. 安装axios用于处理HTTP请求：

npm install --save axios

1. 引入Vue Element UI组件库：

npm i element-ui -S

1. 引入Vue Element CSS样式：

import 'element-ui/lib/theme-chalk/index.css';

1. 在main.js中引入Vue Element：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

1. 编写Vue组件

<template>
    <div>
        <el-table :data="tableData">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: []
        }
    },
    mounted() {
        axios.get('/api/services/app/demo/GetDemo').then(response => {
            this.tableData = response.data.result;
        }).catch(function (error) {
            console.log(error);
        });
    }
}
</script>

1. 根据ABP后端接口编写API（与Vue组件中的axios请求相对应）：

using Abp.AspNetCore.Mvc.Controllers;
using Microsoft.AspNetCore.Mvc;

namespace my-project.Controllers
{
    public class DemoController : AbpController
    {
        private readonly IDemoAppService _demoService;

        public DemoController(IDemoAppService demoService)
        {
            _demoService = demoService;
        }

        [HttpGet]
        public async Task<GetDemoOutput> GetDemo()
        {
            return await _demoService.GetDemoAsync(new GetDemoInput());
        }
    }
}

至此，我们完成了根据ABP后端接口实现前端展示的全过程。

四、示例说明

1. 示例一：在Vue Element中展示后端返回的数据

在Vue组件中编写axios请求，调用后端接口GetDemo：

axios.get('/api/services/app/demo/GetDemo').then(response => {
    this.tableData = response.data.result;
}).catch(function (error) {
    console.log(error);
});

将后端返回的结果赋给tableData，接着在组件中引入Vue Element UI组件库，使用以下代码展示表格数据：

<el-table :data="tableData">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

1. 示例二：通过分页组件实现前端数据分页

在Vue组件中引入分页组件库，通过ABP后端接口实现数据分页：

<template>
    <div>
        <el-table :data="tableData">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20]"
            :total="total"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
        }
    },
    mounted() {
        this.getTableData(1, 10);
    },
    methods: {
        getTableData(_pageIndex, _pageSize) {
            axios.get('/api/services/app/demo/GetDemo', {
                params: {
                    pageIndex: _pageIndex,
                    pageSize: _pageSize
                }
            }).then(response => {
                this.tableData = response.data.result.items;
                this.total = response.data.result.totalCount;
            }).catch(function (error) {
                console.log(error);
            });
        },
        handleSizeChange(val) {
            this.getTableData(1, val);
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.getTableData(val, this.pageSize);
            this.currentPage = val;
        }
    }
}
</script>

根据后端接口返回的总数total，以及Vue组件中分页组件el-pagination的相关参数，实现分页效果。

以上是根据ABP后端接口实现前端展示的完整攻略，示例中介绍了两种方法，包括直接在Vue Element中展示数据，以及通过分页组件实现前端数据分页。