編程-前端jsp頁面開發

在 【編程培訓】基礎增刪改查訓練 - 後端篇 的學習中大家了解了java後端基礎的增刪改查開發過程，下面的內容將會對大家介紹前端jsp頁面開發的過程。

1. Ajax的應用

前端調用後端restful風格的controller時建議大家使用Ajax。

首先引入jquery文件，在system-study-web目錄下找到main --> webapp目錄，新建文件夾js/jquery文件夾

將下面的jQuery文件下載並解壓，放入jquery目錄下

2. 新建初始頁面index.jsp

在eclipse左上角點擊file，在彈出的下拉框中選擇 new --> other

在彈出框中輸入jsp ，選中JSP File點擊next

在新頁面中選中 system-study-web目錄下的 src --> main --> webapp -->views ，並且在file name中修改文件名為index.jsp ，點擊finish完成。

註：任何JSP頁面均在此目錄下創建，這是由框架配置決定的

3. 修改index.jsp文件內的編碼規則

打開index.jsp 將其中默認的 "ISO-8859-1" 修改為 "UTF-8" ，如果不修改在傳輸中文的時候會出現亂碼問題。

修改後

4.開發頁面跳轉控制器

在 system-study-java 模塊下的 src --> main --> java --> com --> saiWeiSi --> controller 目錄下新建 IndexController.java 類。

註：任何controller均在此目錄下創建，這是由框架配置決定的

在類聲明（public class IndexController ）之前加入控制器的註解

//Controller 指示這是一個控制器//RequestMapping 指示將這個控制器於映射到哪個URL，即訪問改URL就會訪問這個控制器@Controller@RequestMapping("/")public class IndexController {

5. 加入註解之後我們開始開發跳轉功能

在IndexController.java 類中新建index方法，並且加上註解。

此處需要注意三點：

• @RequestMapping如果不配置任何參數，訪問系統根目錄時會自動調用此方法
• 為防止在不同伺服器環境中會出現相對路徑不同而找不到文件，此處將系統根目錄存入"ctx"參數中，避免出現路徑不同導致找不到文件
• 返回參數"index"時，springMVC會自動訪問/WEB-INF/views/下的index.jsp文件

//這裡的RequestMapping指示這個方法被映射到哪個URL，且指定什麼方式訪問 //@RequestMapping如果不配置任何參數，訪問系統根目錄時會自動調用此方法 @RequestMapping public String index(Map<String, Object> map,HttpServletRequest request){ //為防止在不同伺服器環境中會出現相對路徑不同而找不到文件，此處將系統根目錄存入"ctx"參數中，避免出現路徑不同導致找不到文件 map.put("ctx", request.getContextPath()); //返回參數"index"時，springMVC會自動訪問/WEB-INF/views/下的index.jsp文件 return "index"; }

此時可以啟動程序測試前端index.jsp頁面是否能訪問了

啟動程序之後，在瀏覽器中輸入http://localhost:8080/study