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应该 ...
随机推荐
- NX二次开发-UF_MODL_intersect_objects获取两个对象的交点
NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> #include < ...
- Nt函数原型
NTSTATUS NTAPI NtAcceptConnectPort( OUT PHANDLE PortHandle, IN PVOID PortIdentifier, IN PPORT_MESSAG ...
- linux网络速率监控
#!/bin/bash #作者:fafu_li #时间: #监控网卡传输速率 source /etc/profile #加载系统环境变量 source $HOME/.bash_profile #加载用 ...
- Spring源码由浅入深系列五 GetBean
获取bean的过程如上图所示.下一章将继续图示讲解createBean的过程.
- Python3 From Zero——{最初的意识：007～函数}
一.编写可接受任意数量参数的函数:*.** >>> def test(x, *args, y, **kwargs): ... pass ... >>> test(1 ...
- mobile开发技巧
1.隐藏地址栏 很多文档介绍通过调用 window.scrollTo(0, 1); 就可以隐藏地址栏,但是通过实践发现隐藏地址栏还是真够坑爹的啊,只调用这一句话一般不会起作用,我们需要 functio ...
- 11-MySQL-Ubuntu-数据表中数据的删除(四)
数据的删除(delete) (1)物理删除(不可逆,公司不会采取这种方法,如现在一般不会出现注销,数据具有无限价值) 删除整张表的数据!!! delete from 表名; 删除部分给定条件的数据: ...
- 【POJ】3259 Wormholes
题目链接:http://poj.org/problem?id=3259 题意:n个农场,m条双向路径,w条单向路径(虫洞).单向虫洞路径是负值.农夫想知道自己能不能看到自己(X). 题解:其实刚开始没 ...
- css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条
搬运自:https://www.cnblogs.com/wangyuanyuanlovexuanxuan/p/7767767.html html: <style> .div1{ width ...
- 将数据写到kafka的topic
package test05 import java.util.Propertiesimport org.apache.kafka.clients.producer.{KafkaProducer, P ...