新增加war包下载地址，呵呵愿意体验的可以直接下载并发布到容器即可试用，也可以查看里面的内容。
由于只花了两天时间制作，一天时间搞页面，一天时间搞内容，所以还非常粗糙，还有许多需要完善的地方，欢迎同学们提出改进和完善意见，但是今天网站做的好不好不是重点，重点讲讲网站是怎么做出来的。当然了，不用问，必须用Tiny框架来做，所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。
网站模板选择
首先声明，本人是美工盲，前台界面盲，JS盲。所以，指望自己弄个漂亮的网站出来那是根本没有可能的。好在现在互联网发达，只要用心找就是可以找得到的。想想准备用bootstrap方式的响应式网页方式，于是就找到了themeforest.net，然后就在其主题世界荡漾，最后感觉Perfetto网站效果不错，是我想要的效果，再查看一下源文件，发现比较简单，比较容易搞定。于是就想着就是它了。
于是从http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下来，呵呵，第一手资料就算有了。由于这个不是重点，所以就快速过掉，总之，我拿到了这个网站的html,js,css,图片等等一应资源，在本地目录中打开文件访问也正确，OK，可以进入下一步骤。
宏提取
所谓宏提取，就是把网页里重复出现的东东搞成个宏，这样就避免了重复内容到处复制来复制去：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
|
#macro (a $aHref $title $aTarget )
<
a
#if($title)
title
=
"$title"
#end#if($aHref)
href
=
"#if($aHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("
/"))#else{TINY_CONTEXT_PATH}#end$#end$aHref"#end#if($aTarget)
target
=
"$aTarget"
#end>
$bodyContent
</
a
>
#end
#macro (img $imgHref $imgTitle)
<
img
#if($imgTitle)
alt
=
"$imgTitle"
#end#if($imgHref)
src
=
"#if($imgHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("
/"))#else{TINY_CONTEXT_PATH}#end$#end$imgHref"#end#>
</
a
>
#end
#macro(section)
<
div
class
=
"section"
>
$bodyContent
</
div
>
#end
#macro(container)
<
div
class
=
"container"
>
$bodyContent
</
div
>
#end
#macro(row)
<
div
class
=
"row"
>
$bodyContent
</
div
>
#end
#macro(span1)
<
div
class
=
"span1"
>
$bodyContent
</
div
>
#end
#macro(span2)
<
div
class
=
"span2"
>
$bodyContent
</
div
>
#end
#macro(span3)
<
div
class
=
"span3"
>
$bodyContent
</
div
>
#end
#macro(span4)
<
div
class
=
"span4"
>
$bodyContent
</
div
>
#end
#macro(span5)
<
div
class
=
"span5"
>
$bodyContent
</
div
>
#end
#macro(span6)
<
div
class
=
"span6"
>
$bodyContent
</
div
>
#end
#macro(span7)
<
div
class
=
"span7"
>
$bodyContent
</
div
>
#end
#macro(span8)
<
div
class
=
"span8"
>
$bodyContent
</
div
>
#end
#macro(span9)
<
div
class
=
"span9"
>
$bodyContent
</
div
>
#end
#macro(span10)
<
div
class
=
"span10"
>
$bodyContent
</
div
>
#end
#macro(span11)
<
div
class
=
"span11"
>
$bodyContent
</
div
>
#end
#macro(span12)
<
div
class
=
"span12"
>
$bodyContent
</
div
>
#end
#macro(hr)
<
hr
/>
#end
#macro(dropdownMenu $dropdownTitle $dropdownHref $dropdownSubTitle )
<
li
class
=
"dropdown"
><
a
href
=
"$dropdownHref?activePage=$!menuKey"
>$dropdownTitle</
a
> <
b
class
=
"caret"
></
b
>
<
span
>$dropdownSubTitle</
span
>
$!bodyContent
</
li
>
#end
#macro(menu $menuTitle $menuHref $menuSubTitle $menuKey)
<
li
class
=
"dropdown#if($menuKey==$activePage) active#end"
><
a
href
=
"${menuHref}"
>$menuTitle</
a
>
<
span
>$menuSubTitle</
span
>
$!bodyContent
</
li
>
#end
#macro(nav)
<
ul
class
=
"nav"
>
$bodyContent
</
ul
>
#end
#macro(subMenu)
<
ul
>
$bodyContent
</
ul
>
#end
#macro(subMenuItem $title $href $menuKey)
<
li
><
a
href
=
"$href"
#if($menuKey==$activePage)
class
=
"current"
#end >$title</
a
></
li
>
#end
#macro(pageTitle $title $page)
#set($pageTitle="$title")
#set($activePage="$page")
#end
#macro(modalFooter)
<
div
class
=
"modal-footer"
>
<
button
class
=
"btn"
data-dismiss
=
"modal"
aria-hidden
=
"true"
>Close</
button
>
</
div
>
#end
#macro(breadcrumb)
<
ul
class
=
"breadcrumb"
>
$bodyContent
</
ul
>
#end
#macro(breadcrumbParentItem $title $url)
<
li
>#@a($url $title)$title#end <
span
class
=
"divider"
>/</
span
></
li
>
#end
#macro(breadcrumbItem $title)
<
li
class
=
"active"
>$title</
li
>
#end
#macro(thumbnails $thumbnailsId)
<
ul
class
=
"thumbnails"
#if($thumbnailsId)
id
=
"$thumbnailsId"
#end>
$bodyContent
</
ul
>
#end
#macro(filterContainer)
<
ul
id
=
"portfolio"
class
=
"thumbnails "
>
$bodyContent
</
ul
>
#end
#macro(filterContainerItem $column $type)
<
li
class
=
"span$column $type"
style
=
"opacity: 1;"
>
<
div
class
=
"thumbnail"
style
=
"text-align:left;"
>
$bodyContent
</
div
>
</
li
>
#end
#macro(clearfix)
<
div
class
=
"clearfix"
></
div
>
#end
#macro(thumbnailsItem $name $title $qq $email $imgUrl)
<
li
class
=
"span3"
>
<
div
class
=
"thumbnail"
>
#img($imgUrl)
<
div
class
=
"caption"
>
<
h3
><
a
href
=
"#"
>$name</
a
></
h3
>
<
em
>$title</
em
>
<
p
>QQ:$!qq</
p
>
<
p
>邮箱:$!email</
p
>
#clearfix
$!bodyContent
</
div
>
</
div
>
</
li
>
#end
#macro(slides)
<
div
class
=
"slides"
>
$bodyContent
</
div
>
#end
#macro(slidesItem $imgSrc $title $href)
<
div
>#@a($href $title)#img($imgSrc $title) #end
$bodyContent
</
div
>
#end
#macro(slidesDetail)
<
div
class
=
"detail"
>
$bodyContent
</
div
>
#end
#macro(slidesDetailInfo $title $subTitle)
<
h3
>#@a($href $title)$title#end</
h3
>
<
em
>$subTitle</
em
>
$bodyContent
#end
#macro(title $title $subTitle)
<
div
class
=
"row"
>
<
div
class
=
"span12"
>
<
h1
class
=
"no-margin"
>$title</
h1
>
<
p
class
=
"lead"
>$subTitle</
p
>
</
div
>
</
div
>
#end
#macro(wideBanner)
<!-- Wide Banner -->
<
div
class
=
"wide-bg"
>
<
div
class
=
"container"
>
$bodyContent
</
div
>
</
div
>
#end
#macro(sidebar $title)
<!-- Sidebar -->
<
div
class
=
"span3 sidebar"
>
#if($title)
<
h3
class
=
"half-margin"
>$!title</
h3
>
#end
<
ul
class
=
"nav nav-tabs nav-stacked"
>
$bodyContent
</
ul
>
</
div
>
#end
#macro(sidebarItem $title $href )
<
li
>#@a($href $title)$title#end</
li
>
#end
#macro(lead $id $title)
<
p
class
=
"lead no-margin"
id
=
"$id"
>$title</
p
>
<
div
class
=
""
>
$bodyContent
</
div
>
<
hr
class
=
"no-margin"
style
=
"margin: 5pt;5pt;5pt;5pt;"
/>
#end
#macro(filter)
<!-- Portfolio Filter -->
<
div
id
=
"filter"
class
=
"half-margin"
>
$bodyContent
</
div
>
<
div
class
=
"clearfix"
></
div
>
</
div
>
#end
#macro(filterItem $title $current)
<
button
class
=
"btn btn-small half-margin#if($current) current#end"
>$title</
button
>
#end
#macro(shortcut $title $href $icon)
#@a($href $title "_blank")#img($icon)#end
#end
#macro(caption $title)
<
div
class
=
"head"
style
=
"text-align: left;"
>
<
h3
><
strong
>$title</
strong
></
h3
>
$bodyContent
</
div
>
#end
#macro(masonry)
<
div
id
=
"masonry"
>
$bodyContent
</
div
>
#end
#macro(masonryItem $masonryItemClass)
<
div
class
=
"single $masonryItemClass"
>
$bodyContent
</
div
>
#end
#macro(logo)
<
p
class
=
"logo"
><
a
href
=
"home.page"
><
span
>Tiny Framework</
span
></
a
></
p
>
#end
#macro(toTop)
<
div
id
=
"toTop"
>Top</
div
>
#end
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
#macro(header)
<!-- Header -->
#@row()
#@span3()
#logo
#end
#@span9()
<
div
class
=
"top-header text-right"
><
em
>QQ群: <
em
>228977971</
em
> 邮箱：<
a
href
=
"mailto:luo_guo@icloud.com"
>luo_guo@icloud.com</
a
></
em
>
<
div
class
=
"social"
>
#shortcut("Sonar代码检查" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/sonar.ico")
#shortcut("Hudson持续集成" "http://www.tinygroup.org/hudson/job/tiny/" "img/hudson.png")
#shortcut("TinyFramework OSC首页" "http://www.tinygroup.org/sonar/dashboard/index/org.tinygroup:tiny" "img/osc.ico")
#shortcut("TinyFramework GIT网址" "http://git.oschina.net/tinyframework/tiny" "img/git.ico")
</
div
>
</
div
>
<
div
class
=
"text-left"
>
<
h2
></
bit
> Think big, start small, scale fast.</
h2
>
</
div
>
#end
#end
#end
#macro(footer)
#@section()
#@container()
<!-- Footer -->
#@row()
#@span12()
<
div
class
=
"footer"
>
<
hr
/>
<
p
class
=
"text-center"
>©Copy Right 2009~2014 <
strong
>tiny group</
strong
><
br
/>
www.tinygroup.org</
p
>
</
div
>
#end
#end
#end
#end
#end
#macro(navbar)
<!-- Navbar -->
<
div
class
=
"navbar"
#*
id
=
"nav-follow"
*#>
<
div
class
=
"navbar-inner"
>
<
div
class
=
"container"
><
a
data-target
=
".navbar-responsive-collapse"
data-toggle
=
"collapse"
class
=
"btn btn-navbar"
><
i
class
=
"icon-th-list"
></
i
></
a
> <
a
data-target
=
".navbar-responsive-collapse"
data-toggle
=
"collapse"
class
=
"brand"
>Navbar</
a
>
<
div
class
=
"nav-collapse collapse navbar-responsive-collapse"
>
#@nav()
#@menu("Homepage" "home.page" "首页" "home")#end
#@menu("philosophy" "philosophy.page" "设计理念" "philosophy")#end
#@menu("principle" "principle.page" "设计原则" "principle")#end
#@menu("Features" "feature.page" "功能特性" "feature")#end
#@menu("FAQ" "faq.page" "常见问题解答" "faq")#end
#@menu("encourage us" "encourage.page" "鼓励我们" "encourage")#end
#@menu("About us" "about.page" "关于我们" "about")#end
#end
</
div
>
</
div
>
</
div
>
</
div
>
#end
|
页面结构设计
Html页面结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<
html
class
=
"no-js"
lang
=
"en-US"
>
<!--<![endif]-->
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
link
rel
=
"shortcut icon"
href
=
"${TINY_CONTEXT_PATH}/tinysite/img/tiny.png"
type
=
"image/x-icon"
/>
<
title
>Tiny Framework-$!pageTitle</
title
>
<
meta
name
=
"description"
content
=
"Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"
/>
<
meta
name
=
"keywords"
content
=
"Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web"
/>
<
script
src
=
"${TINY_CONTEXT_PATH}/uiengine.uijs"
></
script
>
<
link
href
=
"${TINY_CONTEXT_PATH}/uiengine.uicss"
rel
=
"stylesheet"
/>
</
head
>
<
body
class
=
"boxed"
style
=
"background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);"
>
$pageContent
</
body
>
</
html
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#@section()
#@container()
#header
#navbar
#hr
#end
#@container()
$pageContent
#end
#end
#footer
#toTop
|
下面详细解释：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#@section()##开一段
#@container()##开一个容器
#header##放header进去
#navbar##放导航条进去
#hr##放一个分隔线
#end
#@container()##再开一个容器
$pageContent##里面放展现的内容
#end
#end
#footer ##这里放页脚
#toTop ##这里放返回页顶按钮
|
然后就是每一页的内容编写了。
页面编写
首页
在需要解释的行的后面我会增加注释
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#pageTitle("首页" "home")##设定这一面展现时的标题是”首页“，并且置"home"菜单为选中状态<
span
></
span
> #title("Tiny framework" "基于组件化的J2EE开发框架")
#@slides()##轮播
#@slidesItem("img/example-slide-1.jpg" "Photo" "#")##第一个轮播项
#@slidesDetail()
#@slidesDetailInfo("名字" "Tiny名称的来历")##轮播中的详细解释段
<
p
>取名Tiny是取其微不足道，微小之意。</
p
>
<
p
>Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小、可控的部分，并且对每个细小、可控的部分都有一个最优解或相对最优解，
那么整个方案也就可以非常不错的落地。</
p
>
#end
#end
#end
#@slidesItem("img/example-slide-2.jpg" "Photo" "#")
#@slidesDetail()
#@slidesDetailInfo("策略" "Tiny框架的构建策略")
<
p
>Think big, start small, scale fast.</
p
>
<
p
>想法要宏伟，但是要从小的开始，同时可以快速的进行扩展。</
p
>
<
p
>Tiny框架的构建者认为：如果想法不够宏伟，那么就会局限于细节；如果一开始就铺非常大的摊子，将会失去控制；如果不能快速扩展，就无法满足应用需要。</
p
>
#end
#end
#end
#@slidesItem("img/example-slide-3.jpg" "Photo" "#")
#@slidesDetail()
#@slidesDetailInfo("定位" "Tiny框架的应用定位")
<
p
>基于WEB的展现平台</
p
>
<
p
>主要包括展现层及控制层，可以让开发人员方便快速的实现WEB层的开发，同时要避免现有方案的缺点，同时要有自己非常突出的优点。</
p
>
<
p
>基于SOA的服务开发平台</
p
>
<
p
>可以方便的开发平台无关的服务，同时有水平扩展，应用集群方面要有良好的支持，可以满足7*24的运维要求。</
p
>
#end
#end
#end
#@slidesItem("img/example-slide-4.jpg" "Photo" "#")
#@slidesDetail()
#@slidesDetailInfo("目标" "Tiny框架的目标定位")
<
p
>Tiny框架的构建者认为再好的框架也有过时的时候，再优秀的架构师也有视野盲区，再NB的写手也无法实现所有的部分。</
p
>
<
p
>所以Tiny框架的构建者认为：只有建立一个良好的生态圈，让广大开发者使用者都在生态圈在找到自己的位置，才是有生命的模式。</
p
>
#end
#end
#end
#end
|
可以看到上面的内容语法结构非常清晰，容易理解，容易修改。
设计理念
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#pageTitle("philosophy" "philosophy")
#title("philosophy" "主要介绍Tiny框架的设计理念")
#@row()
#@masonry()
<!-- Content -->
#@masonryItem()
#@caption("使用灵活")
<
p
>可以整个使用它，也可以只用它的一个或几个部分。</
p
>
<
p
>Tiny构建者认为，一个完整的框架可能需要有许许多多个部分组成，但是对于实际应用的用户来说，它可能只需要其中的一部分功能。构架一定要有这种能力，可以由使用者进行点菜式，使用，避免只要用一点点功能，就要引入许许多多的内容。</
p
>
#end
#end
#@masonryItem("big")
#@caption("学习成本低、上手容易")
<
p
>框架的学习成本必须非常低，这样才可以让使用者更容易上手，避免由于学习难度大而导致的学习曲线太陡、太长。</
p
>
<
p
>经过许多次的实践，我们总结出来：有基础的JAVA开发人员经过半天的培训，就可以完全学会基于Tiny框架进行开发，经过1天到两天的实践就会变成熟手。</
p
>
<
p
>对框架进行扩展或基于框架扩展接口进行扩展，则需要3天左右的培训，就可以完全掌握，经过一周的实践就会变成熟手。</
p
>
#end
#end
##后面的内容都类似就不贴了
#end
#end
|
鼓励与支持
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#pageTitle("鼓励" "encourage")
#title("encourage" "鼓励与支持")
#@row()
#@span3()
#end
#@span6()
<
div
class
=
"thumbnail"
style
=
"text-align: left;"
>
<
p
>我想每一个访问到这个页面的人，一定也是同样对技术有所追求的人。相对于金钱来说，我们更需要您的支持、鼓励，以及对我们所做工作的认可。</
p
>
<
p
>我们不希望收到多少金钱，但是我们希望收获许多支持。</
p
>
<
p
>如果您感受得到我们的努力及付出，请不辞辛苦为我们捐赠<
em
style
=
"color:red"
><
strong
>一块钱</
strong
></
em
>，为我们加油，为我们助威！</
p
>
<
p
><
em
style
=
"color:red"
>请用支付宝中的二维码扫描功能扫描下面的二维码</
em
></
p
>
#img("img/appxl1rc0koh8fj044.png")
</
div
>
#end
#@span3()
#end
#end
|
运行结果
更多页面，请看网站www.tinygroup.org
增加google及Baidu站点统计
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<
html
class
=
"no-js"
lang
=
"en-US"
>
<!--<![endif]-->
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
link
rel
=
"shortcut icon"
href
=
"${TINY_CONTEXT_PATH}/tinysite/img/tiny.png"
type
=
"image/x-icon"
/>
<
title
>Tiny Framework-$!pageTitle</
title
>
<
meta
name
=
"description"
content
=
"Tiny Framework 是基于Java语言的面向组件的企业级开发框架。"
/>
<
meta
name
=
"keywords"
content
=
"Tiny,Framework,Java,SOA,框架,组件,分层,水平扩展,分区，分表,分布式计算,VFS,Web"
/>
<
script
src
=
"${TINY_CONTEXT_PATH}/uiengine.uijs"
></
script
>
<
link
href
=
"${TINY_CONTEXT_PATH}/uiengine.uicss"
rel
=
"stylesheet"
/>
</
head
>
<
body
class
=
"boxed"
style
=
"background: url(${TINY_CONTEXT_PATH}/tinysite/img/bg/parquet-bg.jpg);"
>
$pageContent
<
script
type
=
"text/javascript"
>
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F08ed66f35813cc4b68c4607c2a40d33c' type='text/javascript'%3E%3C/script%3E"));
</
script
>
<
script
>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51345317-1', 'tinygroup.org');
ga('send', 'pageview');
</
script
>
</
body
>
</
html
>
|
很简单，只要在根目录中的default.layout中增加这两段js就可以了，所有的其它文件都不必修改。
哇，已经可以收集数据了，同时也再一次验证了Tiny框架对于DRY原则的坚持。
总结
上面展示了Tiny框架强大的页面开发能力。
对于页面开发人员来说，进行了相当的封装，避免了直接使用html而出现不应该出现的问题。
对于开发人员来说，不必关心页面结构，也不必关系js,css相关的内容，只要设置好页面上的元素即可。
这里就可以非常清晰的看到，界面开发程序员做的事情非常简单、易懂，且易于维护。明眼人也看得非常清晰，如果数据是来自于数据库，那处理就更简单了。
