◆版权声明:本文出自胖喵~的博客,转载必须注明出处。

  转载请注明出处: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四——前后端分离的更多相关文章

  1. k.tt 研究下生成的逻辑代码:从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建

    更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  3. 【转】从MVC到前后端分离

    1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...

  4. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  5. (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  6. AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC

    一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...

  7. 从MVC到前后端分离

    摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Stru ...

  8. 基于 koajs 的前后端分离实践

    一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...

  9. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

随机推荐

  1. 使用Python拆分数据量大的CSV文件(亲测有效)

    转载:https://www.cnblogs.com/FYZHANG/p/11629075.html 一次就运行成功了,感谢博主分享 #!/usr/bin/env python3 # -*- # @F ...

  2. 【Java并发专题之二】Java线程基础

    使用线程更好的提高资源利用率,但也会带来上下文切换的消耗,频繁的内核态和用户态的切换消耗,如果代码设计不好,可能弊大于利. 一.线程 进程是分配资源的最小单位,线程是程序执行的最小单位:线程是依附于进 ...

  3. 物联网架构成长之路(42)-直播流媒体入门(RTMP篇)

    1. 安装RTMP流媒体服务器 以前其实我是利用Nginx-RTMP-module搭建过RTMP流媒体服务器,并实现了鉴权功能.参考https://www.cnblogs.com/wunaozai/p ...

  4. golang基础之初识

    golang 简介 很久以前,有一个IT公司,这公司有个传统,允许员工拥有20%自由时间来开发实验性项目.在2007的某一天,公司的几个大牛,正在用c++开发一些比较繁琐但是核心的工作,主要包括庞大的 ...

  5. python3 消耗CPU的性能,使CPU满载(可以设置进程名称)

    需要安装库:setproctitle    1.1.10,设置进程名称,测试操作系统centos 7.0 # -*- coding: utf-8 -*- from multiprocessing im ...

  6. 文件安全复制之 FastCopy

    FastCopy是Windows平台上最快的文件拷贝.删除软件.由于其功能强劲,性能优越,一时间便超越相同类型的所有其他软件.由于该软件十分小巧,你甚至可以在安装后,直接将安装目录中的文件复制到任何可 ...

  7. Easyui datagrid扩展子网格detailview增删改查详解

    话不多gang,先上代码,将以下三个属性插入主网格的初始化参数中: view : detailview, //1 detailFormatter : function(index, row) { // ...

  8. 使用yarn来替代npm

    Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的 安装yarn ...

  9. 异步编程,await async入门

    网上很多异步编程的文章,提供一篇入门: 异步编程模型 .net支持3种异步编程模式: msdn:https://docs.microsoft.com/zh-cn/dotnet/standard/asy ...

  10. [Zabbix] 安装MySQL5.7, 部署Zabbix到CentOS 7日记

    安装环境:CentOS7 64位,安装MySQL5.7 一.安装 MySQL 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads ...