02 layui 下载和搭建环境
Layui官方网站
官方网站:https://www.layui.com/
下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v=
创建项目
省略
创建static目录 将下载的项目复制到static目录中
SMS:.
├─.idea
└─static
├─css
│ └─modules
│ ├─laydate
│ │ └─default
│ └─layer
│ └─default
├─font
├─images
│ └─face
└─lay
└─modules
创建index.html
<!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="static/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">电商后台系统</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<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="">商品</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="">网站</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="">手机端</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="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
张三
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></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">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">商品管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">商品分类</a></dd>
<dd><a href="javascript:;">品牌管理</a></dd>
<dd><a href="javascript:;">类型管理</a></dd>
<dd><a href="javascript:;">规格管理</a></dd>
<dd><a href="javascript:;">商品管理</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">其他管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">地区管理</a></dd>
<dd><a href="javascript:;">空间管理</a></dd>
<dd><a href="javascript:;">到货通知</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div> <div class="layui-body">
<div style="padding: 5px;height:100%;width:100%">
<!-- 内容主体区域 -->
<iframe src="good.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;"></iframe>
</div>
</div> <div class="layui-footer">
<!-- 底部固定区域 -->
© blb.com - 底部固定区域
</div>
</div>
<script src="static/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element; });
</script>
</body>
</html>
创建商品页面 good.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="static/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> <table class="layui-hide" id="test" lay-filter="test">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">商品管理/商品信息</div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="example"> <div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">商品名称</label>
<div class="layui-input-inline">
<input type="text" name="id" placeholder="请输入商品" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-inline">
<label class="layui-form-label">货号</label>
<div class="layui-input-inline">
<input type="text" name="id" placeholder="请输入货号" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-inline">
<label class="layui-form-label">商品分类</label>
<div class="layui-input-inline">
<div class="layui-form">
<select name="label" class="layui-form-item">
<option value="0" selected="selected">请选择分类</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
</select>
</div>
</div>
</div> <div class="layui-inline">
<label class="layui-form-label">上架</label>
<div class="layui-input-inline">
<div class="layui-form">
<select name="label" class="layui-form-item">
<option value="0" selected="selected">请选择</option>
<option value="1">出售中</option>
<option value="2">仓库中</option>
</select>
</div>
</div>
</div> <div class="layui-inline">
<label class="layui-form-label">品牌</label>
<div class="layui-input-inline">
<input type="text" name="title" placeholder="请输入品牌" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
</div> </form> </div>
</div>
</div>
</div> </table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container">
<button class="layui-btn" lay-event="isAll">全选</button>
<button class="layui-btn" lay-event="save">新增</button>
<button class="layui-btn" lay-event="remove">删除</button> </div>
</script> <script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="static/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use(['form','table'], function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'http://localhost:7300/mock/5e06d6ef83b40c266813ee7f/example/user/list'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '商品列表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'平台货号', width:120, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'商品名称', width:120, edit: 'text'}
,{field:'email', title:'品牌和分类', width:150, edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'价格(元)', width:100, edit: 'text', sort: true}
,{field:'city', title:'库存', width:100}
,{field:'sign', title:'商品状态'}
,{field:'experience', title:'平台推荐', width:120, sort: true}
,{field:'logins', title:'排序', width:120, sort: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
}); //头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'save':
var data = checkStatus.data;
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
area: ['620px', '440px'], //宽高
content: $('#addForm'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
$(".layui-laypage-btn").click();//执行分页刷新当前页
}
});
break;
case 'remove':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
}); //监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index); });
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
}); </script> </body> <div id="addForm" style="padding: 10px; background-color: #F2F2F2;display:none">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">商品名称</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">价格(元)</label>
<div class="layui-input-block">
<input type="password" name="price" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<div class="layui-form">
<select name="interest" class="layui-form-item" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<div class="layui-form"> <input type="checkbox" class="layui-form-item" name="like[write]" title="写作">
<input type="checkbox" class="layui-form-item" name="like[read]" title="阅读">
<input type="checkbox" class="layui-form-item" name="like[daze]" title="发呆">
</div>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<div class="layui-form">
<input type="checkbox" class="layui-form-item" name="close" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<div class="layui-form">
<input class="layui-form-item" type="radio" name="sex" value="男" title="男" checked="">
<input class="layui-form-item" type="radio" name="sex" value="女" title="女">
</div>
</div>
</div> <div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div> <div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>
</div>
</div>
</div> </div>
</div> </html>
02 layui 下载和搭建环境的更多相关文章
- 初窥Java--1(下载JADK,搭建环境变量)
window系统安装java 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/ind ...
- UIAutomator2、Appium、Robotium搭建环境与框架对比
UIAutomator2.Appium.Robotium搭建环境与框架对比 一.框架介绍 Appium 特点 appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生 ...
- Xamarin 跨移动端开发系列（01） -- 搭建环境、编译、调试、部署、运行
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!好了,废话不多说,就开始吧, ...
- AspectJ基础学习之二搭建环境（转载）
AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...
- [转]phonegap 2.9 IOS Xcode 搭建环境
phonegap 2.9 IOS Xcode 搭建环境 一:下载phoneGap2.9和安装Xcode5(目前最新版) 选择2.9是因为3.0以上坑爹版本编译神马的要在有网络情况. 二: 下载ph ...
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：2.搭建环境-2.6. 安装Oracle所依赖的必要包
2.6. 安装Oracle所依赖的必要包 2.6.1. 检查Oracle所依赖的必要rpm包 [root@localhost /]#rpm -q binutils compat-libstdc elf ...
- 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境：2.搭建环境-2.4. 安装JDK
2.4.安装JDK 2.4.1.准备JDK 在百度搜索:JDK下载 2.4.2.上传JDK put E:\软件安装文件\jdk-8u11-linux-x64.rpm /home/linuxrac1/D ...
- springMVC学习篇 - 搭建环境及关键点
springMVC是spring家族中一个重要的组件,和struts一样作为一套前台框架被广泛的应用于各种项目. 之前在很多项目组都用到springMVC,只感觉很强大,但是对这套框架的知识了解比较少 ...
- Java/Andriod- 使用Eclipse搭建环境
从网上找来的,做了一点小修改,我自己试了一下,1.3步骤我没去做,最后也不影响. 在开始Android开发之旅启动之前,首先要搭建环境,然后创建一个简单的HelloWorld.本文的主题如下: 1.环 ...
随机推荐
- MergeSort（归并排序）原理及C++代码实现
归并排序利用分治策略进行排序.原理如下 分解:分解待排的n个元素的序列成个具n/2个元素的两个子序列. 解决:使用归并排序递归地排序两个子序列. 合并:合并两个已排序的子序列以产生已排序的答案. 归并 ...
- Yii框架的学习指南（策码秀才篇）1-3 我是这么学习的yii framework （不间断更新中）
Ⅰ.基本概念一.入口文件入口文件内容:一般格式如下:<?php $yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置$confi ...
- F5 BIG-IP之二 LTM实验一
- 103）PHP，递归读取目录内容
知识点总结: 打开某个目录 依次读取目录内文件 如果某个文件为目录 递归对该目录采用打开,读取,若还是目录,继续判断,读取 递归点: 如果子文件为目录,则递归 出口: 如果目录中不存在子目录,则不需要 ...
- 吴裕雄--天生自然python学习笔记：python文档操作表格处理
表格也是 Word 文件中常用的对象,下面讲解 Win32com 中常用的表格操作命令 . 新建表格的语法为: 在 Word 文件中新建一个表格并插入单元格内容 在 Word 文件中新建一个 3 行 ...
- 精心收集的Hadoop学习资料
1.<Hadoop技术内幕:深入解析Hadoop Common和HDFS>下载地址:http://download.csdn.net/detail/w397090770/6643259. ...
- js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm
近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...
- Spring常用注解（讲解的通俗易懂，很透彻）
使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册<context:component-scan base-package ...
- 吴裕雄--天生自然KITTEN编程：小猫解题
作品链接:https://ide.codemao.cn/we/36447034
- angular jspaf
import { Component, OnInit } from '@angular/core'; import * as jsPDF from 'jspdf'; import html2canva ...