1. 程式人生 > >二、svg文字之排版

二、svg文字之排版

1、transform="rotate(90,80,80)的使用
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" >
  <text x="10" y="20" style="fill:red;" transform="rotate(90,80,80)">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text>
</svg>
 
</body>
</html>

執行結果為:


2、tspan的dx和dy的使用

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="100" y="100" dy="100" fill="black" style="font-size:40px;">
          <tspan fill="blue" dx="0 -40"dy="-50 40">我是</tspan>
		 <tspan fill="red">中國人</tspan>
     </text>
     <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>

</body>
</html>
執行結果為:

3、文字行垂直排列:

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" dominant-baseline="start" fill="black" style="font-size:40px;">我是中國人</text>
     <text x="200" y="100" dominant-baseline="middle"  fill="black" style="font-size:40px;">我是中國人</text>
     <text x="200" y="150" dominant-baseline="end" fill="black" style="font-size:40px;">我是中國人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>
</body>
</html>

執行結果為:


4、文字水平排列:

text-anchor屬性可設定文字水平排列,有三個取值 start | middle | end。

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中國人</text>
     <text x="200" y="100" text-anchor="middle"  fill="black" style="font-size:40px;">我是中國人</text>
     <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中國人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>
</body>
</html>

執行結果為:

<!DOCTYPE html>
<html>
<body>
<svg>
	<g style="font-size: 14pt;">
    <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
    <text x="100" y="30" >Start</text>
    <text x="100" y="60" >Middle</text>
    <text x="100" y="90" >End</text>
</g>
 </svg>
</body>
</html>

執行結果為:


程式碼:

<!DOCTYPE html>
<html>
<body>
<svg>
	<g style="font-size: 14pt;">
    <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
    <text x="100" y="30" style="text-anchor: start">Start</text>
    <text x="100" y="60" style="text-anchor: middle">Middle</text>
    <text x="100" y="90" style="text-anchor: end">End</text>
</g>
 </svg>
</body>
</html>

執行結果:


其中text中的y代表字的長度;

對齊


預設<text>從起始位置(x,y)開始展示。但由於在svg中無法事先知道<text>的長度,所以無法僅通過改變(x,y)讓<text>的中軸或結束位置位於指定位置。

但svg提供了一種更簡單直接的方法實現這些對齊方式。

text-anchor屬性可以改變(x,y)作為起始座標的定義。

text-anchor="start"時,(x,y)為<text>的起始座標。


text-anchor="middle"時,(x,y)為<text>的中軸座標。

text-anchor="end"時,(x,y)為<text>的結束座標。

5、一條二次貝茲曲線路徑文字的例項:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
     
<text dx="20 30 40 50 60" fill="black" style="font-size:40px;">
	<textPath xlink:href="#p1">我是中國人</textPath>
	</text>
        <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/>
</svg>
</body>
</html>
執行結果為:

6、垂直路徑文字的例項:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
     
	<text dx="20 20 20 20 20" fill="black" style="font-size:40px;">
	<textPath xlink:href="#p1">我是中國人</textPath>
	</text>
     <path id="p1" d="M50,50 V500" stroke="green" fill="none"/>
</svg>
</body>
</html>

運算結果:

7、svg沿路徑繪製文字

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
          <path id="circlePath"
            d="M10,50
               C10,50 50,0 100,50
               C100,50 150,100 190,50
               M10,150
               C10,150 50,100 100,150
               C100,150 150,200 190,150" />
    </defs>
    <g fill="dodgerblue" font-size="15" font-family="楷體">
        <text x="20" y="40">
            <textPath xlink:href="#circlePath">
                SVG與文字:使用textPath進行字串的顯示
            </textPath>
        </text>
    </g>
    <use xlink:href="#circlePath" fill="none" stroke="blue" />
</svg>
</body>
</html>
執行結果為:

<!DOCTYPE html>
<html>
<body>
<svg>
	<g id="coordinates" fill="none" stroke="black" stroke-width="1">
    <path d="M10 0 v30 h200 m-190 0 v30 h190 m-180 0 v30 h180"></path>
	</g>
	<g id="text" font-size="2rem">
    	<text x="10" y="30">first line
       	 	<tspan x="20" y="60">second line</tspan>
        	<tspan x="30" dy="30">third line</tspan>
    	</text>
	</g>
 </svg>
