前端框架LayUI

Bootstrap框架

Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适
用。

• 可以直接使用Bootstrap提供的 CSS 样式表，Bootstrap的源码是采用最流行的CSS预处理工具Less和Sass开发的。可以直接采用预编译的CSS文件快速开发，也可以从Bootstrap源码自定义自己需要的样式。
• 网站和应用能在Bootstrap帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一
  切都是 CSS 媒体查询Media Query的功劳。
• 提供大量的布局容器、栅格系统以及大量的组件，可以快速方便的开发

前后端分离

从项目维护的角度上，传统的开发模式，前端代码和后端代码耦合在一起，导致代码混乱不堪，极大的降低了项目的可维护性，增加了维护成本。从开发角度来看，研发人员在开发过程中，不仅要设计后端架构还要兼顾前端展示，导致开发效率低下，延长开发周期。

传统开发模式的问题

• 开发出的软件响应速度慢，质量差，用户体现差
• 前后端严重耦合，代码混乱，可维护性差
• 研发人员前后端兼顾，开发效率低下，研发周期变长。
  

在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后端仅仅需要提供一套逻辑对外提供数据即可，并且前端与后端的耦合度相对较低，在这种模式中通常将后端开发的每个视图都成为一个接口或者API，前端通过访问接口来对数据进行增删改查。总结就是：后台负责提供数据，前端负责数据展示，职责分离，分工明确。

前后端分离实际上是一个工程化考量和项目管理的问题，非常适合复杂项目的开发，但是开发各个环节的成本都会有明显提升，注意不要为了前后端分离而在开发中采用前后端分离。

由于项目越来越复杂，而前端野生的开发方法，基本上都是copy代码段，人肉试错的方式，根本不可能实现工程化、项目化，这样根本不能适应需求，更不要说长期演进和迭代的目标。前端开发组件化框架解决了这些问题，例如Vue.js、React等相关框架的出现。而且前端可以借助Node开发各种工具以辅助开发，例如包管理器、预编译工具等。

前后端分离的实施

一个最简单的开发步骤也应该有设计、开发、测试和部署4步。前后端分离会渗透每个步骤中的。

• 设计阶段最基本的是系统设计
  • 后端系统设计包括系统架构设计，例如数据库、中间件、缓存这些架构的设计。主要考虑性
    能、容量、可扩展性、可维护性等
  • 前端根据项目规模也需要充分的规划和准备，要满足可长期演进、可迭代的目标
• 设计阶段第二阶段就是接口设计，前后端系统通过接口进行交互。这里模型层面的接口约定就是非常重要的内容，例如请求方式、数据格式、数据类型等。应该进行充分的评审
• 开发阶段时前后端按照事先约定好的接口独立开发。前端可以使用组件化框架实现独立驱动页面开发，数据从mock服务器上获取，完全不需要依赖于实时的后端接口。后端需要按照之前评审好的接口约定来提供数据即可，后端一套接口可以提供给多种不同类型的前端使用。
• 测试阶段前后端独立可测试。前端主要是页面显示、跳转、输入、传递参数、响应数据等测试；后端主要保证数据接口的提供，包括数据格式、校验、异常处理、数据的一致性问题、权限问题等。
• 部署上线阶段应该是前后端项目独立可部署，相互不收对方的约束和影响，互相透明。后端项目可以通过类似Jenkins系统持续发布，一键部署。前端项目有自己的CI系统。

前端框架LayUI

layui兼容人类正在使用的全部浏览器，但是IE6/7除外，可作为Web界面速成开发方案。它更多是面向
后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。

概述LayUI

layui是一套采用自身经典的模块化规范编写的开源Web UI解决方案，并遵循原生 HTML/CSS/JS 的开发与组织方式，门槛极低，拿来即用，非常适合网页界面的快速开发。

layui是由中国人开发的，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，类似Bootstrap相似。该框架极大的好处就是定义了很多前后端交互的样式接口，例如分页表格，只需要在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

官网：https://www.layui.com

官方文档：https://www.layui.com/doc/

layui有免费和授权两种版本。通用型管理系统纯静态 UI 模板https://www.layui.com/layuiadmin/一般
用于企业级应用开发，但是需要收费授权。

可以通过文档或者实例查看帮助文档，推荐使用示例直接指导项目开发

