Spring MVC和Twitter Bootstrap
整体的数据流如下图所示。
使用Spring MVC和Twitter Bootstrap进行响应式Web设计
在这个例子中,我们采用Twitter Bootstrap和JQuery-tmpl创建了一个单页Web站点。在前端,数据是用以下的方式提交的:
01 |
$( '#searchResults' ).click( function (){
|
02 |
var origin = $( "#origin option:selected" ).val();
|
03 |
var destination = $( "#destination option:selected" ).val();
|
04 |
var startDate= $( "#startDate" ).val();
|
05 |
var endDate = $( "#endDate" ).val();
|
07 |
$.get( "resources/datatemplates/flightList.html" , function (template){
|
08 |
$.get( "/air/searchResultsJson?leavingFrom=" + origin + "&goingTo=" + destination + "&startDate=" + startDate + "&endDate=" + endDate, function (data){
|
09 |
$( "#dataRegion" ).html( "" );
|
10 |
$.tmpl(template, data).appendTo( "#dataRegion" );
|
这里执行了JQuery,获得了以JSon对象形式存储的航班列表。
JQuery-tmpl插件用来绑定flightList.html,从而实现单页面Web站点设计。flightList.html文件内容如下所示:
3 |
< td >${startAirport}</ td >
|
5 |
< td >< a href = "#" onclick = "return getDetails('${endAirport}')" >${endAirport}</ a ></ td >
|
在
Spring MVC侧,需要添加Maven依赖并调用相关方法,可从该
链接获得更详细的讲解。
控制器(controller)的代码如下所示:
01 |
@RequestMapping (value = "searchResultsJson" , method = RequestMethod.GET)
|
03 |
List searchResultsJson( @RequestParam String leavingFrom,
|
04 |
@RequestParam String goingTo, @RequestParam String startDate,
|
05 |
@RequestParam String endDate) {
|
06 |
Form form = new Form();
|
08 |
form.setOrigin(leavingFrom); |
09 |
form.setDestination(goingTo); |
10 |
form.setStartDate(startDate); |
11 |
form.setReturnDate(endDate); |
13 |
return locationService.selectFlights(form);
|
上面的例子中,
@ResponseBody用于将JSon响应返回到客户端。
相关推荐
使用Bootstrap快速设计和自定义响应式移动优先站点。 适用于现代Java应用程序的免费开源模板框架。 基于Composite模式,它可以简化用户界面的开发。 jQuery是一个快速,小型且功能丰富JavaScript库。 它使诸如HTML...
响应式引导站点 该项目旨在介绍如何创建Spring MVC + Bootstrap + Tiles应用程序 图书馆 SpringMVC Apache Tiles 3.0.5 Bootstrap 3.2.0 jQuery 1.11.0 Log4j 要求 版本8+ 如何运行应用程序 在Windows上 # # ...
基于SSM框架的订餐系统项目是一个以Spring、Spring ...Bootstrap:用于快速构建响应式和美观的界面设计。 MySQL数据库:存储用户和餐厅的相关信息。 实现的功能: 用户注册和登录:用户可以通过注册账号登录系统,也可
前端设计:采用HTML, CSS, JavaScript结合Bootstrap或Vue.js框架,创建响应式和用户友好的界面。 数据库管理:使用MySQL或PostgreSQL数据库,确保数据的安全性和高效处理。 安全措施:集成Spring Security,实现用户...
前端设计:使用HTML, CSS, JavaScript,结合Bootstrap或Vue.js框架,创建响应式和用户友好的界面。 数据库管理:使用MySQL或PostgreSQL数据库,确保数据的安全性和高效处理。 安全措施:集成Spring Security,实现...
Bootstrap:一个用于快速开发响应式网站的前端框架。 jQuery:一个流行的JavaScript库,简化了处理HTML文档、事件处理、动画等操作。 Webpack 和 Babel:前端构建工具,用于打包、转译和优化前端资源。 后端技术: ...
前端设计:使用HTML, CSS, JavaScript结合Bootstrap或Vue.js框架,创建响应式和用户友好的界面。 数据库管理:使用MySQL或PostgreSQL数据库,确保数据的安全性和高效处理。 安全措施:集成Spring Security,实现用户...
旅馆客房管理系统 技术架构 Spring Boot 使用 Spring Boot 快速创建基于 Spring 框架的应用程序,遵循「约定优于配置」的原则。...使用 Bootstrap 作为前端界面框架,支持响应式网页设计;同时使用 jQuery 简化 JavaSc
前端采用HTML、CSS和JavaScript构建用户界面,通过Bootstrap等前端框架实现响应式布局和交互效果。后端采用Spring Boot作为应用框架,简化了配置和部署过程。同时,集成了MyBatis作为持久层框架,实现了数据库操作和...
Bootstrap:一个前端框架,用于快速构建响应式布局和美观的界面。 jQuery:一个JavaScript库,用于简化DOM操作和实现动态效果。 Git:一个版本控制工具,用于代码管理和团队协作。 该美食推荐商城的主要功能有: ...
Spring MVC:作为Web层的框架,它负责处理用户请求、数据绑定、视图解析等,以实现MVC(模型-视图-控制器)设计模式。 MyBatis:一个持久层框架,它简化了数据库操作,通过XML或注解将对象与SQL语句映射起来,便于...
移动端适配:考虑到学生使用习惯,该平台可能对移动设备友好,提供响应式设计或移动应用。 由于是针对校园环境设计,此类平台通常需要符合教育机构的操作规范,具备一定的安全性和易用性,并可能根据具体需求定制...
java项目开发实录第四版源码NixMash ...响应式管理仪表板 RSS 与 AbstractRSSView 百里香叶 喜欢按钮 文件上传 带 Blueimp 的多文件上传 JPA @SqlResultSetMapping 和 @ConstructorResult Spring Gradle 依赖插件 F
以上介绍是基于典型的高校体育场管理系统的功能和技术特点,具体的功能和实现细节可能会根据实际的系统设计和需求有所不同。由于是压缩包形式的资源,通常还会包含部署说明文档和演示视频,以帮助用户理解和部署系统...
Bootstrap前端框架:用于快速搭建响应式界面,确保应用在不同设备上的兼容性和美观性。 JSP+HTML/CSS+JavaScript:用于实现用户界面的展示和交互功能。 功能介绍: 党员信息管理:系统能够录入和管理党员的基本...
Bootstrap:一个响应式前端框架,用于构建移动端友好的用户界面。 功能方面,该系统主要包括: 公交信息查询:用户可以通过输入公交线路、站点或地点,查询到相关的公交信息,如线路经过的站点、预计到达时间等。 ...
前端技术:可能包括HTML, CSS, JavaScript及前端框架如Bootstrap或Vue.js等,以创建响应式用户界面。 服务器:部署应用可能需要Tomcat或其他Servlet容器。 功能概述: 客户管理:系统可以保存客户信息,包括联系...
Spring启动登录CRUD Web层的Spring Web MVC 具有Hibernate框架或数据访问层的Spring Data JPA Spring Security进行身份验证,...HTML 5和Bootstrap 4用于响应式用户界面 JUnit 5和AssertJ用于单元测试 MySQL数据库
Bootstrap:一个前端框架,用于构建响应式布局,使平台在不同设备上都能正常显示。 jQuery:一个JavaScript库,用于简化DOM操作,提高前端开发效率。 该平台具有以下功能: 用户注册与登录:用户可以在平台上注册...
描述 系统“迷你博客” 需求 思考,设计一个类似迷你博客的系统,允许用户...-前端(Web 应用程序):Bootstrap(应用响应式 Web 设计)+ Spring MVC 4.0。 - 编程语言:Java (JDK 1.7) -框架:Spring 3.0.6 + RESTE