您的位置：首页 > 移动开发 > WebAPP

Java Web 学习笔记（四） 基于 SpringMVC+BootStrap 创建WebApp

2017-01-12 16:42 846 查看

简介

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 页面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap java mvc spring
相关文章推荐
新的分享
章节导航