LayUI特点

• layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务器页面上有非常好的效果
• layui是提供给后端开发人员的ui框架，基于DOM驱动

下载与使用

1、在官网首页下载到layui的最新版，目录结构

├─css //css目录
│ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库

2、获得layui后，将其完整地部署拷贝到项目目录中，然后在页面种引入两个文件

<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8">script>

3、按钮点击弹出消息框

<link rel="stylesheet" href="layui/css/layui.css">

<div class="layui-fluid">
<button class="layui-btn" id="btn">按钮button>
div>

<script src="layui/layui.js">script>
<script>
layui.use(['layer'],function(){
var layer = layui.layer; //定义全局变量layer即可调用layui.layer模块中的函数
$=layui.jquery;
$(document).on('click', '#btn', function(){ //在页面种查找id=btn的元素并添加click事件处理
layer.msg('hello');
});
});
script>

通过layui.use方式来声明所使用的模块，加载入口文件并执行指定function()函数。导航依赖layer模
块，否则无法进行功能性操作。注意 $(function(){ }) 先执行； layui.use 后执行，渲染靠后。

布局

固定宽度：两侧有留白。将栅格放入要给class=layui-container特定容器中，以便在小屏幕以上的设备
中固定宽度，让列可控

<div class="layui-container" style="background-color:red; height:300px;">
	<div class="layui-row">
		... ...
	div>
div>

完整宽度：可以不固定容器宽度，将栅格或其它元素放入一个带有class=layui-fluid的容器中，那么宽度将不会固定，而是100%适应

<div class="layui-fluid">
	... ...
div>

栅格系统

为了丰富网页布局，简化html/css代码的耦合，并提升多终端的适配能力，可以采用layui排版应对响应式网站和后台管理系统的界面，layui的栅格采用业界比较常见的12等分规则，内置预设了4*12种css排列类，可用于手机、平板、PC 桌面中大型屏幕的4中不同的终端适配处理，最低能支持到 ie8。

栅格布局队则

采用layui-row定义行

<div class="layui-row">div>

采用类似 layui-col-md* 这样的预设类来定义一组列column，且放在行row内，其中

• 变量md代表的是不同屏幕下的标记
• 变量 * 代表的是该列所占用的12等分，可选值为1-12
• 如果多个列的等分值总和等于12，刚好满行排列。如果大于12，多余的列将自动另起一行，注意是整个列另起新行

列可以同时出现最多4种不同的组合，分别是xs超小屏幕，如手机、sm小屏幕，如平板、md桌面中等屏幕、lg桌面大型屏幕

对列追加类似layui-col-space5、layui-col-md-offset3这样的预设类来定义列的间距和偏移

可以在列column元素放入自己的任意元素填充内容

<div class="layui-row">
	<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
		移动：4/12 | 平板：7/12 | 桌面：8/12
	div>
	<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
		移动：4/12 | 平板：5/12 | 桌面：4/12
	div>
div>

将栅格放入一个带有class="layui-container"的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

可以不固定容器宽度将栅格或其它元素放入一个带有class="layui-fluid"的容器中，那么宽度将不会固
定，而是100%适应

响应式规则

栅格的响应能力得益于CSS3媒体查询的强力支持，从而针对4类不同尺寸的屏幕进行响应的适配处理

	超小屏幕<768px	小屏幕>=768px	中等屏幕>=992px	大屏幕>=1200px
.layui-container的值	auto	750px	970px	1170px
标记	xs	sm	md	lg
列对应类* 为1-12等分数值	layui-col-xs *	layui-col-sm *	layui-col-md *	layui-col-lg *
响应行为	始终按设定的比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

平板和桌面端不同表现

<div class="layui-row">
	<div class="layui-col-sm6 layui-col-md4" style="background-color:red">
		平板6/12，桌面端4/12
	div>
div>

列边距

通过列边距的预设类来设定列之间的艰巨，且以行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证列的宽度精细程度。Layui预设了12种不同尺寸的边距

支持列之间为1px-30px区间的所有双数间隔，以及1px、5px、15px、25px的单数间隔

layui-col-space1、space2、space4、space5、space6、space8、space10、space12、
space14、space15、space16、space18、space20、space22、space24、space25、
space26、space28、space30

样例

