成 绩：
题目类型： 论文
(设计、论文、报告)
桂林理工大学博文管理学院
课程考试设计(论文)
题目： 基于jQuery的企业进销存系统设计与实现
（2021-2022学年 第1学期）
二级学院： 信息工程学院
课 程： 网络前端应用技术
班 级：
姓 名： 班正玲
学 号：
2021年12月 31 日
目次
4.1首页中的注册、登录等页面链接实现，通过点击可直接到达指定页面：... 7
1 网站需求分析
1.1 主体说明
该网页包括了八个页面，具体如下：
Index.html（首页）、reg.html（注册页面）、login.html(登录页面)、about.html(关于页面)、massage.htm(库存管理页面)、customer.html（客户信息页面）、message.html(留言页面)、shopcar.htm(购物车界面)，具体如下：
图1.1 网页HTML文件
网站中Css文件夹为网站的所有样式文件：
图1.2 网页样式目录
网站的总体结构如下图：
图1.3 网页目录
网站JS文件：
图1.4 网页javascript文件目录
网站图片文件（imgs、pic）：
图1.5 网页图片文件
具体说明：
网页是通过HTML+CSS+Javascript+jquery实现的企业进销存管理系统，该网页包含了：客户信息、库存管理、购物车、关于我们、管理界面、留言板、注册、登录等十个页面。
1.2 设计思路
该网页设计，是基于jQuery来实现的一个企业进销存管理系统，该网页实现的主要功能是：记录企业的客户信息，实现购物车管理，以及对企业库存商品的管理。现在社会快速发展，也随之出现了很多企业，无论是哪个行业，都需要对产品进行记录跟踪，所以开发类似的网页是很有必要的，主页整体效果如图：
下拉菜单：
图1.6 下拉菜单
导航栏：
图1.7 导航栏
轮播图：
图1.8 轮播图
登录注册按钮：
图1.9 登录注册
客户信息管理：
图1.10 客户信息
库存管理链接：
图1.11 库存管理链接
其他功能页面在分页说明部分。
1.3 网站总体结构（流程图）
图1.12 网页总体流程图
2 站点地图说明（画出树形图）
图2.1 站点地图
3 使用技术及运行环境说明
使用技术：HTML+CSS+jQuery框架
集成环境：Visual Studio Code
运行环境：Windows 7 /10 (64位/32位) 或者 Linux系统
浏览器： Google、火狐、QQ浏览器、IE等
4 主页详细说明
4.1首页中的注册、登录等页面链接实现，通过点击可直接到达指定页面：
代码：
</li>
<li><a href="reg.htm">注册</a>
</li>
<li><a href="login.htm">登录</a>
</li>
实现效果：
图4.1 链接效果
4.2 下拉菜单
代码：
<li><a href="customer.htm">客户信息管理</a>
<ul>
<li><a href="#">联系方式</a></li>
<li><a href="#">销售退货</a></li>
</ul>
</li>
<li><a href="massage.htm">库存管理</a>
<ul>
<li><a href="#">库存盘点</a></li>
<li><a href="#">价格调整</a></li>
</ul>
</li>
<li><a href="about.htm">关于我们</a>
<ul>
</ul>
<li><a href="">系统维护</a>
<ul>
<li><a href="#">数据库备份与恢复</a></li>
<li><a href="#">密码修改</a></li>
<li><a href="#">退出系统</a></li>
<li><a href="#">联系客服</a></li>
</ul>
……
效果：
图4.2 下拉菜单
4.3 轮播图
代码：
<script type="text/javascript">
//给图片加----绝对定位，让图片摞起来
//通过下标----显示当前，其它兄弟图片隐藏
var index = 0;
function move(){
index++;
if(index >= $("#box img").length){
index = 0;
}
$("#box img").eq(index).show().siblings().hide();
$("#page li").eq(index).addClass("active").siblings().removeClass("active");
}
//每间隔2秒轮播
var t = setInterval(move,1500);
//鼠标滑入图片停止播放（移除定时器）
//鼠标滑出图片继续播放（开启定时器）
$("#box").hover(function(){
clearInterval(t);
},function(){
t = setInterval(move,2000);
})
//点击圆点时显示与之对应的图片
$("#page li").click(function(){
index = $(this).index();
$("#box img").eq(index).show().siblings().hide();
$("#page li").eq(index).addClass("active").siblings().removeClass("active");
})
//上一张
$("#prev").click(function(){
index--;
if(index<0){
index = $("#box img").length-1;
}
$("#box img").eq(index).show().siblings().hide();
$("#page li").eq(index).addClass("active").siblings().removeClass("active");
})
//下一张
$("#next").click(function(){
move();
})
</script>
<!--一开始加载页面就触发这个获取当前时间的函数-->
<script>
var kada = document.getElementById("kada");
kada.onclick = function () {
//当点击kada时触发时间比较
var thetime = "09:00:00"; //规定打卡时间
var time1 = txt.innerHTML; //当前时间
if (time1 <= thetime) {
alert("打卡成功");
} else {
alert("已超过规定打卡时间");
}
};
function startTime() {
//获取当前时间的函数
var today = new Date();
var h = today.getHours(); //时
var m = today.getMinutes(); //分
var s = today.getSeconds(); //秒
m = checkTime(m);
s = checkTime(s);
var txt = (document.getElementById("txt").innerHTML =
h + ":" + m + ":" + s);
t = setTimeout("startTime()", 500); //每隔500就触发一次函数
}
function checkTime(i) {
//检查分和秒，如果小于10，则在数字前加上0
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
……
效果：
图4.3 轮播图
图4.4 轮播图
4.4 购物车实现
代码：
<div class="order_content">
<ul class="order_lists">
<li class="list_chk">
<input type="checkbox" id="checkbox_2" class="son_check">
<label for="checkbox_2"></label>
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="static/image/1.png" alt=""></a></div>
<div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
</li>
<li class="list_info">
<p>规格：默认</p>
<p>尺寸：16*16*3(cm)</p>
</li>
<li class="list_price">
<p class="price">￥980</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty">-</a>
<input type="text" value="1" class="sum">
<a href="javascript:;" class="plus">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥980</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
</li>
</ul>
效果：
图4.5 购物车功能
4.5 底部说明
代码:
<div id="footer">CopyRight@班正玲 19300225 版权所有 </div>
……
效果：
图4.8 底部说明
5 分页说明
5.1 注册界面
核心代码：
<script>
window.onload = function(){
document.getElementById("form").onsubmit = function(){
return checkUsername() && checkPassword() && checktel() && checkidcard ();
};
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("tel").onblur = checktel;
document.getElementById("idcard").onblur = checkidcard;
};
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
s_password.innerHTML = "密码格式有误";
}
return flag;
}
function checktel(){
var tel = document.getElementById("tel").value;
var reg_tel = /^[1][3,4,5,7,8][0-9]{9}$/;
var flag = reg_tel.test(tel);
var s_tel = document.getElementById("s_tel");
if(flag){
s_tel.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
s_tel.innerHTML = "号码格式有误";
}
return flag;
}
……
效果：
图5.1 注册
这里采用正则表达式来完成账号密码等输入匹配，若不按规定的格式输入则显示如图信息。
5.2 登录页面
代码：
<script language="javascript" type="text/javascript">
function p1(){
document.getElementById("q1").innerHTML="";
document.getElementById("q2").innerHTML="";
var name = document.getElementById("name").value;
var pw = document.getElementById("pw").value;
if(name==""){
document.getElementById("q1").innerHTML="用户名不能为空！";
onover();
return;
}
if(name=="weiqing"){
if(pw=="19060205"){
window.location.href ="massage.htm";
}else{
document.getElementById("q2").innerHTML="密码错误！";
}
}else{
document.getElementById("q1").innerHTML="用户名错误！";
}
}
function onover(){
document.all.name.style.background="#EEEE00 ";
}
function onout(){
document.all.name.style.background="#fff";
}
function onover1(){
document.all.name.style.background="#fff";
document.all.pw.style.background="#EEEE00 ";
}
function onout1(){
document.all.pw.style.background="#fff";
}
……
效果：
图5.2 登录页面
这里规定了账号密码必须是名字的拼音跟学号，否则进不了管理界面。
5.3 客户信息管理
代码：
<h1 style="text-align:center;color:rgb(30, 204, 181);">客户信息管理</h1>
<a style="font-size:20px;text-decoration:none;" href="index.htm">返回首页</a>
<div class="content">
<input type="text" id="lin" placeholder="请输入需要搜索的内容" />
<table id="table-1" cellspacing="0" border="1" style="text-align: center">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>地址</th>
</tr>
<tr>
<td>林兵</td>
<td>男</td>
<td>18</td>
<td>12345678941</td>
<td>富顺</td>
</tr>
<tr>
<td>赖玉英</td>
<td>女</td>
<td>18</td>
<td>12345678942</td>
<td>南充</td>
</tr>
<tr>
<td>潘旭</td>
<td>女</td>
<td>20</td>
<td>12345678912</td>
<td>富顺</td>
</tr>
<tr>
<td>王威平</td>
<td>男</td>
<td>20</td>
<td>97543152146</td>
<td>广元</td>
</tr>
<tr>
<td>李丹</td>
<td>女</td>
<td>30</td>
<td>14725836910</td>
<td>江安</td>
</tr>
<tr>
<td>陈志樑</td>
<td>男</td>
<td>20</td>
<td>31546287451</td>
<td>富顺</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
<tr>
<td>郭仕宏</td>
<td>男</td>
<td>20</td>
<td>51240316845</td>
<td>南充</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lin_search.js"></script>
<script type="text/javascript">
var table = document.getElementById("table-1");
var input = document.getElementById("lin");
input.onkeyup = function () {
new Search(table, input);
};
</script>
……
效果：
图5.3 客户信息
图5.4 搜索
5.4 关于页面
代码：
<div class="box">
<img src="./static/image/04.jpg" alt="" class="box-img">
<h2 class="name">班正玲 19300225</h2>
<h2>题目：基于jQuery的企业进销存管理系统系统设计与实现</h2>
<textarea name="text" id="" cols="60" rows="10">
本网页是基于jQuery设计，主要实现功能为销售管理、客户信息、关于我们、注册登录等几个功能
</textarea>
<a href="index.htm" class="one">点击我查看更多</a>
</div>
……
效果：
图5.5 关于页
这里的信息包含了姓名、学号、主题、以及设计思路，点击访问网页即可回到主页，效果如下：
图5.6 回到主页
图5.7 主页
5.5 留言板
代码：
<div class="box">
<span><h1 style="text-align:center;">进销存系统留言板</h1></span>
<textarea name="" id="" cols="30" rows="10" class="text"></textarea>
<button>发布</button>
<ul></ul>
</div>
<div class="footer">CopyRight@班正玲 19300225 版权所有</div>
<script>
$("button").on("click", function () {
var li = $("<li></li>");
li.html($(".text").val() + "<a href='javascript:;'>删除<a>");
$("ul").prepend(li);
li.slideDown();
$(".text").val("");
});
$("ul").on("click", "a", function () {
$(this)
.parent()
.slideUp(function () {
$(this).remove();
});
});
</script>
……
效果：
图5.11 留言板
这里点击留言可以实现发布，删除功能。
5.6 购物车
代码：
<div class="order_content">
<ul class="order_lists">
<li class="list_chk">
<input type="checkbox" id="checkbox_8" class="son_check">
<label for="checkbox_8"></label>
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="static/image/1.png" alt=""></a></div>
<div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
</li>
<li class="list_info">
<p>规格：默认</p>
<p>尺寸：16*16*3(cm)</p>
</li>
<li class="list_price">
<p class="price">￥1980</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty">-</a>
<input type="text" value="1" class="sum">
<a href="javascript:;" class="plus">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥1980</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
</li>
</ul>
<ul class="order_lists">
<li class="list_chk">
<input type="checkbox" id="checkbox_9" class="son_check">
<label for="checkbox_9"></label>
</li>
<li class="list_con">
<div class="list_img"><a href="javascript:;"><img src="static/image/1.png" alt=""></a></div>
<div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
</li>
<li class="list_info">
<p>规格：默认</p>
<p>尺寸：16*16*3(cm)</p>
</li>
<li class="list_price">
<p class="price">￥480</p>
</li>
<li class="list_amount">
<div class="amount_box">
<a href="javascript:;" class="reduce reSty">-</a>
<input type="text" value="1" class="sum">
<a href="javascript:;" class="plus">+</a>
</div>
</li>
<li class="list_sum">
<p class="sum_price">￥480</p>
</li>
<li class="list_op">
<p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
</li>
</ul>
</div>
</div>
<!--底部-->
<div class="bar-wrapper">
<div class="bar-right">
<div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
<div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
<div class="calBtn"><a href="javascript:;">结算</a></div>
</div>
</div>
')
……
效果：
图5.12 购物车
5.7 库存管理
代码：
<ul>
<li><a href="index.htm">首页</a></li>
<li><a href="customer.htm">客户信息管理</a>
</li>
<li><a href="massage.htm">库存管理</a>
<ul>
<li><a href="#">库存盘点</a></li>
<li><a href="#">价格调整</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</li>
<li><a href="about.htm">关于我们</a>
</li>
<li><a href="">系统维护</a>
<ul>
<li><a href="#">数据库备份</a></li>
<li><a href="#">密码修改</a></li>
<li><a href="#">退出系统</a></li>
</ul>
<li><a href="shopcar.htm">购物车</a>
</li>
</li>
<li><a href="message.htm">留言板</a>
</li>
</li>
<li><a href="reg.htm">注册</a>
</li>
<li><a href="login.htm">登录</a>
</li>
</ul>
</div>
<table class="table table-hover table-bordered" id="mytable">
<thead>
<tr>
<th>选中</th>
<th>货品编号</th>
<th>货物名称</th>
<th>进货时间</th>
<th>出货日期</th>
<th>发出地地址</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" οnclick="checkAll(this)"/></td>
<td colspan="6"><a href="javascript:;" class="btn btn-danger" role="button" οnclick="delAll(this)">全部删除</a></td>
</tr>
</thead>
……
效果：
图5.13 库存管理
6 版权说明
代码：
<footer>
CopyRight@班正玲 19300225 版权所有
</footer>
……
效果：
图5.16 版权说明
7 课程总结
通过本息课程设计的制作，我收获了很多新的知识，这几天研究JQuery，觉得自己还是有些收获的。首先是快速体验上，jQuery改变了以前JavaScript那种繁琐编程的模式，解放了许多重复劳动，使程序员更多关注业务逻辑。其次，简洁了代码结构，使结构更加清晰。
JQ是一个轻量级的js库，它的宗旨是write less, do more，写更少的代码，做更多的事情。事实上，我们在实操作过程中，彻彻底底体会到它的好处。譬如我要找到某个元素（它可以是标签，类或者ID），只需要用$("...")即刻获得，而不需要使用原生JS长长的document.getElementBy..("...")，而且很多时候还会拼写错。
这是一个ajax横行的时代，我们在做真实项目的时候，往往需要用到ajax异步请求，使用JQ的ajax方法则会让你事半功倍，行云流水。虽然我们课程还没有涉及到ajax，但是我相信有不少同学已经在使用了。当然，JQ的好处绝对不止以上两点，还有链式写法（就是可以一直“点下去”，不用重新获取元素对象，书本实验示例大量的使用了这种写法，也许有的同学会不理解为什么能这样写），以及各种封装好的炫酷的动画效果，丰富的第三方插件库，甚至对“古董”IE6及以上浏览器的支持，这些都让我爱不释手。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
