app端文章查看,静态化freemarker,分布式文件系统minIO

1)文章列表加载

1.1)需求分析

文章布局展示

image-20210419151801252

 

1.2)表结构分析

ap_article 文章基本信息表

image-20210419151839634

ap_article_config 文章配置表

image-20210419151854868

ap_article_content 文章内容表

image-20210419151912063

三张表关系分析

image-20210419151938103

 

1.3)导入文章数据库

1.3.1)导入数据库

查看当天资料文件夹,在数据库连接工具中执行leadnews_article.sql

1.3.2)导入对应的实体类

ap_article文章表对应实体

ap_article_config文章配置对应实体类

ap_article_content 文章内容对应的实体类

1.4)实现思路

image-20210419152011931

1,在默认频道展示10条文章信息

2,可以切换频道查看不同种类文章

3,当用户下拉可以加载最新的文章(分页)本页文章列表中发布时间为最大的时间为依据

4,当用户上拉可以加载更多的文章信息(按照发布时间)本页文章列表中发布时间最小的时间为依据

5,如果是当前频道的首页,前端传递默认参数:

1.5)接口定义

 加载首页加载更多加载最新
接口路径/api/v1/article/load/api/v1/article/loadmore/api/v1/article/loadnew
请求方式POSTPOSTPOST
参数ArticleHomeDtoArticleHomeDtoArticleHomeDto
响应结果ResponseResultResponseResultResponseResult

ArticleHomeDto

1.6)功能实现

1.6.1):导入heima-leadnews-article微服务,资料在当天的文件夹中

image-20210420000326669

注意:需要在heima-leadnews-service的pom文件夹中添加子模块信息,如下:

在idea中的maven中更新一下,如果工程还是灰色的,需要在重新添加文章微服务的pom文件,操作步骤如下:

image-20210420001037992

 

 

需要在nacos中添加对应的配置

1.6.2):定义接口

1.6.3):编写mapper文件

对应的映射文件

在resources中新建mapper/ApArticleMapper.xml 如下配置:

1.6.4):编写业务层代码

实现类:

定义常量类

1.6.5):编写控制器代码

1.6.6):swagger测试或前后端联调测试

第一:在app网关的微服务的nacos的配置中心添加文章微服务的路由,完整配置如下:

第二:启动nginx,直接使用前端项目测试,启动文章微服务,用户微服务、app网关微服务

 

2)freemarker

2.1) freemarker 介绍

FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库,是一款程序员可以嵌入他们所开发产品的组件。

模板编写为FreeMarker Template Language (FTL)。它是简单的,专用的语言, 不是 像PHP那样成熟的编程语言。 那就意味着要准备数据在真实编程语言中来显示,比如数据库查询和业务运算, 之后模板显示已经准备好的数据。在模板中,你可以专注于如何展现数据, 而在模板之外可以专注于要展示什么数据。

1528820943975

 

常用的java模板引擎还有哪些?

Jsp、Freemarker、Thymeleaf 、Velocity 等。

1.Jsp 为 Servlet 专用,不能单独进行使用。

2.Thymeleaf 为新技术,功能较为强大,但是执行的效率比较低。

3.Velocity从2010年更新完 2.0 版本后,便没有在更新。Spring Boot 官方在 1.4 版本后对此也不在支持,虽然 Velocity 在 2017 年版本得到迭代,但为时已晚。

 

2.2) 环境搭建&&快速入门

freemarker作为springmvc一种视图格式,默认情况下SpringMVC支持freemarker视图格式。

需要创建Spring Boot+Freemarker工程用于测试模板。

2.2.1) 创建测试工程

创建一个freemarker-demo 的测试工程专门用于freemarker的功能测试与模板的测试。

pom.xml如下

2.2.2) 配置文件

配置application.yml

 

2.2.3) 创建模型类

在freemarker的测试工程下创建模型类型用于测试

 

 

2.2.4) 创建模板

在resources下创建templates,此目录为freemarker的默认模板存放目录。

在templates下创建模板文件 01-basic.ftl ,模板中的插值表达式最终会被freemarker替换成具体的数据。

 

2.2.5) 创建controller

创建Controller类,向Map中添加name,最后返回模板文件。

01-basic.ftl,使用插值表达式填充数据

 

2.2.6) 创建启动类

2.2.7) 测试

请求:http://localhost:8881/basic

1576129529361

 

 

2.3) freemarker基础

2.3.1) 基础语法种类

1、注释,即<#-- -->,介于其之间的内容会被freemarker忽略

2、插值(Interpolation):即 ${..} 部分,freemarker会用真实的值代替${..}

3、FTL指令:和HTML标记类似,名字前加#予以区分,Freemarker会解析标签中的表达式或逻辑。

4、文本,仅文本信息,这些不是freemarker的注释、插值、FTL指令的内容会被freemarker忽略解析,直接输出内容。

2.3.2) 集合指令(List和Map)

1、数据模型:

在HelloController中新增如下方法:

2、模板:

在templates中新增02-list.ftl文件

实例代码:

👆上面代码解释:

${k_index}: index:得到循环的下标,使用方法是在stu后边加"_index",它的值是从0开始

 