<div class="layui-row layui-col-space10">定义其中的每个div都有边距为10px，但是左右两端没有边距，space最大30，如果需要更大的值则只能使用列偏移
	<div class="layui-col-md4">
		<div style="background-color:red;">4div>
	div>
	<div class="layui-col-md4">
		<div style="background-color:green;">4div>
	div>
	<div class="layui-col-md4">
		<div style="background-color:yellow;">4div>
	div>
div>

layui-col-span设置的是padding内边距，所以设置背景色也会添加上颜色，所以看起来好像没有边距一样，可以在里面再加一个div达到显示的目的

列偏移

对列追加类似layui-col-md-offset * 的预设类从而让列向右偏移，其中 * 号代表的是偏移占据的列数，可选值为1-12。例如 layui-col-md-offset3 代表在中型桌面屏幕下，让该列向右偏移3个列宽度

<div class="layui-row">
	<div class="layui-col-md4" style="background-color:red;">
		4/12
	div>
	<div class="layui-col-md4 layui-col-md-offset4" style="backgroundcolor:blue;">
		偏移4列，从而显示在最右边
	div>
div>

列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值时就会堆叠排列

列嵌套

可以对栅格进行无穷层次的嵌套，在列元素layui-col-md中插入行元素layui-row，即可完成嵌套

<div class="layui-row layui-col-space5">
	<div class="layui-col-md5" style="background-color:red;">
		<div class="layui-row">
			<div class="layui-col-md3" style="background-color:blue;">
				内部列1
			div>
			<div class="layui-col-md5" style="background-color:yellow;">
				内部列2
			div>
			<div class="layui-col-md4" style="background-color:green;">
				内部列3
			div>
		div>
	div>
div>

基本元素

按钮

向任意html元素设定class=layui-btn就可以建议一个基础按钮，通过追加格式layui-btn-[type]的class来
定义其它按钮风格

<button class="layui-btn">一个标准的按钮button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮a>
<div class="layui-btn">一个按钮div>

不同主题具有不同的显示颜色layui-btn默认、layui-btn-primary原始、layui-btn-normal百搭灰色、
layui-btn-warm暖色、layui-btn-dangger警告、layui-btn-disabled禁用

不同尺寸按钮具有不同的大小layui-btn默认、layui-btn-lg大型、layui-btn-sm小型、layui-btn-xs迷你

圆角按钮layui-btn-radius

图标按钮

<button class="layui-btn">
<i class="layui-icon">i>添加
button>
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂi>刷新
button>

具体的图标值可以在layui的帮助文档中进行查询

点击动作

<button class="layui-btn layui-btn-warm" id="btn">一个标准的按钮button>
<script>
layui.use(['laydate','jquery'], function() {
var layer = layui.layer,
$=layui.jquery;
$(document).on('click','#btn',function(){
layer.msg('hello');
});
另外写法
$('#btn').click(function(){
alert('点击按钮!')
});
});
script>

使用javascript定义点击事件处理

<button class="layui-btn-normal" onclick="clickme()">layUI按钮button>
<script type="text/javascript">
function clickme(){
alert('点击按钮!');
}
script>

导航

水平导航使用无序表单标签ul，导航菜单用到layui中class=layui-nav，其中layui-this可以选中标签按键

<ul class="layui-nav">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动a>
li>
<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">产
品a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大数据a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">解决方案a>

<dl class="layui-nav-child">
<dt><a href="">方案1a>dt>
<dd><a href="">方案2a>dd>
<dd><a href="">方案3a>dd>
dl>
li>
ul>

垂直导航使用时需要在class中加入layui-nav-tree

<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动a>
li>
<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">产
品a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大数据a>li>
<li class="layui-nav-item"><a href="javascript:void(0);">解决方案a>

<dl class="layui-nav-child">
<dt><a href="">方案1a>dt>
<dd><a href="">方案2a>dd>
<dd><a href="">方案3a>dd>
dl>
li>
ul>

边侧导航还要在class中加上layui-nav-side 设置背景颜色可以通过layui-bg-blue。通过span标签
class="layui-badge "可以附加小标记 ，标记也可以在更改颜色图案等

<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-blue">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活动<span
class="layui-badge " >6span>a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">产品a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大数据a>li>
<li class="layui-nav-item"><a href="http://www.baidu.com">解决方案a>

