学习用Sts做一个SpringBoot的WEB项目（3）工作页面框架
2018-10-08 10:47
621 查看
在第二节的页面中实现了基本的登录功能，但是因为没有设计工作页面，所以只能在登录页刷来刷去。正常登录后，肯定是进入工作页面，根据一般的布局，我们选择一个上中（左右）下的框架。
页面设计
页面设计主要是考虑我们整个系统的业务逻辑按照什么样的框架进行管理。或者简单说，系统适合几级菜单。通常两级菜单的话，就不需要在顶部页面中放置一级菜单，只需要在左边导航页放置菜单即可。三级菜单的话，一级菜单可以放在顶层页面，左边导航页放置二级和三级菜单。当然，这是配合onclink而不是onmouse，如果是onmouse事件，菜单自动展开，那就只需要在导航栏实现即可。
对本系统而言，我们考虑三级菜单，那么我们的顶层菜单会被放置在顶层页面。传统的html和jsp页面，都是用iframe来实现，在thymeleaf中似乎不太可行，根据官方提供的标签，我们结合thymeleaf提供的三个标签:th:fragment th:include和th:replace标签来实现。
先来做一个简单的页面，把页面分成上图设计的4个区域
在templates文件夹下添加main.html
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
<div style="height:80%;width=100%">
<div style="height:100%;width:200px;float:left;border-right:1px solid">menu.html</div>
<div style="height:100%;margin-left:0px">center.html</div>
</div>
<div style="height:8%;width=100%;text-align:center;border-top:1px solid">bottom.html</div>
</body>
</html>
这里添加边线是为了方便区分各个区域，请注意，这个时候是不能向浏览器请求http://localhost:8080/projects/main.html的，因为我们的main.html其实是一个thymeleaf模板，而不是真正的html页面，即使它没有添加任何th标签，但是也要请过thymeleaf的渲染之后才能成为页面。所以我们必须写一个controller来对页面响应做请求。
[code]package com.dyz.action;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/")
public class BaseAction {
@RequestMapping("/main")
public String getMain() {
return "main";
}
}
然后来看页面效果
那么如果我们要直接请求静态页面怎么办？很简单，把静态页面放在static文件夹下就行了
hello.html放在static下，请求hello.html
[code]<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 静态html5页面，不是thymeleaf模板 </body> </html>
如果把页面移动到templates文件夹下
现在回到main页面，我们定义四个子模板、top.html、menu.html、center.html、bottom.html,然后使用th:include来引入这四个模板
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div th:include="top" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
<div style="height:80%;width=100%">
<div th:include="menu" style="height:100%;width:200px;float:left;border-right:1px solid">menu.html</div>
<div th:include="center" style="height:100%;margin-left:0px">center.html</div>
</div>
<div th:include="bottom" style="height:8%;width=100%;text-align:center;border-top:1px solid">bottom.html</div>
</body>
</html>
看页面效果
th:fragment
这个标签用于定义一个模板文件中可供调用的部分，在上面的例子中，我们直接使用了th:include="top"，然后把整个模板引入到了main.html中，实际上可以在top.html中定义th:fragment来选择调用哪部分
先看top.html
[code]<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 顶层页面 </body> </html>
非常简单的模板，我们在里面添加th:fragment之后再调用
[code]<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 顶层页面<br/> <div th:fragment="frame1">顶层DIV</div> <p th:fragment="frame2"> 顶层P <span th:fragment="frame3"> 顶层P下的SPAN </span> </p> </body> </html>
再看页面效果
我们引用了整个top.html模板，所以里面的内容全部显示出来了，现在使用选择器来选择不同的fragment,选择器的语法很简单，两个冒号 :: 表示选
择器，类似java中的点 . 比如Math.random()之类的。thymeleaf中使用 模板名::fragment名来选择 在
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div th:include="top::frame1" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
<div style="height:80%;width=100%">
<div th:include="menu" style="height:100%;width:200px;float:left;border-right:1px solid">menu.html</div>
<div th:include="center" style="height:100%;margin-left:0px">center.html</div>
</div>
<div th:include="bottom" style="height:8%;width=100%;text-align:center;border-top:1px solid">bottom.html</div>
</body>
</html>
我们把
[code]<div th:include="top" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
替换成了
[code]<div th:include="top::frame1" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
效果变成了
th:include和th:replace
th:include和th:replace都可以达到替换页面的效果，但是区别是include不会改变引用层的原本样式，但是relpace会用fragment替换掉引用层，例如
[code]<div th:include="top::frame3" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
使用后的效果
查看页面源码，会显示
[code]<div style="height:12%;width=100%;text-align:center;border-bottom:1px solid"> 顶层P下的SPAN </div>
如果使用replace
[code]<div th:replace="top::frame3" style="height:12%;width=100%;text-align:center;border-bottom:1px solid">top.html</div>
页面效果变成了
页面已经变形了，查看页面源码：
[code]<body> <span> 顶层P下的SPAN </span>
我们原本的div被替换成了span了，显然，对于我们定义的fragment，如果使用include，只会替换这个fragment的内容，但是使用replace，则会替换整个css结构。
页面基本框架
页面的大体模型有了，那么我们的基本框架应该是顶层页面显示顶层菜单，顶层菜单控制menu.html显示的内容，menu.html中的菜单控制center.html的显示内容
我们先设定顶层菜单有系统管理和项目管理两个顶级菜单，id分别为1和2。系统管理下有用户管理、角色管理、权限管理、字典表管理等，项目管理下有项目管理、应用管理、部署管理，那么top.html大致可以设计成
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<div id="div1">
<p>
<span><a href="#" onclick="choose_menu('1')">系统管理</a></span>|
<span><a href="#" onclick="choose_menu('2')">应用管理</a></span>
</div
20000
>
<div id="div2">
<p>
<span><a href="#" onclick="logout()">登出</a></span>
</p>
</div>
</html>
main.html模板中添加样式和js方法
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="@{/common/js/jquery.js}"></script>
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
#div1{
height:100%;
width:80%;
position:relative;
float:left
}
#div1 p{
position:absolute;
bottom:1px;
padding:1px;
margin:1px
}
#div1 span{
text-align:left
}
#div2{
height:100%;
width:19%;
position:relative;
float:right;
text-align:right
}
#div2 p{
position:absolute;
bottom:1px;
right:1px;
padding:1px;
margin:1px
}
#div2 span{
text-align:right
}
</style>
<script>
function choose_menu(id){
alert(id);
var url="/projects/main/choose_menu?id="+id;
$(menu_div).load(url);
}
function go_center(url){
alert(url);
$(center_div).load(url);
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="txt" th:include="top" style="height:12%;width=100%;border-bottom:1px solid;position:relative">top.html</div>
<div style="height:80%;width=100%">
<div id="menu_div" th:include="menu" style="height:100%;width:200px;float:left;border-right:1px solid">menu.html</div>
<div id="center_div" th:include="center" style="height:100%;margin-left:0px">center.html</div>
</div>
<div th:include="bottom" style="height:8%;width=100%;text-align:center;border-top:1px solid">bottom.html</div>
</body>
</html>
使用jquery的load方法来刷新div，我们请求了/main/choose_menu，那么我们的controller中要有方法来接收请求并返回对应页面
[code]package com.dyz.action;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/")
public class BaseAction {
@RequestMapping("/main")
public String getMain() {
return "main";
}
@RequestMapping("/main/choose_menu")
public String choose_menu(String id,Model model) {
//String id = request.getParameter("id");
System.out.println("菜单ID是:"+id);
Map<String,String> menus = new HashMap<String,String>();
if("1".equals(id)){
menus.put("用户管理","/user/list");
menus.put("角色管理","/role/list");
menus.put("权限管理","/authority/list");
menus.put("字典表管理","/dict/list");
}else if("2".equals(id)){
menus.put("项目管理","/project/list");
menus.put("应用管理","/app/list");
menus.put("部署管理","/deploy/list");
}else{
menus.put("未知菜单","/unknow");
}
model.addAttribute("menus", menus);
return "menu";
}
}
因为还没添加数据库的角色和权限数据，所以我们先手工写几个菜单，然后是menu.html
[code]<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<style type="text/css">
ul{ list-style: none outside none;}
</style>
</head>
<body>
<ul th:each="menu:${menus}">
<li><a href="#" th:onclick="'javascript:go_center(\''+${#servletContext.contextPath}+${menu.value}+'\')'"><span th:text="${menu.key}"></span></a></li>
</ul>
</body>
</html>
OK，看一下实际效果
任意点一个二级菜单，因为还没有对应的路径，所以会报404错误
OK，基本页面完成，剩下就是css把页面做美观，以及写相应的菜单类，存数据库了。
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (3)Spring-boot学习 做一个简单的带访问数据库的web项目
- spring boot -- 多个spring boot 项目部署到同一个web 容器
- Spring Boot 学习二、基于SpringBoot + Mybatis实现SpringMVC Web项目
- Spring Boot学习--打包一个可执行的jar项目
- 【springBoot】之快速构建一个web项目
- spring cloud学习第一步:创建一个可运行的spring boot项目
- IDEA上面搭建一个SpringBoot的web-mvc项目
- 一步步学习SpringBoot（一） 快速搭建一个web
- spring boot框架学习9-spring boot的web开发(5)-错误解决及跳转页面
- Python web框架Django学习（1）——在win7 64bit下配置开发环境Django：一个可以使Web开发工作愉快并且高效的Web开发框架。 使用Django，使你能够以最小的代价构建和
- 初学spring boot 记录下过程，新建一个web项目(一)
- 使用springboot创建web项目（一），登录页面
- IDEA上面搭建一个SpringBoot的web-mvc项目
- spring-boot轻松搭建一个项目框架（代码）
- IDEA上面搭建一个SpringBoot的web-mvc项目遇到的问题
- spring Boot项目遇到的一个小问题学习到repeatable annotations
- 快速创建一个基于Gradle构建的SpringBoot Web项目（SpringBoot-01）
- thymeleaf :springboot整合mybatis的web项目中使用html而不是jsp当页面渲染
- spring boot 基础web项目框架说明
- SpringBoot 学习记录(一): 简单web项目