1.先做静态页模板aaa.html,放到springboot项目的根目录下,如下如中,新建一个templates的文件夹,将静态页放到这里面就可以了
静态页代码为
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>标题</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #f3f3f3;
font-family: "Microsoft YaHei ", "微软雅黑", "arial";
}
h1 {
height: 1px;
width: 100%;
margin: 10px 0;
background: #f1f1f1;
}
img {
width: 100%;
height: auto;
}
.bodys {
width: 100%;
height: auto;
overflow: Hidden;
padding-top: 10px;
padding-bottom: 50px;
background: #fff;
}
.head {
width: 96%;
min-height: 30px;
padding: 18px 2% 2px 2%;
line-height: 25px;
text-align: left;
font-size: 20px;
font-weight: bold;
color: #111;
}
.time {
width: 96%;
height: 20px;
line-height: 20px;
font-size: 11px;
text-align: left;
padding: 0 2%;
color: #999;
}
.info {
width: 96%;
height: auto;
padding: 10px 2%;
line-height: 25px;
text-align: left;
font-size: 15px;
}
</style>
</head>
<body>
<div class="bodys">
<div class="head" th:text="${itle}">未知</div>
<div class="time" th:text="${addDate}">未知</div>
<h1></h1>
<div class="info" th:utext="${content}">未知</div>
</div>
</body>
</html>
2.然后主要是 controller层,业务逻辑根据自己的需求来
@RequestMapping("/html")
@Controller
public class AppCommonHtmlController {
@RequestMapping(value = "/ceshi", method = RequestMethod.GET)
public ModelAndView getCeishi(“根据自己业务传入需要的参数”) {
ModelAndView modelAndView=new ModelAndView();
//根据自己的业务,和静态页中的参数对应上就行,也可以放入实体类,和静态页面对应就行了
modelAndView.addObject("title",“标题”);
modelAndView.addObject("addDate",“添加时间”);
modelAndView.addObject("content",“内容”);
//存入静态页的名称,就可以把处理好的静态页返回给app或前台
modelAndView.setViewName("aaa");
return modelAndView;
}
}
然后浏览器输入:http://localhost:8888/项目名/html/ceshi
该方法多适用于app端,需要根据不同的情况得到不一样内容的静态页展示到手机上,就可以通过这种方法,做一个静态页的模板,通过el表达式给模板不同的内容,然后app端可以通过访问的ip直接获取到静态页
下面的方法也可以,效果同上面一样
静态页代码
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>静态页</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #f3f3f3;
font-family: "Microsoft YaHei ", "微软雅黑", "arial";
}
h1 {
height: 1px;
width: 100%;
margin: 10px 0;
background: #f1f1f1;
}
img {
width: 100%;
height: auto;
}
.bodys {
width: 100%;
height: auto;
overflow: Hidden;
padding-top: 10px;
padding-bottom: 50px;
background: #fff;
}
.head {
width: 96%;
min-height: 30px;
padding: 18px 2% 2px 2%;
line-height: 25px;
text-align: left;
font-size: 20px;
font-weight: bold;
color: #111;
}
.time {
width: 96%;
height: 20px;
line-height: 20px;
font-size: 11px;
text-align: left;
padding: 0 2%;
color: #999;
}
.info {
width: 96%;
height: auto;
padding: 10px 2%;
line-height: 25px;
text-align: left;
font-size: 15px;
}
</style>
</head>
<body>
<div class="bodys">
<div class="head" th:text="${bbb.noticeTitle}">未知</div>
<div class="time" th:text="${bbb.publishDate}">未知</div>
<h1></h1>
<div class="info" th:utext="${bbb.noticeContent}">未知</div>
</div>
</body>
</html>
controller代码
@RequestMapping(value = "/ceshi", method = RequestMethod.GET)
public String getCeishi(“业务逻辑需要的入参”, Model model) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
JSONObject jsonObject = JSONObject.fromObject(“需要传到静态页的动态数据”);
jsonObject.remove("publishDate");//时间,具体作用不清楚,个人猜测是原本数据格式不支持,需要转换一下,所以要先删除后重新赋值
jsonObject.put("publishDate", sdf.format(notice.getPublishDate()));//时间重新赋值
model.addAttribute("bbb", jsonObject);//将转换好的数据存入model中
return "aaa"; //对应好静态页的名称return出去就可以了
}