簡介
SpringMVC
Spring MVC屬於SpringFrameWork的後續產品,已經融合在Spring Web Flow裏面。Spring 框架提供了構建 Web 應用程序的全功能 MVC 模塊。使用 Spring 可插入的 MVC 架構,從而在使用Spring進行WEB開發時,可以選擇使用Spring的SpringMVC框架或集成其他MVC開發框架,如Struts1,Struts2等。
BootStrap
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。[1] 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。[2] 國內一些移動開發者較爲熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap源碼進行性能優化而來。
創建項目
利用Maven創建WebApp
在前面的文章中已經簡單介紹瞭如何利用Maven創建WebApp,這裏創建一個charleymavenweb01項目,創建之後項目結構如下:
可以看到Maven已經爲我們創建了WebApp的基本骨架了。
添加BootStrap相關文件
下載BootStrap
下載地址:http://getbootstrap.com/getting-started/#download
筆者下載的是編譯並壓縮後的BootStrap,版本是 3.3.7 。如果需要更仔細的學習BootStrap,可以下載BootStrap源碼。
因爲BootStrap是基於jQuery的,所以還需要下載jQuery,然後把jQuery的.js文件放到BootStrap目錄下js文件夾下。
將BootStrap相關文件添加到項目中
把BootStrap目錄複製到項目webapp根目錄下,如下圖:
可以看到BootStrap中包括css樣式,js腳本以及font字體文件。其中css和js是需要在頁面中引用的。
在頁面中引用BootStrap
Jsp頁面模版如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--頁面標題-->
<title>Title</title>
<!--頁面Logo-->
<link rel="shortcut icon" href="<%=basePath%>images/voicecyber.ico"/>
<!--引入bootstrap樣式-->
<link href="<%=basePath%>bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<h1>Welcome, this is SpringMVC Bootstrap WebApp</h1>
</div>
<!--引入jquery腳本-->
<script src="<%=basePath%>bootstrap/js/jquery.js" type="text/javascript"></script>
<!--引入bootstrap腳本-->
<script src="<%=basePath%>bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
注意:
- 1、在head標籤中使用link標籤引用BootStrap的css文件
- 2、最好將BootStrap的js腳本文件放到body標籤結束之前,這樣頁面會優先加載html內容後再加載腳本文件
- 3、一定要在引用BootStrap腳本之前引用jquery的腳本
這樣包含BootStrap的頁面就創建成功了,運行效果如下:
添加SpringMVC相關的jar庫
使用Maven添加SpringMVC庫非常簡單,首先在Maven Repository中查找SpringMVC組件。
Maven Repository地址:http://mvnrepository.com/
在搜索框中輸入 spring web mvc 進行查找,然後選擇一個版本,如:4.3.5 Release 。
將紅框中的內容複製到pom文件的 dependencies節點中,然後點擊一下Maven Project面板中的 同步 按鈕,就會自動下載好SpringMVC相關的庫文件,這樣SpringMVC就引用成功了。
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.5.RELEASE</version>
</dependency>
配置web.xml
web.xml中主要配置兩個內容,一是dispatcher servlet ,二是 servlet-mapping。
<!--DispatcherServlet 需要在 WEB-INF 中創建 Spring 的配置文件 dispatcher-servlet.xml-->
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!--DispatcherServlet 的 Mapping-->
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
配置dispatcher-servlet.xml
需要在WEB-INF目錄下創建一個配置文件dispatcher-servlet.xml,注意這個文件名應該Servlet的名稱加上Servlet,如這裏的 dispatcher-servlet。配置文件內容如下:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
<!-- 配置自動掃描的包 -->
<context:component-scan base-package="pers.charley.demos.charleymavenweb01.controllers"></context:component-scan>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/views/"
p:suffix=".jsp" />
</beans>
添加控制器
新建一個控制器類如LoginController,在控制器裏添加一個方法login。
package pers.charley.demos.charleymavenweb01.controllers;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* Project charleymavenweb01
* Package pers.charley.demos.charleymavenweb01.controllers
* <p>
* Created by Charley on 2017/1/12.
*/
@Controller
@RequestMapping("/login")
public class LoginController {
private static final String VIEW_LOGIN = "login";
@RequestMapping("login")
public String login() {
return VIEW_LOGIN;
}
}
注意,LoginController類要加上@controller註解,表示該類是一個控制器,再加上@requestmapping註解指定該控制器的匹配url路徑,同樣,方法login也要加上@requestmapping註解。
添加視圖頁
在WEB-INF中創建一個目錄views用來存放視圖頁面,然後創建一個jsp頁面login.jsp。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--頁面標題-->
<title>Title</title>
<!--頁面Logo-->
<link rel="shortcut icon" href="<%=basePath%>images/voicecyber.ico"/>
<!--引入bootstrap樣式-->
<link href="<%=basePath%>bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<h1>Welcome, this is Login page!</h1>
</div>
<!--引入jquery腳本-->
<script src="<%=basePath%>bootstrap/js/jquery.js" type="text/javascript"></script>
<!--引入bootstrap腳本-->
<script src="<%=basePath%>bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
注意:視圖頁的名子應該跟控制器中方法的返回值匹配。
添加跳轉連接
在index頁面中添加一個連接,連接到login頁面。
<div class="container">
<h1>Welcome, this is SpringMVC Bootstrap WebApp</h1>
<a href="login/login.do">login</a>
</div>
注意:連接地址爲 controller/action.do 格式。
測試
在瀏覽器中輸入 http://localhost:8080/charleymavenweb01 打開index頁面。
點擊 login 連接,跳轉到 login 頁面。