优点：

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. hive的数据压缩

    hive的数据压缩 在实际工作当中,hive当中处理的数据,一般都需要经过压缩,前期我们在学习hadoop的时候,已经配置过hadoop的压缩,我们这里的hive也是一样的可以使用压缩来节省我们的MR ...

  2. error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.【转载】

    文章出处https://blog.csdn.net/qq_38721302/article/details/82850292 今天编写C++程序在使用头文件#include<cstring> ...

  3. Spark 调优之ShuffleManager、Shuffle

    Shuffle 概述 影响Spark性能的大BOSS就是shuffle,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作. 因此,如果要让作业的性能更上一层楼,就有必要对 shuffle 过 ...

  4. PAT_A1043#Is It a Binary Search Tree

    Source: PAT A1043 Is It a Binary Search Tree (25 分) Description: A Binary Search Tree (BST) is recur ...

  5. Jsoup 学习笔记

    这里写自定义目录标题 Jsoup 学习笔记 解析 HTML 的字符串解析 URL 解析 本地文件解析 解析数据 DOM 解析 使用选择器解析 选择器概述 选择器组合用法 过滤用法 修改数据 HTML ...

  6. windows下装LINUX后，进不了系统

    在网上找了一款叫"DisckGenius"的软件,运行后选“硬盘”/“重建主引导记录(MBR)”,然后重启,就正常了. 还有系统盘最好是FAT32格式的.

  7. Bootstrap3的响应式缩略图幻灯轮播效果设计

    在线演示1 本地下载 HTML <div class="container">  <div class="col-md-12">  &l ...

  8. spring boot thymeleaf简单示例

    说实话,用起来很难受,但是人家官方推荐,咱得学 如果打成jar,这个就合适了,jsp需要容器支持 引入依赖 <dependency> <groupId>org.springfr ...

  9. Python从入门到精通视频（全60集）✍✍✍

    Python从入门到精通视频(全60集)  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看 ...

  10. 网页添加Live2D看板娘

    看板娘简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想放一个呆萌的看板娘在博客上 js <script type="text/j ...