> 正是由于使用了前后端分离的模式进行开发,layui的模板引擎就成了我们渲染数据的好帮手。 > 比如我们要完成对某个管理员的信息修改 html部分: ~~~ <form class="layui-form" id="admin_edit" lay-filter="admin_edit"> <div class="tplay-body"> <div class="layui-row layui-col-space15"> <script id="editAdmin" type="text/html"> <div class="layui-col-md6"> <div class="layui-card-header">账户信息</div> <div class="layui-card-body layui-row layui-col-space10"> <div class="layui-col-md12"> <input type="text" placeholder="用户名" autocomplete="off" class="layui-input" value="{{ d.data.admin.username }}" disabled> <input type="hidden" name="id" value="{{ d.data.admin.id }}"> </div> </div> <div class="layui-form" lay-filter="component-form-element"> <div class="layui-card-header">基本资料</div> <div class="layui-card-body layui-row layui-col-space10"> <div class="layui-col-md6"> <input type="text" required name="nickname" placeholder="昵称" autocomplete="off" class="layui-input" value="{{ d.data.admin.nickname }}"> </div> <div class="layui-col-md6"> <input type="text" name="phone" required placeholder="手机号" autocomplete="off" class="layui-input" value="{{ d.data.admin.phone }}"> </div> </div> </div> <div class="layui-form" lay-filter="component-form-element"> <div class="layui-card-header">性别</div> <div class="layui-card-body layui-row layui-col-space10"> <div class="layui-col-md12"> <input type="radio" name="sex" value="1" title="男" {{# if(d.data.admin.sex == 1){ }}checked{{# } }}> <input type="radio" name="sex" value="0" title="女" {{# if(d.data.admin.sex == 0){ }}checked{{# } }}> </div> </div> </div> </div> <div class="layui-col-md6"> <div class="layui-card-header">备注</div> <div class="layui-card-body layui-row layui-col-space10"> <div class="layui-col-md12"> <textarea name="desc" placeholder="请输入" class="layui-textarea">{{ d.data.admin.desc }}</textarea> </div> </div> <div class="layui-card-header">权限管理</div> <div class="layui-card-body"> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">权限分组:</label> <div class="layui-form layui-input-block"> {{# for(var i = 0;i< d.data.group.length;i++){ }} <input type="checkbox" name="group_id[]" title="{{ d.data.group[i].title }}" value="{{ d.data.group[i].id }}" {{# for(var s = 0;s< d.data.admin_group.length;s++){ }}{{# if(d.data.group[i].id == d.data.admin_group[s].group_id){ }}checked{{# } }}{{# } }}> {{# } }} </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </div> </div> </script> <div id="edit_view"></div> </div> </div> </form> ~~~ js部分: ~~~ <script type="text/javascript"> layui.use(['form','laytpl','tplay','route','apiconfig'], function(){ var $ = layui.$ ,laytpl = layui.laytpl //模板引擎模块 ,form = layui.form //表单模块 ,tplay = layui.tplay //tplay扩展 ,route = layui.route //路由扩展 ,config = layui.apiconfig; //config模块 tplay.ajax({ //首先ajax请求后端接口拿到该管理员的数据 url:config.domain+"/admin/admin/edit", type:'get', data:{id:route.params().id},//带上这个管理员的id async:false,success:function(res){ //一定要是同步请求 if(res.code == 1){ var editTpl = $('#editAdmin').html() //得到id="editAdmin"的script标签里的html内容 ,view = document.getElementById('edit_view'); //事先准备好的一个div容器<div id="edit_view"></div> laytpl(editTpl).render(res, function(html){ view.innerHTML = html;//完成渲染 }); } else { layer.msg(res.msg); } } }); form.render(null, 'admin_edit');//重载表单,这个很重要,不然有一些表单结构是不显示的,比如单项选择 form.on('submit(component-form-element)', function(data){ //提交表单 tplay.ajax({ url:config.domain+"/admin/admin/edit", type:"post", data:$('#admin_edit').serialize(), success:function(res){ layer.msg(res.msg); if(res.code == 1){ tplay.goBack(1000); } } }) return false; }); }); </script> ~~~ > 以上就是完整的管理员修改模板的html+js部分,这些同样是layui的使用,不懂的参考[layui开发文档](http://www.layui.com/doc/) > 值得注意的是:这个页面上任何id或者class或者接口名字等等都不能与那一对script标签的id一样,否则会有大麻烦,这是作者亲自踩的layui的坑。