SSM实战之商品信息管理系统《六》

其他 2018-11-14 02:02:13 阅读次数: 0
版权声明：本文为博主柒晓白（邹涛）原创文章，未经博主允许不得转载，否则追究法律责任。 https://blog.csdn.net/ITBigGod/article/details/82995204

SSM实战之商品信息管理系统《六》

需要源码的留下邮箱或自己文中复制。

1.前言

经过上五篇文章点这里，已经把商品管理系的信息管理写完了，接下里这一篇介绍一下使用前端框架bootstrap来搭建一下登录界面和后台管理界面。

在之前我有写一篇使用bootstrap搭建后台管理系统页面 ，本文就将就使用这个架构。

现在搞个web开发，不会点全栈估计老板都不爱甩你。

2.SSM实战之bootstrap登录界面

登录原页面如下：

在这里插入图片描述

美化开始。

在美化登录界面中，我们使用了背景图片轮播，自定义了css样式，非常漂亮，最终效果看文末。

1. 直接去原来的login.jsp页面


1. 引入js和自定义的css： 
 <!-- 顺序：先css后jquery最好bootstrap.js -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" href="static/css/style.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

算了吧，代码我就不拆分了来写了，一次性把源码贴出，也方便大家看，其中里面写了很多针对于小白的写法。

最主要是提及一些要点：

  • login.jsp页面中，登录采用 ajax方式提交表单的写法。
  • login.jsp页面中，注册采用form的action传统方式提交写法。
  • login.jsp页面中，针对于有日期类型的input，采用js来控制以日期类型录入
  • login.jsp页面中，既采用了labels属性：为所有可用标签（label元素）的表单元素定义一个label属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。也就是出现提示用户或密码错误的消息框。
  • login.jsp页面中，又采用了js的innerHTML写法，这个是赋予html动态数据的方式，在JS之后是有双向功能：获取对象的内容 或 向对象插入内容。

如：我们可以通过document.getElementById(‘aa’).innerHTML 来获取id=aa的对象的内嵌内容；

也可以对某对象插入内容，如document.getElementById(‘abc’).innerHTML=‘这是被插入的内容’;
这样就能向id为abc的对象插入内容。

扫描二维码关注公众号，回复： 4062074 查看本文章

具体参考：https://www.jianshu.com/p/a9a6e5fa8a6f

新的login.jsp源代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>登录新界面</title>
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="登录,ssm练习,web项目">
	<meta http-equiv="description" content="This is login page">
	
    <!-- 顺序：先css后jquery最好bootstrap.js -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" href="static/css/style.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    
</head>
<body style="margin: 8%;">
    <div class="container">
        <div class="form row">
        <!-- ajax提交登录示例 -->
            <div class="form-horizontal col-md-offset-2" id="login_form">
                <h3 class="form-title">欢迎登录商品管理系统</h3>
                <div class="col-md-9">
                  <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="请输入用户名..." id="username" name="username" autofocus="autofocus" maxlength="20"/>
                    	<span id="checkUserNameResult" style="color: red "></span>
                    </div>
                    <div class="form-group">
                            <i class="fa fa-lock fa-lg"></i>
                            <input class="form-control required" type="password" placeholder="请输入密码..." id="password" name="password" maxlength="8"/>
                            <span id="checkPasswordResult" style="color: red "></span>
                            <label class="control-label" for="inputSuccess1" style="color: red;"id="message"></label>
                    </div>
                    <div class="form-group col-md-offset-9">
                        <button type="submit" class="btn btn-success pull-left" name="login" id="login">登录</button>
                        <button type="button" class="btn btn-danger pull-right" name="register" id="register" data-toggle="modal" data-target="#myModal">注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 注册框 -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
							</button>
							<h4 class="modal-title" id="myModalLabel">注册新用户</h4>
						</div>
				 	<!-- form表单提交注册示例 -->
						<form class="form-horizontal" role="form"
							action="${pageContext.request.contextPath}/user/register.action"
							method="post" id="form">
							<div class="modal-body">
								<!-- 表格 -->
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">用户名:</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="username"
											name="username" placeholder="请输入用户名" required autofocus>
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword3" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;码:</label>
									<div class="col-sm-6">
										<input type="password" class="form-control" id="password"
											name="password" placeholder="请输入密码" required autofocus>
									</div>
								</div>
								<!-- js控制以日期类型录入-->
								<div class="form-group">
									<label for="lastname" class="col-sm-3 control-label">出生日期:</label>
									<div class="col-sm-6">
										<input type="text" class="form-control input-lg form_datetime"
											id="birthday" name="birthday">
									</div>
								</div>
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">居住地址:</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="address"
											name="address" placeholder="请输入现居住地址" required autofocus>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-primary" id="save">注册</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							</div>
						</form>
					</div>
				</div>
			</div>
    
<script type="text/javascript">