<dl class="layui-nav-child">
<dt><a href="">方案1a>dt>
<dd><a href="">方案2a>dd>
<dd><a href="">方案3a>dd>
dl>
li>
ul>

选项卡

默认风格只用加layui-tab、简洁风格layui-tab-brief、卡片风格layui-tab-card

<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>默认风格的Tablegend>
fieldset>
<div class="layui-tab" id="demo" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title" >
<li lay-id="1" class="mydemo">网站设置li>
<li lay-id="2" class="mydemo">用户管理li>
<li lay-id="3" class="layui-this mydemo">权限分配li>
<li lay-id="4" class="mydemo">商品管理li>
<li lay-id="5" class="mydemo">订单管理li>
ul>
<div class="layui-tab-content">
<div class="layui-tab-item">
1. 高度默认自适应，也可以随意固宽。<br>2. Tab进行了响应式处理，所以无需担
心数量多少。
div>
<div class="layui-tab-item">内容2div>
<div class="layui-tab-item layui-show" >内容3div>
<div class="layui-tab-item">内容4div>
<div class="layui-tab-item">内容5div>
div>
div>
<div class="layui-btn-group">
<button type="button" class="layui-btn" id="add">添加一个Tabbutton>
<button type="button" class="layui-btn " id="change">切换用户管理
button>
<button type="button" class="layui-btn" id="delete">删除商品管理button>
<button type="button" class="layui-btn" id="deleteAll">删除所有
tabbutton>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>简单风格的Tablegend>
fieldset>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置li>
<li>用户管理li>
<li>权限分配li>
<li>商品管理li>
<li>订单管理li>
ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应，也可以随意固宽。<br>2. Tab进行了响应式处理，所以无需
担心数量多少。
div>
<div class="layui-tab-item">内容2div>
<div class="layui-tab-item">内容3div>
<div class="layui-tab-item">内容4div>
<div class="layui-tab-item">内容5div>
div>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>卡片风格的Tablegend>
fieldset>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">网站设置li>
<li>用户管理li>
<li>权限分配li>
<li>商品管理li>
<li>订单管理li>
ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默认自适应，也可以随意固宽。<br>2. Tab进行了响应式处理，所以无需
担心数量多少。
div>
<div class="layui-tab-item">内容2div>
<div class="layui-tab-item">内容3div>
<div class="layui-tab-item">内容4div>
<div class="layui-tab-item">内容5div>
div>
div>
<script src="resources/layui/layui.js">script>
<script type="text/javascript">
layui.use(['element','jquery'],function(){
var $=layui.jquery;
var element=layui.element;
$("#add").click(function(){
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
});
})
$("#change").click(function(){
element.tabChange('demo', '2');
})
$("#delete").click(function(){
element.tabDelete("demo", "4");
})
$("#deleteAll").click(function(){
var lis=$(".mydemo");
$.each(lis,function(index,item){
var layid=item.getAttribute("lay-id");
element.tabDelete("demo", layid);
});
})
});
script>

表格

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/',
page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', 80, sort: true}">IDth>
<th lay-data="{field:'username', 80}">用户名th>
<th lay-data="{field:'sex', 80, sort: true}">性别th>
<th lay-data="{field:'city'}">城市th>
<th lay-data="{field:'sign'}">签名th>
<th lay-data="{field:'experience', sort: true}">积分th>
<th lay-data="{field:'score', sort: true}">评分th>
<th lay-data="{field:'classify'}">职业th>
<th lay-data="{field:'wealth', sort: true}">财富th>
tr>
thead>
table>

表单

表单

输入框，其中外层div的class为layui-form-item；lable为layui-form-label；内层div的class为layui-input-inline；输入框的class为layui-input；

<div class="layui-form-item">
<label class="layui-form-label">用户名label>
<div class="layui-input-inline">
<input type="text" name="useraName" required lay-verify="required"
placeholder="请输入用户名" class="layui-input"/>
div>
div>

• required必填字段
• lay-verify注册form模块需要验证的类型
• class="layui-input"是layui.css提供的通用 css类

单选框和输入框不同的地方就是单选框的class属性值不同，单选框的class：layui-radio-disbaled

