當前位置：網站首頁>分布式商城項目-後臺開發-SSM工程整合網站模板

分布式商城項目-後臺開發-SSM工程整合網站模板

2022-01-27 18:44:30 【王志威-yc】

分布式商城項目-後臺開發-SSM工程整合網站模板

我們在JavaWeb開發學習過程中，需要使用到前端的頁面，可能很多時候，我們並不擅長於設計UI,比如html,jsp.但又希望自己做出來的程序能够好看一些，此時我們可以去模板之家下載一些模板使用，下面我給大家貼出此次項目使用的模板。

https://download.csdn.net/download/qq_20503733/11203175

1.分析資源

這裏，我們把上面下載的資源解壓，如圖：
在這裏插入圖片描述
這裏可以看到整個模板由靜態資源和html文件組成，下面我們直接使用瀏覽器打開dashboard.html文件，如圖：
在這裏插入圖片描述
從這裏可以看出，整個頁面分為4個部分：
1.頭部導航欄
2.左側菜單欄
3內容區域
4.底部版權信息頁面
根據分析發現，在整個網站中，切換不同頁面，只是第三部分會發生變化，其他部分都不變，因此，我們可以對這些重複的代碼進行提煉，可以很好的優化頁面結構，减少重複代碼。

2.將模板整合到ssm項目中

首先，在我們的ssm框架中，所有資源的管理是由spring容器來完成的，當我們要使用到網站中的靜態資源的時候，是無法得到的，此時我們就需要告訴spring容器這是“靜態資源”，運行時要把這些資源掃描添加到服務器中，那麼怎麼告訴spring呢，其實很簡單，只需要在spring的配置文件中進行配置，
接下來，我們在項目工程的webapp目錄下新建一個名為“static”的文件夾來存儲這些靜態資源，然後把模板文件中的靜態資源複制到static文件夾下：
在這裏插入圖片描述
然後在spring-mvc.xml配置文件中加入

<mvc:resources mapping="/static/**" location="/static/" />

在這裏插入圖片描述
這樣頁面就可以訪問到靜態資源了
然後我們把模板中的index.html拷貝到項目中，放在webapp文件夾下並打開，此時的模板是html的，在ssm框架中我們要使用的是jsp的頁面，首先我們創建一個index.jsp頁面，然後將模板中<head></head>標簽中的內容複制到jsp頁面對應的標簽裏面
把<body></body>標簽裏面的內容複制到jsp對應的標簽內。此時還需要修改靜態資源的路徑。如圖：
在這裏插入圖片描述
在所有的鏈接處加上

${pageContext.request.contextPath }/static/

${pageContext.request.contextPath }：是獲取到的服務器根目錄，static是我們存儲靜態資源的文件夾。
此時我們來運行服務，訪問服務器，能看到如圖界面：
在這裏插入圖片描述
錶示我們的頁面已經沒問題了，下面我們來整合首頁，此時的頁面，是必須登錄之後才能訪問的，所以我們將它放到WEB-INF目錄下，此目錄下的文件，是被保護的，瀏覽器是無法直接訪問到的，只能通過servlet去訪問，那麼我們首先在WEB-INF下創建一個名為“jsp”的目錄，同時要修改spring-mvc.xml配置文件中的前後綴，如圖：
在這裏插入圖片描述
在jsp目錄下創建首頁的jsp文件，名為：Home.jsp,然後打開模板中的dashboard.html文件，然後將模板中<head></head>標簽中的內容複制到jsp頁面對應的標簽裏面
把<body></body>標簽裏面的內容複制到jsp對應的標簽內。在所有的鏈接處加上

${pageContext.request.contextPath }/static/

3.封裝公共的靜態資源引用

此時我們無法進行測試，所以先暫時忽略，此時我們會發現，每次增加一個頁面都需要拷貝並且修改圖中的這些內容，而這些內容在每個頁面又都是一樣的。
在這裏插入圖片描述
所以呢這裏我們就可以把這些代碼都提取出來放到一個頁面裏，每次使用include加載到頁面中即可，做法：
在static文件夾下創建一個common.jsp文件，把這些內容都複制進去

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Required Stylesheets -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fonts/ptsans/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fluid.css" media="screen" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/mws.style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/icons/icons.css" media="screen" />

<!-- Demo and Plugin Stylesheets -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/demo.css" media="screen" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/colorpicker/colorpicker.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/jimgareaselect/css/imgareaselect-default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/fullcalendar/fullcalendar.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/fullcalendar/fullcalendar.print.css" media="print" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/tipsy/tipsy.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/sourcerer/Sourcerer-1.2.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/jgrowl/jquery.jgrowl.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/plugins/spinner/spinner.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/jui/jquery.ui.css" media="screen" />

<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/mws.theme.css" media="screen" />

<!-- JavaScript Plugins -->

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jimgareaselect/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.dualListBox-1.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jgrowl/jquery.jgrowl.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.filestyle.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.dataTables.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/flot/jquery.flot.stack.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/colorpicker/colorpicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/tipsy/jquery.tipsy.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/sourcerer/Sourcerer-1.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.placeholder.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/jquery.mousewheel.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/plugins/spinner/ui.spinner.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-ui.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/mws.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/demo.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/themer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/demo.dashboard.js"></script>

在所有的鏈接處加上

${pageContext.request.contextPath }/static/

此時公共的文件就創建好了，在頁面中怎麼使用呢？
一之前的index.jsp為例,<head>標簽裏面的引入靜態資源的文件都删除
使用<jsp:include>從common.jsp引入
在這裏插入圖片描述
在此運行並訪問index.jsp頁面，可以看出頁面依然和之前一樣有樣式。

4.封裝公共的頭部導航欄

在之前的分析中還有頭部導航也是在每個頁面中都出現了的，也可以通過同樣的方法將它提取出來：
在jsp文件夾下創建一個head.jsp文件，把圖中內容都剪切進去
在這裏插入圖片描述
在頁面中只需要使用include加載進去就可以了

注意：

，在提取之後的jsp文件中，只需要放我們提取出來的部分即可：
在這裏插入圖片描述
不需要原來jsp文件的那些標簽例如<head> <body>等等，都不需要。

後面的部分都一樣，把左側菜單欄，內容底部的版權信息等都以同樣的方式提取出來即可：
這裏就不在贅述，提取是需看清楚標簽範圍，使用時在頁面相應比特置include.

4.整合測試

因為我們的首頁Home.jsp在WEB-INF文件夾下，所以無法直接訪問到，那麼接下來，我們編寫模擬登陸，通過servlet去訪問首頁，以測試之前的整合是否成功。
這裏只是測試所以我們簡單寫一下，在之前的UserController中編寫方法login()。
在這裏插入圖片描述
然後我們修改index.jsp中的form錶單的action屬性為：

${pageContext.request.contextPath}/user/login

即可，此時再次運行服務，訪問http://localhost:8080/點擊login按鈕，頁面跳轉到首頁。如圖：
在這裏插入圖片描述
和之前的html頁面一樣，由此可見。我們的整合就算是完成了。

版權聲明
本文為[王志威-yc]所創，轉載請帶上原文鏈接，感謝
https://cht.chowdera.com/2022/01/202201271844295744.html

邊欄推薦

猜你喜歡

隨機推薦