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响应返回到客户端。
相关推荐
在Spring MVC项目中,Bootstrap可以用于设计用户界面,包括导航栏、按钮、表单、模态框等,使得Web应用具有专业且一致的外观。 **Spring MVC与jQuery和Bootstrap的结合** 1. **视图层集成**:Spring MVC 使用...
Bootstrap是一个流行的前端框架,主要用于快速构建响应式和移动优先的Web页面。它提供了一系列预定义的CSS样式、JavaScript组件和HTML模板,如栅格系统、导航条、按钮、表单等,帮助开发者快速创建美观且一致的用户...
综上所述,这个考勤及薪酬管理系统利用了Java技术栈的强大功能,通过Spring MVC和Spring实现了灵活的业务处理和解耦,借助Hibernate简化了数据库操作,Bootstrap则提供了美观且响应式的用户界面,MySQL作为数据存储...
它提供了一套响应式设计的CSS和JavaScript组件,可以快速创建美观且适应不同设备屏幕大小的页面。Bootstrap包含了一系列预定义的样式、网格系统、表单、按钮、导航等元素,极大地提高了开发效率。 Spring MVC是...
**Bootstrap** 是一个流行的前端开发框架,它提供了丰富的UI组件和响应式布局,使得网页设计更加便捷和美观。在本系统中,Bootstrap被用来创建用户友好的界面,确保在不同设备上都能提供良好的用户体验。 在实际...
最后,Bootstrap是一个流行的前端开发框架,它提供了丰富的CSS样式和JavaScript组件,使开发者能够快速构建响应式、移动优先的Web应用。在用户查询功能的实现中,Bootstrap可能被用于设计用户界面,包括表格展示、...
总的来说,这个管理系统实现了现代Web开发的最佳实践,利用了Spring的灵活性,Hibernate的数据访问能力,Spring MVC的MVC架构,以及Bootstrap的前端设计优势。通过合理组织代码和利用这些工具,开发者能够构建出功能...
Bootstrap是这个系统前端UI设计的核心,它是一个流行的开源前端框架,提供了丰富的预设样式、组件和JavaScript插件,用于快速构建响应式和移动优先的网页。Bootstrap的使用使得后台管理界面在各种设备上都能保持良好...
Spring(一个全面的企业级应用开发框架),Spring MVC(Spring框架的一个模块,用于构建Web应用程序)以及Bootstrap(一个流行的前端框架,用于快速构建响应式和移动优先的网站)。接下来,我们将深入探讨这些技术在...
这是一个基于Java技术栈的通用后台管理系统,主要使用了Spring MVC、Spring、Hibernate、Bootstrap和Maven等技术。这些技术在IT行业中广泛应用于企业级Web应用开发,构建高效、可维护的系统。下面将分别详细解释这些...
Bootstrap是一个流行的前端开发框架,它提供了丰富的UI组件和响应式布局,使得网页能够在不同设备上自适应显示。在这个系统中,Bootstrap被用来设计用户友好的界面,提高用户体验。 最后,Maven是一个项目管理工具...
4. Bootstrap:Bootstrap 是一个流行的前端框架,用于快速构建响应式和移动优先的网页。它包含一系列预定义的CSS样式、JavaScript组件和HTML模板,可以加速网页设计和开发。在本项目的管理界面中,Bootstrap被用来...
Spring MVC、Spring Security、Thymeleaf 和 Bootstrap 是构建现代Web应用程序的重要技术栈。下面将分别详细介绍这些技术及其在后台管理中的应用。 1. Spring MVC: Spring MVC是Spring框架的一个模块,专门用于...
1. **Bootstrap**:这是一个流行的前端开发框架,提供了丰富的UI组件,如响应式布局、表单、按钮、导航等,使得网页设计更加美观且适应不同设备的显示。在CRM系统中,Bootstrap帮助实现了用户界面的统一风格和良好的...
4. Bootstrap:Bootstrap是由Twitter开发的一个前端开发框架,主要用于创建响应式布局和移动设备优先的Web项目。它提供了丰富的CSS样式、JavaScript插件和HTML组件,如导航栏、按钮、表格、模态框等,极大地加速了...
总结来说,本项目利用SpringBoot的强大功能和灵活性,结合Bootstrap的美观和响应式设计,以及RESTful的高效通信方式,构建了一个功能完备、适应多设备的个人博客系统。对于想要学习和实践Java Web开发的开发者,这是...
标题中的“spring、spring mvc、hibernate、bootstrap、maven开发学生籍贯后台管理系统”揭示了这个项目是基于一系列流行的Java技术和前端框架构建的一个完整的Web应用。下面将详细介绍这些技术及其在系统开发中的...
综上所述,这个酒店住宿管理系统充分利用了现代Java技术的优势,通过Bootstrap实现了用户友好的界面,借助Spring和Spring MVC实现了灵活的业务逻辑处理,使用Hibernate简化了数据库操作,而Maven则保证了项目的构建...
4. **Bootstrap**:Bootstrap是流行的前端开发框架,它提供了丰富的CSS样式和JavaScript组件,用于快速构建响应式和移动优先的网页设计。在失物招领系统的前端页面中,Bootstrap可以帮助实现美观且易于跨设备使用的...