<div class="layui-form-item">
<label class="layui-form-label">性别label>
<div class="layui-input-inline">
<input type="radio" name="sex" class="layui-radio-disbaled"
value="男" title="男" checked="checked" />
<input type="radio" name="sex" class="layui-radio-disbaled"
value="女" title="女" />
div>
div>

• 属性title可自定义文本
• 属性disabled开启禁用
• 属性value="xxx"可自定义值，否则选中时返回的是默认的on

复选框lay-skin=“primary”原始复选框

<div class="layui-form-item">
<label class="layui-form-label">爱好label>
<div class="layui-input-block">
<input type="checkbox" name="exercise" value="运动" title="运动"
checked="checked" lay-skin="primary">
<input type="checkbox" name="music" value="听音乐" title="听音乐">
<input type="checkbox" name="book" value="看书" title="看书">
<input type="checkbox" name="movie" value="看电影" title="看电影">
<input type="checkbox" name="movie" value="旅游" title="旅游"
disabled="disabled">
div>
div>

• title属性可自定义文本。如果只想提示复选框可以不用设置title
• 属性checked可设定默认选中
• 属性lay-skin可设置复选框的风格
• 设置value="1"可自定义值，否则选中时返回的就是默认的on

下拉框

<div class="layui-form-item">
<label class="layui-form-label">班级label>
<div class="layui-input-inline">
<select name="clazz" lay-verify="required">
<option value="">option>
<option value="1班">1班option>
<option value="2班">2班option>
<option value="3班">3班option>
<option value="4班">4班option>
<option value="5班" disabled="disabled">5班option>
select>
div>
div>

• selected属性可设置默认项
• disabled属性开启禁用，select和option标签都支持

文本域

<div class="layui-form-item">
<label class="layui-form-label">留言label>
<div class="layui-input-inline">
<textarea name="leave" placeholder="请输入你的留言" class="layuitextarea" lay-verify="required">textarea>
div>
div>

• class="layui-textarea"是layui.css提供的通用css类

开关按钮

<div class="layui-form-item">
<label class="layui-form-label">开关label>
<div class="layui-input-inline">
<input type="checkbox" checked="checked" name="close" layskin="switch" lay-text="ON|OFF" />
div>
div>

• 属性checked可设定默认开
• 属性disabled开启禁用
• 属性lay-text可自定义开关两种状态的文本
• 设置value="1"可自定义值，否则选中时返回的就是默认的on

提交submit和重置reset设置class=“layui-btn layui-btn-normal”，按钮的样式class较多

<button type="button" class="layui-btn layui-btn-primary">原始按钮button>
<button type="button" class="layui-btn">默认按钮button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮button>

提交和重置按钮

<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit layfilter="formDemo">立即提交button>
<button type="reset" class="layui-btn layui-btn-danger">重置button>
div>
div>

表单的赋值

form.val('first',{'title':'测试','phone':'123456','sex':'男'})

自定义验证规则，这里的title是输入框的lay-verify属性的值

form.verify({
title:function(value){
if(value.length<5)
return '标题太短了!'
},
password:['/^(.+){6,12}$/','密码要求6到12位']
})

弹出层
最简单的弹层，这个弹层的效果其实就是一个加了特效和样式的alert()

layui.use("layer", function () {
var layer = layui.layer;
layer.msg("大家好，这是最简单的弹层"); // 默认样式以灰色为背景，不带icon图标，3秒
之后自动消失。
});

layer提供了5种层类型。可传入的值有：0信息提示框弹出层，默认、1页面层、2iframe层、3加载层、4为tips层

自定义样式以及消失时间，例如con样式是6，关闭时间为2秒：layer.msg('操作成功!', {icon: 6, time: 2000});

页面层弹框对应type为1。该类型无法应用icon图标。content:支持普通文本、html和DOM

layer.open({
type:1,
content:"<h3 style='margin:20px'>我是页面层，content支持普通文本、html、
DOMh3>",
btn:["取消"]
})

使用layer实现弹框登录

layer.open({
type: 2,
title: '用户登录',
maxmin: true,
skin: 'layui-layer-lan',
shadeClose: true, //点击遮罩关闭层
area : ['400px' , '280px'],
content:'login.html'//弹框显示的url,对应的页面
});

日期和时间选择

layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test1'// 由type属性定义选择器类型
});
});

编写数据表格

