优点：

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. kafka的消息组件

    kafka的组件的介绍 produer:消息的生产者,往topic当中生产消息 consumer:消息的消费者,从topic当中消费消息 broker:kafka的服务器 zookeeper:kafk ...

  2. NX二次开发-UFUN点构造器UF_UI_point_construct

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //点构造器 char sCue[] = "点构造器" ...

  3. NX二次开发-创建功能区工具栏UF_UI_create_ribbon

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  4. LeetCode 1019. Next Greater Node In Linked List (链表中的下一个更大节点)

    题目标签:Linked List, Stack 题目给了我们一个 Linked List,让我们找出对于每一个数字,它的下一个更大的数字. 首先把 Linked List 里的数字 存入 ArrayL ...

  5. HDU1595-find the longest of the shortest-dijkstra+记录路径

    Marica is very angry with Mirko because he found a new girlfriend and she seeks revenge.Since she do ...

  6. Spark 调优之数据倾斜

    什么是数据倾斜? Spark 的计算抽象如下 数据倾斜指的是:并行处理的数据集中,某一部分(如 Spark 或 Kafka 的一个 Partition)的数据显著多于其它部分,从而使得该部分的处理速度 ...

  7. Git及github使用（一）客户端与本地关联

    一.下载安装git客户端 1.官网下载地址:https://git-scm.com/ 2.选择自己相应的系统进行下载即可(windows一路默认安装) 二.配置git 1.在github上注册自己的账 ...

  8. 剑指offer——31序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树   二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先 ...

  9. 1-MySQL高级-视图

    视图 1. 问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定义 ...

  10. 随笔-ansible-2

    通过Ansible来搭建一套Web服务架构.[以AD-HOC的形式] Inventory文件内容如下: [proxy] 192.168.40.254 [app] 192.168.40.243 [nos ...