zoukankan      html  css  js  c++  java
  • vue+layui制作列表页

    优点:

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

      

  • 相关阅读:
    Ajax beforeSend和complete 方法
    CLR Via CSharp读书笔记(17):委托
    linux上部署Django项目(Apache+mod_wsgi+django)
    用Apache+mod_wsgi部署python程序 作者:leven | 日期20101129 00:09:37
    VirtualBox桥接网络的简单配置,让虚拟机直接访问网络
    Django and mod_wsgi deploy example
    How to use Django with FastCGI, SCGI, or AJP¶
    Fedora 15 下编译安装apache
    Change Ubuntu Server from DHCP to a Static IP Address
    How to Verify a CentOS Linux Server is 32 Bit or 64 Bit
  • 原文地址:https://www.cnblogs.com/zhuyapeng/p/11010222.html
Copyright © 2011-2022 走看看