前端最好使用vue.js
这里是freemaker 整合spring boot
1.编写pom文件：
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>
2.编写cotroller:
@RequestMapping("/b") public String b( Map<String,Object> map) { Student s1=new Student("a","f",1,"aa"); Student s2=new Student("b","m",2,"bb"); Student s3=new Student("c","m",3,"cc"); Student s4=new Student("d","f",4,"dd"); ArrayList list= new ArrayList(); list.add(s1); list.add(s2); list.add(s3); list.add(s4); map.put("stu",list); map.put("name","yangtao"); return "views/b"; }
3.编写页面(使用了bootstrap)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Owsome</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <h1>Hello,${name}.这是另外一个界面</h1> <div class="col-md-6" > <img style="height: 500px " src="/imags/original.jpg" class=".img-responsive img-circle " alt="error"> </div> <div class="col-md-6"> <div style="height: 100px"></div> <table > <table border="1" class="table" > <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>地址</td> </tr> <#list stu as item> <tr> <td>${item.name}</td> <td>${item.gender}</td> <td>${item.age}</td> <td>${item.address}</td> </tr> </#list> </table> <a href="http://127.0.0.1:8080/c">第三个页面</a> </div> </div> </div> </body> </html>
来源：博客园
作者：塔上灯
链接：https://www.cnblogs.com/rainbowbridge/p/11410286.html