最近做一个新项目，用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="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="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="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>