2.3.3) if指令

if 指令即判断指令,是常用的FTL指令,freemarker在解析时遇到if会进行判断,条件为真则输出if中间的内容,否则跳过内容不再输出。

 

1、数据模型:

使用list指令中测试数据模型,判断名称为小红的数据字体显示为红色。

2、模板:

 

实例代码:

 

 

3、输出:

姓名为“小强”则字体颜色显示为红色。

1539947776259

 

2.3.4) 运算符

1、算数运算符

FreeMarker表达式中完全支持算术运算,FreeMarker支持的算术运算符包括:

 

模板代码

除了 + 运算以外,其他的运算只能和 number 数字类型的计算。

 

 

 

2、比较运算符

 

= 和 == 模板代码

Controller 的 数据模型代码

 

比较运算符注意

 

 

3、逻辑运算符

逻辑运算符只能作用于布尔值,否则将产生错误 。

 

模板代码

 

2.3.5) 空值处理

1、判断某变量是否存在使用 “??”

用法为:variable??,如果该变量存在,返回true,否则返回false

例:为防止stus为空报错可以加上判断如下:

 

2、缺失变量默认值使用 “!”

 

 

 

2.3.6) 内建函数

内建函数语法格式: 变量+?+函数名称

1、和到某个集合的大小

${集合名?size}

 

2、日期格式化

显示年月日: ${today?date} 显示时分秒:${today?time}
显示日期+时间:${today?datetime}
自定义格式化: ${today?string("yyyy年MM月")}

 

3、内建函数c

model.addAttribute("point", 102920122);

point是数字型,使用${point}会显示这个数字的值,每三位使用逗号分隔。

如果不想显示为每三位分隔的数字,可以使用c函数将数字型转成字符串输出

${point?c}

 

4、将json字符串转成对象

一个例子:

其中用到了 assign标签,assign的作用是定义一个变量。

 

模板代码:

 

 

内建函数模板页面:

内建函数Controller数据模型:

 

 

 

2.4) 静态化测试

之前的测试都是SpringMVC将Freemarker作为视图解析器(ViewReporter)来集成到项目中,工作中,有的时候需要使用Freemarker原生Api来生成静态内容,下面一起来学习下原生Api生成文本文件。

2.4.1) 需求分析

使用freemarker原生Api将页面生成html文件,本节测试html文件生成的方法:

image-20210422163843108

2.4.2) 静态化测试

根据模板文件生成html文件

①:修改application.yml文件,添加以下模板存放位置的配置信息,完整配置如下:

②:在test下创建测试类

 

3) 对象存储服务MinIO

3.1 MinIO简介

MinIO基于Apache License v2.0开源协议的对象存储服务,可以做为云存储的解决方案用来保存海量的图片,视频,文档。由于采用Golang实现,服务端可以工作在Windows,Linux, OS X和FreeBSD上。配置简单,基本是复制可执行程序,单行命令可以运行起来。

MinIO兼容亚马逊S3云存储服务接口,非常适合于存储大容量非结构化的数据,例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等,而一个对象文件可以是任意大小,从几kb到最大5T不等。

S3 ( Simple Storage Service简单存储服务)

基本概念

官网文档:http://docs.minio.org.cn/docs/

3.2 MinIO特点

3.3 开箱使用

3.3.1 安装启动

我们提供的镜像中已经有minio的环境

我们可以使用docker进行环境部署和启动

3.3.2 管理控制台

假设我们的服务器地址为http://192.168.200.130:9000,我们在地址栏输入:http://http://192.168.200.130:9000/ 即可进入登录界面。

image-20210417102204739

Access Key为minio Secret_key 为minio123 进入系统后可以看到主界面

image-20210417102356582

点击右下角的“+”号 ,点击下面的图标,创建一个桶

image-20210417102435088

3.4 快速入门

3.4.1 创建工程,导入pom依赖

创建minio-demo,对应pom如下

引导类:

创建测试类,上传html文件

 

3.5 封装MinIO为starter

3.5.1 创建模块heima-file-starter

导入依赖

3.5.2 配置类

MinIOConfigProperties

MinIOConfig

3.5.3 封装操作minIO类

FileStorageService

MinIOFileStorageService

3.5.4 对外加入自动配置

在resources中新建META-INF/spring.factories

 

3.5.5 其他微服务使用

第一,导入heima-file-starter的依赖

第二,在微服务中添加minio所需要的配置

第三,在对应使用的业务类中注入FileStorageService,样例如下:

4)文章详情

4.1)需求分析

image-20210602180753705

 

4.2)实现方案

方案一

用户某一条文章,根据文章的id去查询文章内容表,返回渲染页面

image-20210602180824202

方案二

image-20210602180856833

 

4.3)实现步骤

1.在artile微服务中添加MinIO和freemarker的支持,参考测试项目

2.资料中找到模板文件(article.ftl)拷贝到article微服务下

image-20210602180931839

3.资料中找到index.js和index.css两个文件手动上传到MinIO中

image-20210602180957787

4.在文章微服务中导入依赖

5.新建ApArticleContentMapper

6.在artile微服务中新增测试类(后期新增文章的时候创建详情静态页,目前暂时手动生成)