/* 以json的格式提交登录传参 */
$("#login").click(function() {
	var username=document.getElementById("username").value;
	var password=document.getElementById("password").value;
	var checkUserNameResult = document.getElementById("checkUserNameResult"); //提示语句
	var checkPasswordResult = document.getElementById("checkPasswordResult"); //提示语句
    
	if(username.trim().length==0){
          checkUserNameResult.innerHTML = "用户名不能为空";  
          obj.focus();
    }else if(password.trim().length==0){
    	 checkUserNameResult.innerHTML = "";
    	 checkPasswordResult.innerHTML = "密码不能为空";  
         obj.focus();
    }else{
    	 checkPasswordResult.innerHTML = "";  
		 $.ajax({
			type : 'post',
			//提交路径
			url : '${pageContext.request.contextPath}/user/checkLogin.action',
			//声明为json格式
			contentType : 'application/json;charset=utf-8',
			//转为json格式
			data : JSON.stringify({
					"username" : $("#username").val(),
					"password" : $("#password").val()
				}),
					//点击登录以后拿到数据
					success : function(data) {
					//判断
					if (data == "" || data == null) {
							$("#message").html("用户名或密码错误！");
					} else {
					//正常跳转
							window.location.href = "${pageContext.request.contextPath}/items/queryItems.action";
							}
						}
					});
   			 }
		});
		
</script>
</body>
</html>

注意一下修改相关的引入路径。
最终登录效果：
在这里插入图片描述
背景图是4张图片轮播的。

弄完了登录，注册界面，接下来是我们的后台界面了。

2.后台管理界面：

原来的后台管理只是实现了功能，没有得到美化。
原系统界面为：
在这里插入图片描述

直接去showItems.jsp页面：
引用上面提到的那篇使用bootstrap搭建后台界面的文章。

更新后的源代码为：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
	<title>商品后台管理系统</title>
	
    <link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
<!-- 添加模态框（Modal）插件 -->
	$("#myModal").modal({
		keyboard : false,
		backdrop : true
	});
	$(function() {

		$(".form_datetime").datetimepicker({
			format : "yyyy-mm-dd hh:ii",
			autoclose : true,
			todayBtn : true,
			todayHighlight : true,
			showMeridian : true,
			pickerPosition : "bottom-left",
			language : 'zh-CN',//中文，需要引用zh-CN.js包
			startView : 2,//月视图
			minView : 2
		//日期时间选择器所能够提供的最精确的时间选择视图
		});
	});
