优点：

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; }

        }

    }

}

　　

vue+layui制作列表页的更多相关文章

  1. vue+h-ui+layUI完成列表页及编辑页

    最近做一个新项目,用H-ui做后台, 比较喜欢他的模仿bootsharp的栅格和表单样式. 感觉不好的是iframe加载速度比较慢. 这里在原有的H-ui页面基础上加入用vue来绑数据,用的还可以. ...

  2. vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  3. vue keep-alive从列表页进入详情页，再返回列表页时，还是之前滚动的位置

    //router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...

  4. Vue+koa2开发一款全栈小程序(8.图书列表页）

    1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...

  5. 在vue中无论使用router-link 还是 @click事件，发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  6. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

  7. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  8. Flutter实战视频-移动电商-35.列表页_上拉加载更多制作

    35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...

  9. vue 详情跳转至列表页 实现列表页缓存

    甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...

随机推荐

  1. 利用Delphi全面控制Windows任务栏

    使用Windows95/NT/98操作系统的用户知道:Windows正常启动后,在电脑屏幕下方出现一块 任务栏.从系统功能角度而言,整个任务栏包括几个不同的子区域,从左至右依次是:开始 按钮.应用程序 ...

  2. 获取从天气预报接口返回回来的json数据

    搬迁到了我的新博客中 ==> http://www.suanliutudousi.com/2017/08/26/%E8%8E%B7%E5%8F%96%E4%BB%8E%E5%A4%A9%E6%B ...

  3. Python+Django+ansible playbook自动化运维项目实战✍✍✍

    Python+Django+ansible playbook自动化运维项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受 ...

  4. 2018-8-10-WPF-使用-Direct2D1-画图-绘制基本图形

    title author date CreateTime categories WPF 使用 Direct2D1 画图 绘制基本图形 lindexi 2018-08-10 19:16:53 +0800 ...

  5. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  6. iOS_iPhone App自动化测试

    无线客户端的发展很快,特别针对是android和ios两款无线操作系统的客户端应用,相应的测试工具也应运而生,这里主要给大家介绍一些针对 iPhone App的自动化测试工具.          首先 ...

  7. Elasticsearch.net一些开发笔记

    .net下开发es半年多了,留下些笔记 //https://www.elastic.co/guide/cn/elasticsearch/guide/current/combining-filters. ...

  8. jquery无缝向上滚动实现代

    <!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...

  9. webgoat的构建

    如何打开webgoat 1.ctrl+r  打开命令 2.cmd 打开命令编辑器 3.我的webgoat保存在E:/安全软件/webgoat-container-7.0.1-war-exec下 4.在 ...

  10. 数据库MySQL--基础查询

    1.查询字段 查询表某字段:select 字段名 from 表名: 查询表内所有字段:select * from 表名: (当字段和关键字重名是用( ` )着重号区分 ) 2.查询常量值 select ...