當前位置:網站首頁>分布式商城項目-後臺開發-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

隨機推薦