springboot+springcloud+vue学习(三)

thymeleaf模板 :(前端了解不多,主要使用vue,后期再做介绍)

springboot 对jsp不是很友好,官方推荐使用thymeleaf模板

Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。

需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。Thymeleaf支持绝对路径URL:<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>

条件求值:<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

for循环:

<tr th:each="prod : ${prods}">

  <td th:text="${prod.name}">Onions</td>

  <td th:text="${prod.price}">2.41</td>

  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

WebJars 可以将前端的css,JavaScript等资源打成前端资源包jar 供使用,非常方便简洁

原文地址:https://www.cnblogs.com/zhangxiaan/p/10219232.html

时间: 2024-10-07 12:13:42

springboot+springcloud+vue学习(三)的相关文章

springboot+springcloud+vue学习(二)

json 接口开发: @DeleteMapping @PostMapping 获取body中的实体(@RequestBody) @GetMapping("/assent/{name}") 获取路径中的参数(@PathVariable) log日志配置: logging.path=/user/local/log logging.level.com.favorites=DEBUG logging.level.org.springframework.web=INFO logging.leve

微服务架构【SpringBoot+SpringCloud+VUE】三 || 服务注册与配置中心Nacos

目录 1.Nacos单机环境搭建 2.基于Docker安装Nacos 3.配置数据库 4.重启nacos 1.Nacos单机环境搭建 在此,对Nacos的单机环境搭建做一个简单的介绍, 本次使用Docker进行部署,不会Docker环境搭建的,请看另一遍文章,项目环境搭建[Docker+k8s]四 || 部署Docker环境. 当然单机版的Nacos环境不适用于生产环境.那么,如何搭建一个生产可用的Nacos集群? 在 项目环境搭建[Docker+k8s]系列 教程中使用kubernetes部署

三 vue学习三 从读懂一个Vue项目开始

源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管 src 我们的开发目录,基本上绝大多数工作都是在这里开展的 static 资源目录,我们可以把一些

微服务架构【SpringBoot+SpringCloud+VUE】二 || 项目架构简介

目录 1.概述 2.开发环境 3.部署环境 4.项目管理 5.后端主要技术栈 6.前端主要技术栈 7.项目开发环境服务规划 8.学习交流QQ群[883210148] 1.概述 本项目是一个基于SpringBoot2.x+vue2.X的分布式微服务架构项目,项目会不断进行迭代更新.该项目后端利用SpringCloudAlibaba微服务架构解决方案进行重构.项目前端利用vue框架开发,页面展示主要为pc端和手机端(微信公众号). 2.开发环境 开发工具:IntellijIDEA.VSCode Ja

vue学习三:生命周期钩子

生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. 这个生命周期钩子函数可以在官网上看到,只要记住最重要的mounted就可以了,是html进行发送请求后台进行数据交互的钩子函数: 这个生命周期函数的图片是可以在官网上看到的,所以可以进行官网进行理解: 比如 created 钩子可以用来在

微服务架构【SpringBoot+SpringCloud+VUE】一 || 微服务简介

目录 1.什么是微服务 2.Spring Cloud是什么 3.服务注册中心 4.学习交流QQ群[883210148] 1.什么是微服务 在开发项目之前,我们有必要了解一下,什么是微服务?简单来说:微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成.系统中的各个微服务可被独立部署,各个微服务之间是松耦合的.每个微服务仅关注于完成一件任务并很好地完成该任务.在所有情况下,每个任务代表着一个小的业务能力. 2.Spring Cloud是什么 Spring Cloud是一个微服务框架的规

SpringBoot+SpringCloud+vue+Element开发项目——数据库设计

1.用户表(sys_user) CREATE TABLE `sys_user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '编号', `name` varchar(50) NOT NULL COMMENT '用户名', `nick_name` varchar(150) DEFAULT NULL COMMENT '昵称', `avatar` varchar(150) DEFAULT NULL COMMENT '头像', `password`

SpringBoot+SpringCloud+vue+Element开发项目——集成Druid数据源

添加依赖 pom.xml <!--druid--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> 添加配置文件 application.yml server: port: 800

二、基于【 springBoot +springCloud+vue 项目】二 || 项目架构目录

1.项目架构目录 API工具类 ---commons-parent ------commons-api(api接口统一返回与统一异常处理) ------commons-core(业务通用工具类) ------commons-base(项目通用工具类) ------commons-test(工具类测试) API网关解决方案 ---theme-parent ------theme-common ---------theme-common-gateway-core(网关解决方案) ---------t