优点：
1.选用layui国产。
2.layui有一套完整的前端框架，基本哪来就可以用。
3.选用vue去掉了很多页面元素js拼接的繁琐，及不易修改。
4.vue里面还有一些过滤器等，用起来很方便。
列表页：
1.用vue数据绑定，加载表格。
2.用layui做分页处理。
3.用的bootstrap做列表样式。也可以用layui的一套列表样式
4.用vue插件axios，做ajax请求。
先上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="../bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" /> <link href="animate.css" rel="stylesheet" /> <link href="../layui/layui/css/layui.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="../layui/layui/layui.js"></script> </head> <body> <div id="app" class="container"> <table class="table table-bordered "> <thead> <tr> <td>Id</td> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> <tbody> <tr class="animated jello" v-for="item in list"> <td>{{item.Id}}</td> <td>{{item.Name}}</td> <td>{{item.Age}}</td> <td>{{item.Sex | sex}}</td> </tr> </tbody> </table> <div id="laypage"></div> </div> <script> //var total = 0; var vm = new Vue({ el: '#app', data: { list: [], total: -1, pageIndex: 1, pageSize:2, }, methods: { loadList: function () { axios.get('/data.ashx?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize).then(result => { console.log(result); this.list = result.data.Data; this.total = result.data.Total; if (this.pageIndex==1) { loadPage(); } }); } }, //钩子函数：data和methods加载后执行 created: function () { this.loadList(); //loadPage(); }, filters: { sex: function (data) { return data ? '男' : '女'; } } }) function loadPage() { layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'laypage', count: vm.total, //数据量 limit: vm.pageSize,//每页限制 jump: function (obj, first) { //点击跳转函数 //obj包含了当前分页的所有参数，比如： console.log(obj); console.log(first); //首次不执行 if (!first) { vm.pageIndex = obj.curr; vm.loadList(); //loadData(obj.curr, obj.limit); } } }); }); } </script> </body> </html>
后端请求数据代码：这里写的比较简单，做个演示。
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace 前端 { /// <summary> /// data 的摘要说明 /// </summary> public class data : IHttpHandler { public void ProcessRequest(HttpContext context) { string pageIndex = context.Request.QueryString["pageIndex"]; string pageSize = context.Request.QueryString["pageSize"]; List<Person> list = new List<Person>(); list.Add(new Person() { Id=1,Name="张三",Age=23,Sex=1}); list.Add(new Person() { Id = 2, Name = "斯蒂芬", Age = 23, Sex = 0 }); list.Add(new Person() { Id = 3, Name = "非公党委", Age = 29, Sex = 1 }); var resultList = list.Skip((int.Parse(pageIndex) - 1) * int.Parse(pageSize)).Take(int.Parse(pageSize)).ToList(); context.Response.ContentType = "text/plain"; context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { Total = list.Count, Data = resultList })); } public bool IsReusable { get { return false; } } public class Person { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } public int Sex { get; set; } } } }