优点：

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. 限时免费 GoodSync 10 同步工具【转】

    一款不错的软件,正在开发本身的云盘,要是能够云执行任务就更好了! GoodSync 10是一种简单和可靠的文件备份和文件同步软件.它会自动分析.同步,并备份您的电子邮件.珍贵的家庭照片.联系人,.MP ...

  2. NOIp2018集训test-9-21(am/pm)

    Am DAY1 抄代码 送分题 //Achen #include<bits/stdc++.h> #define For(i,a,b) for(int i=(a);i<=(b);i++ ...

  3. NX二次开发-算法篇-判断找到两个数组里不相同的对象

    NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> #include < ...

  4. Linux命令(2)：cat

    cat命令是一个文本连接和查看的命令,用于文件的输出显示. 三大功能 一次显示整个文件. $ cat filename 从键盘创建一个文件.只能创建新文件,不能编辑已有文件. $ cat > f ...

  5. [NOI.AC] palindrome

    思路: \(50pts\) \(f[l,r]\)表示区间\([l,r]\)能够变成多少个串,转移枚举\(l\),利用\(hash\)判字符串相等. 复杂度\(O(Tn^3)\) \(70pts\) 考 ...

  6. Python 爬虫-爬取京东手机页面的图片

    具体代码如下: __author__ = 'Fred Zhao' import requests from bs4 import BeautifulSoup import os from urllib ...

  7. 漏洞验证系列--MongoDB未授权访问

    本系列文章旨在对于有一定网络安全基础的人员,在日常工作中扫描出来的各种漏洞,如何进行验证,以区分该漏洞是否存在或是扫描器误报.请勿应用非法途径. 本漏洞是由于MongoDB未设置访问权限,用户可以直接 ...

  8. Docker学习のDocker和虚拟机

    最初听到Docker,是作为虚拟机来宣传的,但是它本质不是虚拟机 一.虚拟机 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. ...

  9. 将sparkStreaming的结果保存到S3

    将spark解析的结果保存到S3 这个和保存到本地的区别在于,你需要配置aws的key和密码,以及它的region,代码如下 package com.alo7.spark import java.ut ...

  10. more指令和less指令使用的区别

    more和less都是可以一页一页的翻动 more翻页的时候,显示有百分比在最下一行 less没有 more可以用来查询 空白键 (space):代表向下翻一页:Enter :代表向下翻『一行』:/字 ...