课程设计-商店管理系统（二）----前端页面的制作（二）
前端页面制作（二）
之前的博文
课程设计-商店管理系统（一）----前端页面的制作（一）
看了老师发的课程设计要求，我设置准备制作以下功能
- 商品查询：
该界面可以进行查询：商品序号、商品编码、商品名称、生产厂商、规格、存量、是否正在出售 - 商品管理
该界面可以进行操作：商品的进货、商品的出货、商品销售状态的切换、新增货物 - 进出货查询
可以查询所有商品的进出货详情：商品编码、进货量/出货量、经手人、操作日期、进货单价/出货单价 - 信息查询
可以展示所有进出货的信息
出货就是出售^-^
OK，目前我就想到了这些功能，现在开始把这些功能一项一项的实现！
商品查询
这个界面我第一个想到的就是表格，使用表格展示这些数据十分方便！
做成之后大概就是这个亚子
其实LayUI中的表格使用很简单，只需要在table标签加上layui-table
举个栗子：
<table class="layui-table"><thead><th>head1</th><th>head2</th><th>head3</th><th>head4</th></thead><tbody><tr><td>td</td><td>td</td><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td><td>td</td><td>td</td></tr><tr><td>td</td><td>td</td><td>td</td><td>td</td></tr></tbody></table>然后它的效果就是：
然后我就可以用这个实现我的预期表格，哈哈哈哈哈，真的方便啊
总觉得少了点东西，我们这样生成的数据是静态写死的。
我们以后的数据肯定是动态从后台获取的，所以我们需要一个可以动态加载数据的表格。
在LayUI中提供了一个table.render方法来对table进行动态的渲染
具体使用教程如下
首先我们需要创建一个空的
table标签，并且给table一个id。
例如：<table id="goodsData" lay-filter="test"></table>然后需要js代码对表格进行动态的渲染
layui.use('table', function(){var table = layui.table;//第一个实例table.render({elem: '#goodsData',height: 400,url: '填接口' //数据接口,page: true //开启分页,cols: [[ //表头{field: 'g1', title: '商品编号', width:160, sort: true, fixed: 'left'},{field: 'g2', title: '商品名称', width:160},{field: 'g3', title: '生产厂商', width:160, sort: true},{field: 'g4', title: '规格', width:80} ,{field: 'g5', title: '货余量', width: 120},{field: 'g6', title: '边界值', width: 120},{field: 'g7', title: '状态', width: 80, sort: true},{field: 'g8', title: '操作', width: 160}]]});});
这个js代码里面的大意还是很明了的，如果有不懂的地方可以在下面留言，我们一起讨论。
然后需要注意的就是这个接口了，接口返回的json数据格式是由要求的。
LayUI官方给了这个json数据的格式，要求如下：
{"code":0,//返回代码"msg":"",//返回信息"count":1000,//表格中的数量"data":[{}，{}]//返回的表格中的数据
} 而且你的接口必须可以接受这两个参数：page=1 & limit=10，page表示了当前的页数，limit表示了当前页面显示的数据数，到时候可以使用SQL中的分页查询来进行返回数据！
然后我就应该在上方添加一些搜索框，用来通过不同的字段来进行搜索，在LayUI中使用面板可以很好的做出来区域划分的效果。
官方给的举例是这样的：
现在我准备把这个面板放到我的表格上面，然后往里面放一些搜索框，使用面板效果只需要在div上面加上样式layui-bg-gray，而且一般为了美观，会在面板的标签中加上一个内边距padding: 20px;
所以就有了这个效果
它的实现代码:<div class="layui-bg-gray" style="padding: 20px;"></div>
下一步就是内部的搜索框、按钮了
搜索框对应的样式是layui-input
按钮对应的样式是layui-btn
OK，不多哔哔，代码展示：
<div class="layui-bg-gray" style="padding: 20px;"><div class="layui-col-xs1"><div class="layui-form-label">商品查询：</div></div><div class="layui-col-xs9"><input class="layui-input" placeholder="请输入商品编号或者商品名称"/></div><div class="layui-btn" style="margin-left: 10px;">提交查询</div></div>效果如下：
做到这里，我们的商品查询界面就已经做好了（忽略table中的数据请求异常，等后来写了接口，就会解决这个问题）。
商品管理
对于商品管理，我们需要新做一个页面，叫做goodsManager.html
还是先写我们的后台大布局
对于这个界面，我想仿照上一个页面（绝对不是因为我懒）。上面一个面板，下面table。在table最后一栏中可以对商品进行操作，比如进货、出货、切换销售状态、删除、修改。在上面的面板中同样的进行查询、新增货物......
跟上一个页面类似，我就不再一一讲解，直接粘代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商店管理系统</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="css/style.css"><link rel="stylesheet" href="layui/css/layui.css" media="all"></head><body><div class="layui-layout layui-layout-admin"><!-- 页面的头部 --><div class="layui-header"><!--顶部logo--><div class="layui-logo">SHOOYE</div><!--顶部右边栏目--><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="" class="layui-nav-img"><span>坚持的小白</span><i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child layui-anim layui-anim-upbit"><dd><a href="">个人信息</a></dd><dd><a href="">退出登录</a></dd></dl></li></ul></div><div class="layui-side layui-bg-black"><!-- 页面的侧边栏 --><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="goodsQuery.html">商品查询</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">商品管理</a></li><li class="layui-nav-item"><a href="">进出货管理</a></li><li class="layui-nav-item"><a href="">信息查询</a></li></ul></div><!-- 页面的主体内容 --><div class="layui-body" style="padding: 15px;"><!--- 面包屑 --><span class="layui-breadcrumb"><a href="">商品管理</a></span><div class="layui-bg-gray" style="padding: 20px;"><div class="layui-col-xs1"><div class="layui-form-label">商品查询：</div></div><div class="layui-col-xs9"><input class="layui-input" placeholder="请输入商品编号或者商品名称" /></div><div class="layui-btn" style="margin-left: 10px;">提交查询</div><div class="layui-btn-container" style="margin-top: 15px;"><div class="layui-btn">新增商品</div><div class="layui-btn layui-btn-normal" onclick="showMessage('还没有实现！');">其他操作1</div><div class="layui-btn layui-btn-normal" onclick="showMessage('还没有实现！');">其他操作2</div></div></div><table id="goodsData" lay-filter="test"></table></div><div class="layui-footer"><!-- 页面的底部固定栏 -->底部栏目</div></div><script src="layui/layui.js" charset="utf-8"></script><script>layui.use('table', function () {var table = layui.table;//第一个实例table.render({elem: '#goodsData', height: 400, url: 'test' //数据接口, page: true //开启分页, cols: [[ //表头{ field: 'g1', title: '商品编号', width: 160, sort: true, fixed: 'left' }, { field: 'g2', title: '商品名称', width: 160, sort: true }, { field: 'g3', title: '操作', }]]});});function showMessage(msg){layer.msg(msg);}</script></body></html>
然后我们点击新增商品的时候，我们需要对弹出来一个窗口，可以用来输入新增的商品信息，然后通过保存按钮来把商品保存到数据库中去：
在LayUI中提供了一个layer对象可以使我们动态生成弹窗，layer就是专门用来实现弹窗的一个弹出层组件，具体使用方法如下：
function showContent2() {//页面层layer.open({title:'Title',type: 1,skin: 'layui-layer-rim', //加上边框area: ['800px', '480px'], //宽高content: 'content'});}
这就是一个简单的弹出层弹窗，它的结构很明了
- title里面写的就是这个弹窗的标题
- skin就是可以设置他的边框
- area设置的是他的大小
- content设置的是弹窗的内容，我们可以在里面写HTML代码
于是这个弹窗可以变成这样：
我在这个弹窗上面添加了一点点细节，我会把这个页面的完整代码放在下面，欢迎大家进行复制：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商店管理系统</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="css/style.css"><link rel="stylesheet" href="layui/css/layui.css" media="all"></head><body><div class="layui-layout layui-layout-admin"><!-- 页面的头部 --><div class="layui-header"><!--顶部logo--><div class="layui-logo">SHOOYE</div><!--顶部右边栏目--><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="" class="layui-nav-img"><span>坚持的小白</span><i class="layui-icon layui-icon-down layui-nav-more"></i></a><dl class="layui-nav-child layui-anim layui-anim-upbit"><dd><a href="">个人信息</a></dd><dd><a href="">退出登录</a></dd></dl></li></ul></div><div class="layui-side layui-bg-black"><!-- 页面的侧边栏 --><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="goodsQuery.html">商品查询</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">商品管理</a></li><li class="layui-nav-item"><a href="">进出货管理</a></li><li class="layui-nav-item"><a href="">信息查询</a></li></ul></div><!-- 页面的主体内容 --><div class="layui-body" style="padding: 15px;"><!--- 面包屑 --><span class="layui-breadcrumb"><a href="">商品管理</a></span><div class="layui-bg-gray" style="padding: 20px;"><div class="layui-col-xs1"><div class="layui-form-label">商品查询：</div></div><div class="layui-col-xs9"><input class="layui-input" placeholder="请输入商品编号或者商品名称" /></div><div class="layui-btn" style="margin-left: 10px;">提交查询</div><div class="layui-btn-container" style="margin-top: 15px;"><div class="layui-btn" onclick="showContent();">新增商品</div><div class="layui-btn layui-btn-normal" onclick="showMessage('还没有实现！');">其他操作1</div><div class="layui-btn layui-btn-normal" onclick="showMessage('还没有实现！');">其他操作2</div></div></div><table id="goodsData" lay-filter="test"></table></div><div class="layui-footer"><!-- 页面的底部固定栏 -->底部栏目</div></div><script src="layui/layui.js" charset="utf-8"></script><script src="js/jquery.js" charset="utf-8"></script><script>layui.use('table', function () {var table = layui.table;//第一个实例table.render({elem: '#goodsData', height: 400, url: 'test' //数据接口, page: true //开启分页, cols: [[ //表头{ field: 'g1', title: '商品编号', width: 160, sort: true, fixed: 'left' }, { field: 'g2', title: '商品名称', width: 160, sort: true }, { field: 'g3', title: '操作', }]]});});function showMessage(msg){layer.msg(msg);}function showContent() {//页面层layer.open({title:'新增商品',type: 1,skin: 'layui-layer-rim', //加上边框area: ['800px', '480px'], //宽高content: '<div style="padding: 15px;"">'+'<div class="layui-form-item"><label class="layui-form-label">商品编号</label><div class="layui-input-block"><input id="goodsID" class="layui-input" placeholder="请输入商品编号" /></div></div>'+'<div class="layui-form-item"><label class="layui-form-label">商品名称</label><div class="layui-input-block"><input id="goodsName" class="layui-input" placeholder="请输入商品名称" /></div></div>'+'<div class="layui-form-item"><label class="layui-form-label">厂商</label><div class="layui-input-block"><input id="goodsManu" class="layui-input" placeholder="请输厂商" /></div></div>'+'<div class="layui-form-item"><label class="layui-form-label">商品规格</label><div class="layui-input-block"><input id="goodsSpec" class="layui-input" placeholder="请输入商品规格" /></div></div>'+'<div class="layui-form-item"><label class="layui-form-label">边界值</label><div class="layui-input-block"><input id="goodsBounds" class="layui-input" placeholder="请输入边界值" /></div></div>'+' <div class="layui-btn-container" style="margin-top: 45px;"><div style="float: right" class="layui-btn" οnclick="confirm()">新增商品</div><div style="float: right" class="layui-btn layui-btn-primary" οnclick="resetContent()">重置</div></div>'+'</div>'});}function resetContent(){$("#goodsID").val("");$("#goodsName").val("");$("#goodsManu").val("");$("#goodsSpec").val("");$("#goodsBounds").val("");}function confirm(){var fo = [$("#goodsID"), $("#goodsName"), $("#goodsManu"), $("#goodsSpec"), $("#goodsBounds")];for(var i=0; i<fo.length; i++){if( fo[i].val() == "" ){showMessage("表单未输入完整！");return;}}showMessage("执行添加商品的操作！");}</script></body></html>学海无涯，还要继续努力！
课程设计-商店管理系统（二）----前端页面的制作（二）相关推荐
- 课程设计-商店管理系统（三）----前端页面的制作（三）
前端页面制作(三) 之前的博文 课程设计-商店管理系统(一)----前端页面的制作(一) 课程设计-商店管理系统(二)----前端页面的制作(二) 进出货查询 我们现在要制作进出货信息查询界面,这个界 ...
- 课程设计-商店管理系统（四）----数据库的建立
数据库的建立 之前的博文 课程设计-商店管理系统(一)----前端页面的制作(一) 课程设计-商店管理系统(二)----前端页面的制作(二) 课程设计-商店管理系统(三)----前端页面的制作(三) ...
- 【课程设计】数据库C#课程设计 教务处管理系统 vs2017和sql server2014制作
数据库C#课程设计 教务处管理系统 vs2017和sql server2014制作 前言 一.系统模型图 二.数据库设计 1.E-R图 2.关系模式图 3.建表 三.用户界面设计 四.部分源代码 五. ...
- 课程设计-商店管理系统（一）----前端页面的制作（一）
前端页面的制作 因为前一段时间学习了数据库,学校老师要求制作一个有关数据库的管理系统,我看了一下要求的题目,其中最合适的就是商店管理系统(就是各大培训机构必做的电商系统).这篇博客是为了记录我的前 ...
- RFID课程设计-图书管理系统用户端设计
RFID课程设计-图书管理系统用户端设计课程设计题目课程设计任务内容题目设计基本原理NFC开发概述标签调度系统如何将 NFC 标签映射到 MIME 类型和 URI如何将 NFC 标签分发到应用在 An ...
- 软件工程课程设计“作业管理系统”的总结和期望
目录 一.软件工程课程设计"作业管理系统"的总结和期望 该系统研究的意义 功能概述 web网上作业管理系统的实现 注册与登录功能的实现 作业提交功能实现 教师批改作业的功能实现 总 ...
- 教职工员工管理MySQL实训_数据库课程设计---教职工管理系统
数据库课程设计---教职工管理系统 第 1 页目 录一.需求与功能分析 2二.系统总体框架 3三.功能设计 3四.类的设计与分析 4五.数据库表结构设计 4六.特色算法分析 5七.功能测试 6-10八 ...
- python通讯录管理系统设计_数据结构课程设计-通讯录管理系统（C语言版）
##数据结构课程设计-通讯录管理系统 一,前言 自从上次C语言课设写完后,这次数据结构课设就写的游刃有余了,很快啊,不足三天就写完了它(年轻人不讲武德),如果你认真看过我之前写的C语言课程设计-球队管 ...
- C#课程设计-图书管理系统
C#课程设计-图书管理系统 前言 一.课设任务是什么? 二.使用工具及软件环境 三.系统功能介绍及部分代码展示 3.1 登陆界面及主要代码 3.2 图书管理 3.3 修改书籍页面视图及主要代码 四.使 ...
最新文章
- VBA【遍历每个工作表并将工作表表名赋予B2单元格】
- n1Linux分辨率,看看诺基亚曾经的六款平板电脑 N1不是第一
- Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)
- elasticsearch给IK分词器添加自定义词汇
- 香港虚拟主机怎么转服务器,香港虚拟主机好慢怎么办
- Lesson 1:单线程 Socket Communications(一)
- linux空文件夹大小,[转载]linux 查看文件和文件夹大小
- 奇异值分解SVD（证明全部省略）
- ireport5.6+jasperreport6.3开发（四）--以javabean为基准的报表开发(ireport)
- 分享一组我在ins上收集的程序员最爱桌面壁纸
- 为什么游戏加速器都会设置韩国节点
- LVDS通信接口详细介绍
- 淘宝店铺排名还在用老方法吗，优化店铺排名方法是否正确?
- 暑期2020“大咖说开源” | 陈莉君：Linux从入门到深入内核有多远
- 2007中文网志年会印象
- 自己写的年会抽奖软件免费版带后门作弊，共享出来给大家（更新至V1.3）——转自哈尔滨健康生活网
- React中关于props的那些事
- C语言——三目运算符的进阶用法，比较三个或者四个数的大小
- 阿里测试工程师聊：软件测试需要学什么？
- C++设计模式——访问者模式（高屋建瓴）