Chapter 12 CSS布局
本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其他表格以便达成恰巧正确的间隔,视觉效果.这些庞大的排版内容不仅下载很慢,维护起来也很费心力,更别提文字浏览器,屏幕阅读器,小屏幕设备根本无法正确读取了.
Webjx.Com
在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 网页教学网
要如何以CSS作出两栏版面布局?
答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾.
我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容. 网页教学网
我们将讨论的四种方法都应用在文档的与标签之间,同时我会在开始讨论每种方法之前介绍将会使用的标记语法结构.
为了让你了解围绕着每种方法的页面结构,让我们大致看一下还需要加入些什么: Webjx.Com
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
CSS Layouts ...方法示范... Webjx.Com
为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局.
图12-1 两栏布局的框线图
让我们开始吧!首先介绍第一种方法,它使用float属性.
方法A:浮动侧边栏
div id="header"> ...页头部分...
...主体部分...
上面就是我们要以CSS的float属性制作成分栏布局的标记源代码,使用标签把页面元素分成几个逻辑段落,每个都设定了唯一的id:
#header: 包含标题图片,导航栏等
#sidebar: 包含额外的内容链接与相关资讯
#content: 包含主要的文字内容,也是页面的焦点所在.
#footer: 包含版权信息,作者,辅助链接等
把这些页面段落拆开,能让我们能完全控制版面布局,只要指定几条CSS规则,就可以马上完成两栏布局.
为页首与页尾指定样式
要把内容结构转化成分栏布局的第一步,是为页首,页尾加上一点背景颜色以及一点内补丁,这样能使内容更容易凸显出来.
#header { padding: 20px; background: #ccc; } #footer { padding: 20px; background: #eee; }
为方法A的结构加上前面这段CSS会使它显示成图12-2这样,我为各个段落加了一些假象的内容.
图12-2 为页首,页尾指定样式
当然,在#header与#footer里,可以继续为这些段落指定适当的样式,像是font-family,color,链接色彩等等.现在让我们把两栏版面制造出来.
浮动侧边栏
方法A的精华,在于它以float属性把#sidebar放到主要内容的任一边去.以这个例子来说,将它放到内容的右侧,但是放到另一侧当然也行.
浮动#sidebar的关键在于,在标记源代码中,必须出现在主内容之前,这样一来,侧边栏的顶部就会与主内容的顶部排齐.
Webjx.Com
接着,为#sidebar加上float属性,同时把它的宽度设为30%,指定背景颜色:
#header { padding: 20px; background: #ccc; }#sidebar { float: right; width: 30%; background: #999; } Webjx.Com
#footer { padding: 20px; background: #eee; }
图12-3是加上这段CSS之后的显示效果,能看到侧边栏跑到右边去了,而主要内容在侧边栏范围之内流动.
图12-3 把#sidebar浮动到主要内容的右侧
真正的栏位
看看图12-3,我们还没有真正完成两栏布局,为了完成这个效果还必须取#content这个,指定与忧侧边栏宽度相同的右外补丁,因此产生放置#sidebar的空间.
需要加上的CSS就是这么简单:
#header { padding: 20px; background: #ccc; } #sidebar { float: right; width: 30%; background: #999; }#content { margin-right: 34%; } #footer { clear: right; padding: 20px; background: #eee; }
我们会发现,我们给content设定的右外补丁大小比#sidebar还大4%,如此能在两栏之间留下一点空位.图12-4是以浏览器查看的效果,你可以发现只要为设定右外补丁,就能造出第二栏的假象.
图12-4 两栏布局
同时要留意的是对#footer所加上的clear:right规则,这个规则很重要,能确保页尾一定会出现在侧边栏和内容区之后,而不受两栏的长度变动影响,页尾会避开任何先前出现的float内容.
现在有了能使用的两栏布局,可以继续为现在的CSS声明加上更多边界,背景,边框与其他元素,使外观更吸引人.
至今为止我们都以百分比设定宽度,以便造出灵活的布局(栏宽会自动随着使用者的视窗宽度缩放).我们也能以像素单位造出定宽布局,但是以像素指定内外补丁大小时,必须注意IE for Windows错误解析CSS盒模型的问题,你能在本章的"盒模型问题"找到更多信息以及能用的解决方法. Webjx.Com
方法B:双重浮动
...main content here...
方法A的缺点之一是:为了浮动侧边栏,则必须在标记源代码之内把侧边栏放到主内容的前面,关闭CSS的浏览器,文字浏览器,屏幕阅读器与其他不支持CSS的设备将会在页面主要内容之前显示(或念出)侧边栏的内容.这样实在不严谨.
网页教学网
我们可以利用float做法,并避开这个问题,只要交换标记源代码里的主内容,侧边栏的位置(如上所示),然后以CSS将两者浮动到不同边即可.
#header { padding: 20px; background: #ccc; } #content { float: left; width: 66%; } #sidebar { float: right; width: 30%; background: #999; } #footer { clear: both; padding: 20px; background: #eee; } 网页教学网
通过把两个浮动到不同方向,就能以最恰当的方式排列源代码(主内容放在侧边栏前面),同时仍能得到图12-4这样的效果.
避开两边
同样重要的是,你必须将#footerdeclear属性设为both,如此一来不管两栏的长度多长,页尾总是显示在最后,而标签源代码的内容顺序也改善了.
方法C:浮动主内容
...主内容...
还有个值得一提的方法,只需要用一个float属性,同时标记源代码仍然可以将主内容的放在侧边栏之前.
只要将主内容的浮动到左侧,并且为它设定小于100%的宽度,如此一来就能在右侧留下足够空间摆放侧边栏.
CSS内容
方法C需要的CSS内容再简单不过了,"一个float属性",内容区希望使用的宽度,以及两栏之间留下的小边界.
#header { padding: 20px; background: #ccc; } #content { float: left; width: 66%; } #sidebar { background: #999; } #footer { clear: left; padding: 20px; background: #eee; }
请注意我们并不需要定义侧边栏的宽度,因为它会自动填满主内容用剩下的空间(在这个例子中是34%).
悲惨的背景
图12-5就是以浏览器查看的成果,哦喔!在某些常用浏览器里,侧边栏的背景颜色会出现在主内容区底下,由于侧边栏并未制定宽度,因此它想扩到与浏览器视窗一样宽.
图12-5 浮动内容,但是侧边栏的背景颜色透了出来
这个部分只要我们能在侧边栏左边加上宽度与内容区相同的外边界便可以避开这个问题.实际上我们会把外补丁设的稍微大一点,以便在两栏之间留下一点空白.
#header { padding: 20px; background: #ccc; } #content { float: left; width: 66%; } #sidebar { margin-left: 70%; background: #999; } #footer { clear: left; padding: 20px; background: #eee; }
简单朴素
或者是,如果涉及不需要用到背景色的话,那就不必设定边界了,图12-6是去掉整个#sidebar声明,在为主内容加上一点右外补丁之后的结果.此时两栏会共用页面预设的背景色.
图12-6 不使用背景色的浮动内容
CSS则能缩减成:
#header { padding: 20px; background: #ccc; } #content { float: left; width: 66%; margin-right: 6%; } #footer { clear: left; padding: 20px; background: #eee; }
除了加上左外补丁(或是省去背景色)之外,还有个使用背景图片的替代做法能让分栏具备背景色彩,我稍后会在本章的" 技巧延伸 "单元里提示这个小秘密. 网页教学网
除了使用float属性之外,也能用定位制造出分栏布局,让我们看看最后一个选择,方法D.
方法D:定位
...主内容...
方法D是使用相同的标记源代码结构,然后以最有效率的方式排列:把主内容放在侧边栏之前,关闭样式的浏览器,屏幕阅读器会先收到主内容部分,再收到侧边栏,在定位时,标记源代码内的顺序与页面元素出现的位置没有关系.
Webjx.Com
能够预测的高度
CSS内容与前三个方法有点类似,第一个差异是对页首指定的像素高度,我们需要能够预测的高度以便稍后为侧边栏定位.
在这里随机选了一个数字,而这需要根据页首使用的内容调整,像是标志,导航栏,搜索表单等.
#header { height: 40px; background: #ccc; } #footer { padding: 20px; background: #eee; }
为各栏留下空间
接着,要为#content这个设定右外补丁,就像前几个方法一样,这能为右侧边栏留下空间,稍后会使用绝对定位法(不是浮动)把右侧边栏放进去.
#header { height: 40px; background: #ccc; }#content { margin-right: 34%; } #footer { padding: 20px; background: #eee; }
放进侧边栏
最后,要使用绝对定位法把#sidebar这个放到#content的边界里,也必须去掉浏览器在页面周围加上的预设边界,如此一来定位座标在所有浏览器之内就会一致了.
body { margin: 0; padding: 0; } #header { height: 40px; background: #ccc; } #content { margin-right: 34%; }#sidebar { position: absolute; top: 40px; right: 0; width: 30%; background: #999; } #footer { padding: 20px; background: #eee; }
在指定position:absolute之后,就能以top与right坐标把#sidebar准确的放到所想的位置(图12-7). 网页教学网
图12-7 以定位做出的两栏布局效果
我们叙述了 "把 #sidebar这个放到距离浏览器视窗上边缘40像素,右边缘0像素的位置",除此之外,也能用bottom和left指定坐标.
页尾问题
以先前的方法浮动分栏时,可以用clear属性确保页尾横跨整个浏览器视窗的宽度,而不受主内容,侧边栏的长度影响.
在定位时,侧边栏的文档流独立于整个页面之外,所以只要侧边栏比内容还长,它就会盖住页尾部分.(图12-8)
图12-8 侧边栏与页尾重叠
面对这个问题我常用的解决方法之一,是为页尾指定与主内容一样的右外补丁,让侧边栏能够延伸超过页尾.
使用这个方法的话,CSS需要调整成这样:
body { margin: 0; padding: 0; } #header { height: 40px; background: #ccc; } #content { margin-right: 34%; } #sidebar { position: absolute; top: 40px; right: 0; width: 30%; background: #999; } #footer { margin-right: 34%; padding: 20px; background: #eee; } 网页教学网
这个解决方案在内容很短,侧边栏很长的页面上看起来有点怪,但是它的确有效,结果可参照图12-9,示范了侧边栏避开页尾的情况.
图12-9 外补丁和主内容相同的页尾
三人行
如果想做三栏布局的话该怎么办?没问题,而且在使用绝对定位时很容易加入.只需要为主内容,也为加上左外补丁,大小足够容纳第三栏即可.
另一个侧边栏能够放在标记源代码之内任何地方,因为会需要再度使用绝对定位进行布局.
假设加了第二个侧栏,并将它取名# sidecolumn,接着以下面这段CSS为它空出位置,再把它放进去.
body { margin: 0; padding: 0; } #header { height: 40px; background: #ccc; } #content { margin-right: 24%; margin-left: 24%; }#sidecolumn { position: absolute; top: 40px; left: 0; width: 20%; background: #999; } #sidebar { position: absolute; top: 40px; right: 0; width: 20%;
background: #999;
}
#footer {
margin-right: 24%;
margin-left: 24%;
padding: 20px;
background: #eee;
}
刚才完成的部分是在主内容,页尾区空出左外补丁(避免重叠),与之前做右侧边栏一样,接着以绝对定位法放进新的#sidecolumn ,将它放在距离上边缘40像素,距离左边缘0像素的位置. Webjx.Com
你有留意我们稍微修正了宽度以容纳第三栏吗?由于我们使用百分比,因此这个布局会随着浏览器的宽度缩放,或者也可以为任何一栏指定像素宽度,以便使布局宽度固定下来.
图12-10是用浏览器查看这个示例的效果,一份以CSS绝对定位完成的灵活三栏布局.
图12-10 以定位法作出的灵活三栏布局
归纳
我们在这章稍微研究了以CSS规划版面布局是能够达成的效果.本章的目的是提供你发挥的基础,因此示范了两种主要的做法: 浮动和定位.
我希望你能继续深入尝试CSS布局技巧,去掉页面内的嵌套表格,并且换上更多浏览器与设备能读取的灵活的结构化的标记语法.
如果你想知道更多关于CSS版面布局的资讯,那么一定要看看这些资源:
"The Layout Reservoir" (http://www.bluerobot.com/web/layouts ):这是个使用绝对定位制作多栏排版的绝佳示例.
"From Table Hacks to CSS Layout: A Web Designer's Journey" (http://www.alistapart.com/articles/journey/ ): Jeffrey Zeldman撰写的绝佳教学,记录了建立双栏布局所需的步骤.
"CSS Layout Technoques: For Fun and Profit"(http://www.glish.com/css/ ): Eric Costello的各种CSS布局资源.
"Little Boxes" (http://www.thenoodleincident.com/tutorials/box_lesson/boxes/html ): Owen Briggs编写的许多CSS布局示例的漂亮界面.
"CSS Zen Garden"(http://www.csszengarden.com/ ): "示范以CSS为基础的设计能达成什么视觉效果". Dave Shea培养的"花园"以单一XHTML文档展示读者投稿的最新CSS设计(当然也包含布局).这是个能看到CSS布局能力极致的神奇网站.
技巧延伸
现在我们经过了建立基本CSS布局的基础,该是讨论Windows版Internet Explorer 5与5.5版,以及它们错误解析CSS盒模型这个不幸问题的时候了.稍后也会分享一个通过平铺背景图片达成等高栏位布局的秘密技巧.
盒模型问题
本章开始的时候我们讨论了建立多栏CSS布局的方法,只用width属性定义每栏的宽度,当你开始为这些栏位加上补丁,边框的时候,事情就变得有些复杂了.为什么? 网页教学网
不幸的是,Internet Explorer 5 for Windows在加上内外补丁,边框的时候,无法正确计算外包元素的宽度.
举例来说,除了IE5 for Windows之外,所有支持CSS1的浏览器都会将外包元素的宽度计算为宽度,内补丁,边框三者相加,这是W3C希望所有浏览器处理CSS盒模型的方式.
但是IE5 for Windows会将边框和内补丁算在指定的宽度之内,搞混淆了?不用担心,直接看看问题会对你有所帮助.
眼见为实
比较一下图12-11和12-12,图12-11是个200像素宽的元素,两侧各有10像素的内补丁,以及5像素的边框,把水平部分的数值全加起来,就能知道实际宽度为230像素.
图12-11 盒模型的正确计算结果 网页教学网
图12-12 IE5 for Windows 错误的内补丁,边框,宽度计算结果
这是符合设计的盒模型:width属性总是定义元素的内容范围,而内补丁,边框则会加到这个数值上.
因此,如果将侧边栏的宽度定义成200像素然后加上内补丁和边框,CSS的声明如下:
#sidebar { width: 200px; padding: 10px; border: 5px solid black; }
把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.
图12-12 显示的是当width属性指定为200像素时,边框和内补丁会占用内容空间,而不是内容空间之外.
摇摆不定的宽度
我们反对为元素指定边框,内补丁的理由就是实际宽度会随着使用者浏览器的不同而不同,就算在今天,几百万使用IE5.x的用户还是会看到明显偏差的设计结果.同时有个重点必须记住:在这段文字撰写的时候,仍然有太多人在使用IE5以致我们不能忽视这个问题.
所以该怎么办?恩,幸运的是,有个能修复这个问题的技巧,这个技巧可以提供两种不同的宽度,一种给IE5 for Windows,另一种给其他浏览器以便得到正确的盒模型.
盒模型Hack
亲切的Tantek Celik写了盒模型Hack (http://www.tantek.com/CSS/Examples/boxmodelhack.html ) 让我们能提供两种不同宽度:一种调整过,只会被Window Internet Explorer 5使用,另一种则给其他所有浏览器使用. Webjx.Com
通过IE5和IE5.5才有的CSS解析Bugs,可以指定一个略大的宽度(容纳边框和内补丁),然后以实际的宽度覆盖这个数值,让其他浏览器能显示出正确的结果.
源代码示例
举例来说,如果希望把侧边栏的内容区域宽度设为200像素宽,加上10像素内补丁和5像素边框,那么我们的CSS看起来就像:
#sidebar { width: 200px; padding: 10px; border: 5px solid black; }
对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200像素覆盖回来,让符合标准的浏览器得到正确的宽度.
#sidebar { padding: 10px; border: 5px solid black; width: 230px; /* for IE5/Win */ voice-family: "\"}\""; voice-family: inherit; width: 200px; /* actual value */ }
留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖最初的width规则,第二个width规则会被IE5 for Windows忽略.
结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽.
对Opera友好
对于同样拥有IE5 for Windows解析错误的CSS2兼容浏览器来说,我们必须在每次使用盒模型补丁之后加上一段额外的声明,这个称为"对Opera友好"的规则会让所有符合标准的浏览器不被解析Bug卡住,确保他们能显示出期望中的宽度. 网页教学网
#sidebar { padding: 10px; border: 5px solid black; width: 230px; /* for IE5/Win */ voice-family: "\"}\""; voice-family: inherit; width: 200px; /* actual value */ }html>body #sidebar { width: 200px; }
有了这段规则,就可以完全绕过IE5 for Windows错误解析CSS盒模型的问题,让所有人都能看到正确的效果.
不止宽度
在这里以"盒模型Hack"达成显示相同宽度,但是这个Hack其实能在任何想为IE5 for Windows提供不同CSS内容时派上用场.任何Hack都必须小心使用,同时只有在真正需要的时候才使用,记住 "盒模型Hack"的使用地点是个好主意,这样才能在未来轻易拿掉它.
本文撰写时仍有上百万网络使用者仍然使用IE5 for Windows,因此这个补丁不可或缺.
下面这段"伪装的栏位"原始出自2004年一月份的A List Apart杂志(http://www.alistapart.com/articles/fauxcolumns/ ).
伪装的栏位
关于我个人网站的设计,我最常被问到的问题是:
"你是如何让右栏的背景色一路延伸到整页底部的?"
其实这只是个简单的概念,真的.而且这个概念能应用到本章开始所述的每种布局方法上.
垂直伸展
CSS最容易让人感到挫折的性质之一,是元素只会垂直伸展到真正需要的长度.这代表如果在里放一张200像素高的图片,那么
就只会在页面上延伸200像素.
当你以切割页面段落,接着用本章开始时的方法用CSS完成多栏布局时,这就会成为有趣的困境,某一栏可能比其他栏都长(图12-13),当你想为每栏选用独特的背景色彩时,视内容多寡而定,做出两个一样长的栏位可能十分困难.
网页教学网
图12-13 长度不一样的栏位 Webjx.Com
有几个做法能让阑尾看起来一样长,不受栏位包含的内容的影响.我准备分享我的解决方法(适用于绝对定位布局法),而这个方法实在是莫名其妙的...简单. 网页教学网
作弊
这个难以启齿的简单秘诀,是用一个垂直排列的背景图片作出彩色栏位的错觉.在SimpleBits(http://www.simplebits.com/ ),我用了类似图12-14的背景图片(为了示范而修改了比例):左边有装饰用条纹,中间留下宽阔的空白空间安放主要内容,接着是一条1像素的边框,然后是右侧边栏的浅棕色区域,跟着是反向的装饰用条纹.
图12-14 tile.gif 2像素高的背景图片,预先分配好栏宽.
整个图片没有几像素高,但是垂直平铺之后,他就能造成一路到底的彩色栏位,不管栏位内容多长都无所谓.
CSS内容
我为标签加上这条CSS规则:
background: #ccc url(tile.gif) repeat-y 50% 0;
这会使整个页面的背景色设为灰色,并且只垂直平铺图片(repeat-y),后面的50% 0代表背景图片的定位:在这个例子里,是从浏览器视窗左边缘算起50%(使图片居中),并且紧贴上边缘.
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
栏位定位
放好背景图之后,在把我的定位布局放到上面,为左栏,右栏指定内外补丁以确保它们会对齐正确位置:也就是背景图创造出来的虚假栏位里(图12-15).
网页教学网
图12-15 平铺背景图创造出的彩色栏位
有个重点必须要注意:如果哪一栏指定了边框,内外补丁的话,就仍然用Tantek Celik的盒模型Hack为IE5 for Windows修正盒模型问题(参照本章稍早的"盒模型问题").
或者是,如果能够只使用外补丁,避免边框与内补丁的话,就不需要加上盒模型Hack了,同时,如果栏位的内容只单纯放在平铺背景图之上(透明显示),那么要避免使用Hack也应该很简单. 网页教学网
只要有用就好
虽然我以绝对定位法在自己的网站上做了两栏布局,但是你也能用本章开始时提过的其他方法达成一样好的效果.同样的想法仍然适用:平铺背景图,接着再浮动某个栏位,使其覆盖在模拟的栏位背景上.
这是个简单的概念,但是能够解决设计者在构建CSS布局时经常遇到的挫折之一.
结论
我希望本章能带给你开始探索CSS布局的刺激世界,本章开始时我们看到了四种构建版面布局的方式,其中三种用了float属性,还有一种用了绝对定位.一定要去看看我列出的额外资源,里面有更多布局的技巧和示范.
我们也讨论了盒模型Hack在建立具备边框,内补丁的栏位时有何重要性,让这些效果在IE5 for Windows以及其他浏览器上表现一致.
最后,我分享了一个有用的技巧,让你在设计CSS布局时能做出等高栏位,这是某些人认为十分基本,但实现上经常让人感到挫折的设计目标.只要小小一个平铺背景图就能搞定,让你得到能够抵达页面底部(不管内容多长)的栏位.
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
你可能感兴趣的:(html基础教程,html,html5,css)
jQuery实现前端下载功能
天农学子
前端 jquery javascript
js实现前端下载功能前端代码html代码导出明细js代码functionexportExcel(){//定义要发送的参数letpostData=$("#searchForm").serializeObject();//发送POST请求fetch('${ctxPO}/url/PosInvoiceUrlController/exportPosInvoice',{method:'POST',body:J
unity3d引擎缓存优化技术_unity3d优化总结篇
weixin_39732991
unity3d引擎缓存优化技术
转自http://www.unitymanual.com/thread-21597-1-1.html此总结由自己经验及网上收集整理优化内容包括:1.代码方面;2.函数使用方面;3.ngui注意方面;4.数学运算方面;5.内存方面;6.垃圾回收方面等等...本着相互交流共同进步的原则好了,总结如下:1.尽量避免每帧处理,可以每隔几帧处理一次比如:[C#]纯文本查看复制代码functionUpdate
使用Nginx部署前端Vue项目
bigbig猩猩
前端 nginx vue.js
在使用Nginx部署前端Vue项目时,我们主要关注的是如何高效地将静态资源(HTML、CSS、JavaScript、图片等)提供给客户端浏览器。Vue.js是一个流行的JavaScript框架,用于构建用户界面,而Nginx作为一个高性能的HTTP和反向代理服务器,非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目,包括环境准备、Vue项目构建、Nginx配置、部署过程以及
2020-12-17
幸福大黑鸭
IT1.LeetCode:各位相加Java编写2020-12-17(258.各位相加)2.《Java从入门到精通》明日科技:P391~395阅读记xmind笔记,并自己实现实例。知识点之前确实都学过,但还是再系统复习一下吧。3.《Semantic-awareWorkflowConstructionandAnalysisforDistributedDataAnalyticsSystems》:精读关键
前端基础入门三大核心之HTML篇:深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
DTcode7
HTML网站开发 # 前端基础入门三大核心之html HTML5 前端 web 前端三大核心 网页开发
前端基础入门三大核心之HTML篇:深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中,选择合适的图像格式是至关重要的一步,它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式
DOM 方法:深入解析与实用指南
wjs2024
开发语言
DOM方法:深入解析与实用指南引言文档对象模型(DOM)是Web开发中的一个核心概念,它为HTML和XML文档提供了一个结构化的表述方式。DOM方法则是操作这些文档的接口,允许开发者添加、删除和修改页面元素。本文将深入探讨DOM方法,并提供实用的指南,帮助读者更好地理解和应用这些方法。DOM基础在深入了解DOM方法之前,我们需要掌握一些DOM的基础知识。DOM将HTML或XML文档表示为树形结构,
python3爬虫——贴吧实战
没耕过田的牛
爬虫 python
初学者之贴吧爬虫一、思路二、步骤1.引入库2.载入网页数据3.分析结构提取信息4.将结果写入txt文件中三、封装四、总结一、思路明确目的及需求,以剑来吧为例。本次实例练习准备爬取“剑来吧”每个帖子的标题、帖子链接、发帖作者、发帖时间、回帖数量,那么拿到网页,二话不说先进入开发者模式先观察html文档结构——找规律。因为直接在网页源码上看很难看出结构特征,可以将源码粘贴到工作区排版后再进一步观察,很
python网络爬虫(二)——数据的清洗与组织
光电的一只菜鸡
python python 爬虫 java
学会了网络爬虫发送请求后,我们可以获得一段目标的HTML代码,但是还没有把数据提取出来,接下来需要进行数据的清洗与组织。foritemindata:result={'title':item.get_test(),'link':item.get('href')}print(result) 首先明确要提取的数据是标题和链接,标题在a标签中,提取标签的正文用get_text()方法;链接在a标签的
MATLAB机器人常用代码程序(以UR5e机器人为例)
FL17171314
机器人
需要一个UR5e的机器人模型。MATLAB的RoboticsToolbox或者RoboticsSystemToolbox提供了创建和模拟机器人模型的功能。UR5e=importrobot('universalUR5e.urdf');show(UR5e)showdetails(UR5e)figure(Name="InteractiveGUI")gui=interactiveRigidBodyTree
Selenium + Python 自动化测试14(发送报告)
立黄昏粥可温
UI 自动化测试 selenium python 模块测试 测试工具 功能测试
我们的目标是:按照这一套资料学习下来,大家可以独立完成自动化测试的任务。上一篇我们讨论了使用HTMLTestRunner生成HTML报告的方法。本篇文章我们接着讲生成HTML报告是否可以自动邮件发送出去,提高我们测试报告的及时性,方便性,避免自己手动操作发送。1、SMTP介绍SMTP:simplemailtransferprotocol简单邮件传输协议。是一组由源地址到目的地址传送邮件的规则。py
白骑士的CSS教学高级篇之高级选择器与伪类 4.2.2 伪类
白骑士所长
CSS 教学 css 前端
伪类选择器是CSS中一种非常强大的工具,允许我们根据元素的特定状态来应用样式。通过使用伪类选择器,你可以创建更具交互性和动态性的网页。常用的伪类选择器包括‘:focus‘、‘:hover‘、‘:active‘和‘:visited‘,它们在设计用户体验时起着至关重要的作用。‘:focus‘伪类‘:focus‘伪类选择器用于选择当前处于焦点状态的元素。通常,当用户通过键盘或鼠标与表单元素(如输入框、按
vue之MVC与MVVM区别
火红_
vue mvc vue.js 前端 javascript
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、MVC:M-model-模型:数据处理(数据库、接口)V-view-视图:用户界面、页面(HTML编写的)C-control-控制器:编写js业务逻辑例如:从页面view层触发一个按钮获取数据,就会向C控制器层请求自己需要的数据,而C控制器就会向M模型层请求数据,M模型层就会把数据传给C,C再传给V视图层。MVVM:M-model-
html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇)
游苏昱
html语言及js脚本基础
什么是变量?变量是用于存储信息的容器变量的声明语法:var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头;变量也能以$和_符号开头(不过我们不推荐这么做);变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾;如果省略分号,则由解析器确定语句的结尾。有个好的编码习惯,都要以;结尾数据类型在JavaScript中,一段信息就是一个值(value)。
Vue2.0学习--基础--4--Class与Style绑定
naildingding
框架—Vue vue 前端
(day5)操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute(也就是每个元素的class属性和style属性),所以我们可以用v-bind处理它们:只需要表达式计算出字符串结果即可。(也就是说,在HTML中class和style属性后面都是接一个双引号括起来的字符串值)但是字符串拼接麻烦且易错。所以,在使用v-bind将class与style与特定的值绑定
制作一个简单HTML旅游网站(HTML+CSS+JS)桂林旅游网页设计与实现5个页面
软件技术NINI
html+css+js旅游 html 旅游 css
一、网站题目旅游,当地特色,历史文化,特色小吃等网站的设计与制作。二、✍️网站描述桂林旅游主题的网页一共五个个页面-旅游网页使用htmlcssjs制作有banana图-页面可以相互跳转包含表单三级页面-网页可以使用vscodehbuilderdw等打开修改-里面的图片和文字都可以替换为其他旅游网页-桂林旅游网页介绍了景点,美食,联系我们,桂林旅游等-html静态网页没有复杂效果布局简单原创htm
Vue——认识day06_class与style绑定
WenJGo
Vue 前端HTMLCSSJS vue.js 前端 javascript
在Vue中,可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定:对象语法:可以将一个包含CSS属性和值的对象传递给v-bind,将对象的属性与HTML元素的style属性进行绑定。例如:HelloWorld在上面的例子中,textColor和textSize是Vue实例的data属性,可以在Vue实例中定义和修改它们的值。当数据发生变化时,
js html css代码缩进,HTML/CSS/JS代码格式化
吃货喵
js html css代码缩进
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?我们在编辑器当中写代码的时候,可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON,使用SublimeText自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点,一些html文件的格式不够优美!
【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~
南北极之间
web前端特效源码 javascript css 编程入门 网页设计编程入门代码 html
bilibili在线视频演示地址:【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能!可动态好评+差评+留言功能!效果图:
【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面
南北极之间
web前端特效源码 前端 javascript html 网页设计代码实例 css3
效果图:完整代码:【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
html5 css3 JavaScript响应式中文静态网页模板js源代码
Yucool01
html5 javascript css3
该批次模板具备如下功能:首页,二级页面,三级页面登录页面均有,页面齐全,功能齐全,js+css+html,前端HTML纯静态页面,无后台,可用dreamweaver,sublime,webstorm等工具修改;部分网页模板效果图:有需要的同学可以下载学习一下:https://download.csdn.net/download/Yucool01/22408278https://download.c
前端配置环境
葱头的故事
前端
工具类配置一、下载GitBash下载地址二、下载google浏览器下载地址三、下载微信开发者工具下载地址四、下载vscode下载地址1、安装中文包安装中文包教程2、安装插件3、vscode中使用git教程4、setting.json我自己常用的:{"editor.fontSize":18,"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vs
uniapp壁纸项目笔记
京城五
前端学习脚步 uniapp 项目实践 uni-app 笔记
项目初始化static文件夹中尽量不要存放一些测试时用的图片。因为项目在打包的时候会将static文件夹一并的打包,这样会使得打包后的项目变得臃肿。解决办法是在项目的根目录下创建一个common文件夹,用于存放测试用的图片和其他文件。common文件夹中的文件只有在被引入的时候才会被一并打包。否则要避免这个情况就只能在打包项目前清理static文件夹。同理,一些公共样式(scss文件)也可以放在c
robot安装Java工具包,自动化工具Robot framework安装说明之windows7
盾牌座
robot安装Java工具包
编写背景:2年没有更新博客了,自从有娃后时间变得越来越少,深刻体会了当妈的不容易;整理这个文章是为了让部门的新人学习这个工具能轻松的入门第一关:安装,同时希望能帮助到其它同行。参考资料:http://www.cnblogs.com/puresoul/p/3854963.htmlhttp://www.itest.pro/howto-install-robot-framework-autoit-win
java 富文本 过滤xss_富文本XSS过滤
热茶走
java 富文本 过滤xss
富文本内容要替换掉js代码主要防止xss,不是防止注入,防注入参数化写数据库就好了,或者将单引号替换为实体对象在做一些网站(特别是bbs之类)时,经常会有充许用户输入html样式代码,却禁止脚本的运行的需求,以达到丰富网页样式,禁止恶意代码的运行。当然不能用htmlencode和htmldecode方法,因为这样连基本的html代码会被禁止掉。我在网上搜索,也没有找到好的解决办法,倒是收集了一些脚
JS旧笔记
色即是猫
页面自动执行(加载)js的几种方法一、JS方法1.最简单的调用方式,直接写到html的body标签里面:2.在JS语句调用:functionmyfun(){alert("thiswindow.onload");}/*用window.onload调用myfun()*/window.onload=myfun;//不要括号3。window.onload=function(){func1();func2(
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
秋说
前后端项目开发 前端框架 vue.js 前端 html css JavaScript
文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一:vite打包方法二:webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套:HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架,用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架,广泛应用于现代Web应
Chat App 项目之解析(九)
禁忌-之城
json html5 javascript css css3 go mysql
ChatApp项目介绍与解析(一)-CSDN博客文章浏览阅读468次,点赞12次,收藏3次。ChatApp是一个实时聊天应用程序,旨在为用户提供一个简单、直观的聊天平台。该应用程序不仅支持普通用户的注册和登录,还提供了管理员登录功能,以便管理员可以查看和管理聊天记录。本文将详细介绍index.html文件的实现细节,包括代码解释、实现效果、实现方法以及后续需要实现的功能。https://blog.
四章-47-KML地震信息
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1047.html,对应的官网示例https://openlayers.org/en/latest/examples/kml-earthquakes.html?q=kmlimage.pngimage.pngKML源,数据处理方式和前例相同信息弹窗使用了bootstr
css面试题
刘松阳
1.css盒模型简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。border-sizing(有3个值哦):border-box,padding-box,content-box.标准盒子模型:IE盒子模型:区别:从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子
uniapp尺寸单位 px转rpx
万能螺丝刀1
uniapp
uniapp尺寸单位uni-app支持的通用css单位包括px、rpxpx即屏幕像素rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会等比放大,但在APP端和H5端屏幕宽度达到960px时,默认按照375px的屏幕宽度进行计算,具体配置参考:rpx计算配置。rpx计算配置uni-app屏幕基准宽度uni-app规
linux系统服务器下jsp传参数乱码
3213213333332132
java jsp linux windows xml
在一次解决乱码问题中, 发现jsp在windows下用js原生的方法进行编码没有问题,但是到了linux下就有问题, escape,encodeURI,encodeURIComponent等都解决不了问题
但是我想了下既然原生的方法不行,我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码,最后在绝望之际,用了下面的方法解决了
Spring 注解区别以及应用
BlueSkator
spring
1. @Autowired
@Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean,或者不存在UserDao类型的bean,会抛出 BeanCreationException异常,这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。
2. @Qualifier
当spring中存在至少一个匹
printf和sprintf的应用
dcj3sjt126com
PHP sprintf printf
<?php
printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80);
echo '<br />';
printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456);
printf('th
config.getInitParameter
171815164
parameter
web.xml
<servlet>
<servlet-name>servlet1</servlet-name>
<jsp-file>/index.jsp</jsp-file>
<init-param>
<param-name>str</param-name>
Ant标签详解--基础操作
g21121
ant
Ant的一些核心概念:
build.xml:构建文件是以XML 文件来描述的,默认构建文件名为build.xml。 project:每个构建文
[简单]代码片段_数据合并
53873039oycg
代码
合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。
代码如下:
java 通信技术
云端月影
Java 远程通信技术
在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等,这些名词之间到底是些什么关系呢,它们背后到底是基于什么原理实现的呢,了解这些是实现分布式服务框架的基础知识,而如果在性能上有高的要求的话,那深入了解这些技术背后的机制就是必须的了,在这篇blog中我们将来
string与StringBuilder 性能差距到底有多大
aijuans
之前也看过一些对string与StringBuilder的性能分析,总感觉这个应该对整体性能不会产生多大的影响,所以就一直没有关注这块!
由于学程序初期最先接触的string拼接,所以就一直没改变过自己的习惯!
今天碰到 java.util.ConcurrentModificationException 异常
antonyup_2006
java 多线程 工作 IBM
今天改bug,其中有个实现是要对map进行循环,然后有删除操作,代码如下:
Iterator<ListItem> iter = ItemMap.keySet.iterator();
while(iter.hasNext()){
ListItem it = iter.next();
//...一些逻辑操作
ItemMap.remove(it);
}
结果运行报Con
PL/SQL的类型和JDBC操作数据库
百合不是茶
PL/SQL表 标量类型 游标 PL/SQL记录
PL/SQL的标量类型:
字符,数字,时间,布尔,%type五中类型的
--标量:数据库中预定义类型的变量
--定义一个变长字符串
v_ename varchar2(10);
--定义一个小数,范围 -9999.99~9999.99
v_sal number(6,2);
--定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
Mockito:一个强大的用于 Java 开发的模拟测试框架实例
bijian1013
mockito 单元测试
Mockito框架:
Mockito是一个基于MIT协议的开源java测试框架。 Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
精通Oracle10编程SQL(10)处理例外
bijian1013
oracle 数据库 plsql
/*
*处理例外
*/
--例外简介
--处理例外-传递例外
declare
v_ename emp.ename%TYPE;
begin
SELECT ename INTO v_ename FROM emp
where empno=&no;
dbms_output.put_line('雇员名:'||v_ename);
exceptio
【Java】Java执行远程机器上Linux命令
bit1129
linux命令
Java使用ethz通过ssh2执行远程机器Linux上命令,
封装定义Linux机器的环境信息
package com.tom;
import java.io.File;
public class Env {
private String hostaddr; //Linux机器的IP地址
private Integer po
java通信之Socket通信基础
白糖_
java socket 网络协议
正处于网络环境下的两个程序,它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤:
①创建Socket;
②打开连接到Socket的输入输出流;
④按照一定的协议对Socket进行读写操作;
④关闭Socket。
Socket通信分两部分:服务器端和客户端。服务器端必须优先启动,然后等待soc
angular.bind
boyitech
AngularJS angular.bind AngularJS API bind
angular.bind 描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用。 使用方法: angular.bind(se
java-13个坏人和13个好人站成一圈,数到7就从圈里面踢出一个来,要求把所有坏人都给踢出来,所有好人都留在圈里。请找出初始时坏人站的位置。
bylijinnan
java
import java.util.ArrayList;
import java.util.List;
public class KickOutBadGuys {
/**
* 题目:13个坏人和13个好人站成一圈,数到7就从圈里面踢出一个来,要求把所有坏人都给踢出来,所有好人都留在圈里。请找出初始时坏人站的位置。
* Maybe you can find out
Redis.conf配置文件及相关项说明(自查备用)
Kai_Ge
redis
Redis.conf配置文件及相关项说明
# Redis configuration file example
# Note on units: when memory size is needed, it is possible to specifiy
# it in the usual form of 1k 5GB 4M and so forth:
#
[强人工智能]实现大规模拓扑分析是实现强人工智能的前奏
comsci
人工智能
真不好意思,各位朋友...博客再次更新...
节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....
但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
记录一些常用的函数
dai_lm
java
public static String convertInputStreamToString(InputStream is) {
StringBuilder result = new StringBuilder();
if (is != null)
try {
InputStreamReader inputReader = new InputStreamRead
Hadoop中小规模集群的并行计算缺陷
datamachine
mapreduce hadoop 并行计算
注:写这篇文章的初衷是因为Hadoop炒得有点太热,很多用户现有数据规模并不适用于Hadoop,但迫于扩容压力和去IOE(Hadoop的廉价扩展的确非常有吸引力)而尝试。尝试永远是件正确的事儿,但有时候不用太突进,可以调优或调需求,发挥现有系统的最大效用为上策。
-----------------------------------------------------------------
小学4年级英语单词背诵第二课
dcj3sjt126com
english word
egg 蛋
twenty 二十
any 任何
well 健康的,好
twelve 十二
farm 农场
every 每一个
back 向后,回
fast 快速的
whose 谁的
much 许多
flower 花
watch 手表
very 非常,很
sport 运动
Chinese 中国的
自己实践了github的webhooks, linux上面的权限需要注意
dcj3sjt126com
github webhook
环境, 阿里云服务器
1. 本地创建项目, push到github服务器上面
2. 生成www用户的密钥
sudo -u www ssh-keygen -t rsa -C "
[email protected] "
3. 将密钥添加到github帐号的SSH_KEYS里面
3. 用www用户执行克隆, 源使
Java冒泡排序
蕃薯耀
冒泡排序 Java冒泡排序 Java排序
冒泡排序
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年6月23日 10:40:14 星期二
http://fanshuyao.iteye.com/
Excle读取数据转换为实体List【基于apache-poi】
hanqunfeng
apache
1.依赖apache-poi
2.支持xls和xlsx
3.支持按属性名称绑定数据值
4.支持从指定行、列开始读取
5.支持同时读取多个sheet
6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java
比如:
Str
3个处于草稿阶段的Javascript API介绍
jackyrong
JavaScript
原文:
http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email
本文中,介绍3个仍然处于草稿阶段,但应该值得关注的Javascript API.
1) Web Alarm API
&
6个创建Web应用程序的高效PHP框架
lampcy
Web 框架 PHP
以下是创建Web应用程序的PHP框架,有coder bay网站整理推荐:
1. CakePHP
CakePHP是一个PHP快速开发框架,它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式,如MVC和ORM,降低了开发成本,并减少了开发人员写代码的工作量。
2. CodeIgniter
CodeIgniter是一个非常小且功能强大的PHP框架,适合需
评"救市后中国股市新乱象泛起"谣言
nannan408
首先来看百度百家一位易姓作者的新闻:
三个多星期来股市持续暴跌,跌得投资者及上市公司都处于极度的恐慌和焦虑中,都要寻找自保及规避风险的方式。面对股市之危机,政府突然进入市场救市,希望以此来重建市场信心,以此来扭转股市持续暴跌的预期。而政府进入市场后,由于市场运作方式发生了巨大变化,投资者及上市公司为了自保及为了应对这种变化,中国股市新的乱象也自然产生。
首先,中国股市这两天
页面全屏遮罩的实现 方式
Rainbow702
html css 遮罩 mask
之前做了一个页面,在点击了某个按钮之后,要求页面出现一个全屏遮罩,一开始使用了position:absolute来实现的。当时因为画面大小是固定的,不可以resize的,所以,没有发现问题。
最近用了同样的做法做了一个遮罩,但是画面是可以进行resize的,所以就发现了一个问题,当画面被reisze到浏览器出现了滚动条的时候,就发现,用absolute 的做法是有问题的。后来改成fixed定位就
关于angularjs的点滴
tntxia
AngularJS
angular是一个新兴的JS框架,和以往的框架不同的事,Angularjs更注重于js的建模,管理,同时也提供大量的组件帮助用户组建商业化程序,是一种值得研究的JS框架。
Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。
这里我们来简单的探讨一下它的应用。
首先使用Angularjs我
Nutz--->>反复新建ioc容器的后果
xiaoxiao1992428
DAO mvc IOC nutz
问题:
public class DaoZ {
public static Dao dao() { // 每当需要使用dao的时候就取一次
Ioc ioc = new NutIoc(new JsonLoader("dao.js"));
return ioc.get(