</body>
</html>


8、

<!DOCTYPE html>
<html>
<body>
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> 
	<text textLength="400" lengthAdjust="spacingAndGlyphs"> 
		<tspan x="280" y="80">S</tspan> 
		<tspan x="280"dy="30" fill="red">S</tspan> 
	</text> 
</svg>
</body>
</html>


執行結果為:

我把兩個tspan上下放置,給第二個tspan加一個紅色填充。我還給<text>元素添加了textLength和lengthAdjust屬性。然而,文字沒有拉伸。


但是,給第一個tspan添加了這兩個屬性之後,它確實拉伸了間隔、還有字形。

他們和rotate屬性不一樣,給text元素設定的textLength和lengthAdjust,不會擴散到tspan。

這是一個例外,我發現如果你給text元素新增textLength和lengthAdjust屬性,然後沒有給第一個tspan設定x和y的值,那麼textLength和lengthAdjust也有可能會被繼承。

9、

<!DOCTYPE html>
<html>
<body>
<svg>
	<g id="coordinates" stroke="black" stroke-width="1">
   	 	<path d="M10 0 v90 m0 -60 h200 m-200 30 h200 m-200 30 h200"></path>
	</g>
	<g id="text">
		<text x="10" y="30">First Line</text>
   		<text x="10" y="60" stroke="black">Second Line</text>
    	<text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text>
	</g>
 </svg>
</body>
</html>

執行結果:


分析:


10、利用dx和dy,rotate來排版文字

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<text x="30" y="30" font-size="2rem" >
    It’s
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8"
           rotate="5 10 -5 -20 0 15">shaken</tspan>,
    not stirred.
</text>
 </svg>
</body>
</html>

"shaken"一共六個字元,dx,dy,rotate分別各有六個數值,空格或逗號隔開,每個數值對相作用於應次序的字母。rotate可以對字元做旋轉。如果dx(或者dy,rotate)引數個數小於<tspan>內的字元個數,最後一個dx(dy,rotate)引數值將作用於多出的字元。

另外,上標下標除了可以用dy來擡高或降低字元位置,還有一個baseline-shift樣式可以直接定義上標下標

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<text x="20" y="25" style="font-size: 1.5rem;">
    C<tspan style="baseline-shift: sub;font-size: 1rem;">12</tspan>
    H<tspan style="baseline-shift: sub;font-size: 1rem">22</tspan>
    O<tspan style="baseline-shift: sub;font-size: 1rem">11</tspan> (sugar)
</text>
<text x="20" y="70" style="font-size: 1.5rem;">
    6.02 x 10<tspan baseline-shift="super" style="font-size:1rem">23</tspan>
    (Avogadro's number)
</text>

 </svg>
</body>
</html>


12、設定text長度及字元間隔

預設情況下無從獲得<text>的長度,但可以通過textlength屬性設定<text>長度。<text>內部字元會根據textLength自適應變化。通過lengthAdjust屬性來設定字元變化規則。lengthAdjust有兩個可選屬性值。


spacing
spacingAndGlyphs
spacing只調整字元之間的間隔;spacingAndGlyphs則會根據一定比例同時調整字元之間的間隔,以及字元本身寬度。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<g style="font-size: 1.3rem;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"></path>
    <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
    <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
    	<text x="20" y="90">Two words
        <tspan style="font-size: 10pt;">(normal length)</tspan>
    	</text>
    	<path d="M 20 100 20 170 M 90 100 90 170" style="stroke: gray;"></path>
    	<text x="20" y="120" textLength="70" lengthAdjust="spacing">Two words</text>
   	 	<text x="20" y="160" textLength="70" lengthAdjust="spacingAndGlyphs">Two words</text>
	</g>
 </svg>
</body>
</html>

13、垂直text

有兩種方法實現垂直顯示text。一種使用transform,一種是text特有的writing-mode:tb(top to bottom)樣式。
書上用writing-mode + glyph-orientation-vertical的實現方式在chrome上沒生效。
個人認為使用transform(或者writing-mode:tb)+ rotate + letter-spacing實現起來更為靈活。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">

   <text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >
	 i am huanhuan.
	</text>
   <text x="70" y="20" transform="rotate(90, 70, 20)" style="letter-spacing:10px" rotate="-90" >
	   我是歡歡
	</text>
	
 </svg>
</body>
</html>

執行結果為:


疑惑:rotate是怎麼實現旋轉的。比如:

 <rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75) rotate(-45)"></rect>


