Vue2.x+Asp.net Core + EF core 分页查询

Vue2.x+Asp.net Core + EF core 分页查询

项目准备工作

创建Vue

首先创建vue项目,如果不知道可以看我的另一篇文章Vue.js–基于webpack项目的使用

安装 Element UI

​​npm i element-ui -S​​

创建Asp.net Core

Asp.net core使用EF Core连接Mysql数据库

开始

前端Vue页面

在表格的后面添加如下代码,可以用div包围然后调整样式.

<el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page.sync="pageConfig.page"
                           :page-sizes="pageConfig.pageRange" :page-size="pageConfig.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageConfig.totalCount">
el-pagination>

JS

在​​data​​中添加

pageConfig: {
    page: 1,
    pageSize: 20,
    totalCount: 0,
    pageRange: [10, 20, 50, 100, 200, 300]
}

​​methods​​中添加:

// 更换页码
pageCurrentChange(val) {
    this.pageConfig.page = val
    this.getDataListPage()
}, 
//更换每页显示数量
pageSizeChange(val) {
    this.pageConfig.pageSize = val
    this.getDataListPage()
},// 获取数据
getDataListPage() {
    this.$post('/api/Accendance/getDataListPage', {
        pageSize: this.pageConfig.pageSize,
        page: this.pageConfig.page,
        ......
     }).then(res => {
        if (res.success) {
            that.pageConfig.totalCount = res.totalCount
        }
              
       }).catch(err => {
       ......
       })
}

Asp.net Core

我在这里创建了一个统一的返回类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ManageSystemApi.Models
{
    [Serializable]
    public class Result<T>
    {
      
        public int? code { get; set; }

        public Boolean? success { get; set; }
        public string msg { get; set; }

        public List<T> dataList { get; set; }

        public int totalCount { get; set; }

        public int page { get; set; }

        public int pageSize { get; set; }

        public T data { get; set; }

        public Result()
        {
        }

        public Result(int? code, bool? success, string msg, List<T> dataList, int totalCount,  int page, int pageSize)
        {
            this.code = code;
            this.success = success;
            this.msg = msg;
            this.dataList = dataList;
            this.totalCount = totalCount;
            this.page = page;
            this.pageSize = pageSize;   
        }
        public Result(int? code, bool? success, string msg,  int totalCount, int page, int pageSize,T data)
        {
            this.code = code;
            this.success = success;
            this.msg = msg;
            this.data = data;
            this.totalCount = totalCount;
            this.page = page;
            this.pageSize = pageSize;
        }
        public static Result<T> suc(T data)
        {            
            return new Result<T>(0, true, "成功", 0, 0, 0, data);
        }
        public static Result<T> suc()
        {            
            return new Result<T>(0, true, "成功", null, 0, 0, 0);
        }
        public static Result<T> suc(List<T> dataList)
        {
            return new Result<T>(0,true,"成功",dataList,0,0,0);
        }       

        public static Result<T> fail(string msg)
        {
            return new Result<T>(1, false, msg, new List<T>(), 0,  0, 0);
        }

    }
}

在​​Controller​​中接收参数时,可以使用如下方法,其中result包含了分页的数据

[HttpPost("api/[controller]/getDataListPage")]
public Result<Accendance> getDataListPage(Result<Accendance> result, ...)
{
      .......
}

连接数据库的​​dao​​中:

IEnumerable<Accendance> p = null;
 // Skip代表页码,Take代表每页显示的数量
 result.dataList = p.Skip((result.page - 1) * result.pageSize).Take(result.pageSize).ToList();
 return result;