SpingBoot四——前后端分离
◆版权声明:本文出自胖喵~的博客,转载必须注明出处。
转载请注明出处: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
这里我的目录结构是这样:
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来进行的。至此,后端的基础逻辑以及和前端衔接的部分已经全部讲完了,有兴趣的继续关注我后续会完成的前端篇。
SpingBoot四——前后端分离的更多相关文章
- k.tt 研究下生成的逻辑代码:从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建
更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史
---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...
- 【转】从MVC到前后端分离
1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC
一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...
- 从MVC到前后端分离
摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Stru ...
- 基于 koajs 的前后端分离实践
一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...
- 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...
随机推荐
- 【正则】day01
正则表达式一.概述 验证 网络爬虫. 概念: 具有语法格式的字符串. 函数 PCRE 1.perl语言正则语法兼容.(java c) 2.速度快,效率高. P ...
- JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
- 为什么Linux 普通用户在虚拟机界面可以reboot 用ssh 不能reboot
应该是有 类似的权限控制. 如果是 localhost , 那么普通用户允许重启. 如果不是localhost, 比如ssh远程的,必须验证root权限.
- Algorithm: CRT、EX-CRT & Lucas、Ex-Lucas
中国剩余定理 中国剩余定理,Chinese Remainder Theorem,又称孙子定理,给出了一元线性同余方程组的有解判定条件,并用构造法给出了通解的具体形式. \[ \begin{aligne ...
- JVM的监控工具之jmap
参考博客:https://www.jianshu.com/p/a4ad53179df3 jmap(Memory Map for Java)命令用于生成堆转储快照(一般称为heapdump或dump文件 ...
- Spring-AOP源码分析随手记(二)
这次来分析下切面的执行过程. 1.怎么看? 怎么开始看源码呢?就直接从被增强的方法调用那里打断点,看看怎么执行的: 然后就来到了这: 2.初步分析 里面有段: if (this.advised.exp ...
- jvm常用排错命令
jvm命令很多,有一篇博客整理的非常全 https://www.cnblogs.com/ityouknow/p/5714703.html.我只列举一些常用的排错用到的. jps -l -v ...
- switch case加范围判断
switch case是可以加范围判断的,但是语法有少许变化,参数不能写在switch里面,而是写在外面,如: const i = 3; switch (true) { case (i <= 0 ...
- jQuery 杂项方法大全
下表列出了所有jQuery 杂项方法: 方法 描述 data() 将数据附加到选定元素或从中获取数据 get() 获取选择器匹配的DOM元素 index() 从匹配的元素中搜索给定的元素 $.noCo ...
- Vim操作:打开文件
1.打开文件并定位到某一行 vim +20 vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php # 定位至第20行 2 ...