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应该 ...
随机推荐
- hive的数据压缩
hive的数据压缩 在实际工作当中,hive当中处理的数据,一般都需要经过压缩,前期我们在学习hadoop的时候,已经配置过hadoop的压缩,我们这里的hive也是一样的可以使用压缩来节省我们的MR ...
- 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> ...
- Spark 调优之ShuffleManager、Shuffle
Shuffle 概述 影响Spark性能的大BOSS就是shuffle,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作. 因此,如果要让作业的性能更上一层楼,就有必要对 shuffle 过 ...
- 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 ...
- Jsoup 学习笔记
这里写自定义目录标题 Jsoup 学习笔记 解析 HTML 的字符串解析 URL 解析 本地文件解析 解析数据 DOM 解析 使用选择器解析 选择器概述 选择器组合用法 过滤用法 修改数据 HTML ...
- windows下装LINUX后,进不了系统
在网上找了一款叫"DisckGenius"的软件,运行后选“硬盘”/“重建主引导记录(MBR)”,然后重启,就正常了. 还有系统盘最好是FAT32格式的.
- Bootstrap3的响应式缩略图幻灯轮播效果设计
在线演示1 本地下载 HTML <div class="container"> <div class="col-md-12"> &l ...
- spring boot thymeleaf简单示例
说实话,用起来很难受,但是人家官方推荐,咱得学 如果打成jar,这个就合适了,jsp需要容器支持 引入依赖 <dependency> <groupId>org.springfr ...
- Python从入门到精通视频(全60集)✍✍✍
Python从入门到精通视频(全60集) 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看 ...
- 网页添加Live2D看板娘
看板娘简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想放一个呆萌的看板娘在博客上 js <script type="text/j ...