![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：总体来说写的非常不错，继续加油！
Collection
Collection
https://www.layui.com/ 首页点击”立刻下载”按钮, 下载layui的代码文件./public 目录中. 一般来说, 按照下图安排项目的前端文件.
layui/css/layui.css , layui/layui.js
<!-- 记得把路径改成自己项目中实际存放的路径 --><link rel="stylesheet" href="/static/plugin/layui/css/layui.css"><script src="/static/plugin/layui/layui.js"></script>
<body><!-- layui的表单结构 --><!-- 1. 最外层要有一个拥有"layui-form"样式类的容器, 元素用form, div...都可以 --><form class="layui-form"><!-- 2. 每个表单项要放在一个"layui-form-item"子容器中 --><div class="layui-form-item"><!-- 3. label部分要拥有"layui-form-label"样式类 --><label for="username" class="layui-form-label">用户名:</label><!-- 4. 表单控件要放在"layui-input-inline"(可自定义宽度)或"layui-input-block"(占满label剩余的行空间)容器中--><div class="layui-input-block"><!-- 5.表单控件要有"layui-input", 或"layui-textarea"等样式类 --><input type="text" name="username" id="username" class="layui-input"></div></div><!-- 第二个表单项, 放在另一个layui-form-item中... --><!-- 若按钮想跟表单控件对齐, 则放入"layui-input-block"容器中 --><div class="layui-form-item"><!-- 按钮跟表单控件对齐 --><div class="layui-input-block"><button type="button">提交</button></div></div></form></body>
layui-input 样式, 就能渲染layui样式的文本框.layui-textarea 样式, 就能渲染layui样式的文本域.
<!-- HTML --><input type="text" name="username" id="username" class="layui-input">
select控件加入 layui-input 样式.
js代码初始化layui的 form 对象.
使用js代码修改select的属性或值后, 要调用 form.render(selector) 方法来重新渲染修改结果. 如果不给 render 方法传参(即: form.render() ), 则将重新渲染整个表单.
<div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><!-- select控件 --><!-- lay-verify="required"表示必填项 --><select name="city" lay-verify="required"><option value=""></option><option value="0">北京</option><!-- disabled属性表示这个选项不可选 --><option value="1" disabled>上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select></div></div><script>//初始化form对象.layui.use('form', function() {/* var form表示变量form为局部变量, 只能在当前回调中使用 */var form = layui.form;/* 不写var, 则表示变量form1为全局变量, 可以在当前HTML中的其他js代码中使用 */form1 = layui.form;});</script>
type="checkbox" 就能出现layui默认样式的复选框, 默认样式的复选框比较大.input:checkbox 控件加上属性赋值: lay-skin="primary" , 就能渲染经典样式的复选框.为 input:checkbox 控件加上 title="checkbox文本" , 就能设置复选框的label部分文本.
把 lay-skin 属性赋值为 switch , 就能渲染开关样式.
lay-text 属性设置开关的开/关时显示的文本. 如: lay-text="开启|关闭" 无论是复选框, 还是开关
checked 属性设定为默认选中/开启.disabled 属性设定为复选框不可用/禁用开关value="自定义值" , 可自定义选中/开启时的返回值, 否则返回默认值”ON”.$('#status').prop('checked') ? true : false, . 注意, 不能用 attr('checked') , 否则会出现只前两次点击有效, 第三次开始点击无效的bug.$('#status').prop('checked', true) ; 取消选中/关闭: $('#status').prop('checked', false)
<div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block">默认风格：<input type="checkbox" name="" title="写作" checked><input type="checkbox" name="" title="发呆"><input type="checkbox" name="" title="禁用" disabled>原始风格：<input type="checkbox" name="" title="写作" lay-skin="primary" checked><input type="checkbox" name="" title="发呆" lay-skin="primary"><input type="checkbox" name="" title="禁用" lay-skin="primary" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="xxx" lay-skin="switch"><input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked><input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"><input type="checkbox" name="aaa" lay-skin="switch" disabled></div></div>
data.status = $('input[name="status"]:checked').val();
<div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="radio" name="sex" value="nan" title="男"><input type="radio" name="sex" value="nv" title="女" checked><input type="radio" name="sex" value="" title="中性" disabled></div></div>
更新渲染
form.render(type, filter); 方法重新渲染这些控件. 其中type值可以是: 1. select(下拉菜单); 2. checkbox(复选框/开关); 3. radio(单选框); 若不传参, 则表示重新渲染所有表单控件.使用layui内置的jQuery, 在js中初始化 $ 对象即可.
<script>layui.use(['form', '$'], function() {/* 初始化form对象 */form = layui.form;// 其他layui内置对象的声明和初始化.../* 初始化$对象为jQuery对象, 注意, 要声明为全局变量, 否则当前回调函数外的地方不能使用$对象 */$ = layui.jquery;});</script>
为layui控件添加事件监听的一般流程
lay-filter(过滤器值) 事件过滤器, 如: lay-filter(filterVal1) ; form.on('event(过滤器值)', 事件处理回调) 来给第1步的控件绑定事件处理逻辑, 如: form.on(submit('filterVal1'), function() {...}) ; 
<select class="layui-input" lay-filter="sel1"><option valie=""></option><option valie="1">first</option><option valie="2">second</option><option valie="3">third</option></select><script>layui.use(['form'], function() {form = layui.form;// 为lay-filter=sel1的下拉菜单添加下拉选择时的处理脚本.form.on('select(sel1)', function(ele) {// 通过ele参数可获取的内容// 下拉菜单console.log(data.elem); //得到select原始DOM对象console.log(data.value); //得到被选中的值console.log(data.othis); //得到美化后的DOM对象// 复选框/开关console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //是否被选中，true或者falseconsole.log(data.value); //复选框/开关value值，也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象// 单选框console.log(data.elem); //得到radio原始DOM对象console.log(data.value); //被点击的radio的value值// 按钮console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。// do something...});});</script>
只需要给table元素加上 layui-table , 就能渲染layui默认风格的表格.
设置其他表格属性, 可以得到layui其他风格的表格
<table class="layui-table"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr></thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody></table>
layui-progress 样式类; layui-progress-bar 样式类, 并用 lay-percent="进度百分比" 属性来指定当前进度的百分比.layui-bg-xxx 来设置当前进度部分的颜色. 如: layui-bg-orange .lay-percent 属性的值也可以是分数. 如: lay-percent="1/3" element 对象.
<div class="layui-progress"><!-- lay-percent指定当前进度 --><div class="layiu-progress-bar" lay-percent="10%"></div></div><script>//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作layui.use('element', function() {var element = layui.element;});</script>
跟bootstrap的栅格系统类似.
行容器加上 layui-row 样式类;
行内列所占的格子用 layui-col-xxxNum 样式类来指定. 其中
xx 可以是: lg : 桌面大型屏幕; md : 桌面中等屏幕; sm : 小屏幕, 如平板; xs : 超小屏幕, 如手机. Num 指定当前列所占的栅格份数, 可以是1-12份. 如: layui-col-md6 .
<div class="layui-row"><div class="layui-col-md6">两等分1</div><div class="layui-col-md6">两等分2</div></div>
layui的弹出层依赖layui的 layer 对象, 需要在 layui.use() 方法的回调入参中声明和初始化.
弹提示的种类:
layer.alert(提示信息, 属性设置对象, 点击确定后的回调[可选]) (提示框), 如: layer.alert("用户名不能为空", {icon: 2}) . 其中:
layer.msg(参数同alert) (提示小标签), 如: layer.alert("保存成功", {icon: 1});
layer.confirm(提示信息, 属性设置对象, 确定回调, 取消回调[可选]) (询问框), 如: layer.conform('确定要删除吗", {icon: 3, title: '提示'}, function() {...}, function() {...}) .