Layui 使用
<i class="layui-icon layui-icon-face-smile"></i>
<div>你可以去定义它的颜色或者大小,如: <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
定义图标的大小与颜色
格式:class = "layui-icon-...."
按钮
格式:class="layui-btn"
<div class="layui-btn-container"><button type="button" class="layui-btn">默认按钮</button><button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button><button type="button" class="layui-btn layui-bg-orange">橙色按钮</button><button type="button" class="layui-btn layui-bg-red">红色按钮</button><button type="button" class="layui-btn layui-bg-purple">紫色按钮</button><button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button> </div><div class="layui-btn-container"><button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button><button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button><button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button><button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button><button class="layui-btn layui-btn-primary layui-border-purple">紫色按钮</button><button class="layui-btn layui-btn-primary layui-border">普通按钮</button> </div>
layui-btn-container 表示独占一行
按钮混搭
<div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button><a href="/" class="layui-btn" target="_blank">跳转的按钮</a><button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-delete"></i> 删除</button><button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon layui-icon-share"></i> 分享</button> </div>
class="layui-btn-... layui-btn..."
动画
class="layui-anim"
基础类,在后面追加其他不同的动画类,即可让元素产生动画。
表单
通过
class="layui-form"
定义表单,通常设置在<form>
标签上, 或普通<div>
标签通过
class="layui-form-item"
定义一个块级元素的表单项容器通过
class="layui-form-label"
定义标签通过
class="layui-input-block"
定义表单项父容器为块级元素通过
class="layui-input-inline"
或class="layui-inline"
定义表单项父容器为行内块元素
layuimini修改
多模块
左侧是顶部的具体页面,如果关闭,就会只剩左侧折叠
菜单显示
在api的init.json中管理(添加删除)
图标
找fa-....开头的
Font Awesome Web 应用图标 | 菜鸟教程
页面管理配置
修改路径
显示页面效果
新增
用child包裹新增
注意:整体框架不要用{}
编写数据
(1)在api下创建 .json 根据需要编写数据
(2)找到数据所对应的页面,修改页面的url
(3)若修改数据类型,在页面中找到表格
在script的table.rander下
注意:所有的引入类型,需要修改其路径
(4)在init.json的页面下配置html路径href,才能显示出来
页面转跳
从查询用户界面点添加用户,就会转跳到添加界面,在<script>的点击事件中
修改content的值
加红星的步骤
(1)找到css/public.css
.layuimini-form > .layui-form-item > .required:after {content: '*';color: red;position: absolute;margin-left: 4px;font-weight: bold;line-height: 1.8em;top: 6px;right: 5px; }
(2)将layuimini-form放在form表单
(3)在需要加星号的标签加入required
图表修改
饼图,柱状图,折线图都在option里修改
若从后端调取数据,data:[]是空,往里面赋值
在idea创建项目
修改url
1.在controller包下创建Servlet
String method = request.getParameter("method");if("queryUser".equals(method)){queryUser(request, response);}else {System.out.println("请求与后台不匹配");}
2.
request 能获取前台所有请求信息
response 把内容响应给浏览器
功能实现步骤:
1.在jsp
content
2.在userservlet.java
(1)在get方法中声明实现逻辑
(2)声明方法
3.在UserServiceImpl中声明delUser接口
4.在DAO层编写SQL语句