前端新增深色主题模版
BIN
templates/dark/static/mobile/HotBook.apk
Normal file
BIN
templates/dark/static/mobile/IMG_1470.JPG
Normal file
After Width: | Height: | Size: 56 KiB |
BIN
templates/dark/static/mobile/favicon.ico
Normal file
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 79 KiB |
After Width: | Height: | Size: 83 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 63 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 439 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 70 KiB |
270
templates/dark/static/mobile/html/note_1.html
Normal file
@ -0,0 +1,270 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="Content-Style-Type" content="text/css"/>
|
||||
<meta name="generator" content="Aspose.Words for .NET 15.1.0.0"/>
|
||||
<title>RestTemplate中文乱码问题源码分析与解决</title></head>
|
||||
<body>
|
||||
<div><p style="font-size:18pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_499-1566046872517"></a><a
|
||||
style="color:#003884" href="http://www.zinglizingli.xyz"><span
|
||||
style="background-color:#ffffff; color:#003884; font-family:'Times New Roman'; font-size:18pt; font-weight:bold; text-decoration:underline">RestTemplate中文乱码问题源码分析与解决</span></a>
|
||||
</p>
|
||||
<p style="font-size:18pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_668-1566076102707"></a><span
|
||||
style="background-color:#ffffff; color:#393939; font-family:'Times New Roman'; font-size:18pt; font-weight:bold">--- 请求响应数据乱码源码原理分析</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_359-1566070296357"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_090-1566070299368"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="margin:0pt"><a name="_374-1566070299635"></a><span
|
||||
style="background-color:#ffffff; color:#df402a; font-family:微软雅黑; font-size:15pt; font-weight:bold">============================原理===================</span>
|
||||
</p>
|
||||
<p style="margin:0pt"><a name="_115-1566075419335"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">//默认方式:</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_398-1566075426884"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">//RestTemplate restTemplate = new RestTemplate();</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_535-1566075426884"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">// 当返回的response-header的content-type属性有charset值时,</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_832-1566075426884"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">// restTemplate的 StringHttpMessageConverter会读取该charset值,并使用该值进行</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_044-1566081046911"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">//IO流 = 》字符串的转换,否则则使用默认的字符集</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_025-1566075590776"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">// </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_437-1566081514760"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_917-1566081515252"></a><span
|
||||
style="color:#7b5ba1; font-family:SimSun; font-size:11pt; font-style:italic">通过源码可以发现restTemplate底层默认使用了</span><span
|
||||
style="background-color:#ff0000; color:#ffffff; font-family:SimSun; font-size:11pt">HttpURLConnection</span><span
|
||||
style="background-color:#ffffff; color:#7b5ba1; font-family:SimSun; font-size:11pt">,可以支持其他多种http客户端,如httpclient、okhttp等,通过</span><span
|
||||
style="background-color:#ffffff; color:#df402a; font-family:SimSun; font-size:11pt">工厂方法模式</span><span
|
||||
style="background-color:#ffffff; color:#7b5ba1; font-family:SimSun; font-size:11pt">创建请求:</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_345-1566082269458"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_991-1566082211397"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.001.png" width="553" height="144" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_880-1566082349718"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_793-1566082349718"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.002.png" width="553" height="345" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_565-1566082347503"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_974-1566082347716"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_859-1566082347902"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_055-1566082348093"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_542-1566081537855"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.003.png" width="553" height="277" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_721-1566075426884"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_131-1566077535593"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_460-1566077535917"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">restTemplate调用excute方法</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_598-1566077659788"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.004.png" width="553" height="271" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_383-1566077653687"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">restTemplate调用了doExecute方法</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_000-1566077736808"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.005.png" width="553" height="236" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_340-1566077732786"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">执行请求,调用</span><span
|
||||
style="background-color:#ffffff; color:#df402a; font-family:SimSun; font-size:11pt">ResponseExtractor </span><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">responseExtractor.extractData()对相应结果进行数据提取</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_150-1566078107678"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.006.png" width="553" height="382" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_593-1566078099144"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">调用</span><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">HttpMessageConverterExtractor </span><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">this.delegate.extractData()执行抽取数据的操作</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_666-1566078333273"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.007.png" width="553" height="285" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_657-1566078289591"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">获取response-header的content-type,</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_561-1566078994408"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.008.png" width="553" height="316" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_699-1566078994408"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_240-1566078897012"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.009.png" width="553" height="303" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_090-1566078895423"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">判断消息转换器对应的支持媒体类型supportMediaType是否包含该content-type</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_470-1566079766383"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.010.png" width="553" height="275" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_142-1566079701403"></a><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">调用第一个包含该content-type的</span><span
|
||||
style="background-color:#ffffff; color:#df402a; font-family:SimSun; font-size:11pt">GenericHttpMessageConverter转换数据读取数据</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_247-1566080661650"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.011.png" width="553" height="247" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_813-1566080714156"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_896-1566080714156"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.012.png" width="553" height="308" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:0pt"><span
|
||||
style="font:7.0pt 'Times New Roman'">                         </span><a
|
||||
name="_223-1566080677140"></a><span style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">读取数据的时候会再一次获取</span><span
|
||||
style="color:#df402a; font-family:SimSun; font-size:11pt; font-style:italic">response-header的content-type</span><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">的字符集</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:21pt"><a name="_092-1566080909997"></a><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">如果该字符集存在,则使用该字符集进行 IO流 =》字符串 转换</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_512-1566080804579"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.013.png" width="553" height="294" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_470-1566080966519"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_225-1566080966519"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.014.png" width="553" height="307" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_627-1566078282891"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_729-1566075429719"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_937-1566081177561"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="margin:0pt"><a name="_699-1566081177711"></a><span
|
||||
style="color:#df402a; font-family:微软雅黑; font-size:15pt; font-weight:bold">案例</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_026-1566075429891"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_059-1566071031255"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.015.png" width="553" height="251" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_176-1566070330576"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_530-1566072661453"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_299-1566072723246"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.016.png" width="367" height="101" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_671-1566072721602"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:12pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_075-1566072855176"></a><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:12pt; font-weight:bold">响应头中并没有content-type的header,照理说浏览器应该不知道服务端返回的输入流编码,如果和浏览器默认的编码不匹配应该会出现乱码,但是现在浏览器有编码自动识别功能,所以上面的代码没有加content-type的Header也没有问题</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_245-1566072658054"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt; text-indent:42pt"><a name="_872-1566072191117"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_972-1566072692409"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.017.png" width="439" height="462" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_066-1566072088274"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_580-1566075732276"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_942-1566075732559"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="margin:0pt"><a name="_150-1566075732802"></a><span
|
||||
style="color:#df402a; font-family:微软雅黑; font-size:15pt; font-weight:bold">实际上下面的做法更规范:</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_139-1566072089816"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.018.png" width="553" height="188" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="margin:0pt"><a name="_337-1566070344498"></a><span
|
||||
style="color:#df402a; font-family:微软雅黑; font-size:15pt; font-weight:bold">源码:</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_773-1566073175445"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.019.png" width="553" height="366" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_074-1566085375320"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_689-1566085375320"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.020.png" width="553" height="222" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_837-1566085044019"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_120-1566085034872"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.021.png" width="553" height="127" alt="clipboard.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="margin:0pt"><a name="_080-1566073168924"></a><span style="font-family:'Times New Roman'; font-size:11pt"> </span>
|
||||
</p>
|
||||
<p style="margin:0pt"><a name="_415-1566085038805"></a><span style="font-family:'Times New Roman'; font-size:11pt"> </span>
|
||||
</p>
|
||||
<p style="margin:0pt"><a name="_122-1566085039048"></a><span
|
||||
style="background-color:#ffffff; color:#df402a; font-family:微软雅黑; font-size:15pt; font-weight:bold">============================原理=====================</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_073-1566070331260"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_256-1566070331284"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_812-1566070331308"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_451-1566070331332"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_130-1566070331359"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_999-1566070331383"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_029-1566070331405"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_074-1566070331428"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_078-1566046874710"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_579-1566047010084"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.022.png" width="553" height="1"
|
||||
alt="初探RestTemplate--解决中文乱码问题 - mryang125的博客 - CSDN博客.jpg"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_666-1566047010084"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p></div>
|
||||
</body>
|
||||
</html>
|
280
templates/dark/static/mobile/html/note_2.html
Normal file
@ -0,0 +1,280 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="Content-Style-Type" content="text/css"/>
|
||||
<meta name="generator" content="Aspose.Words for .NET 15.1.0.0"/>
|
||||
<title>服务器跨域处理</title></head>
|
||||
<body>
|
||||
<div><p style="margin:0pt"><a name="_073-1565689474241"></a><span
|
||||
style="font-family:微软雅黑; font-size:15pt; font-weight:bold"><a href="http://m.zinglizingli.xyz">跨域处理</a></span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_011-1565689506880"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_400-1565689507090"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">跨域是什么?浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、 协议任一不同,都是跨域 。我们是采用前后端分离开发的,也是前后端分离部署的,必然会存在跨域问题。 怎么解决跨域?很简单,只需要在controller类上添加注解 @CrossOrigin 即可!这个注解其实是CORS的实现。 </span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_460-1565689522680"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">CORS(Cross-Origin Resource Sharing, 跨源资源共享)是W3C出的一个标准,其思 想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成 功,还是应该失败。因此,要想实现CORS进行跨域,需要服务器进行一些设置,同时前端也需要做一些配置和分析。本文简单的对服务端的配置和前端的一些设置进行分析。</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_845-1565689480275"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_065-1565689480471"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">1️⃣</span><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">在controller类上添加注解 @CrossOrigin,表示Controller上的所以方法允许跨域,在方法上添加注解 @CrossOrigin,表示该方法允许跨域</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_231-1565689931759"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_436-1565689932017"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">@Target({ ElementType.METHOD, ElementType.TYPE })</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_134-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">@Retention(RetentionPolicy.RUNTIME)</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_249-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">@Documented</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_993-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">public @interface CrossOrigin {</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_860-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_082-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] DEFAULT_ORIGINS = { "*" };</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_340-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_077-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] DEFAULT_ALLOWED_HEADERS = { "*" };</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_080-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_672-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> boolean DEFAULT_ALLOW_CREDENTIALS = true;</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_262-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_435-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> long DEFAULT_MAX_AGE = 1800;</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_682-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_040-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_925-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_940-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 同origins属性一样</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_047-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_939-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> @AliasFor("origins")</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_774-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] value() default {};</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_570-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_575-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_114-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 所有支持域的集合,例如"http://domain1.com"。</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_373-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * <p>这些值都显示在请求头中的Access-Control-Allow-Origin</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_316-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * "*"代表所有域的请求都支持</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_011-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * <p>如果没有定义,所有请求的域都支持</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_880-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * @see #value</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_783-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_681-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> @AliasFor("value")</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_042-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] origins() default {};</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_140-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_747-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_226-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 允许请求头中的header,默认都支持</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_485-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_047-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] allowedHeaders() default {};</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_052-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_280-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_742-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 响应头中允许访问的header,默认为空</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_186-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_068-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String[] exposedHeaders() default {};</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_680-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_547-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_089-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 请求支持的方法,例如"{RequestMethod.GET, RequestMethod.POST}"}。</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_880-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 默认支持RequestMapping中设置的方法</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_922-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_840-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> RequestMethod[] methods() default {};</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_090-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_066-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_985-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 是否允许cookie随请求发送,使用时必须指定具体的域</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_972-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_119-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> String allowCredentials() default "";</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_127-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_478-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> /**</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_580-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> * 预请求的结果的有效期,默认30分钟</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_510-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> */</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_534-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> long maxAge() default -1;</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_743-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_586-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">}</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_052-1565689932796"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_129-1565689558428"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_873-1565689558663"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt">2️⃣</span><span
|
||||
style="color:#df402a; font-family:'Times New Roman'; font-size:11pt">配置 CorsFilter(全局配置)</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_025-1565690417616"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_510-1565690417783"></a><span
|
||||
style="background-color:#ffffff; color:#808000; font-family:SimSun; font-size:11pt">@Configuration</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_314-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">public class </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">GlobalCorsConfig {</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_117-1565690418407"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_834-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808000; font-family:SimSun; font-size:11pt">@Bean</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_074-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808000; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">public </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">CorsFilter corsFilter() {</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_037-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">//1.添加CORS配置信息</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_231-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">CorsConfiguration config = </span><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">new </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">CorsConfiguration();</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_560-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">//1) 允许的域,不要写*,否则cookie就无法使用了</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_937-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">config.addAllowedOrigin(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"http://manage.shop.com"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_288-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedOrigin(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"http://www.shop.com"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_712-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">//2) 是否发送Cookie信息</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_250-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">config.setAllowCredentials(</span><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">true</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_149-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">//3) 允许的请求方式</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_028-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"OPTIONS"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_040-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"HEAD"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_940-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"GET"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_487-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"PUT"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_065-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"POST"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_034-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"DELETE"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_286-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> config.addAllowedMethod(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"PATCH"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_584-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">// 4)允许的头信息</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_339-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">config.addAllowedHeader(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"*"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_440-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">// 5) 有效时长</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_023-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">// config.setMaxAge(3600L);</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_025-1565690418407"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_612-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> //2.添加映射路径,我们拦截一切请求</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_816-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">UrlBasedCorsConfigurationSource configSource = </span><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">new </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">UrlBasedCorsConfigurationSource();</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_520-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> configSource.registerCorsConfiguration(</span><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:SimSun; font-size:11pt; font-weight:bold">"/**"</span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">, config);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_929-1565690418407"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_591-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> </span><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic">//3.返回新的CorsFilter.</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_259-1565690418407"></a><span
|
||||
style="background-color:#ffffff; color:#808080; font-family:SimSun; font-size:11pt; font-style:italic"> </span><span
|
||||
style="background-color:#ffffff; color:#000080; font-family:SimSun; font-size:11pt; font-weight:bold">return new </span><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">CorsFilter(configSource);</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_877-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt"> }</span></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_415-1565690418407"></a><span
|
||||
style="background-color:#ffffff; font-family:SimSun; font-size:11pt">}</span></p></div>
|
||||
</body>
|
||||
</html>
|
243
templates/dark/static/mobile/html/note_3.html
Normal file
@ -0,0 +1,243 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="Content-Style-Type" content="text/css"/>
|
||||
<meta name="generator" content="Aspose.Words for .NET 15.1.0.0"/>
|
||||
<title>对分布式事务的理解</title></head>
|
||||
<body>
|
||||
<div><p style="font-size:18pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_848-1565404932800"></a><a
|
||||
style="color:#000000" href="http://www.zinglizingli.xyz"><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:18pt">对分布式事务及两阶段提交和三阶段提交的理解</span></a></p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_635-1565404934953"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="margin:0pt 0pt 10pt"><a name="_338-1565404935257"></a><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:Verdana; font-size:16pt; font-weight:bold">一、分布式数据一致性</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_989-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在分布式系统中,为了保证数据的高可用,通常会将数据保留多个副本(replica),这些副本会放置在不同的物理的机器上。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_565-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">1.什么是数据一致性</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_151-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在数据有多份副本的情况下,如果网络、服务器或者软件出现故障,会导致部分副本写入成功,部分副本写入失败。这就造成各个副本之间的数据不一致,数据内容冲突。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_436-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">造成事实上的数据不一致。</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_810-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">2.CAP定理</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_066-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">CAP理论认为在分布式的环境下设计和部署系统时,有3个核心的需求:</span>
|
||||
</p>
|
||||
<p style="font-size:12pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_928-1565405011043"></a><span
|
||||
style="background-color:#ffffff; color:#800000; font-family:Verdana; font-size:12pt; font-weight:bold">Consistency,Availability和Partition Tolerance,即CAP。</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_842-1565405011043"></a><span
|
||||
style="font-family:'Times New Roman'; font-size:11pt"> </span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_811-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">Consistency:一致性,这个和数据库ACID的一致性类似,但这里关注的所有数据节点上的数据一致性和正确性,而数据库的ACID关注的是在在一个事务内,对数据的一些约束。系统在执行过某项操作后仍然处于一致的状态。在分布式系统中,更新操作执行成功后所有的用户都应该读取到最新值。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_016-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">Availability:可用性,每一个操作总是能够在一定时间内返回结果。需要注意“一定时间”和“返回结果”。“一定时间”是指,系统结果必须在给定时间内返回。“返回结果”是指系统返回操作成功或失败的结果。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_115-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">Partition Tolerance:分区容忍性,是否可以对数据进行分区。这是考虑到性能和可伸缩性。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_237-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">3.数据一致性模型</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_943-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">一些分布式系统通过复制数据来提高系统的可靠性和容错性,并且将数据的不同的副本存放在不同的机器。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_047-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">强一致性:</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_172-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">当更新操作完成之后,任何多个后续进程或者线程的访问都会返回最新的更新过的值。这种是对用户最友好的,就是用户上一次写什么,下一次就保证能读到什么。根据 CAP 理论,这种实现需要牺牲可用性。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_182-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">弱一致性:</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_317-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">系统并不保证续进程或者线程的访问都会返回最新的更新过的值。用户读到某一操作对系统特定数据的更新需要一段时间,我们称这段时间为“不一致性窗口”。系统在数据写入成功之后,不承诺立即可以读到最新写入的值,也不会具体的承诺多久之后可以读到。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_443-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">最终一致性:</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_483-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">是弱一致性的一种特例。系统保证在没有后续更新的前提下,系统最终返回上一次更新操作的值。在没有故障发生的前提下,不一致窗口的时间主要受通信延迟,系统负载和复制副本的个数影响。DNS 是一个典型的最终一致性系统。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_856-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt"> </span></p>
|
||||
<p style="margin:0pt 0pt 10pt"><a name="_788-1565405011043"></a><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:Verdana; font-size:16pt; font-weight:bold">二、典型的分布式事务实例</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_082-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">跨行转账问题是一个典型的分布式事务,用户A向B的一个转账1000,要进行A的余额-1000,B的余额+1000,显然必须保证这两个操作的事务性。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_085-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">类似的还有,电商系统中,当有用户下单后,除了在订单表插入记,还要在商品表更新库存等,特别是随着微服务架构的流行,分布式事务的场景更变得更普遍。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_090-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt"> </span></p>
|
||||
<p style="margin:0pt 0pt 10pt"><a name="_157-1565405011043"></a><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:Verdana; font-size:16pt; font-weight:bold">三、两阶段提交协议</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_571-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">两阶段提交协议是协调所有分布式原子事务参与者,并决定提交或取消(回滚)的分布式算法。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_016-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">1.协议参与者</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_050-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在两阶段提交协议中,系统一般包含两类机器(或节点):一类为协调者(coordinator),通常一个系统中只有一个;另一类为事务参与者(participants,cohorts或workers),一般包含多个,在数据存储系统中可以理解为数据副本的个数。协议中假设每个节点都会记录写前日志(write-ahead log)并持久性存储,即使节点发生故障日志也不会丢失。协议中同时假设节点不会发生永久性故障而且任意两个节点都可以互相通信。</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_760-1565405011043"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.023.png" width="553" height="358" alt="61-160357634.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_560-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">2.两个阶段的执行</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_474-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">1.请求阶段(commit-request phase,或称表决阶段,voting phase)</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_786-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在请求阶段,协调者将通知事务参与者准备提交或取消事务,然后进入表决过程。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_710-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在表决过程中,参与者将告知协调者自己的决策:同意(事务参与者本地作业执行成功)或取消(本地作业执行故障)。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_125-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">2.提交阶段(commit phase)</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_067-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在该阶段,协调者将基于第一个阶段的投票结果进行决策:提交或取消。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_981-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">当且仅当所有的参与者同意提交事务协调者才通知所有的参与者提交事务,否则协调者将通知所有的参与者取消事务。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_532-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">参与者在接收到协调者发来的消息后将执行响应的操作。</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_080-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">(3)两阶段提交的缺点</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_646-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">1.同步阻塞问题。执行过程中,所有参与节点都是事务阻塞型的。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_014-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">当参与者占有公共资源时,其他第三方节点访问公共资源不得不处于阻塞状态。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_488-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">2.单点故障。由于协调者的重要性,一旦协调者发生故障。</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_765-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">参与者会一直阻塞下去。尤其在第二阶段,协调者发生故障,那么所有的参与者还都处于锁定事务资源的状态中,而无法继续完成事务操作。(如果是协调者挂掉,可以重新选举一个协调者,但是无法解决因为协调者宕机导致的参与者处于阻塞状态的问题)</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_010-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">3.数据不一致。在二阶段提交的阶段二中,当协调者向参与者发送commit请求之后,发生了局部网络异常或者在发送commit请求过程中协调者发生了故障,这回导致只有一部分参与者接受到了commit请求。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_785-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">而在这部分参与者接到commit请求之后就会执行commit操作。但是其他部分未接到commit请求的机器则无法执行事务提交。于是整个分布式系统便出现了数据部一致性的现象。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">(4)两阶段提交无法解决的问题</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_450-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">当协调者出错,同时参与者也出错时,两阶段无法保证事务执行的完整性。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_279-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">考虑协调者再发出commit消息之后宕机,而唯一接收到这条消息的参与者同时也宕机了。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_793-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">那么即使协调者通过选举协议产生了新的协调者,这条事务的状态也是不确定的,没人知道事务是否被已经提交。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_037-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt"> </span></p>
|
||||
<p style="margin:0pt 0pt 10pt"><a name="_052-1565405011043"></a><span
|
||||
style="background-color:#ffffff; color:#008000; font-family:Verdana; font-size:16pt; font-weight:bold">四、三阶段提交协议</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_420-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">三阶段提交协议在协调者和参与者中都引入超时机制,并且把两阶段提交协议的第一个阶段拆分成了两步:询问,然后再锁资源,最后真正提交。</span>
|
||||
</p>
|
||||
<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_180-1565405011043"></a><img
|
||||
src="9a4a540e-1759-4268-90fa-7fb652c3604a.024.png" width="553" height="479" alt="92-920273519.png"
|
||||
style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline"/>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_743-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">(1)三个阶段的执行</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_294-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">1.CanCommit阶段</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_945-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">3PC的CanCommit阶段其实和2PC的准备阶段很像。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_981-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">协调者向参与者发送commit请求,参与者如果可以提交就返回Yes响应,否则返回No响应。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_220-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">2.PreCommit阶段</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_740-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">Coordinator根据Cohort的反应情况来决定是否可以继续事务的PreCommit操作。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_866-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">根据响应情况,有以下两种可能。</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_992-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">A.假如Coordinator从所有的Cohort获得的反馈都是Yes响应,那么就会进行事务的预执行:</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_627-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">发送预提交请求。Coordinator向Cohort发送PreCommit请求,并进入Prepared阶段。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_214-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">事务预提交。Cohort接收到PreCommit请求后,会执行事务操作,并将undo和redo信息记录到事务日志中。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_012-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">响应反馈。如果Cohort成功的执行了事务操作,则返回ACK响应,同时开始等待最终指令。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_068-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">B.假如有任何一个Cohort向Coordinator发送了No响应,或者等待超时之后,Coordinator都没有接到Cohort的响应,那么就中断事务:</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_646-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">发送中断请求。Coordinator向所有Cohort发送abort请求。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_143-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">中断事务。Cohort收到来自Coordinator的abort请求之后(或超时之后,仍未收到Cohort的请求),执行事务的中断。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_223-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">3.DoCommit阶段</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_678-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">该阶段进行真正的事务提交,也可以分为以下两种情况:</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_532-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">执行提交</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_431-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">A.发送提交请求。Coordinator接收到Cohort发送的ACK响应,那么他将从预提交状态进入到提交状态。并向所有Cohort发送doCommit请求。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_533-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">B.事务提交。Cohort接收到doCommit请求之后,执行正式的事务提交。并在完成事务提交之后释放所有事务资源。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_010-1565405011043"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">C.响应反馈。事务提交完之后,向Coordinator发送ACK响应。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_145-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">D.完成事务。Coordinator接收到所有Cohort的ACK响应之后,完成事务。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_084-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">中断事务</span></p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_752-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">Coordinator没有接收到Cohort发送的ACK响应(可能是接受者发送的不是ACK响应,也可能响应超时),那么就会执行中断事务。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_841-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">(2)三阶段提交协议和两阶段提交协议的不同</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_499-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">对于协调者(Coordinator)和参与者(Cohort)都设置了超时机制(在2PC中,只有协调者拥有超时机制,即如果在一定时间内没有收到cohort的消息则默认失败)。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_629-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">在2PC的准备阶段和提交阶段之间,插入预提交阶段,使3PC拥有CanCommit、PreCommit、DoCommit三个阶段。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_049-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">PreCommit是一个缓冲,保证了在最后提交阶段之前各参与节点的状态是一致的。</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_674-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt; font-weight:bold">(2)三阶段提交协议的缺点</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_085-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">如果进入PreCommit后,Coordinator发出的是abort请求,假设只有一个Cohort收到并进行了abort操作,</span>
|
||||
</p>
|
||||
<p style="font-size:10pt; line-height:115%; margin:0pt 0pt 10pt"><a name="_298-1565405011044"></a><span
|
||||
style="background-color:#ffffff; font-family:Verdana; font-size:10pt">而其他对于系统状态未知的Cohort会根据3PC选择继续Commit,此时系统状态发生不一致性。</span>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
2019
templates/dark/static/mobile/html/note_4.html
Normal file
376
templates/dark/static/mobile/index.html
Normal file
@ -0,0 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>首页</title>
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 你的HTML代码 -->
|
||||
<a name="top"></a>
|
||||
<ul class="layui-nav" lay-filter="">
|
||||
<li class="layui-nav-item layui-this"><a href=""> 首 页 </a></li>
|
||||
<li class="layui-nav-item"><a href="book_detail.html">玄幻小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">修真小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">都市小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">历史小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">网游小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">科幻小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">女频小说</a></li>
|
||||
<li class="layui-nav-item"><a href="">小说排行榜</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
|
||||
<div class="layui-col-xs10 layui-col-sm10 layui-col-md11 layui-col-lg11" style="padding-top:1%">
|
||||
<input type="text" name="title" required lay-verify="required" placeholder="请输入书名·作者" autocomplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-xs1" style="padding: 1%">
|
||||
<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">本站推荐</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
|
||||
|
||||
<div class="layui-container" style="padding: 0px">
|
||||
|
||||
<div class="layui-row" style="text-align: center">
|
||||
<div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md3 layui-col-lg4">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;" src="static/4868.jpg"/>
|
||||
<br/>
|
||||
<a href="book_detail.html">三寸人间</a>
|
||||
|
||||
|
||||
</div>
|
||||
<div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md3 layui-col-lg4">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;" src="static/4868.jpg"/>
|
||||
<br/>
|
||||
<a href="">三寸人间</a>
|
||||
</div>
|
||||
<div style="padding: 1%" class="layui-col-xs4 layui-col-sm4 layui-col-md3 layui-col-lg4">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;" src="static/4868.jpg"/>
|
||||
<br/>
|
||||
<a href="">三寸人间</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">热门小说推荐</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 1%" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
<div class="layui-col-xs2">
|
||||
<img style=" width:auto; height:auto; max-width:100%; max-height:100%;"
|
||||
src="static/4868.jpg"/>
|
||||
</div>
|
||||
<div class="layui-col-xs10 layui-col-sm8 layui-col-md8 layui-col-lg8"
|
||||
style="float: left;padding-left: 5%">
|
||||
<div><b>绝世唐门</b>
|
||||
<div style="float: right;"><b><i style="color: red">9.3分</i></b></div>
|
||||
</div>
|
||||
<div>作者:唐家三少</div>
|
||||
<div class="layui-elip" style="word-break:break-all;">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">最近更新小说<div style="float: right; margin-right: 20px"><a href="javascript:moreNewBooks()"><i style="font-size: 14px;" class="layui-icon">更多</i></a></div></h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
|
||||
<div class="layui-container" style="padding-left: 2px;padding-right: 5px">
|
||||
<div class="layui-row">
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-bottom: 30px" class="layui-col-xs11 layui-col-sm6 layui-col-md6 layui-col-lg6">
|
||||
|
||||
<div class="layui-col-xs8 layui-col-sm5 layui-col-md5 layui-col-lg5"><b>1.我真的要飞天了</b> - 柳一条
|
||||
</div>
|
||||
<div style="color: #FF5722;float: right;padding-right: 20px"><i>08-22 19:13</i></div>
|
||||
<div style="clear: both"></div>
|
||||
<div style="padding-left: 5px;padding-top: 5px" class="layui-elip">
|
||||
这里没有魔法,没有斗气,没有武术,却有武魂。唐门创立万年之后的斗罗大陆上,唐门式微。一代天骄横空出世,新一代史莱克七怪能否重振唐门,谱写一曲绝世唐门之歌?
|
||||
百万年魂兽,手握日月摘星辰的死灵圣法神,导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。 唐门暗器能否重振雄风,唐门能否重现辉煌,一切尽在绝世唐门!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 60px;line-height: 60px;text-align: center" class="layui-footer footer footer-demo layui-bg-cyan">
|
||||
<a style="font-size: 14px;color: #92B8B1;">首页</a>
|
||||
<a style="font-size: 14px;color: #92B8B1;margin-left: 50px">阅读记录</a>
|
||||
<div style="float: right"><a href="#top"><i class="layui-icon"
|
||||
style="margin-right:15px;font-size: 30px;color:#92B8B1 "></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./layui/layui.all.js"></script>
|
||||
<script src="./js/jquery-1.9.1.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function moreNewBooks(event) {
|
||||
alert("获取更多");
|
||||
alert($("a"))
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
49
templates/dark/static/mobile/js/common.js
Normal file
@ -0,0 +1,49 @@
|
||||
Array.prototype.indexOf = function (val) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == val) return i;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
Array.prototype.remove = function (val) {
|
||||
var index = this.indexOf(val);
|
||||
if (index > -1) {
|
||||
this.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
var token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
$.get("/user/isLogin", {"token": token}, function (data) {
|
||||
if (data.code != 1) {//未登录
|
||||
localStorage.removeItem("token");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function readHistory() {
|
||||
|
||||
var books = localStorage.getItem("historyBooks");
|
||||
var bookIds = "-1929";
|
||||
if (books) {
|
||||
bookIds = JSON.parse(localStorage.getItem("historyBooks")).join(",");
|
||||
}
|
||||
window.location.href = "/book/search?historyBookIds=" + bookIds;
|
||||
};
|
||||
|
||||
|
||||
function getQueryVariable(variable) {
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if (pair[0] == variable) {
|
||||
return pair[1];
|
||||
}
|
||||
}
|
||||
return (false);
|
||||
}
|
||||
|
||||
|
||||
|
9597
templates/dark/static/mobile/js/jquery-1.9.1.js
vendored
Normal file
180
templates/dark/static/mobile/js/lazyload.js
Normal file
@ -0,0 +1,180 @@
|
||||
/*!
|
||||
* Lazy Load - JavaScript plugin for lazy loading images
|
||||
*
|
||||
* Copyright (c) 2007-2019 Mika Tuupola
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Project home:
|
||||
* https://appelsiini.net/projects/lazyload
|
||||
*
|
||||
* Version: 2.0.0-rc.2
|
||||
*
|
||||
*/
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof exports === "object") {
|
||||
module.exports = factory(root);
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define([], factory);
|
||||
} else {
|
||||
root.LazyLoad = factory(root);
|
||||
}
|
||||
}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) {
|
||||
|
||||
"use strict";
|
||||
|
||||
if (typeof define === "function" && define.amd){
|
||||
root = window;
|
||||
}
|
||||
|
||||
const defaults = {
|
||||
src: "data-src",
|
||||
srcset: "data-srcset",
|
||||
selector: ".lazyload",
|
||||
root: null,
|
||||
rootMargin: "0px",
|
||||
threshold: 0
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge two or more objects. Returns a new object.
|
||||
* @private
|
||||
* @param {Boolean} deep If true, do a deep (or recursive) merge [optional]
|
||||
* @param {Object} objects The objects to merge together
|
||||
* @returns {Object} Merged values of defaults and options
|
||||
*/
|
||||
const extend = function () {
|
||||
|
||||
let extended = {};
|
||||
let deep = false;
|
||||
let i = 0;
|
||||
let length = arguments.length;
|
||||
|
||||
/* Check if a deep merge */
|
||||
if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
|
||||
deep = arguments[0];
|
||||
i++;
|
||||
}
|
||||
|
||||
/* Merge the object into the extended object */
|
||||
let merge = function (obj) {
|
||||
for (let prop in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
|
||||
/* If deep merge and property is an object, merge properties */
|
||||
if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
|
||||
extended[prop] = extend(true, extended[prop], obj[prop]);
|
||||
} else {
|
||||
extended[prop] = obj[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* Loop through each object and conduct a merge */
|
||||
for (; i < length; i++) {
|
||||
let obj = arguments[i];
|
||||
merge(obj);
|
||||
}
|
||||
|
||||
return extended;
|
||||
};
|
||||
|
||||
function LazyLoad(images, options) {
|
||||
this.settings = extend(defaults, options || {});
|
||||
this.images = images || document.querySelectorAll(this.settings.selector);
|
||||
this.observer = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
LazyLoad.prototype = {
|
||||
init: function() {
|
||||
|
||||
/* Without observers load everything and bail out early. */
|
||||
if (!root.IntersectionObserver) {
|
||||
this.loadImages();
|
||||
return;
|
||||
}
|
||||
|
||||
let self = this;
|
||||
let observerConfig = {
|
||||
root: this.settings.root,
|
||||
rootMargin: this.settings.rootMargin,
|
||||
threshold: [this.settings.threshold]
|
||||
};
|
||||
|
||||
this.observer = new IntersectionObserver(function(entries) {
|
||||
Array.prototype.forEach.call(entries, function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
self.observer.unobserve(entry.target);
|
||||
let src = entry.target.getAttribute(self.settings.src);
|
||||
let srcset = entry.target.getAttribute(self.settings.srcset);
|
||||
if ("img" === entry.target.tagName.toLowerCase()) {
|
||||
if (src) {
|
||||
entry.target.src = src;
|
||||
}
|
||||
if (srcset) {
|
||||
entry.target.srcset = srcset;
|
||||
}
|
||||
} else {
|
||||
entry.target.style.backgroundImage = "url(" + src + ")";
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerConfig);
|
||||
|
||||
Array.prototype.forEach.call(this.images, function (image) {
|
||||
self.observer.observe(image);
|
||||
});
|
||||
},
|
||||
|
||||
loadAndDestroy: function () {
|
||||
if (!this.settings) { return; }
|
||||
this.loadImages();
|
||||
this.destroy();
|
||||
},
|
||||
|
||||
loadImages: function () {
|
||||
if (!this.settings) { return; }
|
||||
|
||||
let self = this;
|
||||
Array.prototype.forEach.call(this.images, function (image) {
|
||||
let src = image.getAttribute(self.settings.src);
|
||||
let srcset = image.getAttribute(self.settings.srcset);
|
||||
if ("img" === image.tagName.toLowerCase()) {
|
||||
if (src) {
|
||||
image.src = src;
|
||||
}
|
||||
if (srcset) {
|
||||
image.srcset = srcset;
|
||||
}
|
||||
} else {
|
||||
image.style.backgroundImage = "url('" + src + "')";
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
if (!this.settings) { return; }
|
||||
this.observer.disconnect();
|
||||
this.settings = null;
|
||||
}
|
||||
};
|
||||
|
||||
root.lazyload = function(images, options) {
|
||||
return new LazyLoad(images, options);
|
||||
};
|
||||
|
||||
if (root.jQuery) {
|
||||
const $ = root.jQuery;
|
||||
$.fn.lazyload = function (options) {
|
||||
options = options || {};
|
||||
options.attribute = options.attribute || "data-src";
|
||||
new LazyLoad($.makeArray(this), options);
|
||||
return this;
|
||||
};
|
||||
}
|
||||
|
||||
return LazyLoad;
|
||||
});
|
197
templates/dark/static/mobile/js/read.js
Normal file
@ -0,0 +1,197 @@
|
||||
var checkbg = "#A7A7A7";
|
||||
var nr_body = document.getElementById("read");//页面body
|
||||
var huyandiv = document.getElementById("huyandiv");//护眼div
|
||||
var lightdiv = document.getElementById("lightdiv");//灯光div
|
||||
var fontfont = document.getElementById("fontfont");//字体div
|
||||
var fontbig = document.getElementById("fontbig");//大字体div
|
||||
var fontmiddle = document.getElementById("fontmiddle");//中字体div
|
||||
var fontsmall = document.getElementById("fontsmall");//小字体div
|
||||
var nr1 = document.getElementById("chaptercontent");//内容div
|
||||
//内容页用户设置
|
||||
function nr_setbg(intype){
|
||||
var huyandiv = document.getElementById("huyandiv");
|
||||
var light = document.getElementById("lightdiv");
|
||||
if(intype == "huyan"){
|
||||
if(huyandiv.className == "button huyanon"){
|
||||
document.cookie="light=huyan;path=/";
|
||||
set("light","huyan");
|
||||
}
|
||||
else{
|
||||
document.cookie="light=no;path=/";
|
||||
set("light","no");
|
||||
}
|
||||
}
|
||||
if(intype == "light"){
|
||||
if(light.innerHTML == "关灯"){
|
||||
document.cookie="light=yes;path=/";
|
||||
set("light","yes");
|
||||
}
|
||||
else{
|
||||
document.cookie="light=no;path=/";
|
||||
set("light","no");
|
||||
}
|
||||
}
|
||||
if(intype == "big"){
|
||||
document.cookie="font=big;path=/";
|
||||
set("font","big");
|
||||
}
|
||||
if(intype == "middle"){
|
||||
document.cookie="font=middle;path=/";
|
||||
set("font","middle");
|
||||
}
|
||||
if(intype == "small"){
|
||||
document.cookie="font=small;path=/";
|
||||
set("font","small");
|
||||
}
|
||||
}
|
||||
|
||||
//内容页读取设置
|
||||
function getset(){
|
||||
var strCookie=document.cookie;
|
||||
var arrCookie=strCookie.split("; ");
|
||||
var light;
|
||||
var font;
|
||||
|
||||
for(var i=0;i<arrCookie.length;i++){
|
||||
var arr=arrCookie[i].split("=");
|
||||
if("light"==arr[0]){
|
||||
light=arr[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//light
|
||||
if(light == "yes"){
|
||||
set("light","yes");
|
||||
}
|
||||
else if(light == "no"){
|
||||
set("light","no");
|
||||
}
|
||||
else if(light == "huyan"){
|
||||
set("light","huyan");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//内容页读取设置
|
||||
function getset1(){
|
||||
var strCookie=document.cookie;
|
||||
var arrCookie=strCookie.split("; ");
|
||||
var light;
|
||||
var font;
|
||||
|
||||
for(var j=0;j<arrCookie.length;j++){
|
||||
var arr=arrCookie[j].split("=");
|
||||
if("font"==arr[0]){
|
||||
font=arr[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//font
|
||||
if(font == "big"){
|
||||
set("font","big");
|
||||
}
|
||||
else if(font == "middle"){
|
||||
set("font","middle");
|
||||
}
|
||||
else if(font == "small"){
|
||||
set("font","small");
|
||||
}
|
||||
else{
|
||||
set("font","middle");
|
||||
}
|
||||
}
|
||||
|
||||
//内容页应用设置
|
||||
function set(intype,p){
|
||||
|
||||
//var nr_title = document.getElementById("top1");//文章标题
|
||||
//var nr_title = document.getElementById("nr_title");//文章标题
|
||||
//var shuqian_2 = document.getElementById("shuqian_2");//书签链接
|
||||
|
||||
//var pt_prev = document.getElementById("pt_prev1");
|
||||
//var pt_mulu = document.getElementById("pt_mulu1");
|
||||
//var pt_next = document.getElementById("pt_next1");
|
||||
//var pb_prev = document.getElementById("pb_prev1");
|
||||
//var pb_mulu = document.getElementById("pb_mulu1");
|
||||
//var pb_next = document.getElementById("pb_next1");
|
||||
|
||||
|
||||
//灯光
|
||||
if(intype == "light"){
|
||||
if(p == "yes"){
|
||||
//关灯
|
||||
lightdiv.innerHTML = "开灯";
|
||||
lightdiv.className="button lighton";
|
||||
nr_body.style.backgroundColor = "#000";
|
||||
//nr_title.style.color = "#ccc";
|
||||
nr1.style.color = "#999";
|
||||
|
||||
huyandiv.innerHTML = "护眼";
|
||||
huyandiv.className="button huyanon";
|
||||
//pt_prev.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//pt_mulu.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//pt_next.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//pb_prev.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//pb_mulu.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//pb_next.style.cssText = "background-color:#222;color:#0065B5;";
|
||||
//shuqian_2.style.color = "#999";
|
||||
}
|
||||
else if(p == "no"){
|
||||
//开灯
|
||||
lightdiv.innerHTML = "关灯";
|
||||
lightdiv.className="button lightoff";
|
||||
nr_body.style.backgroundColor = "#fff";
|
||||
nr1.style.color = "#000";
|
||||
//nr_title.style.color = "#000";
|
||||
//pt_prev.style.cssText = "";
|
||||
//pt_mulu.style.cssText = "";
|
||||
//pt_next.style.cssText = "";
|
||||
//pb_prev.style.cssText = "";
|
||||
//pb_mulu.style.cssText = "";
|
||||
//pb_next.style.cssText = "";
|
||||
//shuqian_2.style.color = "#000";
|
||||
|
||||
huyandiv.innerHTML = "护眼";
|
||||
huyandiv.className="button huyanon";
|
||||
}
|
||||
else if(p == "huyan"){
|
||||
//护眼
|
||||
lightdiv.innerHTML = "关灯";
|
||||
lightdiv.className="button lightoff";
|
||||
huyandiv.className="button huyanoff";
|
||||
nr_body.style.backgroundColor = "#005716";
|
||||
nr1.style.color = "#000";
|
||||
//pt_prev.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
//pt_mulu.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
//pt_next.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
//pb_prev.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
//pb_mulu.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
//pb_next.style.cssText = "background-color:#0E7A18;color:#000;";
|
||||
shuqian_2.style.color = "#000";
|
||||
}
|
||||
}
|
||||
//字体
|
||||
if(intype == "font"){
|
||||
fontsmall.className="sizebg";
|
||||
if(p == "big"){
|
||||
fontbig.className="button sizebgon";
|
||||
nr1.style.fontSize="25px";
|
||||
fontmiddle.className="sizebg";
|
||||
fontsmall.className="sizebg";
|
||||
}
|
||||
if(p == "middle"){
|
||||
fontmiddle.className="button sizebgon";
|
||||
nr1.style.fontSize = "20px";
|
||||
fontbig.className="sizebg";
|
||||
fontsmall.className="sizebg";
|
||||
}
|
||||
if(p == "small"){
|
||||
fontsmall.className="button sizebgon";
|
||||
nr1.style.fontSize = "14px";
|
||||
fontbig.className="sizebg";
|
||||
fontmiddle.className="sizebg";
|
||||
}
|
||||
}
|
||||
}
|
107
templates/dark/static/mobile/js/wap_collect.js
Normal file
@ -0,0 +1,107 @@
|
||||
window.onload=function(){
|
||||
// AddToFavorites(false);
|
||||
}
|
||||
function AddToFavorites(isTip)
|
||||
{
|
||||
if(GetCookie("isCollect") && !isTip){
|
||||
|
||||
return
|
||||
}
|
||||
else {
|
||||
SetCookie("isCollect","1");
|
||||
|
||||
|
||||
var title = document.title;
|
||||
var url = location.href;
|
||||
if (window.sidebar) // Firefox
|
||||
window.sidebar.addPanel(title, url, '');
|
||||
else if (window.opera && window.print) // Opera
|
||||
{
|
||||
var elem = document.createElement('a');
|
||||
elem.setAttribute('href', url);
|
||||
elem.setAttribute('title', title);
|
||||
elem.setAttribute('rel', 'sidebar'); // required to work in opera 7+
|
||||
elem.click();
|
||||
}
|
||||
else if (navigator.userAgent.indexOf('UCBrowser') > -1) {//UC
|
||||
window.location.href = "ext:add_favorite";
|
||||
}
|
||||
else if (document.all) // IE
|
||||
window.external.AddFavorite(url, title);
|
||||
else {
|
||||
if(isTip){
|
||||
alert("该浏览器不支持自动收藏,请点击Ctrl+D手动收藏!");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function SetCookie(name, value) {
|
||||
var key = '';
|
||||
var Days = 365;
|
||||
var exp = new Date();
|
||||
var domain = "";
|
||||
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
|
||||
if (key == null || key == "") {
|
||||
document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
|
||||
}
|
||||
else {
|
||||
var nameValue = GetCookie(name);
|
||||
if (nameValue == "") {
|
||||
document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
|
||||
}
|
||||
else {
|
||||
var keyValue = getCookie(name, key);
|
||||
if (keyValue != "") {
|
||||
nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
|
||||
document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
|
||||
}
|
||||
else {
|
||||
document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;" + domain + ";";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function GetCookie(name) {
|
||||
var nameValue = "";
|
||||
var key = "";
|
||||
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
|
||||
if (arr = document.cookie.match(reg)) {
|
||||
nameValue = decodeURI(arr[2]);
|
||||
}
|
||||
if (key != null && key != "") {
|
||||
reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
|
||||
if (arr = nameValue.match(reg)) {
|
||||
return decodeURI(arr[2]);
|
||||
}
|
||||
else return "";
|
||||
}
|
||||
else {
|
||||
return nameValue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function DelCookie(name)
|
||||
|
||||
{
|
||||
|
||||
var exp = new Date();
|
||||
|
||||
exp.setTime(exp.getTime() - 1);
|
||||
|
||||
var cval=GetCookie(name);
|
||||
|
||||
if(cval!=null)
|
||||
|
||||
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
5018
templates/dark/static/mobile/layui/css/layui.css
Normal file
2
templates/dark/static/mobile/layui/css/layui.mobile.css
Normal file
2
templates/dark/static/mobile/layui/css/modules/code.css
Normal file
@ -0,0 +1,2 @@
|
||||
/** layui-v2.4.5 MIT License By https://www.layui.com */
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}
|
After Width: | Height: | Size: 5.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 701 B |
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,96 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>聊天记录</title>
|
||||
|
||||
<link rel="stylesheet" href="http://local.res.layui.com/layui/src/css/layui.css">
|
||||
<style>
|
||||
body .layim-chat-main{height: auto;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layim-chat-main">
|
||||
<ul id="LAY_view"></ul>
|
||||
</div>
|
||||
|
||||
<div id="LAY_page" style="margin: 0 10px;"></div>
|
||||
|
||||
|
||||
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
|
||||
{{# layui.each(d.data, function(index, item){
|
||||
if(item.id == parent.layui.layim.cache().mine.id){ }}
|
||||
<li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
|
||||
{{# } else { }}
|
||||
<li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
|
||||
{{# }
|
||||
}); }}
|
||||
</textarea>
|
||||
|
||||
<!--
|
||||
上述模版采用了 laytpl 语法,不了解的同学可以去看下文档:http://www.layui.com/doc/modules/laytpl.html
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<script src="http://local.res.layui.com/layui/src/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['layim', 'laypage'], function(){
|
||||
var layim = layui.layim
|
||||
,layer = layui.layer
|
||||
,laytpl = layui.laytpl
|
||||
,$ = layui.jquery
|
||||
,laypage = layui.laypage;
|
||||
|
||||
//聊天记录的分页此处不做演示,你可以采用laypage,不了解的同学见文档:http://www.layui.com/doc/modules/laypage.html
|
||||
|
||||
|
||||
//开始请求聊天记录
|
||||
var param = location.search //获得URL参数。该窗口url会携带会话id和type,他们是你请求聊天记录的重要凭据
|
||||
|
||||
//实际使用时,下述的res一般是通过Ajax获得,而此处仅仅只是演示数据格式
|
||||
,res = {
|
||||
code: 0
|
||||
,msg: ''
|
||||
,data: [{
|
||||
username: '纸飞机'
|
||||
,id: 100000
|
||||
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
||||
,timestamp: 1480897882000
|
||||
,content: 'face[抱抱] face[心] 你好啊小美女'
|
||||
}, {
|
||||
username: 'Z_子晴'
|
||||
,id: 108101
|
||||
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
||||
,timestamp: 1480897892000
|
||||
,content: '你没发错吧?face[微笑]'
|
||||
},{
|
||||
username: 'Z_子晴'
|
||||
,id: 108101
|
||||
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
||||
,timestamp: 1480897898000
|
||||
,content: '你是谁呀亲。。我爱的是贤心!我爱的是贤心!我爱的是贤心!重要的事情要说三遍~'
|
||||
},{
|
||||
username: 'Z_子晴'
|
||||
,id: 108101
|
||||
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
|
||||
,timestamp: 1480897908000
|
||||
,content: '注意:这些都是模拟数据,实际使用时,需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录(相对于layui.js):\n/css/modules/layim/html/chatlog.html'
|
||||
}]
|
||||
}
|
||||
|
||||
//console.log(param)
|
||||
|
||||
var html = laytpl(LAY_tpl.value).render({
|
||||
data: res.data
|
||||
});
|
||||
$('#LAY_view').html(html);
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,38 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>发现</title>
|
||||
|
||||
<link rel="stylesheet" href="http://local.res.layui.com/layui/src/css/layui.css">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="margin: 15px;">
|
||||
<blockquote class="layui-elem-quote">此为自定义的【查找】页面,因需求不一,所以官方暂不提供该模版结构与样式,实际使用时,可移至该文件到你的项目中,对页面自行把控。
|
||||
<br>文件所在目录(相对于layui.js):/css/modules/layim/html/find.html</blockquote>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="http://local.res.layui.com/layui/src/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['layim', 'laypage'], function(){
|
||||
var layim = layui.layim
|
||||
,layer = layui.layer
|
||||
,laytpl = layui.laytpl
|
||||
,$ = layui.jquery
|
||||
,laypage = layui.laypage;
|
||||
|
||||
//一些添加好友请求之类的交互参见文档
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,87 @@
|
||||
{
|
||||
"code": 0,
|
||||
"pages": 1,
|
||||
"data": [
|
||||
{
|
||||
"id": 76,
|
||||
"content": "申请添加你为好友",
|
||||
"uid": 168,
|
||||
"from": 166488,
|
||||
"from_group": 0,
|
||||
"type": 1,
|
||||
"remark": "有问题要问",
|
||||
"href": null,
|
||||
"read": 1,
|
||||
"time": "刚刚",
|
||||
"user": {
|
||||
"id": 166488,
|
||||
"avatar": "http://q.qlogo.cn/qqapp/101235792/B704597964F9BD0DB648292D1B09F7E8/100",
|
||||
"username": "李彦宏",
|
||||
"sign": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 75,
|
||||
"content": "申请添加你为好友",
|
||||
"uid": 168,
|
||||
"from": 347592,
|
||||
"from_group": 0,
|
||||
"type": 1,
|
||||
"remark": "你好啊!",
|
||||
"href": null,
|
||||
"read": 1,
|
||||
"time": "刚刚",
|
||||
"user": {
|
||||
"id": 347592,
|
||||
"avatar": "http://q.qlogo.cn/qqapp/101235792/B78751375E0531675B1272AD994BA875/100",
|
||||
"username": "麻花疼",
|
||||
"sign": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 62,
|
||||
"content": "雷军 拒绝了你的好友申请",
|
||||
"uid": 168,
|
||||
"from": null,
|
||||
"from_group": null,
|
||||
"type": 1,
|
||||
"remark": null,
|
||||
"href": null,
|
||||
"read": 1,
|
||||
"time": "10天前",
|
||||
"user": {
|
||||
"id": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 60,
|
||||
"content": "马小云 已经同意你的好友申请",
|
||||
"uid": 168,
|
||||
"from": null,
|
||||
"from_group": null,
|
||||
"type": 1,
|
||||
"remark": null,
|
||||
"href": null,
|
||||
"read": 1,
|
||||
"time": "10天前",
|
||||
"user": {
|
||||
"id": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 61,
|
||||
"content": "贤心 已经同意你的好友申请",
|
||||
"uid": 168,
|
||||
"from": null,
|
||||
"from_group": null,
|
||||
"type": 1,
|
||||
"remark": null,
|
||||
"href": null,
|
||||
"read": 1,
|
||||
"time": "10天前",
|
||||
"user": {
|
||||
"id": null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
@ -0,0 +1,208 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>消息盒子</title>
|
||||
|
||||
<link rel="stylesheet" href="../../../layui.css?v=1">
|
||||
<style>
|
||||
.layim-msgbox{margin: 15px;}
|
||||
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
|
||||
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
|
||||
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
|
||||
.layim-msgbox li p span{padding-left: 5px; color: #999;}
|
||||
.layim-msgbox li p em{font-style: normal; color: #FF5722;}
|
||||
|
||||
.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
|
||||
.layim-msgbox-user{padding-top: 5px;}
|
||||
.layim-msgbox-content{margin-top: 3px;}
|
||||
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
|
||||
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="layim-msgbox" id="LAY_view"></ul>
|
||||
|
||||
<div style="margin: 0 15px;">
|
||||
<blockquote class="layui-elem-quote">注意:这些都是模拟数据,实际使用时,需将其中的模拟接口改为你的项目真实接口。
|
||||
<br>该模版文件所在目录(相对于layui.js):/css/modules/layim/html/msgbox.html</blockquote>
|
||||
</div>
|
||||
|
||||
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
|
||||
{{# layui.each(d.data, function(index, item){
|
||||
if(item.from){ }}
|
||||
<li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
|
||||
<a href="/u/{{ item.from }}/" target="_blank">
|
||||
<img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
|
||||
</a>
|
||||
<p class="layim-msgbox-user">
|
||||
<a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
|
||||
<span>{{ item.time }}</span>
|
||||
</p>
|
||||
<p class="layim-msgbox-content">
|
||||
{{ item.content }}
|
||||
<span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
|
||||
</p>
|
||||
<p class="layim-msgbox-btn">
|
||||
<button class="layui-btn layui-btn-small" data-type="agree">同意</button>
|
||||
<button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
|
||||
</p>
|
||||
</li>
|
||||
{{# } else { }}
|
||||
<li class="layim-msgbox-system">
|
||||
<p><em>系统:</em>{{ item.content }}<span>{{ item.time }}</span></p>
|
||||
</li>
|
||||
{{# }
|
||||
}); }}
|
||||
</textarea>
|
||||
|
||||
<!--
|
||||
上述模版采用了 laytpl 语法,不了解的同学可以去看下文档:http://www.layui.com/doc/modules/laytpl.html
|
||||
-->
|
||||
|
||||
|
||||
<script src="../../../../layui.js?v=1"></script>
|
||||
<script>
|
||||
layui.use(['layim', 'flow'], function(){
|
||||
var layim = layui.layim
|
||||
,layer = layui.layer
|
||||
,laytpl = layui.laytpl
|
||||
,$ = layui.jquery
|
||||
,flow = layui.flow;
|
||||
|
||||
var cache = {}; //用于临时记录请求到的数据
|
||||
|
||||
//请求消息
|
||||
var renderMsg = function(page, callback){
|
||||
|
||||
//实际部署时,请将下述 getmsg.json 改为你的接口地址
|
||||
|
||||
$.get('getmsg.json', {
|
||||
page: page || 1
|
||||
}, function(res){
|
||||
if(res.code != 0){
|
||||
return layer.msg(res.msg);
|
||||
}
|
||||
|
||||
//记录来源用户信息
|
||||
layui.each(res.data, function(index, item){
|
||||
cache[item.from] = item.user;
|
||||
});
|
||||
|
||||
callback && callback(res.data, res.pages);
|
||||
});
|
||||
};
|
||||
|
||||
//消息信息流
|
||||
flow.load({
|
||||
elem: '#LAY_view' //流加载容器
|
||||
,isAuto: false
|
||||
,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
|
||||
,done: function(page, next){ //加载下一页
|
||||
renderMsg(page, function(data, pages){
|
||||
var html = laytpl(LAY_tpl.value).render({
|
||||
data: data
|
||||
,page: page
|
||||
});
|
||||
next(html, page < pages);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//打开页面即把消息标记为已读
|
||||
/*
|
||||
$.post('/message/read', {
|
||||
type: 1
|
||||
});
|
||||
*/
|
||||
|
||||
//操作
|
||||
var active = {
|
||||
//同意
|
||||
agree: function(othis){
|
||||
var li = othis.parents('li')
|
||||
,uid = li.data('uid')
|
||||
,from_group = li.data('fromGroup')
|
||||
,user = cache[uid];
|
||||
|
||||
//选择分组
|
||||
parent.layui.layim.setFriendGroup({
|
||||
type: 'friend'
|
||||
,username: user.username
|
||||
,avatar: user.avatar
|
||||
,group: parent.layui.layim.cache().friend //获取好友分组数据
|
||||
,submit: function(group, index){
|
||||
|
||||
//将好友追加到主面板
|
||||
parent.layui.layim.addList({
|
||||
type: 'friend'
|
||||
,avatar: user.avatar //好友头像
|
||||
,username: user.username //好友昵称
|
||||
,groupid: group //所在的分组id
|
||||
,id: uid //好友ID
|
||||
,sign: user.sign //好友签名
|
||||
});
|
||||
parent.layer.close(index);
|
||||
othis.parent().html('已同意');
|
||||
|
||||
|
||||
//实际部署时,请开启下述注释,并改成你的接口地址
|
||||
/*
|
||||
$.post('/im/agreeFriend', {
|
||||
uid: uid //对方用户ID
|
||||
,from_group: from_group //对方设定的好友分组
|
||||
,group: group //我设定的好友分组
|
||||
}, function(res){
|
||||
if(res.code != 0){
|
||||
return layer.msg(res.msg);
|
||||
}
|
||||
|
||||
//将好友追加到主面板
|
||||
parent.layui.layim.addList({
|
||||
type: 'friend'
|
||||
,avatar: user.avatar //好友头像
|
||||
,username: user.username //好友昵称
|
||||
,groupid: group //所在的分组id
|
||||
,id: uid //好友ID
|
||||
,sign: user.sign //好友签名
|
||||
});
|
||||
parent.layer.close(index);
|
||||
othis.parent().html('已同意');
|
||||
});
|
||||
*/
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//拒绝
|
||||
,refuse: function(othis){
|
||||
var li = othis.parents('li')
|
||||
,uid = li.data('uid');
|
||||
|
||||
layer.confirm('确定拒绝吗?', function(index){
|
||||
$.post('/im/refuseFriend', {
|
||||
uid: uid //对方用户ID
|
||||
}, function(res){
|
||||
if(res.code != 0){
|
||||
return layer.msg(res.msg);
|
||||
}
|
||||
layer.close(index);
|
||||
othis.parent().html('<em>已拒绝</em>');
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$('body').on('click', '.layui-btn', function(){
|
||||
var othis = $(this), type = othis.data('type');
|
||||
active[type] ? active[type].call(this, othis) : '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
BIN
templates/dark/static/mobile/layui/css/modules/layim/skin/1.jpg
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
templates/dark/static/mobile/layui/css/modules/layim/skin/2.jpg
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
templates/dark/static/mobile/layui/css/modules/layim/skin/3.jpg
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
templates/dark/static/mobile/layui/css/modules/layim/skin/4.jpg
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
templates/dark/static/mobile/layui/css/modules/layim/skin/5.jpg
Normal file
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 3.2 KiB |
BIN
templates/dark/static/mobile/layui/font/iconfont.eot
Normal file
473
templates/dark/static/mobile/layui/font/iconfont.svg
Normal file
After Width: | Height: | Size: 274 KiB |
BIN
templates/dark/static/mobile/layui/font/iconfont.ttf
Normal file
BIN
templates/dark/static/mobile/layui/font/iconfont.woff
Normal file
BIN
templates/dark/static/mobile/layui/images/face/0.gif
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
templates/dark/static/mobile/layui/images/face/1.gif
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
templates/dark/static/mobile/layui/images/face/10.gif
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
templates/dark/static/mobile/layui/images/face/11.gif
Normal file
After Width: | Height: | Size: 4.0 KiB |
BIN
templates/dark/static/mobile/layui/images/face/12.gif
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
templates/dark/static/mobile/layui/images/face/13.gif
Normal file
After Width: | Height: | Size: 7.3 KiB |
BIN
templates/dark/static/mobile/layui/images/face/14.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
templates/dark/static/mobile/layui/images/face/15.gif
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
templates/dark/static/mobile/layui/images/face/16.gif
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
templates/dark/static/mobile/layui/images/face/17.gif
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
templates/dark/static/mobile/layui/images/face/18.gif
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
templates/dark/static/mobile/layui/images/face/19.gif
Normal file
After Width: | Height: | Size: 3.0 KiB |
BIN
templates/dark/static/mobile/layui/images/face/2.gif
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
templates/dark/static/mobile/layui/images/face/20.gif
Normal file
After Width: | Height: | Size: 5.0 KiB |
BIN
templates/dark/static/mobile/layui/images/face/21.gif
Normal file
After Width: | Height: | Size: 5.1 KiB |
BIN
templates/dark/static/mobile/layui/images/face/22.gif
Normal file
After Width: | Height: | Size: 9.6 KiB |
BIN
templates/dark/static/mobile/layui/images/face/23.gif
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
templates/dark/static/mobile/layui/images/face/24.gif
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
templates/dark/static/mobile/layui/images/face/25.gif
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
templates/dark/static/mobile/layui/images/face/26.gif
Normal file
After Width: | Height: | Size: 3.2 KiB |
BIN
templates/dark/static/mobile/layui/images/face/27.gif
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
templates/dark/static/mobile/layui/images/face/28.gif
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
templates/dark/static/mobile/layui/images/face/29.gif
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
templates/dark/static/mobile/layui/images/face/3.gif
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
templates/dark/static/mobile/layui/images/face/30.gif
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
templates/dark/static/mobile/layui/images/face/31.gif
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
templates/dark/static/mobile/layui/images/face/32.gif
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
templates/dark/static/mobile/layui/images/face/33.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
templates/dark/static/mobile/layui/images/face/34.gif
Normal file
After Width: | Height: | Size: 3.6 KiB |
BIN
templates/dark/static/mobile/layui/images/face/35.gif
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
templates/dark/static/mobile/layui/images/face/36.gif
Normal file
After Width: | Height: | Size: 2.3 KiB |