使用Spring Boot和Vue.js开发一个生成页面的脚手架，可以大大提高Web开发的效率和可维护性。在这个脚手架中，我们可以提供一些页面模板，用户可以在这些模板的基础上快速生成自己的页面，并将这些页面存储在指定的位置。
创建Spring Boot项目
使用Spring Initializr或其他方式创建一个基于Spring Boot的Web应用程序，添加所需的依赖项和配置文件。例如，我们可以添加Spring Web，Spring Thymeleaf等依赖项。
创建页面模板
什么是模板引擎
- 在项目中创建页面模板，可以使用Thymeleaf、FreeMarker等模板引擎。页面模板通常包括HTML、CSS和JavaScript代码，其中一些部分时可变的。
- 模板引擎的工作原理通常是将模板文件中的静态文本和动态占位符进行解析，并将器转化为实际的文本输出。动态占位符通常包含变量、条件语句、循环语句、函数调用等，这些占位符将在运行时由实际数据填充。
- 对于模板引擎的理解，可以这样形象的做一个类比：开会！ 相信你在上学初高中时候每次开会都要提前布置场地、拿小板凳、收拾场地。而你上了大学之后每次开会再也不去大操场了,每次开会都去学校的大会议室，桌子板凳音响主席台齐全，来个人即可，还可复用……。模板引擎的功能就类似我们的会议室开会一样开箱即用，将模板设计好之后直接填充数据即可而不需要重新设计整个页面。提高页面、代码的复用性。
为什么要使用Thymeleaf模板
- 动静分离： Thymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。
- 开箱即用： Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
- Springboot官方大力推荐和支持：Springboot官方做了很多默认配置，开发者只需编写对应html即可，大大减轻了上手难度和配置复杂度。
编写一个Thymeleaf模板
1 | <!DOCTYPE html> |
这个页面模板包含了一个${title}和一个${content}占位符，用于后面填充数据1
2
3
4
5
6
7
8
9
10<!DOCTYPE html>
<html>
<head>
<title>Page Template</title>
</head>
<body>
<h1>Page Title</h1>
<p>Page Content</p>
</body>
</html>
下图左侧为直接打开的静态页面，而右侧是通过网络访问服务端返回的动态界面
常用的thymeleaf标签
| 关键字 | 功能介绍 | 案例 |
|---|---|---|
| th:id | 替换id | <input th:id="'xxx' + ${collect.id}"/> |
| th:text | 文本替换 | <p th:text="${collect.description}">description</p> |
| th:utext | 支持html的文本替换 | <p th:utext="${htmlcontent}">conten</p> |
| th:object | 替换对象 | <div th:object="${session.user}"> |
| th:value | 属性赋值 | <input th:value="${user.name}" /> |
| th:with | 变量赋值运算 | <div th:with="isEven=${prodStat.count}%2==0"></div> |
| th:style | 设置样式 | th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
| th:onclick | 点击事件 | th:onclick="'getCollect()'" |
| th:each | 属性赋值 | tr th:each="user,userStat:${users}"> |
| th:if | 判断条件 | <a th:if="${userId == collect.userId}" > |
| th:unless | 和th:if判断相反 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
| th:href | 链接地址 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> |
| th:switch | 多路选择 配合th:case 使用 | <div th:switch="${user.role}"> |
| th:case | th:switch的一个分支 | <p th:case="'admin'">User is an administrator</p> |
| th:fragment | 布局标签，定义一个代码片段，方便其它地方引用 | <div th:fragment="alert"> |
| th:include | 布局标签，替换内容到引入的文件 | <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> |
| th:replace | 布局标签，替换整个标签到引入的文件 | <div th:replace="fragments/header :: title"></div> |
| th:selected | selected选择框 选中 | th:selected="(${xxx.id} == ${configObj.dd})" |
| th:src | 图片类地址引入 | <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> |
| th:inline | 定义js脚本可以使用变量 | <script type="text/javascript" th:inline="javascript"> |
| th:action | 表单提交的地址 | <form action="subscribe.html" th:action="@{/subscribe}"> |
| th:remove | 删除某个属性 | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
| th:attr | 设置标签属性，多个属性可以用逗号分隔 | 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。 |
创建API接口
在Spring Boot中可以使用@RestController注解创建一个REST API。在API中，需要获取页面模板，并将其填充为所需的页面，并将其保存在指定位置。可以使用Java的File API来创建和包存文件。在生成页面文件之前，需要对页面模板进行适当处理，例如将页面中变量替换为具体的值、添加必要的CSS和JavaScript等。1
2
3
4
5
6
7
8
9
10
11
12
13
14 @GetMapping("/page")
public String getPage(@RequestParam String template, Model model) throws IOException {
Context context = new Context(); //创建上下文
context.setVariable("title", "Page Title");
context.setVariable("content", "Page Content"); //用来存储数据
final String html = this.templateEngine.process(template, context); //渲染模板
String fileName = "src/main/resources/templates/et.html"; //生成的html文件
File file = new File(fileName); //创建文件
FileWriter writer1 = new FileWriter(file); //创建文件写入流
writer1.write(html); //写入文件
writer1.close(); //关闭流
return html; //返回html
}
在Vue.js中使用AJAX或Axios等库调用API
1 | export function getPage(){ |