web个人网页设计代码;网页设计与制作代码大全 收藏 0

自定义代码生成器（上）

在项目开发过程中，有很多业务模块的代码是具有一定规律性的，例如controller控制器、service接口、service实现类、mapper接口、model实体类等等，这部分代码可以使用代码生成器生成，我们就可以将更多的时间放在业务逻辑上。

传统的开发步骤：

创建数据库和表 根据表设计实体类 ​ 编写mapper接口 ​ 编写service接口和实现类 ​ 编写controller控制器 ​ 编写前端页面 ​ 前后端联调

基于代码生成器开发步骤：

创建数据库和表 ​ 使用代码生成器生成实体类、mapper、service、controller、前端页面 ​ 将生成好的代码拷贝到项目中并做调整 ​ 前后端联调

我们只需要知道数据库和表相关信息，就可以结合模版生成各个模块的代码，减少了很多重复工作，也减少出错概率，提高效率。

（1）需要对数据库表解析获取到元数据，包含表字段名称、字段类型等等

（2）将通用的代码编写成模版文件，部分数据需使用占位符替换

（3）将元数据和模版文件结合，使用一些模版引擎工具（例如freemarker）即可生成源代码文件

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

模板编写为FreeMarker Template Language (FTL)。它是简单的，专用的语言， 在模板中，你可以专注于如何展现数据， 而在模板之外可以专注于要展示什么数据。

（1）动态页面

freemarker可以作为springmvc一种视图格式，像jsp一样被浏览器访问。

（2）页面静态化

对于一些内容比较多，更新频率很小，访问又很频繁的页面，可以使用freemarker静态化，减少DB的压力，提高页面打开速度。

（3）代码生成器

根据配置生成页面和代码，减少重复工作，提高开发效率。

（1）创建freemarker-demo模块，并导入相关依赖

（2）application.yml相关配置

（3）创建启动类

（4）创建Student模型类

（5）创建StudentController

（6）在resources/templates下创建01-index.ftl模版文件

（7）测试

浏览器访问 http://localhost:8881/student/index

效果如下

（1）注释，即<#– –>，介于其之间的内容会被freemarker忽略

（2）插值（Interpolation）：即 ${..} 部分,freemarker会用真实的值代替${..}

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

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

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

格式如下

需求：根据年龄输出所处的年龄段

童年：0岁—6岁(周岁，下同) 少年：7岁—17岁 青年：18岁—40岁 中年：41—65岁 老年：66岁以后

实例代码：

（1）在01-index.ftl添加如下代码

（2）测试

浏览器访问http://localhost:8881/student/index

效果如下

list指令时一个迭代输出指令，用于迭代输出数据模型中的集合

格式如下

迭代集合对象时，包括两个特殊的循环变量： （1）item_index：当前变量的索引值。 （2）item_has_next:是否存在下一个对象

item_index 和 item_has_nex 中的item为<#list items as item> 中as后面的临时变量

需求：遍历学生集合，输出序号，学生id，姓名，所处的年龄段，是否最后一条数据

（1）在StudentController中增加方法

（2）在resources/templates目录下创建02-list.ftl模版

（2）测试

浏览器访问http://localhost:8881/student/list

效果如下

include指令的作用类似于JSP的包含指令，用于包含指定页，include指令的语法格式如下

（1）filename：该参数指定被包含的模板文件 （2）options：该参数可以省略，指定包含时的选项，包含encoding和parse两个选项，encoding 指定包含页面时所使用的解码集，而parse指定被包含是否作为FTL文件来解析。如果省略了parse选项值，则该选项值默认是true

需求：\”早上好,尊敬的 某某 用户!\” 这句话在很多页面都有用到，请合理设计！

（1）在resources/templates目录下创建00-head.ftl模版，内容如下

（2）在resources/templates目录下创建03-include.ftl模版，使用include引入00-head.ftl模版，内容如下

（3）在StudentController中增加方法

（4）测试

浏览器访问http://localhost:8881/student/include

效果如下

它用于为该模板页面创建或替换一个顶层变量

（1）算数运算符

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

• 加法： +
• 减法： –
• 乘法： *
• 除法： /
• 求模 (求余)： %

（2）比较运算符

• =或者==:判断两个值是否相等.
• !=:判断两个值是否不等.
• >或者gt:判断左边值是否大于右边值
• >=或者gte:判断左边值是否大于等于右边值
• <或者lt:判断左边值是否小于右边值
• <=或者lte:判断左边值是否小于等于右边值

比较运算符注意

• =和!=可以用于字符串、数值和日期来比较是否相等
• =和!=两边必须是相同类型的值,否则会产生错误
• 字符串 \”x\” 、\”x \” 、\”X\”比较是不等的.因为FreeMarker是精确比较
• 其它的运行符可以作用于数字和日期,但不能作用于字符串
• 使用gt等字母运算符代替>会有更好的效果,因为 FreeMarker会把>解释成FTL标签的结束字符
• 可以使用括号来避免这种情况,如:<#if (x>y)>

（3）逻辑运算符

• 逻辑与:&&
• 逻辑或:||
• 逻辑非:!

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

（1）缺失变量默认值使用 “!”

• 使用!要以指定一个默认值，当变量为空时显示默认值
• 例： ${name!\’\’}表示如果name为空显示空字符串。
• 如果是嵌套对象则建议使用（）括起来
• 例： ${(stu.bestFriend.name)!\’\’}表示，如果stu或bestFriend或name为空默认显示空字符串。

（2）判断某变量是否存在使用 “??”

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

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

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

（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的作用是定义一个变量。

（5）常见内建函数汇总

内建函数测试demo1

（1）在StudentController新增方法：