</script>
</head>

 <body>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="height:92px;">
                        <img src="<%=path %>/images/a.jpg" height="100%" />
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar" style="margin:1% 0 1% 34%;">
                        <li class="active">
                        <a class="icon-bar" href="#" style="background-color:#087b71">
                        	<font  style="font-size:31px;font-weight:bold;font-style:italic;">欢迎来到商品管理系统</font></a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" style="margin:1% 0 1% 0%;">
                        <li><h4 style="color:red;">
					欢迎您:&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span>
					<strong>${user1.username }</strong><small>
					<a href="${pageContext.request.contextPath }/user/LogOut.action">注销</a></small>
					</h4></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2">
                    <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;菜单
                    </a>
                    <a href="${pageContext.request.contextPath}/items/queryItems.action" class="list-group-item">
                        <span class="glyphicon glyphicon-search" aria-hidden="true">
                    </span>&nbsp;商品管理</a>
                    <a href="javascript:void(0)" class="list-group-item">
                        <span class="glyphicon glyphicon-user" aria-hidden="true">
                    </span>&nbsp;个人设置</a>
                </div>
                <!--左边菜单栏-->
                <div class="col-sm-10">
                    <ol class="breadcrumb">
                        <li class="active">菜单
                        </li>
                        <li class="active">商品信息
                        </li>
                    </ol>
                    <div class="panel panel-default">
                        <div class="panel-heading">搜索
                        </div>
                        <div class="panel-body">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    <label for="name">名称</label>
                                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                                </div>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">开始搜索</button>
                                </div>
                            </form>
                             <!-- 按钮-->
								<div class="row">
									<div class="col-md-6 col-md-offset-10">
										<button type="button" class="btn btn-primary btn-lg"
											data-toggle="modal" data-target="#myModal">
											<span class="glyphicon glyphicon-plus"></span>添加商品
										</button>
									</div>
								</div>
                        </div>
                    </div>
                    <!-- 列表展示 -->
                    <div class="table-responsive">
                    	<form action="${pageContext.request.contextPath }/items/addCar.action" method="post">
                        <table class="table table-striped">
                                <tr align="center">
                                    <th>商品名称</th>
									<th>商品价格</th>
									<th>商品图片</th>
									<th>商品介绍</th>
									<th>生产日期</th>
									<th colspan="3">操作</th>
                                </tr>
                                <tr>
                                	<c:forEach items="${pageInfo.list}" var="item">
								<tr align="center">
									<td>${item.name }</td>
									<td>${item.price }</td>
									<!-- 照片显示 -->
									<td><img title="${item.detail }"
										style="width: 60px; height: 60px"
										src="${pageContext.request.contextPath}/upload/${item.pic}"></td>
										
									<td>${item.detail }</td>
									<!-- fmt函数库提供返回日期格式 -->
									<td><fmt:formatDate value="${item.createtime}"
											pattern="yyyy-MM-dd" /></td>
									<!-- 删除操作-带id参数 -->
									<td><a
										href="${pageContext.request.contextPath }/items/del.action?id=${item.id}"><button
												type="button" class="btn btn-success btn-lg"
												onclick="return confirm('确定要删除信息吗？') ">
												<span class="glyphicon glyphicon-trash"></span> 删除
											</button></a></td>
									<!-- 修改操作 -->	
									<td><a
										href="${pageContext.request.contextPath }/items/findOne.action?id=${item.id}"><button
												type="button" class="btn btn-success btn-lg">
												<span class="glyphicon glyphicon-edit"></span> 修改
											</button></a></td>
								</tr>
						</c:forEach>
                        </table>
                        </form>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
		<div class="row">
			<!-- 分页信息 -->
			<div class="col-md-6">
				<h4 style="margin: 0 0 0 38%;">当前第${pageInfo.pageNum }页，共${pageInfo.pages }页，共${pageInfo.total }条记录数</h4>
			</div>
			<!-- 分页条 -->
			<div class="col-md-6">
				<ul class="pagination pagination-lg">
					<li><a
						href="${pageContext.request.contextPath }/items/queryItems.action?pn=1">首页</a></li>
					<c:if test="${pageInfo.hasPreviousPage }">
						<li><a
							href="${pageContext.request.contextPath }/items/queryItems.action?pn=${pageInfo.pageNum-1}"
							aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
						</a></li>
					</c:if>
					<c:forEach items="${pageInfo.navigatepageNums }" var="nav">
						<c:if test="${nav==pageInfo.pageNum }">
							<li class="active"><a
								href="${pageContext.request.contextPath }/items/queryItems.action?pn=${nav}">${nav }</a></li>
						</c:if>
						<c:if test="${nav!=pageInfo.pageNum }">
							<li><a
								href="${pageContext.request.contextPath }/items/queryItems.action?pn=${nav}">${nav }</a></li>
						</c:if>
					</c:forEach>
					<c:if test="${pageInfo.hasNextPage}">
						<li><a
							href="${pageContext.request.contextPath }/items/queryItems.action?pn=${pageInfo.pageNum+1}"
							aria-label="Previous"> <span aria-hidden="true">&raquo;</span>
						</a></li>
					</c:if>
					<li><a
						href="${pageContext.request.contextPath }/items/queryItems.action?pn=${pageInfo.pages}">末页</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 添加商品的模态框-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
			<!-- 模态框的标题 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加商品</h4>
				</div>
				<!-- 模态框的主体-表单头部 -->
				<form class="form-horizontal" role="form"
					action="${pageContext.request.contextPath }/items/addItems.action"
					method="post" id="form" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group  form-group-lg">
							<label for="firstname" class="col-sm-3 control-label">商品名称:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control input-lg" id="name"
									name="name" placeholder="请输入商品名字" required autofocus>
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-3 control-label">商品价格:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control input-lg" id="price"
									name="price" placeholder="请输入商品价格" required autofocus>
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-3 control-label">商品生产日期:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control input-lg form_datetime"
									id="createtime" name="createtime">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-3 control-label">商品介绍:</label>
							<div class="col-sm-5">
								<input type="text" class="form-control input-lg" id="detail"
									name="detail" placeholder="请输入商品介绍" required autofocus>
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-3 control-label">上传商品图片:</label>
							<div class="col-sm-5">
								<input type="file" class="form-control input-lg" id="items_pic"
									name="items_pic">
							</div>
						</div>
					</div>
					<!-- 模态框的尾部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary" id="save">保存</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
 <!-- 底部页脚部分 -->
 <div class="footer">
     <p class="text-center">
         2018 &copy; 柒晓白.
     </p>
 </div>

</body>
</html>

这个页面基本上只是复制过来修改了对应的地方即可。
效果图如下：
在这里插入图片描述

添加商品：
在这里插入图片描述

到这里就完成了对商品管理系统的前台登录界面和后台管理界面的美化了，SSM框架整合+前端框Bootstrap+Ajax校验+登录拦截器+图片文件上传+日期类型转换器+json格式传参这些功能统统都已经写过了。

后期我会把继续写，欢迎留言交流。

真是对不起大家了，博文更新的时候，忘了更新代码的下载地址。导致一些同学拿去出现问题。

v2.0版本源码下载：20181113v2.0版源码打包下载

下载完成以后，导入eclipse，修改为自己的本机环境运行即可。

没有积分的留下邮箱

You got a dream, you gotta protect it.
如果你有梦想的话，就要去捍卫它 。 ——《当幸福来敲门》

猜你喜欢

转载自blog.csdn.net/ITBigGod/article/details/82995204
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022