14、textPath

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">

   <defs>
   		 <path id="circle" d="M70 20 a40 40 0 1 1 -1 0"></path>
	</defs>
	<text>
		<textPath xlink:href="#circle">
      	  	Text following a circle.............
  		 </textPath>
	</text>
	
 </svg>
</body>
</html>


超出<path>長度部分的文字將被隱藏。

預設的,<textPath>的起始位置為<path>的起始位置。
<textPath>元素還有一個startOffset屬性,可以調整<text>起始位置。startOffset為百分數時,<textPath>起始位置 = startOffset * <path>總長度。startOffset為具體數字時,<textPath>起始位置 = startOffset + <path>的起始位置。
利用startOffset和text-anchor,可以實現文字居中擺放。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">
   <defs>
    <path id="semi" d="M110 100 a50 50 0 1 1 100 0"></path>
  </defs>
   <use xlink:href="#semi" stroke="grey" fill="none"></use>
   <text text-anchor="middle">
        <textPath xlink:href="#semi" startOffset="50%">
            Middle
        </textPath>
   </text>
 </svg>
</body>
</html>

15、

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">            
	<rect width="300" height="100" style="fill:red;"/>            
	<circle cx="150" cy="100" r="80" style="fill:green;"/>            
	<text x="100" y="125" font-size="60" style="fill:white">SVG</text>        
</svg>
</body>
</html>


16、文言文書寫

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">
  <defs >
	   <path id="p1" d="M0,0 V500 M20,0 V500" stroke="green" fill="none"/>  
  </defs>
	<rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" />
<g fill="dodgerblue" font-size="15" font-family="楷體"  >  
        <text x="0" y="40" transform="rotate(90, 0, 40)" style="letter-spacing:10px" rotate="-90" >  
     		 SVG與文字:使用textPath進行字串的顯示 
        </text>  
		<text x="20" y="40" transform="rotate(90, 20, 40)" style="letter-spacing:10px" rotate="-90" >  
     		 SVG與文字:使用textPath進行字串的顯示 
        </text>  
		
 </g>  
<use xlink:href="#p1" fill="none" stroke="blue" />  
	
</svg>
 
</body>
</html>

完整的文言文書寫例項:

<!DOCTYPE html>  
<html>  
<body>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">  
  <defs >  
       <path id="p1" d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>    
  </defs>  
  <rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" />  
<g  fill="dodgerblue" font-size="15" font-family="楷體"  >    
        <text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
        </text>    
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
        </text> 
	   <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
       </text>    
	   <text x="480" y="20" transform="rotate(90, 480, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
       </text>        
 </g>    
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />    
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/> 
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>
</svg>    
</body>  
</html> 
執行結果為:

優化:

<!DOCTYPE html>  
<html>  
<body>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">  
  <rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" /> 
	<defs >  
	<g id="p1"  fill="dodgerblue"font-size="10" font-family="楷體"  >    
        <path  d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>    
		<text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
        </text>    
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
        </text> 
	   <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
       </text> 
		<text x="60" y="20" transform="rotate(90, 60, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
       </text>  
	   <text x="80" y="20" transform="rotate(90, 80, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG與文字:使用textPath進行字串的顯示   
       </text>        
 	</g> 
</defs>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />    
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/> 
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>
</svg>    
</body>  
</html>  

最終的結果:圖片與文字的混合