示例-数据表格-开启合计行
1、新建项目，将下载的layui压缩包的内容拷贝到项目中
2、创建table.html页面，将示例中的代码拷贝到页面中
3、下载样例中对应的json文件，并拷贝到项目中
4、使用HBuilder修改页面显示，使用HBuilder开发的原因是它自带了一个web服务器，可以直接进行开发调试
5、为删除按钮添加对应的操作，可以查看示例-数据表格-数据操作

SpringBoot后台接口

需求为：产品和类别的一对多关联

@Controller
public class MyController{
	@GetMapping("/{url}")
	public String dispatch(@PathVariable("url") String url){
		return url;
	}
}

JsonResult

@Data
public class JsonResult{
private int code;
private String message;
private Object data;
}

Echarts数据可视化显示

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts提供的图表（共9类14种）支持任意混搭：折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、 饼图（环形图）、雷达图、地图、和弦图、力导布局图。

开发流程

需求：统计商品的热销表，查看订单详情表(id, order_id, product_id, quantity, cost)

select p.name, sum(quantity) count from order_item od, product p where od.product_id = p.id group by product_id

封装用于传递数据的值bean

@Data
public class OrderCountData{
	private String name;
	private Integer count;
}

定义Mapper查询

public interface ProductMapper extends SqlMapper<Product,Long>{
	List<OrderCountData> findAll();
}

可以参照官方网站样例，查看对应的代码，拷贝修改即可完成开发

<script src="echarts.min.js"></script>

绘制一个具备高宽的DOM容器，注意这里必须设置宽高

<div id="main" style="width:600px;height:400px">div>

通过echarts.init方法初始化echarts实例，并通过setOption方法生成一个简单的柱状图

<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
title: {
text: '简单柱状图示例'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && myChart.setOption(option);
</script>

这里发现前端所需要的数据和实际返回数据格式不一致，因为xAxis和series中的data都是数组

@Data
public class BarData{
private List<String> names=new ArrayList<>();
private List<Long> values=new ArrayList<>();
}

在业务实现类中将获取的 List 转换为BarData数据类型
在页面中引入jquery.js进行异步请求获取数据

<script src="jquery.js"></script>
<script src="echarts.js"></script>
<script>
$(function(){
$.ajax({
"url":"http://localhost:8080/bar",
"type":"POST",
"success":function(data){
var myChart=echarts.init(document.getElementById('main'));
var option={
xAxis:{
type:'category',
data:data.names
},
yAxis：{
type:'value'
},
series:[{
data:data.values,
type:'bar'
}]
};
myChart.setOption(option);
}
});
});
</script>

后台管理界面

首先在示例-布局-框架中找到一个简单界面样式，拷贝代码再到HBuilder中进行修改

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<title>管理系统布局title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="jquery.js">script>
<script>
function change(str){
$('#show').attr('src',str+'.html');
}
script>
head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layout demodiv>

<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台a>li>
<li class="layui-nav-item"><a href="">商品管理a>li>
<li class="layui-nav-item"><a href="">用户管理a>li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统a>
<dl class="layui-nav-child">
<dd><a href="">menu 11a>dd>
<dd><a href="">menu 22a>dd>
<dd><a href="">menu 33a>dd>
dl>
li>
ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="cweg.jpg" class="layui-nav-img">登录用户
a>
<dl class="layui-nav-child">
<dd><a href="">set 1a>dd>
<dd><a href="">set 2a>dd>
dl>
li>
<li class="layui-nav-item"><a href="">退出系统a>li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">layui-nav-itemed表示默认选
中第一个
<a href="javascript:;">商品管理a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="javascript:;"
onclick="change('table')">商品查询a>dd> 这里的layui-this当前选中样式显示
dl>
li>
<li class="layui-nav-item">
<a href="javascript:;">数据分析a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" onchange="change('re')">商品热销榜a>
dd>
dl>
li>
ul>
div>
div>

<div class="layui-body">

<div style="padding: 15px;">
<iframe src="table.html" id="show" style="width:100%;height:600px">
iframe>
div>
div>
<div class="layui-footer">
底部固定区域
div>
div>
<script src="./layui/layui.js">script>
<script>
//组件的初始化代码
layui.use('element', function(){
var element = layui.element;
});
script>
body>
html>