出自:http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails 作者:Tessa Thornton
译文:http://www.w3cplus.com/css/getting-started-with-html-emails.html 译者:大漠
HTML Mail介绍
作为Web开发人员,编写HTML电子邮件是一件非常具有挑战性的任务,我们也必须得处理。幸运的是,当我的第一个客户要求我设计和编写一个HTML电子邮件的通知,他耐心的陪我渡过整个编写过程,让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运,所以本教程可以帮你做好一切的准备。
电子邮件客户端的问题
你认为IE很痛苦。等你见到Outlook2007,你就不这么认为了。因为电子邮件客户端渲染HTML/CSS有巨大差异,在许多流行的电子邮件客户端使用现代编码技术让布局相当的混乱。电子邮件客户端和浏览器渲染HTML不一样——甚至在许多情况下不一样。浮动、背景图像,甚至是外距不再是你编写代码的一些词汇。所以你应该怎么编码呢?
解决文案:代码像1997年的一样
这是正确的。table、cellpadding、cellspacing、colspan,所有这些你以为你可以使用。格式是电子邮件唯一布局的方法,所以你暂时要忘记你喜欢的CSS方式和你想要的语义化,这样只会让表格更混乱。
步骤一:电子邮件设计
保持简单
当设计一个HTML电子邮件时,请记住保持简单。我们今天使用的设计是一个多列布局,主要是出于演示的目的,但电子邮件布局的时候,编码的时候考虑坚持两列布局,这样能为您省去很多麻烦的事情。
减少图像的使用
记住你的设计不能太花哨,因为Outlook不支持背景图像。事实上,根据客户的需求,你可能想跳过Photoshop的过程,强迫自己完成一个实用型的电子邮件设计。也就是说,在这里我们将使用Photoshop,这样你就可以更好的理解我们要做的事情。
如果邮件是清晰的或者不用没有什么影响的,你可以使用背景图片来装饰。例如,我们要给邮件头部添加一个渐变的效果,如果它不会显示,但这也没什么大不了。
窄屏最好
因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度,你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条。
保持一致
记住,我们使用固定的元素属性cellpadding
和cellspacing
设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的。
我们的设计
这个设计类似于去年夏天我的客户的一个电子邮件通知的设计,他非常的简单。这虽然不是很好看,但这并不很重要。他非常简单一致,有许多布局选项,这样你就可以看到他们是不同的。
步骤二:规划我们的代码
以我的经验来看,HTML电子邮件代码变得非常的复杂,非常的快速。重要的是要有一个可行性计划。这里是我们的计划(我们会回来的,如果你没有遵循,不用担心)。
首先 ,我们先要设置一个宽度为100%的灰色背景,这是我们的表格容器。
接下来 ,请注意表容器里有三个单独的表格:一个在顶部,放置“浏览器中查看”的链接,中间的表格放置主要内容和一个度部的表格,用来放置“邮件退订”链接。
最后,在主表格中,每个水平区域的内容都放置在表格的行或单元格里。也就是说,表格的每个单元格都包含了每一个内容。
cellpadding
和cellspacing
我们将使用HTML的cellpadding
和cellspacing
属性来替代CSS的margin
和padding
属性。
cellpadding
和CSS的padding
几乎是一样的——用来设置内容周边的空白空间。cellspacing
是用来设置表格单元格与单元格之间的间距。
#main
表格设置了15px的cellspacing
,这样我们的主内容周围就有15px的空白间距,每个水平组之间有15px间距。cellpadding
和cellspacing
仅仅适用于父表格,而不适合每一个单元格。如果我们不希望有单元格边距或单元格间距,我们只需要给每个表格指定他们的值为0。
步骤三:开始编码
现在我们可以一段一段的为我们的电子邮件开始编码。与最佳实践相反,我们将要单独的给每个结构添加样式。我们将从布局开始,包括所有的间距和内距,背景颜色,之后我们要写排版和其他的CSS样式。
设置
设置电子邮件很简单:只包括了html
、head
和body
标记。让我们在表容器中放置我们之前讨论的三个主要表格。
对于DOCTYPE布言,有几种不同的方法,在这文章中做过详细的介绍。在我们的这个例子中,我决定不使用任何文档类型,因为我们不需要任何DOCTYPE声明的任何东西。在大多数情况下,电子邮件客户端会删除我们自定义的DOCTYPE类型。
Nettuts Email Newsletter
注意两个信息的表格设置了cellpadding
值为20px。这将设置了主内容中段落的空间。主表格设置了15px的cellspacing
。这是为了在垂直方向有一个间距。因为每个部分都放置在表格的单元格里,他们之间设置了一个15px的间距。
还要注意,表格都设置了align="center"
和我们都定义了表格的宽度。在HTML电子邮件中,一般最好不要给表容器定义宽度。你最好为每个单元格定义宽度,但在这种情况下,我们将打破这个规则,因为我们担心表格有cellspacing
和cellpadding
。
一般而言,指定表格单元格宽度要比指定表格自身宽度要好。
信息表格
这些非常简单:段落在单元格中居中显示。
底部的信息表格和这个完全一样。
头部
头部非常简单,有三行,每行一列。因为我们表格有蓝色背景,我们需要给每个表格的单元格设置一些内距,让文本不挨着边框。
记得要设置每个单元格的宽度,在本例中是570px(600px - 两边单元格各15px)。我们还设置了align
属性为right
,让日期向右对齐。现在,我们还没有添加背景图片,不过我们稍后会这么做。同时我们给单元格设置浅蓝色背景。
请注意,我们使用bgcolor
来替找style="background:"
。这是因为在电子邮件客户端中HTML属性要比CSS样式更好。
到目前为止,这样看起来很糟糕,但布局正是我们想要的。
内容区域——两列
我们的第一部分内容是图像居左,图像右边有两个标题。这里不使用常用的CSS浮动,我们在这里使用一个具有三个单元格的表格:
第一个放置图像
第二个用来制作图像与标题之间的间距
最后一个放置标题
图像有边框效果,我们将在单元格内嵌套一个表格,前且设置表格的cellpadding="5"
,同时给他设置一个灰色的背景色。cellpadding
增加了元素的宽度,所以我们在定义单元格宽度的时候需要减云10px。
All New Site Design
It's 150% Better and 40% More Efficient!
注意:
我们添加一个空行。因为我们内容有15px的间距,我们使用一个空的单元格来制作这个间距。在我的测试中,这个空格没有问题,但你最好在单元格中添加一个空白的符号
我们也给单元格设置了align
属性值为top
,让单元格内容垂址方各,顶端对齐。这个很重要,因为单元格垂直方向的align
默认值为middle
,这样将会导致一些奇怪的结果。
我们使用的虚拟图像来自于dummyimage.com,因为电子邮件客户只支持服务器上的图像,这样做更容易让图片显示。看看这个网站,它解释了如何让你通过URL地址来指定你需要的图像。
内容区域——一列
这一部分真的很简单:单列的表格里面放了一个段落。不要忘记了设置单元格的宽度和设置表中心对齐。
分割器
添加垂直空间的单元格间距(超过15px)时,我们必须使用一个图像来模拟制作间隔。就像90年代一样!我们可以使用一个空白的gif,但目前只需要使用一个虚拟的图像,你可以看到一开始是灰色的,但后来我们把设置成白色的。
效果如下图所示:
内容区域——三列
对于三列内容区域,我们使用一个具有五个单元格的表格,每一个单元格为一列,两列之间的单元格用来制作间距。
很简单,使用前面介绍的方法一样,实现边框效果。别忘记了给单元格添加align="top"
。
三个文本列制作是相同的。
Exciting New Products!
Ut enim ad minim veniam, ...
A Newsletter Every Month
Excepteur sint occaecat ...
New and Improved Forum
Lorem ipsum dolor sit ...
使用前面介绍的方法,在底部添加另一个分隔器。
其他
一切只是重复我们已经做好的两列内容和一列内容。
This is a heading
Lorem ipsum dolor sit...
Lorem ipsum dolor si...
CALL TO ACTION
主内容的布局到此就完成:
图片的使用
与常规的Web页面不同,你不能把图片都放在一个文件夹中,然后使用相对路径链接这些图片。所有的路径必须是绝对的。当我开发一个电子邮件时,我通常把图片放在一个子域下或Amazon S3。当我准备发送邮件到电子邮件客户端时,我将所有的图片放到网站的子域名下。
所有图片路径必须是绝对路径。
步骤四:美化电子邮件
我们不能将外部的样式表嵌入到电子邮件中,因为有些电子邮件客户端会删除整个
中的标签,或者忽略
标签。我们要使用内联样式是一件痛苦的事情。幸运的是,有相关服务可以帮助我们将嵌入的CSS变成内联样式。我使用的是一个名为Premailer网站,你可以直接把代码粘贴到里面,它会将样式嵌入到行内中。
在本教程中,我们先把要嵌入的CSS写在
标签内,然后我们将使用Premailer将样式转换到行内。
Premailer将需要的CSS嵌入到行内。
重置基本样式
我们不会在你喜欢的页面中强硬的使用*
选择器来重置样式。因为使用默认的值会让效果更佳一致。唯一的就是我们需要重置元素(如我们的标题和段落)的margin
和padding
,让元素周围空间一致(如cellpadding
/cellspacing
)。
您还将注意到表容器周边有一个空白的间距,这是body
元素默认的样式。
排版
对于电子邮件的排版没有什么很特别,因为它和Web页面的文字排版几乎是一样的。不要使用简写的声明(如,font),因为在不同的电子邮件客户端会产生不一致的结果。
#top-message p,
#bottom-message p {
color: #3f4042;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#header h1 {
color: #ffffff;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
font-size: 24px;
}
#header h2 {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
#header p {
color: #ffffff;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
font-size: 12px;
}
h3 {
font-size: 28px;
color: #444444;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
font-size: 22px;
color: #4A72AF;
font-family: Arial, Helvetica, sans-serif;
}
h5 {
font-size: 18px;
color: #444444;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 12px;
color: #444444;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.8em 0;
}
现在这样看起来,效果更好:
(ps: 不过我觉得还是尽量内联比较好,比如亲测qq邮箱,style标签里的样式是无效的)
背景图片
背景图像在一些电子邮件客户端不能正常显示,如果你需要使用背景图片,最好提供一个备选颜色,把他们应用到一个单元格上。这样一来,不支持显示背景图片的客户端将会显示背景颜色。
#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}
我们完成了比较容易的部分。现在我们需要测试我们制作的电子邮件。
步骤五:测试
(PS:Mailchimp测试,在check email这步就截止了,怎么都点不过去,所以有小伙伴做的时候注意下这个问题)
电子邮件的测试过程是非常重要的,也是最让人讨厌的。处理电子邮件的时候,在每个阶段我都常测试,这样我就可以确定有什么差错。有很多客户测试和大量的方法来测试他们,让我们去结束这一切吧。
电子邮件客户端
下面这些电子邮件客户端,你应该都需要测试:
Outlook2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird
怎么测试
我们首先需要找到一种方法发送制作好的HTML电子邮件。你的客户可能会像Mailchimp和Campaign Monitor测试电子邮件或发送电子邮件。
你可能认为没有必要这么复杂化,你可能认为只需要将HTML代码粘贴到电子邮件客户端发送即可。然而,这可能导致在不同的电子邮件客户端有不同的结果。所以为了有一个好的应用,测试是必不可少的。
使用Mailchimp测试
我的首选方案是使用Mailchimp进行测试和发送电子邮件。Mailchimp有一个免费发送500人的版本,这样你就不需要支付测试的费用。它有一个简单易用的界面,这里有一个快速操作的介绍:
注册一个免费的Mailchimp的账户,并添加一个测试电子邮件账户的收件人列表:Hotmail、Yahoo!和Gmail等,登录到您的新账户。
在你的账户主界面选择创建一个活动并选择常规的。填写基本信息,你需要的只是一个用于测试的一个名称。
在设计页面,选择Import -> 粘贴代码,确保您选择了自动的CSS inliner选项。
如果你不使用Mailchimp,确保您使用Premailer将CSS转换成内联。
直到你确认了并选择发送测试。从这里您可以发送一些测试,但在那之后,你需要一个实际发送电子邮件的列表。
使用litmus测试
Litmus是一个Web应用程序,可以测试HTML电子邮件在各种各样版本下的电子邮件客户端。需要全方位的服务,你需要付费,你可能无法说服你的客户支付这笔测试费用,但他的免费版本仍然允许您在Outlook2003和Gmail上做测试。
清理这个烂摊子
经过全面的考虑,这是一个非常成功的测试,因为我们测试了Outlook和Gmail下的很多元素。我们与老的Gmail和Hotmail的问题相关的客户使用默认样式表。我们使用!important
覆盖了标题自带的绿色文本效果。有时候这些效果真的让我们要疯了。
为了解决这个问题,我们需要给我们带有绿色标题元素添加!important
重新设置,覆盖默认的样式。
h3 {
font-size: 28px;
color: #444444 !important;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
font-size: 22px;
color: #4A72AF !important;
font-family: Arial, Helvetica, sans-serif;
}
h5 {
font-size: 18px;
color: #444444 !important;
font-family: Arial, Helvetica, sans-serif;
}
在老的Gmail邮箱中有一个类似的问题,Gmail会给标题标签底部添加一个margin
。我们只需要覆盖margin-bottom
样式即可。
#header h1 {
color: #ffffff !important;
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
font-size: 24px;
margin-bottom: 0!important;
}
#header h2 {
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
margin-bottom: 0 !important
}
我们修复hotmail下的效果
所以有一个实用的,一致的HTML电子邮件。这是一件痛苦的事情,但是你得到一个系统就要快得多。尽量保持你的代码有注释和组织结构清晰,以便你以后可以重用。
如果你能说服你的客户注册Litmus之类,让你变得更容易。你也可以通过Mailchimp和Campaign monitor更多版本来做测试。
排除故障
你肯定还会遇到我这里没有提到的问题,但我有一些建议可以帮助你更好的排除这些故障:
检查你的数学:我不记得有多少次是因为计算出错,增加了单元格宽度而搞砸了我的布局。记得占用的单元格边距:他会增加你单元格的宽度。
检查默认样式表:使用类似Firebug或Webkit的检查工具来检查是否客户端会覆盖你的样式。如果发生这种情况,添加一个!important
声明,应该可以帮助你解决问题
搜索查找,总是有人经历过你碰到的问题。如果Google帮不了你,试着找一些技术博客和流行的电子邮件客户端的博客,他们可能知道这些东西。
将其分解:如果你找不到你的问题出在哪,加到最开始,一点眯地查看你的电子邮件,直到你找到问题所在。
结果
这是最后的代码,仅供你参考。由于篇幅原因,只提供下载链接和Web浏览器下的演示效果,如果你感兴趣,可以下载相关文件或在线阅读:
DEMODOWNLOAD
这里是我们最终的效果,如下图所示:
没什么特别的,但是它应该是你开始设计自己的HTML电子邮件的一个很好示例。当然,还有其他的方法可以做到我实现的效果,但是HTML电子邮件,真正需要的是要知道它的工作原理。因为制作电子邮件没有Web标签或最佳实践的概念。
扩展阅读
Purchase Email Templates on ThemeForest
Campaign Monitor Resources (Their Blog also has some really useful tips)
Mailchimp Resources
6 Easy Ways to Improve Your HTML Emails
20 Email Design Best Practices and Resources for Beginners
30 HTML Best Practices for Beginners
我希望你今天学到了一点。我知道我找到了我的第一个HTML电子邮件项目的教程。看来分享让我学到很多东西。
译者手语: 整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载,烦请注明出处:
英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/
中文译文:http://www.w3cplus.com/css/getting-started-with-html-emails.html
你可能感兴趣的:(email,table)
python错误集锦--类型错误:‘NoneType‘ object is not subscriptable
程序员的修养
python python 开发语言 后端
python类型错误:‘NoneType’objectisnotsubscriptable网上查到的原因和方案如下,但是小编给变量的命名不太像系统内置关键字。原因:变量使用了系统内置的关键字list解决:重新定义下这个变量小编需求是获取网络数据,从中获取某个key的值然后赋值给变量,代码如下targetData=monitorData['MonitorData’]既然是网络数据就有可能没有这个ke
PostgreSQL | 生成UUID 报错:HINT: No function matches the given name and argument types
慌途L
PostgreSQL postgresql uuid uuid_generate gen_random_uuid
在PG数据库上新建表结构:CREATETABLE"public"."t_test"("guid"uuidNOTNULLDEFAULTuuid_generate_v4(),"data"jsonb,"create_time"timestamptz(6)DEFAULTnow(),CONSTRAINT"test_pkey"PRIMARYKEY("guid"));报错:ERROR:functionuuid_
Qt QTableWidget 触摸屏上滑动效果
hss2799
Qt
要实现QTableWidget在触摸屏上,滑动记录,记录会跟着滑动,只需要加QScroller*pScroller=QScroller::scroller(tablewidget);pScroller->grabGesture(tablewidget,QScroller::LeftMouseButtonGesture);tablewidget->setVerticalScrollMode(QLis
10.web应用体系以及windows网络常见操作应用
XXX-17
软件测试 软件测试
一、Dos命令1.启动方式:win+R,输入cmd2.切换盘符/路径:盘符名称+:(C:)cd目录(cdB111)(目录名按table键自动补全)3.查看目录:dirdir/p分页展示目录及文件dir/b展示文件名称4.创建文件夹:md文件夹名(mdt1)5.删除文件夹:rd文件夹名(rdt1)删除文件:del文件名(del222.txt)6.复制文件:copy复制文件目标路径(copymaste
【笔记】扩散模型(七):Latent Diffusion Models(Stable Diffusion)论文解读与代码实现
LittleNyima
Diffusion Models 笔记 stable diffusion AIGC 人工智能
论文链接:High-ResolutionImageSynthesiswithLatentDiffusionModels官方实现:CompVis/latent-diffusion、CompVis/stable-diffusion这一篇文章的内容是LatentDiffusionModels(LDM),也就是大名鼎鼎的StableDiffusion。先前的扩散模型一直面临的比较大的问题是采样空间太大,学
前端页面实现table可拖动改变列宽
牧 码 人
js jQuery js 表格拖动 css colResizable
此处实现页面的table表格可以自由拖动列宽,拖动时表格内文字不换行,超出部分以...代替,实现步骤如下:1.首先引入jQuery和colResizable的js文件,colResizable支持表格拖动改变列宽,但基于jQuery,(1)colResizable可以去:http://www.bacubacu.com/colresizable/#rangeSlider下载(2)引入文件:2.编写j
面试总结1
Xl_Lee
性能优化1.造成tableView卡顿的原因有哪些?1.最常用的就是cell的重用,注册重用标识符如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell如果有很多数据的时候,就会堆积很多cell。如果重用cell,为cell创建一个ID,每当需要显示cell的时候,都会先去缓冲池中寻找可循环利用的cell,如果没有再重新创建cell2.避免cell的重新布局cell的布
el-table实现多列排序
KOi..
vue.js 前端 javascript
业务需求el-table需要支持多列排序,后端排序。即就是在点击后重新发送请求,点击一列的排序,另一列的排序样式能够保留,但是el-table默认是单列排序。页面/***@header-click="handleHeaderCLick"*点击表头文字触发的监听器**@sort-change="handleTableSort"*点击表头排序标签触发定时器*/data:{tmpTotal:0,tabl
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能,vue3 Table表格拖拽排序,表格每行使用鼠标拖动进行排序功能,表格拖拽排序实现(详细示例代码,一键复制开箱即用
街尾杂货店&
前端组件与功能(开箱即用) elementPlus vue3 el-table Table表格拖动时动态排序 表格组件鼠标拖拽排序示例代码 树型tree复杂表格拖曳排序 element表格行可拖动排序
效果图在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,vue3使用elementplus表格组件进行表格每行的拖动换位置排序功能(支持一键开启和关闭鼠标是否可拖动排序,代码易改造灵活),稍加改造可支持【树形复杂表格的排序】!详细示例源代码,复制运行稍微改下就能用了。准备开始首先,
方的ScalersTalk第四轮新概念朗读持续力训练Day203 20200301
daisy境界的彼方
练习材料:Weoftenreadinnovelshowaseeminglyrespectablepersonorfamilyhassometerriblesecretwhichhasbeenconcealedfromstrangersforyears.TheEnglishlanguagepossessesavividsayingtodescribethissortofsituation.Thete
elementUI table排序 sortable
Artsman
前端开发技术 elementui 前端 javascript 前端框架
使用elementUI做后台程序时非常便利,但有时,插件的用法也会让人头疼。在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在Table上监
vue2 el-table指定某些数据不参与排序
前端~初学者
Vue2 Element UI vue.js javascript ecmascript
vue2el-table指定某些数据不参与排序1、需求描述2、配置属性方法3、详细代码如下1、需求描述最后一行总计不参与排序2、配置属性方法el-table需要配置@sort-change="soltHandle"方法el-table-column需要配置sortable="custom"属性3、详细代码如下{{getChineseName(row.province).value}}结算单meth
el-table表格序号显示
夏之小星星
vue.js elementui 前端
el-table表格序号显示{{(pageIndex-1)*pageSize+scope.$index+1}}
HBase介绍
mingyu1016
数据库
概述HBase是一个分布式的、面向列的开源数据库,源于google的一篇论文《bigtable:一个结构化数据的分布式存储系统》。HBase是GoogleBigtable的开源实现,它利用HadoopHDFS作为其文件存储系统,利用HadoopMapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服务。HBase的表结构HBase以表的形式存储数据。表有行和列组成。列划分为
vue3-响应式API(工具函数)-unRef
hx_1199
vue3 前端 javascript vue.js
unRef作用:如果参数是ref,则返回内部值,否则返回参数本身。理解:val=isRef(val)?val.value:val应用:sortField=unref(tableRef)?.getSortFields()
Android MVVM 架构应用实现(2)
渊Y
程序员 android 架构
Repository类:实现BmobRepository类,作为HomeViewModel的数据提供方。BmobRepository类中有一个挂起函数getAllRecommendLibrary(libraryRecommendData:MutableLiveData)用来获取云数据库中的数据,函数的参数是LiveData,在获取数据后,利用setValue通知View展示数据。classBmob
jsp 从后台Map中取值
yank1225
jsp 从map取值 jsp 按key获取map中的对应值 springmMVC jsp页面取得map值
在jsp页面有的时候需要从后台传过来的Map中取特定值,并显示在页面上,网上有很多说怎么取值的,但是找了好久很多都是讲的怎么循环取值,如果你需要在table中显示值那该怎么办呢?很多都没有讲,我把我的方法简单介绍下。场景是这样的下面是table的行数据从后台controller返回分页信息,pageInfo.list是当前行数据,item.houseType是数据,但是这个是值(1或者2等等)并不
mysql 函数索引如何使用_MySQL 函数索引 (Functional indexes)
nothing
mysql 函数索引如何使用
MySQL8.0.13版本开始支持函数索引(Functionalindexes),在此之前,只能使用表的字段或者字段前缀来创建索引,从8.0.13版本开始,可以使用函数或者表达式的值来创建索引,这些函数或者表达式的值并不直接存储在表中。函数索引示例:CREATETABLEt1(col1INT,col2INT,INDEXfunc_index((ABS(col1))));CREATEINDEXidx1
SQLite的架构 (The Architecture Of SQLite)
斗大的熊猫
Talk about
这篇文档描述SQLite库的基本架构。对那些想要理解和修改SQLite的人很有帮助。下面这张图表展示了SQLite的组件和它们之间的关系。接口(Interface)SQLite的很多对外接口的实现函数在main.c,legacy.c和vdbeapi.c。还以一些散落在其他文件中,sqlite3_get_table()函数实现在table.c,sqlite3_mprintf()函数在printf.c
mysql添加索引的sql语句
尼采呀
mysql sql 数据库
1.添加主键索引altertable`table_name`addprimarykey(`column`);2.添加唯一索引altertable`table_name`addunique(`column`);3.添加普通索引altertable`table_name`addindexindex_name(`column`);4.添加全文索引altertable`table_name`addfull
使用poi替换XWPFTableCell内容,并设置行间距
RR369_yyh
javaUtil java poi
使用poi读取word文档(docx类型),进行数据替换。另外,为了记录poi设置行间距的api,真是找了好几十分钟才找到啊啊啊啊!!!importorg.apache.poi.xwpf.usermodel.*;importorg.springframework.util.StringUtils;importjava.io.File;importjava.io.FileInputStream;im
SQL 索引的创建和删除以及使用索引的好处
SUMMERENT
java SQL sql 数据库
目录一、创建索引1、alter方式创建索引2、create方式创建索引二、删除索引1、drop方式直接删除索引2、alter方式删除索引三、索引的使用使用索引的好处:索引主要有普通索引、唯一索引、主键索引、外键索引、全文索引、复合索引几种一、创建索引1、alter方式创建索引①普通索引:MySQL中基本索引类型,允许在定义索引的列中插入重复值和空值altertable表名addindex索引名(要
python 问题 ‘list‘ object cannot be interpreted as an integer 和‘int‘ object is not iterable
annekqiu
python
访问同一个excel表格(含有多个sheet)importnumpyasnpimportpandasaspdimportxlrd#读取excel的库importxlwt#写excel的库data=xlrd.open_workbook('./161005.xlsx')#打开excel文件读取数据table=data.sheets()[0]#读取sheet1h=table.ncols#获得列表数目a1
【刷题】Leetcode1683. Invalid Tweets
J_caicaicai
数据结构与算法 python pandas mysql
QuestionTable:Tweets+----------------+---------+|ColumnName|Type|+----------------+---------+|tweet_id|int||content|varchar|+----------------+---------+tweet_idistheprimarykey(columnwithuniquevalues)f
哈希表 and 算法
(笑)z
算法 散列表 哈希算法
哈希表:哈希表(Hashtable),也被称为散列表,是一种根据关键码值(Keyvalue)而直接进行访问的数据结构。它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数被称为散列函数或哈希函数,而存放记录的数组则被称为散列表或哈希表。哈希表的优点查找速度快:哈希表通过哈希函数直接定位到数组中的位置,因此查找速度非常快,时间复杂度接近O(1)。插入和删除操作方便:由于哈希表
数据库知识点
(笑)z
数据库
SQLite相关命令.tables:查看数据库中的表.headerson/off:开启或关闭表头显示.modecolumn:设置输出模式为列对齐.width列宽1列宽2:这个命令实际上是.width列名1列宽1列名2列宽2,用于设置特定列的宽度.schema表名:查看表的结构SQLite的SQL语句基本数据类型INTEGER:整形REAL:浮点型TEXT:文本类型,字符串NULL:空SQL操作增,
react 更新元素状态
叶绿素yls
所有的react元素都是immutable不可变的。当元素被创建之后,我们无法修改他的内容或属性。根据我们现在所学的react的知识,我们要更新元素的内容,我们必须重新渲染这个元素,也就是重新创建这个元素。看一个例子:functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
K8S - Emptydir - 取代ELK 使用fluentd 构建logging saidcar
nvd11
K8S kubernetes
由于k8s的无状态service通常部署在多个POD中,实现多实例面向高并发。但是k8s本身并没有提供集中查询多个pod的日志的功能其中1个常见方案就是ELK.本文的方案是利用fluentdsidecar和emptydir把多个pod的日志导向到bigquery的table中。Emptydir的简介Kubernetes中的EmptyDir是一种用于容器之间共享临时存储的空目录卷类型。EmptyDi
linux网关端口映射,如何通过具有Iptables的Linux网关转发端口映射?
想写小说的轻骑兵
linux网关端口映射
NAT或网络地址转换是用于处理数据包以便将其重定向到备用地址的通用术语。通常,这用于允许流量超越网络边界。实现NAT的主机通常可以访问两个或多个网络,并配置为在它们之间路由流量。端口转发是将对特定端口的请求转发到另一个主机,网络或端口的过程。由于此过程在运行中修改了数据包的目的地,因此被认为是NAT操作的一种。在本指南中,我们将演示如何iptables使用NAT技术将端口转发到防火墙后面的主机。如
linux 端口数据转发,Linux iptables 端口转发
文静的妹子
linux 端口数据转发
准备:1,UDP端口范围映射2,tcp端口范围映射3,本机端口转发4,单个端口转发准备:打开转发[root@CentOS~]#cat/etc/sysctl.conf|grepnet.ipv4.ip_forwardnet.ipv4.ip_forward=1清空规则,修改默认策略,重要数据请备份[root@CentOS~]#iptables-F-tnat[root@CentOS~]#iptables-
关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题
何必如此
jsp 超链接 文件下载 窗口
生成下载页面是需要选择“录入提交页面”,生成之后默认的下载页面<a>标签超链接为:<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析
bit1129
cluster
在分析源代码之前,首先对Standalone Cluster Mode的资源调度有一个基本的认识:
首先,运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下,Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU,这就需要Maste
linux上独立安装部署spark
daizj
linux 安装 spark 1.4 部署
下面讲一下linux上安装spark,以 Standalone Mode 安装
1)首先安装JDK
下载JDK:jdk-7u79-linux-x64.tar.gz ,版本是1.7以上都行,解压 tar -zxvf jdk-7u79-linux-x64.tar.gz
然后配置 ~/.bashrc&nb
Java 字节码之解析一
周凡杨
java 字节码 javap
一: Java 字节代码的组织形式
类文件 {
OxCAFEBABE ,小版本号,大版本号,常量池大小,常量池数组,访问控制标记,当前类信息,父类信息,实现的接口个数,实现的接口信息数组,域个数,域信息数组,方法个数,方法信息数组,属性个数,属性信息数组
}
&nbs
java各种小工具代码
g21121
java
1.数组转换成List
import java.util.Arrays;
Arrays.asList(Object[] obj); 2.判断一个String型是否有值
import org.springframework.util.StringUtils;
if (StringUtils.hasText(str)) 3.判断一个List是否有值
import org.spring
加快FineReport报表设计的几个心得体会
老A不折腾
finereport
一、从远程服务器大批量取数进行表样设计时,最好按“列顺序”取一个“空的SQL语句”,这样可提高设计速度。否则每次设计时模板均要从远程读取数据,速度相当慢!!
二、找一个富文本编辑软件(如NOTEPAD+)编辑SQL语句,这样会很好地检查语法。有时候带参数较多检查语法复杂时,结合FineReport中生成的日志,再找一个第三方数据库访问软件(如PL/SQL)进行数据检索,可以很快定位语法错误。
mysql linux启动与停止
墙头上一根草
如何启动/停止/重启MySQL一、启动方式1、使用 service 启动:service mysqld start2、使用 mysqld 脚本启动:/etc/inint.d/mysqld start3、使用 safe_mysqld 启动:safe_mysqld&二、停止1、使用 service 启动:service mysqld stop2、使用 mysqld 脚本启动:/etc/inin
Spring中事务管理浅谈
aijuans
spring 事务管理
Spring中事务管理浅谈
By Tony Jiang@2012-1-20 Spring中对事务的声明式管理
拿一个XML举例
[html]
view plain
copy
print
?
<?xml version="1.0" encoding="UTF-8"?>&nb
php中隐形字符65279(utf-8的BOM头)问题
alxw4616
php中隐形字符65279(utf-8的BOM头)问题
今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.
调试:
1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题.
2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.
 
调用对象是否需要传递对象(初学者一定要注意这个问题)
百合不是茶
对象的传递与调用技巧
类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看
为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)
类和对象的基础概念:
JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
JDK1.5 AtomicLong实例
bijian1013
java thread java多线程 AtomicLong
JDK1.5 AtomicLong实例
类 AtomicLong
可以用原子方式更新的 long 值。有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中(如以原子方式增加的序列号),并且不能用于替换 Long。但是,此类确实扩展了 Number,允许那些处理基于数字类的工具和实用工具进行统一访问。
 
自定义的RPC的Java实现
bijian1013
java rpc
网上看到纯java实现的RPC,很不错。
RPC的全名Remote Process Call,即远程过程调用。使用RPC,可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例,从中可以看到RPC如何
【RPC框架Hessian一】Hessian RPC Hello World
bit1129
Hello world
什么是Hessian
The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
【Spark九十五】Spark Shell操作Spark SQL
bit1129
shell
在Spark Shell上,通过创建HiveContext可以直接进行Hive操作
1. 操作Hive中已存在的表
[hadoop@hadoop bin]$ ./spark-shell
Spark assembly has been built with Hive, including Datanucleus jars on classpath
Welcom
F5 往header加入客户端的ip
ronin47
when HTTP_RESPONSE {if {[HTTP::is_redirect]}{ HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
java-61-在数组中,数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5,
bylijinnan
java
思路来自:
http://zhedahht.blog.163.com/blog/static/2541117420116135376632/
写了个java版的
public class GreatestLeftRightDiff {
/**
* Q61.在数组中,数字减去它右边(注意是右边)的数字得到一个数对之差。
* 求所有数对之差的最大值。例如在数组
mongoDB 索引
开窍的石头
mongoDB索引
在这一节中我们讲讲在mongo中如何创建索引
得到当前查询的索引信息
db.user.find(_id:12).explain();
cursor: basicCoursor 指的是没有索引
&
[硬件和系统]迎峰度夏
comsci
系统
从这几天的气温来看,今年夏天的高温天气可能会维持在一个比较长的时间内
所以,从现在开始准备渡过炎热的夏天。。。。
每间房屋要有一个落地电风扇,一个空调(空调的功率和房间的面积有密切的关系)
坐的,躺的地方要有凉垫,床上要有凉席
电脑的机箱
基于ThinkPHP开发的公司官网
cuiyadll
行业系统
后端基于ThinkPHP,前端基于jQuery和BootstrapCo.MZ 企业系统
轻量级企业网站管理系统
运行环境:PHP5.3+, MySQL5.0
系统预览
系统下载:http://www.tecmz.com
预览地址:http://co.tecmz.com
各种设备自适应
响应式的网站设计能够对用户产生友好度,并且对于
Transaction and redelivery in JMS (JMS的事务和失败消息重发机制)
darrenzhu
jms 事务 承认 MQ acknowledge
JMS Message Delivery Reliability and Acknowledgement Patterns
http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/
Transaction and redelivery in
Centos添加硬盘完全教程
dcj3sjt126com
linux centos hardware
Linux的硬盘识别:
sda 表示第1块SCSI硬盘
hda 表示第1块IDE硬盘
scd0 表示第1个USB光驱
一般使用“fdisk -l”命
yii2 restful web服务路由
dcj3sjt126com
PHP yii2
路由
随着资源和控制器类准备,您可以使用URL如 http://localhost/index.php?r=user/create访问资源,类似于你可以用正常的Web应用程序做法。
在实践中,你通常要用美观的URL并采取有优势的HTTP动词。 例如,请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
MongoDB查询(4)——游标和分页[八]
eksliang
mongodb MongoDB游标 MongoDB深分页
转载请出自出处:http://eksliang.iteye.com/blog/2177567 一、游标
数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制,从shell中定义一个游标非常简单,就是将查询结果分配给一个变量(用var声明的变量就是局部变量),便创建了一个游标,如下所示:
> var
Activity的四种启动模式和onNewIntent()
gundumw100
android
Android中Activity启动模式详解
在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。
Android总Activity的启动模式分为四种:
Activity启动模式设置:
<acti
攻城狮送女友的CSS3生日蛋糕
ini
html Web html5 css css3
在线预览:http://keleyi.com/keleyi/phtml/html5/29.htm
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
读源码学Servlet(1)GenericServlet 源码分析
jzinfo
tomcat Web servlet 网络应用 网络协议
Servlet API的核心就是javax.servlet.Servlet接口,所有的Servlet 类(抽象的或者自己写的)都必须实现这个接口。在Servlet接口中定义了5个方法,其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。
先看javax.servlet.servlet接口源码:
package
JAVA进阶:VO(DTO)与PO(DAO)之间的转换
snoopy7713
java VO Hibernate po
PO即 Persistence Object VO即 Value Object
VO和PO的主要区别在于: VO是独立的Java Object。 PO是由Hibernate纳入其实体容器(Entity Map)的对象,它代表了与数据库中某条记录对应的Hibernate实体,PO的变化在事务提交时将反应到实际数据库中。
实际上,这个VO被用作Data Transfer
mongodb group by date 聚合查询日期 统计每天数据(信息量)
qiaolevip
每天进步一点点 学习永无止境 mongodb 纵观千象
/* 1 */
{
"_id" : ObjectId("557ac1e2153c43c320393d9d"),
"msgType" : "text",
"sendTime" : ISODate("2015-06-12T11:26:26.000Z")
java之18天 常用的类(一)
Luob.
Math Date System Runtime Rundom
System类
import java.util.Properties;
/**
* System:
* out:标准输出,默认是控制台
* in:标准输入,默认是键盘
*
* 描述系统的一些信息
* 获取系统的属性信息:Properties getProperties();
*
*
*
*/
public class Sy
maven
wuai
maven
1、安装maven:解压缩、添加M2_HOME、添加环境变量path
2、创建maven_home文件夹,创建项目mvn_ch01,在其下面建立src、pom.xml,在src下面简历main、test、main下面建立java文件夹
3、编写类,在java文件夹下面依照类的包逐层创建文件夹,将此类放入最后一级文件夹
4、进入mvn_ch01
4.1、mvn compile ,执行后会在