◆版权声明:本文出自胖喵~的博客,转载必须注明出处。
转载请注明出处:https://www.cnblogs.com/by-dream/p/11336057.html
根据之前的教程,我们已经可以独立的去开发一个后台的程序呢,本节开始我会教大家如果将前后端结合起来,用前后端分离的方式,去做个小小的web程序。
模版
Spring boot本身就友好的支持了前端模版引入,目前前端模版中Velocity和Freemarker,由于Spring boot的新版本已经不支持Velocity了,所以这里简单说下引入Freemarker的方法,具体二者的区别大家有兴趣可以自己去看下文档。我直接开始,不废话了。
jar包引入
在 pom.xml 中进入 spring-boot-starter-freemarker:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
配置文件:application.properties 中无需加入任何配置,这个是比velocity便捷的地方。
模版文件引入
新建资源文件 index.ftl
<html>
<body>
地点:${location}
</br>
时间:${time}
</br>
完成了springboot引入前端模版
</br> ${timestamp}
</body>
</html>
这里可以看到,使用 ${} 可以接受服务端传来的参数,这就是模版的作用,如果是velocity的话,资源文件的后缀是 vm
这里我的目录结构是这样:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLyIDNzYTN4MDNtMDO4QTMzQDOxETM4ATOxAjMtYDNzYjM28CX4ATOxAjMvwlN0MjNyYzLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
controller层
直接看代码:
package com.bryan.demo.controller;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Date;
import java.util.Map;
@Controller
public class IndexController {
private static Log logger = LogFactory.getLog(IndexController.class);
@RequestMapping("/index")
public String index(Map<String, Object> map) {
map.put("location", "星巴克(新荟城购物中心店) ");
map.put("time", "一个周末的下午");
map.put("timestamp", new Date().getTime());
// 自动寻找resources/templates中名字为index.ftl 文件作为模板,拼装后返回
return "index";
}
}
代码很简单,但是还是需要格外的注意,如果你访问后 **/index 后只返回了 index这个字符串 ,那么请注意类外的注解是@Controller,前面讲到的都是@RestController,你有可能写错了,因为这个问题,我排查了好久。
这里入参的map中的内容会直接传递到模版中被替换,我们看下效果:
静态资源
简单的类似html的样式已经完成了,那么我们就看下如何引入css文件和js文件,直接看代码,我们在ftl文件的head中加入:
<html>
<head>
<!-- css 必须放到 head 中,href为文件的路径,一遍资源都放置在cdn上 -->
<link rel="stylesheet" type="text/css" href="***/test.css"/>
<!-- 进入js文件 -->
<script src="***/test.js"></script>
</head>
<body>
<p> ${text} </p>
<p id="num" onclick="myFunction()"> 1块钱 </p>
</body>
</html>
注意,一般我们的css和js文件都存储在cdn中,这里css的href和script的src只需填写cdn的地址即可。
css文件中,我们处理了p标签,样式为红色,并且居中显示
p { color:red; text-align:center;}
js文件中,我们通过操作DOM,来将数字进行累加
function myFunction()
{
var text = "块钱"
var info = document.getElementById("num").innerHTML;
var num = info.replace(text, "");
num++;
document.getElementById("num").innerHTML= num + text;
}
看下最终效果:
文字居中、红色,点击后触发js得叠加:
其实在真正的前后端分离项目中,后端也不会通过模版的形式给前端传递太多的参数,前端最终会使用类似webpack这样的工具将所有的页面前端页面打包成一个html、css、js文件,而各个页面和后端的交互都是通过ajax来进行的。至此,后端的基础逻辑以及和前端衔接的部分已经全部讲完了,有兴趣的继续关注我后续会完成的前端篇。