（2）在resources/templates目录下创建04-innerFunc.ftl模版页面：

（3）测试

浏览器访问http://localhost:8881/student/innerFunc

效果如下

内建函数测试demo2

需求：遍历学生集合，显示集合总条数，id不要逗号隔开，显示学生的生日（只显示年月日），钱包显示整数并显示单位元，用户姓名做脱敏处理（如果是两个字第二个字显示为星号，例如张三显示为张*，如果大于两个字，中间字显示为星号，例如成吉思汗显示为成*汗，诸葛亮显示为诸*亮）

（1）修改StudentController中的list方法，

（2）修改02-list.ftl模版

共${stus?size}条数据：输出总条数

stu.id后面加?c：id不需要逗号分割

stu.birthday后面加?date：生日只输出年月日

stu.money后面加?int：金额取整

姓名需要使用replace和substring函数处理

完整内容如下

（3）测试

浏览器访问http://localhost:8881/student/list

效果如下

（1）springboot整合freemarker静态化文件用法

编写springboot测试用例

（2）freemarker原生静态化用法

元数据（Metadata）是描述数据的数据。

数据库元数据（DatabaseMetaData）就是指定义数据库各类对象结构的数据。

在mysql中可以通过show关键字获取相关的元数据

也可以从 information_schema库中获取元数据，information_schema数据库是MySQL自带的信息数据库，它提供了访问数据库元数据的方式。存着其他数据库的信息。

在代码中可以由JDBC的Connection对象通过getMetaData方法获取而来，主要封装了是对数据库本身的一些整体综合信息，例如数据库的产品名称，数据库的版本号，数据库的URL，是否支持事务等等。

DatabaseMetaData的常用方法：

（1）导入mysql依赖

（2）创建测试用例

（1）获取数据库元信息综合信息

（2）获取数据库列表

（3）获取某数据库中的所有表信息

（4）获取某张表所有的列信息

参数元数据（ParameterMetaData）：是由PreparedStatement对象通过getParameterMetaData方法获取而 来，主要是针对PreparedStatement对象和其预编译的SQL命令语句提供一些信息，ParameterMetaData能提供占位符参数的个数，获取指定位置占位符的SQL类型等等 以下有一些关于ParameterMetaData的常用方法：

结果集元数据（ResultSetMetaData）：是由ResultSet对象通过getMetaData方法获取而来，主要是针对由数据库执行的SQL脚本命令获取的结果集对象ResultSet中提供的一些信息，比如结果集中的列数、指定列的名称、指 定列的SQL类型等等，可以说这个是对于框架来说非常重要的一个对象。 以下有一些关于ResultSetMetaData的常用方法：

创建maven工程并导入以下依赖

目录结构如下

不会写代码也能搭建个人网站 Github和Gridea帮你实现

上一篇文章给大家介绍了如何使用Github和Publii免费搭建一个静态网站，并且不需要写代码就能得到一个样式美观、结构清晰的网站。这篇文章再给大家介绍另一种类似的解决方案，使用Gridea静态网页生成器来完成网站内容的建设。

首先，参考之前的文章，在Github创建一个仓库，用来存储页面源码。

然后，访问Gridea官网：https://open.gridea.dev/，下载安装Gridea客户端，有MacOS、Windows和Linux三种系统的客户端，大家可以按需下载。

Gridea客户端安装好以后，接下来，我们去Github上创建一个token，这个token是用来将gridea生成的网页代码推送到Github仓库中。

大家可以访问这个链接创建一个token：https://github.com/settings/tokens，点击“Generate new token（classic）”

如下图所示，给token命名，设置过期时间，勾选“repo”仓库相关权限，然后点击页面底部的”Generate token“按钮生成一个token。

点击下图中红框处复制token，请妥善保存token信息。

返回到Gridea，选择”远程“tab下的”基础配置“页面，如下图所示，平台选择“Github Pages”，域名填写你在Github上创建的仓库名，仓库用户名和邮箱填写你的Github账号用户名和邮箱，令牌就是在Github上创建的token。

相关内容填写完成后，点击右下角的”保存“，还可以点击左下角的”检测远程连接“查看配置是否有问题，一切OK的话，顶部会弹出”远程连接成功“的提示信息。

连接信息配置完成后，接下来，你可以在Gridea中做各种个性化的设置来美化你的网页，可以在”主题“tab中进行设置，还可以点击左下脚的”预览“在本地查看网页的效果。

如下图所示，就是一个使用了Gridea主题生成的静态网页，相比较我们上一篇文章中的原始页面，是不是已经很美观了？

网站的基础结构设置完成后，我们来看看日常使用最多的写文章的操作。

文章的相关编辑和设置选项都在页面的右侧，可以点击锯齿图标打开设置项。

文章设置中可以修改文章的URL、标签、封面等信息，还可以设置文章在列表中是否隐藏和置顶等选项。

文章撰写完成后，本地预览没有问题，就可以点击左下角的”同步“选项，将内容发布到Github上。

这里我写了一篇欢迎文章，测试下效果。

同步完成后，顶部会弹出”同步成功“的提示。

接下来你可以去Github刷新页面，查看仓库中是否有新的文件，可以看到，仓库中多了很多Gridea同步的记录。

稍等两分钟时间，可以用你的仓库名访问你的个人博客，Github需要一点时间部署静态页面。

部署成功后，就可以成功看到你的Gridea中编辑的页面和文章啦！

在Github仓库中，你可以在post目录下找到你写的文章，Gridea已经自动帮你把文章转换成了对应的html文件。

如果你想要低成本的搭建一个个人网站，只想要简简单单写写文字，分享自己的点滴日常，那本文提供的这种方式就是很好的选择，快来试试吧！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com