<!DOCTYPE html>
<html>
<body>
	<svg width="1000 height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0,0,500,500"> 
  
	<image x="0"  y="0"  width="500" height="500" href="page_bg.jpg" preserveAspectRatio= "xMinYMin slice"></image>
	
	<rect width="500" height="500" style="fill:none;stroke-width:1;stroke:rgb(0,0,0)" />   	
	<defs >    
    <g id="p1"  fill="dodgerblue"font-size="10" font-family="楷體"  >      
        <path  d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>      
        <text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG與文字:使用textPath進行字串的顯示     
        </text>      
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG與文字:使用textPath進行字串的顯示     
        </text>   
       <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG與文字:使用textPath進行字串的顯示     
       </text>   
        <text x="60" y="20" transform="rotate(90, 60, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG與文字:使用textPath進行字串的顯示     
       </text>    
       <text x="80" y="20" transform="rotate(90, 80, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG與文字:使用textPath進行字串的顯示     
       </text>          
    </g>   
</defs>    
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />      
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/>   
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>  
	</svg> 
</body>
</html>

執行結果為:


17、


相關推薦

svg文字排版

1、transform="rotate(90,80,80)的使用<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"

紅黑樹-RBT(基本操作左旋)

都是 spa 左旋 class body 節點 圖片 如果 info 一、左旋   1、當在含有n個關鍵字的紅黑樹上運行時,TREE-INSERT和TREE-DELETE操作對樹作了修改,結果可能違反(一、紅黑樹--》2、定義)中給出的紅黑樹的性質,為了保持這些性質,就要改

mysql資料庫基本操作和儲存引擎

一、知識儲備 資料庫伺服器:一臺計算機(對記憶體要求比較高) 資料庫管理系統:如mysql,是一個軟體 資料庫:oldboy_stu,相當於資料夾 表:student,scholl,class_list,相當於一個具體的檔案 記錄:1 susan &nb

三十python學習Flask框架(四)模板:jinja2模板過濾器模板複用(繼承巨集包含)瞭解CSRF跨站請求攻擊

一、jinja2模板引擎的簡介: 1.模板: 1.1檢視函式的兩個作用: 處理業務邏輯; 返回響應內容; 1.3 什麼是模板: 模板其實是一個包含響應文字的檔案,不是特指的html檔案,其中用佔位符(變數)表示動態部分,告訴模板引擎其具體的

四十python學習Django框架():類檢視與中介軟體

五、類檢視: 1.類檢視引入: 以函式的方式定義的檢視成為函式檢視,即我們常說的檢視函式. 但是, 檢視函式遭遇不同的請求方法(如get和post),並且需要做不同的處理時,我們如果在一個函式中編寫不同的業務邏輯,程式碼可讀性和複用性都不好. 例如:

redis系列事務

1. 緒言   Redis也提供了事務機制,可以一次執行多個命令,本質是一組命令的集合。一個事務中的所有命令都會序列化,按順序地序列化執行而不會被其他命令插入,不許加塞。但Redis對事務的支援是部分支援,不想關係型資料庫,要麼都成功要麼都失敗,Redis可以部分成功部分失敗。本篇中,我們來詳細所以說red

Linux驅動LCD驅動

1. 基本概念     LCD是Liquid Crystal Display的簡稱,也就是經常所說的液晶顯示器。LCD能夠支援彩色影象的顯示和視訊的播放,是一種非常重要的輸出裝置。如果我們的系統要用GUI(圖形介面介面),比如minigui,MicroWindows

JAVA知識點HashMapTreeMap紅黑樹——精髓

4、JAVA中HashMap和TreeMap什麼區別?低層資料結構是什麼? 1)、使用層次上的區別: HashMap: a)、陣列+連結串列儲存key-value,1.8加入紅黑樹(優化連結串列查詢過長的問題) b)、允許null作為key和value,key不可以重複,value允許重複 c

python學習python高階(property魔法方法和魔法屬性多繼承和多重繼承閉包和裝飾器)

一、property: 1.get/set方法: 1.1 隱藏實現細節:在使用物件時,儘量不要讓使用者直接操作物件中的屬性,這樣會帶來安全隱患。改進辦法,使用私有屬性。 1.2 提供精確的訪問控制:學習過 set/get方法,是專門來為類的私有屬性提供訪問介面。 1.

