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; }
}
}
}
vue+layui制作列表页的更多相关文章
- vue+h-ui+layUI完成列表页及编辑页
最近做一个新项目,用H-ui做后台, 比较喜欢他的模仿bootsharp的栅格和表单样式. 感觉不好的是iframe加载速度比较慢. 这里在原有的H-ui页面基础上加入用vue来绑数据,用的还可以. ...
- vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
- vue keep-alive从列表页进入详情页，再返回列表页时，还是之前滚动的位置
//router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...
- Vue+koa2开发一款全栈小程序(8.图书列表页）
1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...
- 在vue中无论使用router-link 还是 @click事件，发现都没法从列表页点击跳转到内容页去
在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...
- Flutter实战视频-移动电商-31.列表页_列表切换交互制作
31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
- Flutter实战视频-移动电商-35.列表页_上拉加载更多制作
35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...
- vue 详情跳转至列表页 实现列表页缓存
甲爸爸提了一个需求,希望公众号内的商城能够像app一样,从商品详情页跳转至列表页及其他列表页时,可以实现列表页缓存(数据不刷新.位置固定到之前点的商品的位置) 本来想着scrollBehavior应该 ...
随机推荐
- IOI 2005 River （洛谷 3354）
题目描述 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄--名叫 ...
- NX二次开发-UFUN删除工程图UF_DRAW_delete_drawing
NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_part.h> UF_initialize ...
- NX二次开发-查询信息窗口是否打开UF_UI_is_listing_window_open
#include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...
- python从入门到大神---4、python3文件操作最最最最简单实例
python从入门到大神---4.python3文件操作最最最最简单实例 一.总结 一句话总结: python文件操作真的很简单,直接在代码中调用文件操作的函数比如open().read(),无需引包 ...
- 'ddkbuild.cmd' 不是内部或外部命令，也不是可运行的程序
转自VC错误:http://www.vcerror.com/?p=49 问题描述: 错误:'ddkbuild.cmd' 不是内部或外部命令,也不是可运行的程序 解决方法: 详细的解决方法可参考VC错误 ...
- python数据结构之图的实现方法
python数据结构之图的实现方法 本文实例讲述了python数据结构之图的实现方法.分享给大家供大家参考.具体如下: 下面简要的介绍下: 比如有这么一张图: A -> B A ...
- （转）python：Redirection is not supported
Redirection isnot supported. 不支持重定向 解决方法: cmd: 在CMD命令行中,输入 "python" + "空格",即 &qu ...
- 剑指offer——11旋转数组中最小的数字
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...
- selenium+python 绕过登录进行测试
多个Py文件进行多线程测试时,每次登录是很麻烦的事情,所以通过cookie登录,可以绕过登录操作 但是至少需要正常登录一次才能获取到cookie 然后使用cookies进行登录
- 用mybatis时log4j总是不记录sql语句
log4j:WARN No appenders could be found for logger (org.apache.ibatis.logging.LogFactory).log4j:WARN ...