前端页面制作（三）

之前的博文
课程设计-商店管理系统（一）----前端页面的制作（一）
课程设计-商店管理系统（二）----前端页面的制作（二）

进出货查询

我们现在要制作进出货信息查询界面，这个界面可以查看所有商品的进出货的记录、进/出货金额、进/出货的量、经手人、操作日期

同样的表格，同样的搜索框，我就直接粘贴代码和效果图了。逻辑与前两个页面一样，都是用到前面的内容：

<!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"><a href="goodsManager.html">商品管理</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">进出货管理</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 layui-btn-normal" onclick="">查看所有商品</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: '进出货操作', width: 160,  }, { field: 'g4', title: '操作量', width: 120, sort: true}, { field: 'g5', title: '操作金额', width: 210, sort: true}, { field: 'g6', title: '经手人', width: 160}, { field: 'g7', title: '日期', width: 160, sort: true}, { field: 'g8', title: '其他'}]]});});function showMessage(msg){layer.msg(msg);}</script></body></html>

这个界面就这么完成了
没错，就是这么简单！

信息查询

这个界面就是查看我们当月的销售额，各个商品的销售额。
我想要以统计图的方式把数据呈现在我们面前，因为如果只使用表格的话太单调了。

如果制作表格的话，ECharts是一个和不错的选择！

下面我们开始下载ECharts

首先进入ECharts官网

下载完成之后，我们需要使用其中的一个文件echarts.min.js
我们下载完这个文件后，开始引入
<script src="js/echarts.min.js" charset="utf-8"></script>

在我们要绘制统计图之前，我们需要给他划分一个区域。这个区域最好使用div
<div id="main" style="width: 600px;height:400px;"></div>

然后我们就可以通过js来实现使用统计图的绘制

//我们首先需要获取到刚刚划分的区域
var myDiv = document.getElementById("main");//然后把刚刚划分的区域给初始化为一个chart
var myChart = echarts.init(myDiv);/**
*       生成数据
*///为我们的表格里面写数据myChart.setOption(数据);

上面我省略了生成数据的那一个步骤，是因为我想单独拿出来讲解这个数据格式。
我们的数据格式是一个javascript对象，他需要拥有下面内容

title表示这个图表的标题
legend表示这个图标的数据内容
xAxis表示这个图标的x轴分量
yAxis表示这个图表的y轴分量
series表示这个图表的分片信息

通过以上内容我们来创建一个对象：

// 指定图表的配置项和数据var option = {title: {},legend: {data: ['销量','价格']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'line',data: [5, 20, 36, 10, 10, 20]},{name: '价格',type: 'line',data: [45, 32, 27, 39, 36, 26]}]};

然后把数据配置给表格，页面中就会展示出来我们的数据了

接下来我们就需要使用图表来展示我们每天的销售量

展示之前我们先把大概的页面布局给做出来，又到了展示我的美术天赋的时候了！

我的页面结构大概是这个亚子

话不多说，开始写

<!-- 页面的主体内容 --><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">按周查看</div><div class="layui-btn layui-btn-normal">按月查看</div></div></div><div id="main"  style="width: 100%;height:600px;"></div></div>

OK，现在基本的网页页面都已经做好了。
再往后就是写后台了

学无止境，要继续努力！

课程设计-商店管理系统（三）----前端页面的制作（三）相关推荐

课程设计-商店管理系统（二）----前端页面的制作（二）
前端页面制作(二) 之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 看了老师发的课程设计要求,我设置准备制作以下功能商品查询: 该界面可以进行查询:商品序号.商品编码.商品名称 ...
课程设计-商店管理系统（四）----数据库的建立
数据库的建立之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 课程设计-商店管理系统(二)----前端页面的制作(二) 课程设计-商店管理系统(三)----前端页面的制作(三) ...
【课程设计】数据库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 修改书籍页面视图及主要代码四.使 ...

课程设计-商店管理系统（三）----前端页面的制作（三）

前端页面制作（三）

进出货查询

信息查询

课程设计-商店管理系统（三）----前端页面的制作（三）相关推荐

最新文章

热门文章