vue+h-ui+layUI完成列表页及编辑页
Posted zhuyapeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+h-ui+layUI完成列表页及编辑页相关的知识，希望对你有一定的参考价值。
最近做一个新项目，用H-ui做后台，
比较喜欢他的模仿bootsharp的栅格和表单样式。
感觉不好的是iframe加载速度比较慢。
这里在原有的H-ui页面基础上加入用vue来绑数据，用的还可以。
用layui分页控件来绑分页加载，用layer作为弹窗显示
以后改造为用x-admin的首页，加H-ui的编辑和列表也，这样就解决了iframe加载比较慢的问题
列表页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/style.css" />
</head>
<body>
<style> [v-cloak] display: none; </style> <nav class="breadcrumb"> <i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 管理 <span class="c-gray en">></span> Banner列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"> <i class="Hui-iconfont"></i> </a> </nav> <div class="page-container" id="app"> <div class="text-c"> <input type="text" name="" id="" v-model="search" placeholder=" Banner名称" style="width:250px" class="input-text"> <button v-on:click="find" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 搜Banner名称</button> </div> <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <a class="btn btn-primary radius" href="javascript:;" v-on:click="add(‘添加Banner‘,‘/Admin/News/BannerEdit?id=0‘)"> <i class="Hui-iconfont"></i> 添加Banner </a> </span> <span class="r">共有数据：<strong>total</strong> 条</span> </div> <div class="mt-20"> <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive"> <thead> <tr class="text-c"> <th width="80">ID</th> <th>Banner名称</th> <th>图片</th> <th>跳转类型</th> <th width="80">排序</th> <th width="120">操作</th> </tr> </thead> <tbody> <tr class="text-c" v-for="(item, index) in list" v-bind:key="item.Id"> <td v-cloak>++index</td> <td v-cloak>item.Title</td> <td v-cloak><a href="javascript:;"><img style="width:40px;height:40px" class="picture-thumb" v-bind:src="item.Img" v-on:click="showPhotos(item.Img)"></a></td> <td v-cloak>item.Type|typeStr</td> <td v-cloak>item.Sort</td> <td v-cloak class="f-14 td-manage"> <a style="text-decoration:none" class="ml-5" v-on:click="add(‘Banner编辑‘, ‘/Admin/News/BannerEdit?id=‘+item.Id)" href="javascript:;" title="编辑"> <i class="Hui-iconfont"></i> </a> <a style="text-decoration:none" class="ml-5" v-on:click="del(item.Id)" href="javascript:;" title="删除"> <i class="Hui-iconfont"></i> </a> </td> </tr> </tbody> </table> </div> <div id="laypage"></div> </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Content/layer/layer.js"></script> <script type="text/javascript" src="~/Content/static/h-ui/js/H-ui.min.js"></script> <script type="text/javascript" src="~/Content/static/h-ui.admin/js/H-ui.admin.js"></script> <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/layui/layui.js"></script> <script src="~/Content/vue/vue2.6.js"></script> <script src="~/Content/vue/axios.js"></script> <script type="text/javascript"> var vm = new Vue( el: ‘#app‘, data: list: [], total: 0, pageIndex: 1, pageSize: 10, search: ‘‘, , methods: loadList: function () var index = layer.load(0, shade: false ); var data = pageIndex: this.pageIndex, pageSize: this.pageSize, search: this.search ; axios.post(‘/A/N/GetB‘, data) .then(result => this.list = result.data.Data; this.total = result.data.Total; if (this.pageIndex == 1) this.loadPage(); layer.close(index); ); , loadPage: function () layui.use([‘laypage‘], function () var laypage = layui.laypage; laypage.render( elem: ‘laypage‘, count: vm.total, //数据量 limit: vm.pageSize,//每页限制s jump: function (obj, first) if (!first) vm.pageIndex = obj.curr; vm.loadList(); ); ); , find: function () this.loadList(); , add: function (title, url, w, h) console.log(url) var index = layer.open( type: 2, title: title, content: url ); layer.full(index); , del: function (id) layer.confirm(‘确认要删除吗？‘, function (index) axios.post(‘/A/N/BDel‘, id: id ) .then(result => if (result.data.ResultCode == 1000) layer.msg(‘已删除!‘, icon: 1, time: 1000 ); vm.loadList(); ); ); , showPhotos: function (img) var json = "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号，默认0 "data": [ //相册包含的图片，数组格式 "alt": "图片", "pid": 666, //图片id "src": img, //原图地址 "thumb": img //缩略图地址 ] ; layer.photos( shade: 0.2, maxWidth: 600, //maxHeight :500, area: ‘auto‘,// [‘600px‘, ‘450px‘], photos: json, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数） ); , created: function () this.loadList(); , filters: typeStr: function (value) var show = "图片"; switch (value) case 0: show = "图片"; break; case 1: show = "资讯"; break; case 2: show = "外链"; break; default: return show; , ) </script>
</body>
</html>
编辑页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="./H-ui.admin/static/h-ui.admin/css/style.css" />
</head>
<body>
<style> .hide display:none; .pic_list display: flex; justify-content: flex-start; .pic_list li width: 80px; height: 80px; background: #F2F2F2; display: flex; justify-content: space-around; flex-direction: column; align-items: center; cursor: pointer; color: #ADADAD; position: relative; .pic position: absolute; top: 0; left: 0; width: 100%; height: 100%; </style> <article class="page-container" id="app"> <form class="form form-horizontal" id="form"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>B名称：</label> <div class="formControls col-xs-4 col-sm-4"> <input type="text" class="input-text" placeholder="" v-model="title" maxlength="50"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>Banner图：</label> <div class="formControls col-xs-8 col-sm-9"> <ul class="pic_list"> <li onclick="upload(this)"> 上传图片 <img id="shareImg" v-bind:src="img" class="pic" v-bind:class="hide:img==‘‘"> </li> </ul> <input type="file" accept="image/*" onchange="uploadImg(this)"style="display: none"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类型：</label> <div class="formControls col-xs-3 col-sm-3"> <span class="select-box"> <select v-model="type" class="select"> <option value="0">图片</option> <option value="1">资讯</option> <option value="2">外链</option> </select> </span> </div> </div> <div v-show="type==2" class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>外链Url：</label> <div class="formControls col-xs-6 col-sm-6"> <input type="text" class="input-text" placeholder="" v-model="url" maxlength="250"> </div> </div> <div v-show="type==1" class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>选择资讯：</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" class="input-text col-xs-6" placeholder="选择资讯" id="consultaionTitle" v-model="consultaionTitle" style="width:40%" readonly> <input type="hidden" id="consultaionId" v-model="consultaionId" /> <button type="button" class="btn btn-default btn-uploadstar radius ml-10" v-on:click="choiceNews">选择资讯</button> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>排序值：</label> <div class="formControls col-xs-4 col-sm-4"> <input type="text" class="input-text" placeholder="" v-model="sort"> </div> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2"> <button v-on:click="save" class="btn btn-success radius" type="button"> <i class="Hui-iconfont"></i> 保 存 </button> </div> </div> </form> </article> <script src="~/Scripts/jquery.js"></script> <script src="~/Content/layer/layer.js"></script> <script src="~/Content/vue/vue.js"></script> <script src="~/Content/vue/axios.js"></script> <script> var vm = new Vue( el: ‘#app‘, data: id: 0, title: "", sort: 0, type: 0, consultaionId: 0, consultaionTitle:"", url: "", img: "", repeatSubmit: 0 , methods: getBanner: function () this.id = this.getQueryString("id"); if (this.id > 0) //获取数据 var data = id: this.id ; axios.post(‘/A/N/GetBById‘, data) .then(result => this.title = result.data.Data.Title; this.sort = result.data.Data.Sort; this.type = result.data.Data.Type; this.consultaionId = result.data.Data.CId; this.url = result.data.Data.Url; this.consultaionTitle = result.data.Data.CTitle; this.img = result.data.Data.Img; ); , save: function () if (this.repeatSubmit == 1) return; if (this.title.trim() === "") layer.msg("名称不能为空！", icon: 7, time: 2000 ); return; if (this.img.trim() === "") layer.msg("请上传Banner图片！", icon: 7, time: 2000 ); return; if (this.type == 1 && this.consultaionId===0) layer.msg("请选择资讯！", icon: 7, time: 2000 ); return; if (this.type == 2 && this.url === "") layer.msg("外链不能为空！", icon: 7, time: 2000 ); return; if (this.sort === "") layer.msg(‘排序不能为空‘, icon: 7, time: 2000 ); return; var reg = /^\d+$/; if (!reg.test(this.sort)) layer.msg(‘排序只能为数字‘, icon: 7, time: 2000 ); return; this.repeatSubmit = 1; var index = layer.load(0, shade: false ); //0代表加载的风格，支持0-2 var data = Id: this.id, Title: this.title, Sort: this.sort, Type: this.type, ConsultaionId: this.consultaionId, Url: this.url, Img: this.img ; axios.post(‘/A/N/BSubmit‘, data) .then(result => if (result.data.ResultCode == 1000) layer.msg(result.data.Message, icon: 1, time: 1000 , function () var indexF = parent.layer.getFrameIndex(window.name); window.parent.location.reload(); parent.layer.close(indexF); ); else vm.repeatSubmit = 0; layer.msg(result.data.Message, icon: 1, time: 1000 ); layer.close(index); ); , //选择资讯 choiceNews: function () layer.open( title:‘选择资讯‘, type: 2, area: [‘850px‘, ‘600px‘], fixed: false, //不固定 maxmin: true, content: ‘/A/N/ChoiceC‘ ); , getQueryString: function (name) var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; , created: function () this.getBanner(); , ) //分享图片上传 function upload(dom) $(dom).parent().next().click(); //上传图片 function uploadImg(self) var file = self.files[0]; if (file == undefined || file == "") layer.open( content: ‘请选择上传的图片‘ , skin: ‘msg‘ , time: 2 //2秒后自动关闭 ); return; var filename = file.name.substring(file.name.lastIndexOf(‘.‘) + 1).toLowerCase();//获取上传文件的类型 if (filename != "jpg" && filename != "png" && filename != "jpeg") layer.open( content: "只能上传JPG/PNG/JPEG格式的图片,您上传的格式为：" + filename , skin: ‘msg‘ , time: 2000 //2秒后自动关闭 ); return; if (file.size > 1024 * 1024 * 5) layer.open( content: ‘上传的图片不能超过5MB‘ , skin: ‘msg‘ , time: 2000 //2秒后自动关闭 ); return; var form = new FormData(); form.append(‘upfile‘, file); form.append(‘type‘, filename); $.ajax( url: ‘/Home/UpLoadImg‘, type: ‘POST‘, data: form, async: true, cache: false, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType ).done(function (data) layer.msg(data.Message, icon: 1 ); if (data.ResultCode === 1000) vm.img = data.Data; ).fail(function () layer.msg(‘图片错误，请重新选择！‘, icon: 7 ); ); </script>
</body>
</html>
以上是关于vue+h-ui+layUI完成列表页及编辑页的主要内容，如果未能解决你的问题，请参考以下文章
基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持