SSM實戰之商品資訊管理系統《六》
阿新 • • 發佈：2018-11-14
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的物件插入內容。
新的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">×</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">密 碼:</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;">
歡迎您: <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> 選單
</a>
<a href="${pageContext.request.contextPath}/items/queryItems.action" class="list-group-item">
<span class="glyphicon glyphicon-search" aria-hidden="true">
</span> 商品管理</a>
<a href="javascript:void(0)" class="list-group-item">
<span class="glyphicon glyphicon-user" aria-hidden="true">
</span> 個人設定</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>
<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">«</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">»</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">×</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 © 柒曉白.
</p>
</div>
</body>
</html>
這個頁面基本上只是複製過來修改了對應的地方即可。
效果圖如下：
新增商品：
到這裡就完成了對商品管理系統的前臺登入介面和後臺管理介面的美化了，SSM框架整合+前端框Bootstrap+Ajax校驗+登入攔截器+圖片檔案上傳+日期型別轉換器+json格式傳參這些功能統統都已經寫過了。
後期我會把繼續寫，歡迎留言交流。
真是對不起大家了，博文更新的時候，忘了更新程式碼的下載地址。導致一些同學拿去出現問題。
v2.0版本原始碼下載：20181113v2.0版原始碼打包下載
下載完成以後，匯入eclipse，修改為自己的本機環境執行即可。
沒有積分的留下郵箱
You got a dream, you gotta protect it.
如果你有夢想的話，就要去捍衛它 。 ——《當幸福來敲門》