併發程式設計使用Condition實現一個先入先出的有界佇列

//先入先出佇列 public class MyQueue<E> { private Object[] obj;//陣列(佇列) private int addIndex;//新增角標 private int removeIndex;//移除腳標 private in

併發程式設計AbstractQueuedSynchronizer(AQS)詳解

一、簡介 1、AQS(java.util.concurrent.locks.AbstractQueuedSynchronizer)是用來構建鎖或者其他同步元件(訊號量、事件等)的基礎框架類。 2、AQS的主要使用方式是繼承它作為一個內部輔助類實現同步原語,它可以簡化你的併發

基本演算法DFSBFS和A*

         圖中節點的遍歷和搜尋是老生常談的話題,這裡藉由python的networkx庫,複習一下之前的BFS和DFS,並對A*做一些理解。  1.BFS 廣度優先搜尋          其基本思想是優先從當前節點的鄰居節點開始搜尋,如果搜尋不到,再搜尋鄰居的鄰居。

MyBatis教程三—多參數的獲取方式

傳遞多參數 update1 https str detail net set pda param 如果接口中的方法擁有多個參數,那麽在mapper文件中該如何獲取呢? 有三種方式: 1、就是普通寫法,在文件中通過arg或param獲取 2、使用Map集合,在文件中使用#{k

netcore跨平臺 Linux部署nginx代理webapi

上一章,我們講了在linux上安裝netcore環境,以及讓netcore在linux上執行。 這一章我們開始講在linux上配置nginx,以及讓nginx反向代理我們的webapi。 什麼nginx??? Nginx("engine x")是一款是由俄羅斯的程式設計師Igor Sysoev所開發高效

Spring Cloud註冊中心 Eureka

前言 算是正式開始學習 spring cloud 的專案知識了,大概的知道Springcloud 是由眾多的微服務組成的,所以我們現在一個一個的來學習吧。 註冊中心,在微服務中算是核心了。所有的服務都會註冊到註冊中心,請求服務的時候,並不會直接去請求服務地址,而是先通過註冊中心再轉到目的地址。雖然Eureka

前端自動化測試UI RECORDER(PC錄制)

啟動服務 域名 run ports shadow 科學 兼容 webp htm PC錄制教程 準備工作: NodeJs環境 請自行先安裝好nodejs環境,在命令行執行node -v命令成功說明已經安裝成功 Chrome瀏覽器 JAVA環境 UI Recorder We

004-spring-data-elasticsearch 3.0.0.0使用【】-spring-data定義方法創建repository實例從聚合根發布事件

-- ble sch current 4.3 ... reference tex manager 續上文 1.4、定義方法   存儲庫代理有兩種方法可以從方法名稱派生特定於存儲的查詢。它可以直接從方法名稱派生查詢,或者使用手動定義的查詢。可用選項取決於實際store。但

《構建法》讀書筆記:第一十六章

信息系統 做到 而是 需要 根據 style 成本 讀書 找到 這周看了鄒欣老師《構建之法》的1,2,16章,獲益匪淺。這本書寫得妙趣橫生,用阿超小飛幾個人的生活場景和幽默的比喻幫我理解著軟件工程的相關概念,讓我對軟件工程有了初步的了解:原來開發軟件並不是我們想的

《構建法》第一十六章閱讀筆記

gpo 技術 天都 出現問題 語言 出現 私有 .cn 概念 第一章 問題一:1.2.4軟件工程的目標--創造"足夠好"的軟件 什麽是好軟件? 原文1.一些同學認為,所謂好軟件,就是軟件沒有Bug,所謂軟件工程,就是把軟件中的Bug都

構建法第一十六章

可見性 效率 軟件企業 nbsp 不一定 數據結構 其他 模塊 得到 《構建之法》第一、二、十六章疑問 我通過閱讀發現這是一本十分有趣的書。不同於別的書的晦澀難懂,《構建之法》利用淺顯易懂的語言,貼近生活的例子向我們講述了軟件工程的內容。 第一章 概論 軟件=程序+軟件工