當前位置:網站首頁>分布式商城項目-後臺開發-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
邊欄推薦
猜你喜歡
隨機推薦
- uniapp上傳圖片及組件傳值
- 瑞利年金險資金保障安全嗎?收益高不高啊?
- 華為手機USB連不上電腦的解决方法
- Flutter 2,移動金融應用開發
- 關於st25系列NFC標簽簡單介紹及st25TV系列用於門禁讀取時的注意事項總結
- 關於用ffmpeg轉手機視頻發現視頻長寬倒了的問題
- 函數 / 類模板--模板2
- 數組中的第k個最大的元素--優先級隊列、排序、堆、排序
- 單片機實例27——ADC0809A/D轉換器基本應用技術(硬件電路圖+匯編程序+C語言程序)
- Collection集合的學習
- 一場面試結束,某度員工從事Android 5年為何還是初級工程師?
- 3本書閱讀筆記【人月神話-Go語言實戰-研發能力持續成長路線】01
- PHP垃圾回收機制
- 【電子技術】什麼是LFSR?
- 死鎖?如何定比特到死鎖?如何修複死鎖?(jps和jstack兩個工具)
- 快樂寒假 22/01/20
- image
- 噴程序員?SURE?
- LDO分壓電阻計算小工具
- 面試之求一串字符串中每個字符的出現次數
- 【ISO15765_UDS&OBD診斷】-01-概述
- 【Mysql上分之路】第九篇:Mysql存儲引擎
- RHCE 第一次作業
- 2021.10.16我的第一篇博客:一切皆有可能!
- CTA-敏感行為-讀取IMEI
- 面試被問怎麼排查平時遇到的系統CPU飆高和頻繁GC,該怎麼回答?
- nuxt項目總結-綜合
- 自然語言處理學習筆記(一)
- C語言第一課
- 各比特大佬,Spark的重點難點系列暫時更新完畢
- 基於 esbuild 的 universal bundler 設計
- XCTFre逆向(四):insanity
- 理解什麼是真正的並發數
- JVM腦圖
- 【Pytorch(四)】學習如何使用 PyTorch 讀取並處理數據集
- 函數棧幀的創建與銷毀
- 構建神經網絡- 手寫字體識別案例
- 多模態生成模型ERNIE-VILG
- kotlin不容忽視的小細節
- 備戰一年,終於斬獲騰訊T3,我堅信成功是可以複制的