利用StringBuilder拼接html代码
虽然没啥使用价值,但是对于刚学习的萌新来说,还是有点用处的,毕竟都是这么一步步过来的!
灵感来源
有时候,我们会将html代码转换成java中的字符串,但是,工具只会帮我们用String拼接的方法来进行操作,由于String是不可变长的字符串。这样一旦html代码比较多的话,效率会非常非常低,所以我想到用StringBuilder进行拼接,但是,这又出现了一个难点,这么多+号,要是一个一个手动更改的话,那估计得累死。然后想到了那个ctrl+f的一键替换的功能,但是,该怎么替换呢?请看下面的步骤。
操作步骤
1.html代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>展示联系人页面</title>
<style type="text/css">
img {
width: 30px;
height: 30px;
}
#title {
text-align: center;
/*控制div的字体大小*/
font-size: 30px;
/*控制文本和边框之间的距离*/
padding: 15px;
}
/*使光标放在超连接上变红*/
a:hover {
color: red;
}
a {
color: blue;
}
form {
text-align: center;
font-family: 微软雅黑;
font-size: 18px;
}
thead {
color: white;
}
</style>
</head>
<body>
<div id="title">展示所有联系人</div>
<hr />
<form action="" method="post">
<div style=" text-align: center;">
<div style="width: 48%;margin: auto;position:relative">
<tr>
<td>
<a href="addPerson.html" style="position: relative;top: 0px;right: 170px;">
<img src="img/add.png" />
</a>
</td>
<td>
<input type="search" style="position: relative;top: -5px;right: -166px;" />
</td>
<td>
<input type="button" value="搜索" style="position: relative;top: -5px;right: -170px;" />
</td>
</tr>
</div>
<table border="1" cellspacing="1" cellpadding="3" style="margin: auto; width: 35%;">
<thead bgcolor="aquamarine">
<tr>
<th>
<input type="button" value="删除选中" />
</th>
<th> </th>
<th>ID</th>
<th>USERNAME</th>
<th>AGE</th>
<th>PHONE</th>
<th>ADDRESS</th>
<th>删除</th>
<th>修改</th>
</tr>
</thead>
<tbody>
这里面循环
</tbody>
</table>
</div>
</form>
</body>
</html>
2.java代码示例
//第一步,当然是创建一个StringBuilder对象
StringBuilder sb = new StringBuilder("<!DOCTYPE html>\r\n");
/*
* 第二步,定义一个String html = "";然后将html直接复制在""双引号中,mye会自动转换成字符串拼接形式
* 如果不行的话,可以在将代码复制在oracle数据库中,选中右键,选择复制的格式为java,然后就行了,这里不多说
* 第三步,ctrl+f,将+号全部替换成 ).append( 这样就可以了。然后稍微去头加尾就行了,效果如下:
*/
String html = sb.append(
"<html>\r\n" ).append(
"\r\n" ).append(
" <head>\r\n" ).append(
" <meta charset=\"utf-8\" />\r\n" ).append(
" <title>展示联系人页面</title>\r\n" ).append(
" <style type=\"text/css\">\r\n" ).append(
" img {\r\n" ).append(
" width: 30px;\r\n" ).append(
" height: 30px;\r\n" ).append(
" }\r\n" ).append(
" \r\n" ).append(
" #title {\r\n" ).append(
" text-align: center;\r\n" ).append(
" /*控制div的字体大小*/\r\n" ).append(
" font-size: 30px;\r\n" ).append(
" /*控制文本和边框之间的距离*/\r\n" ).append(
" padding: 15px;\r\n" ).append(
" }\r\n" ).append(
" /*使光标放在超连接上变红*/\r\n" ).append(
" \r\n" ).append(
" a:hover {\r\n" ).append(
" color: red;\r\n" ).append(
" }\r\n" ).append(
" \r\n" ).append(
" a {\r\n" ).append(
" color: blue;\r\n" ).append(
" }\r\n" ).append(
" \r\n" ).append(
" form {\r\n" ).append(
" text-align: center;\r\n" ).append(
" font-family: 微软雅黑;\r\n" ).append(
" font-size: 18px;\r\n" ).append(
" }\r\n" ).append(
" \r\n" ).append(
" thead {\r\n" ).append(
" color: white;\r\n" ).append(
" }\r\n" ).append(
" </style>\r\n" ).append(
" </head>\r\n" ).append(
"\r\n" ).append(
" <body>\r\n" ).append(
" <div id=\"title\">展示所有联系人</div>\r\n" ).append(
" <hr />\r\n" ).append(
" <form action=\"\" method=\"post\">\r\n" ).append(
" <div style=\" text-align: center;\">\r\n" ).append(
" <div style=\"width: 48%;margin: auto;position:relative\">\r\n" ).append(
" <tr>\r\n" ).append(
" <td>\r\n" ).append(
" <a href=\"addPerson.html\" style=\"position: relative;top: 0px;right: 170px;\">\r\n" ).append(
" <img src=\"img/add.png\" />\r\n" ).append(
" </a>\r\n" ).append(
" </td>\r\n" ).append(
" <td>\r\n" ).append(
" <input type=\"search\" style=\"position: relative;top: -5px;right: -166px;\" />\r\n" ).append(
" </td>\r\n" ).append(
" <td>\r\n" ).append(
" <input type=\"button\" value=\"搜索\" style=\"position: relative;top: -5px;right: -170px;\" />\r\n" ).append(
" </td>\r\n" ).append(
" </tr>\r\n" ).append(
" </div>\r\n" ).append(
" <table border=\"1\" cellspacing=\"1\" cellpadding=\"3\" style=\"margin: auto; width: 35%;\">\r\n" ).append(
" <thead bgcolor=\"aquamarine\">\r\n" ).append(
" <tr>\r\n" ).append(
" <th>\r\n" ).append(
" <input type=\"button\" value=\"删除选中\" />\r\n" ).append(
" </th>\r\n" ).append(
" <th> </th>\r\n" ).append(
" <th>ID</th>\r\n" ).append(
" <th>USERNAME</th>\r\n" ).append(
" <th>AGE</th>\r\n" ).append(
" <th>PHONE</th>\r\n" ).append(
" <th>ADDRESS</th>\r\n" ).append(
" <th>删除</th>\r\n" ).append(
" <th>修改</th>\r\n" ).append(
" </tr>\r\n" ).append(
" </thead>\r\n" ).append(
" <tbody>\r\n" ).append(
" 这里面循环\r\n" ).append(
" </tbody>\r\n" ).append(
" </table>\r\n" ).append(
" </div>\r\n" ).append(
" </form>\r\n" ).append(
" </body>\r\n" ).append(
"\r\n" ).append(
"</html>").toString();
这样就操作完了,是不是很方便呢 ~~