Java Web 学习笔记(四) 基于 SpringMVC+BootStrap 创建WebApp
来源:互联网 发布:python怎么取最大 编辑:程序博客网 时间:2024/05/21 19:35
简介
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 页面。
- Java Web 学习笔记(四) 基于 SpringMVC+BootStrap 创建WebApp
- Java Web 学习笔记(二) 使用 Maven 创建 WebApp
- Bootstrap学习笔记(四)
- Java Web学习笔记(四)servlet
- SpringMVC学习笔记(四)
- Java Web学习笔记(四)
- Full Stack Web Development Bootstrap(四)学习笔记
- Bootstrap学习笔记(四)网格系统
- Intellij下创建Springmvc webapp(图)
- Intellij下创建Springmvc webapp(代码)
- springmvc +bootstrap创建简单web项目
- SpringMVC学习笔记四
- (学习笔记)Bootstrap基础--Web组件
- Maven学习(四)创建java项目和web项目
- python学习笔记5-创建一个webapp
- MyEclipse创建基于Maven的Web项目去掉项目名后缀方案(Maven Webapp)
- SpringMvc学习笔记(四)Restful 风格
- JAVA学习笔记:(四)创建jar包
- strcpy_s,sprintf_s,wcscpy_s,swprintf_s,wcscat_s,加了_s就真的安全吗?
- 计算机--机器学习---机器learning技法sum
- libevent学习之跨平台Reactor接口的实现
- centos安装php模块之后还是提示not found解决方法
- 迈出从3K到1W的重要一步——掌握设计模式
- Java Web 学习笔记(四) 基于 SpringMVC+BootStrap 创建WebApp
- 【技术创业】Excuse me,这家伙的梦想竟然是拯救中国足球
- Linux环境下svn回滚单个文件的shell函数
- Android Studio修改项目目录结构
- “不要相信一个程序员在加班时间写出的代码”这是真的吗?
- python学习记录--日期和时间
- Packet for query is too large(mysql查询数据过大)
- JS的构造函数
- Flex Layer层标签