突襲HTML5之SVG 2D入門1 - SVG綜述////////////////zzzzzzzz

時間  2019-11-15
標籤 突襲 html5 html svg 2d 入門 綜述 zzzzzzzz 欄目 HTML5 简体版
原文   原文鏈接

 

 

以二次貝塞爾曲線的公式爲例：html

二次貝塞爾曲線公式

 

js函數：數據庫

Js代碼   收藏代碼
  1. //p0、p一、p2三個點，其中p0爲起點，p2爲終點，p1爲控制點  
  2. //它們的座標用數組表示[x,y]  
  3. //t的範圍是0-1  
  4. function qBerzier(p0,p1,p2,t){  
  5.     var x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];  
  6.     var y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];  
  7.     return [x,y];  
  8. }  

 

經過函數，能夠用L方法繪製貝塞爾曲線，可是這種方法是用直線將離散的點鏈接起來，只是由於點的距離很近，因此看上去是曲線，不夠完美。因此繪製貝塞爾曲線，通常仍是用path裏的曲線命令比較好。canvas

 

path路徑繪製中，繪製貝塞爾曲線的命令包括：數組

Q 二次貝賽爾曲線 x1,y1 x,y瀏覽器

T 平滑二次貝塞爾曲線 x,y網絡

C 曲線（curveto） x1,y1 x2,y2 x,ysvg

S 平滑曲線 x2,y2 x,y函數

其中Q和T能夠在一塊兒使用，C和S能夠在一塊兒用。工具

 

Q 二次貝塞爾曲線post

用法：M x0,y0 Q x1,y1 x2,y2

Snip20150708_4

經過M定義（x0,y0）爲起點，用Q定義（x1,y1）爲控制點，（x2,y2）爲終點，構成一條二次貝塞爾曲線。 Q方法很是簡單直觀。

 

T 二次貝塞爾曲線平滑延伸

用法：M x0,y0 Q x1,y1 x2,y2 T x4,y4

Snip20150708_5

T 命令是二次被賽爾曲線的平滑延伸命令，用Q定義了一段二次貝塞爾曲線後面，緊接着一個T命令，只需定義終點，就能夠自動延伸出一條平滑的曲線。 在這段曲線中，(x3,y3)沒有手工定義，這裏使用的T方法，只定義一個終點，起點是上一段曲線的終點，控制點則是上一段曲線的控制點的對稱點（相對於 上一段曲線的終點）。 在這裏，(x3,y3)是(x1,y1)的對稱點（相對於(x2,y2)對稱）。

 

C 三次貝塞爾曲線

用法：M x0,y0 C x1,y1 x2,y2 x3,y3

Snip20150708_6

C方法定義的是三次貝塞爾曲線，這裏只是多了一個控制點，很好理解

 

S 三次貝塞爾曲線平滑延伸

用法：M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6

Snip20150708_7

三次貝塞爾也有一個平滑延伸的命令，須要定義一個控制點和一個終點，命令會再自動生成一個控制點，從而造成一條延伸出來的三次貝賽爾曲線。

 

原文：http://xbingoz.com/194.html

轉自：SVG矢量繪圖 path路徑詳解（貝塞爾曲線及平滑）

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。

 

什麼是SVG？

　　SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
　　SVG 用來定義用於網絡的基於矢量的圖形
　　SVG 使用 XML 格式定義圖形
　　SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
　　SVG 是萬維網聯盟的標準
　　SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

 Canvas 和 SVG 的區別：
　　SVG
　　　　SVG 是一種使用 XML 描述 2D 圖形的語言。
　　　　SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。
　　　　在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。
　　　　特色：
　　　　 　　不依賴分辨率
　　　　 　　支持事件處理器
　　　　 　　最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
　　　　　　 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
　　　　 　　不適合遊戲應用
　　Canvas
　　　　Canvas 經過 JavaScript 來繪製 2D 圖形。
　　　　Canvas 是逐像素進行渲染的。
　　　　在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。
　　　　特色：
　　　    　　依賴分辨率
　　　　 　　不支持事件處理器
　　　　　　 弱的文本渲染能力
　　　　　　 可以以 .png 或 .jpg 格式保存結果圖像
　　　　 　　最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

簡單例子：

 

<svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>

 

 

 

 

 

位圖與矢量圖

　　之前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基於光柵的。在光柵圖像中，圖像文件定義了圖像中每一個像素的顏色值。瀏覽器須要讀取這些值並作出相應行動。這種圖像的再現能力比較強，可是在某些情形下會顯得不足。例如，當瀏覽器以不一樣大小顯示一副圖像時，一般會產生鋸齒邊緣，這時，瀏覽器不得不爲那些在原始圖像中不存在的像素插入或猜想數值；這樣會致使圖像失真。此外，針對位圖進行動畫，最多也僅限於生成「翻動書本」類型的動畫，即快速連續地顯示單獨圖像。

　　矢量圖經過指定爲肯定每一個像素的值所需的指令而不是指定這些值自己，克服了這些困難中的一部分。例如，向量圖形再也不爲一個直徑一英寸的圓提供像素值，而是告訴瀏覽器建立一個直徑一英寸的圓，而後讓瀏覽器（或插件）作其他事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。若是圖像須要以正常大小的三倍來顯示，那麼瀏覽器只要按正確的大小畫圓而沒必要執行光柵圖像一般的插入法。相似地，瀏覽器接收的指令能夠更容易地與外部信息源（如應用程序和數據庫）綁定，要對圖像製做動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令便可。

　　HTML體系中，最經常使用的繪製矢量圖的技術是SVG和HTML5新增長的canvas元素。這兩種技術都支持繪製矢量圖和光柵圖。

 

SVG概述

　　可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴格聽從XML語法)。 SVG容許三種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本。 能夠將圖形對象（包括文本）分組、樣式化、轉換和組合到之前呈現的對象中。 SVG 功能集包括嵌套轉換、剪切路徑、alpha 蒙板和模板對象。

　　SVG繪圖是交互式和動態的。 例如，可以使用腳原本定義和觸發動畫。這一點與Flash相比很強大。Flash是二進制文件，動態建立和修改都比較困難。而SVG是文本文件，動態操做是至關容易的。並且，SVG直接提供了完成動畫的相關元素，操做起來很是方便。

　　SVG與其餘Web標準兼容，並直接支持文檔對象模型DOM。這一點也是與HTML5中的canvas相比很強大的地方(這裏注意，SVG內部也是用一個相似的canvas這樣的東西來展現SVG圖形，到後面你會發現不少特性和HTML5的canvas還有點像；文中若是沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。於是，能夠很方便的使用腳本實現SVG的不少高級應用。並且SVG的圖形元素基本上都支持DOM中的標準事件。可將大量事件處理程序(如「onmouseover」和「onclick」)分配給任何SVG圖形對象。 雖然SVG的渲染速度比不上canvas元素，可是勝在DOM操做很靈活，這個優點徹底能夠彌補速度上的劣勢。

　　SVG既能夠說是一種協議，也能夠說是一門語言；既是HTML的一個標準元素，也是一種圖片格式。

　　SVG並非HTML5中的東西，可是也算頁面時興的技術之一，姑且也放到這個專題下了。

 

SVG與其它圖片格式的比較

　　SVG與其它的圖片格式相比，有不少優勢(不少優勢來源於矢量圖的優勢)：

• SVG文件是純粹的XML， 可被很是多的工具讀取和修改(好比記事本)。
• SVG 與JPEG 和GIF圖像比起來，尺寸更小，且可壓縮性更強，總結，矢量圖，內存小，放大不失真。
• SVG 是可伸縮的，可在圖像質量不降低的狀況下被放大，可在任何的分辨率下被高質量地打印。
• SVG 圖像中的文本是可選的，同時也是可搜索的(很適合製做地圖)。
• SVG 能夠與 Java 技術一塊兒運行。
• SVG 是開放的標準。

 

SVG與Flash的比較 

　　SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優點是它與其餘標準(好比XSL和DOM)相兼容，操做方便，而Flash則是未開源的私有技術。其它的好比存儲的格式，動態生成圖形等方面，SVG也佔有很大的優點。

 

SVG的呈現方式
　　關於支持HTML5與SVG的瀏覽器不是這裏討論的重點，基本上裝上最新的Chrome或者FireFox瀏覽器就差很少了(IE用戶請裝IE9就對了，至於IE9以前的版本，須要裝SVG的插件，這裏就直接略過了)。對於直接支持SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。
　內聯到HTML
　　SVG是標準的HTML元素，直接寫到HTML中就能夠了，看下面的例子：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>
</html>

　　請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮兼容性的問題；這些部分在HTML5中基本均可以不用寫了(寫不寫仍是本身瞧着辦吧)。

　獨立SVG文件
　　獨立SVG指的是經過使用svg文件擴展名來提供向量圖形文件格式。在瀏覽器中嵌入這個svg文件就可使用了。
1.獨立的SVG文件/頁面，定義的模板基本就像下面的同樣：

 

<svg width="100%" height="100%">   
  <!-- SVG markup here. -->    
</svg>

 

把這樣的文本文件保存成以svg爲擴展名的文件，例如sun.svg，這樣的文件能夠直接用瀏覽器打開瀏覽，也能夠做爲引用嵌入到別的頁面中。
2.HTML引用外部的SVG文件。

　　使用object或者img元素嵌入svg圖形就能夠了，例以下面的小例子：

 

<!DOCTYPE html>
<html>
<head>
  <title> My First SVG Page</title>
</head>
<body>
  <object data="sun.svg" type="image/svg+xml"
          width="300px" height="300px">
    <!-- Implement fallback code here, or display a message: -->
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>

  <img src="sun.svg" alt="svg not supported!" />
</body>
</html>

其實SVG也能夠放在其餘的XML文檔中，也能夠像其餘的XML文檔同樣，使用XML相關的技術格式化和驗證，這個不是重點，此處略去了。

 

 

SVG的渲染順序

　　SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不同。在SVG中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後渲染的元素會覆蓋前面的元素，雖然有時候受透明度影響，看起來不是被覆蓋的，可是SVG確實是嚴格按照前後順序來渲染的。 

 

注意：SVG是以XML定義的，因此是大小寫敏感的，這點與HTML不同。

 

 

突襲HTML5之SVG 2D入門2 - 圖形繪製

 

<svg width="200" height="250">
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

 

 

 

這個例子畫了不少形狀：正常的矩形，帶圓角的矩形，圓形，橢圓形，直線，折線，多邊形，還有路徑。這些都屬於基本的圖形元素。雖然繪製一個圖形有不少種方式，好比矩形能夠用rect實現，也能夠用path等實現，可是咱們仍是應該儘可能保持SVG的內容短小精悍，易於閱讀。 

　　下面是每一個形狀的使用說明(這裏只介紹控制圖形形狀和位置的基本屬性，填充等屬性放到後面總結)。

矩形 - rect元素
　　這個元素有6個控制位置和形狀的屬性，分別是：
x：矩形左上角的座標(用戶座標系)的x值。
y：矩形左上角的座標(用戶座標系)的y值。
width：矩形寬度。
height：矩形高度。
rx：實現圓角效果時，圓角沿x軸的半徑。
ry：實現圓角效果時，圓角沿y軸的半徑。
好比上面例子中，實現了圓角效果，你也能夠經過設置rx,ry爲不一樣的值實現橢圓角效果。

 

圓 - circle元素
　　這個元素的屬性很簡單，主要是定義圓心和半徑：
r：圓的半徑。
cx：圓心座標x值。
cy：圓心座標y值。

 

橢圓 - ellipse元素
　　這個是更加通用的圓形元素，你能夠分別控制半長軸和半短軸的長度，來實現不一樣的橢圓，很容易想到，當兩個半軸相等時，就是正圓形了。
rx：半長軸(x半徑)。
ry：半短軸(y半徑)。
cx：圓心座標x值。
cy：圓心座標y值。

 

直線 - line元素
　　直線須要定義起點與終點便可：

x1：起點x座標。
y1：起點y座標。
x2：終點x座標。
y2：終點y座標。

 

折線 - polyline元素
　　折線主要是要定義每條線段的端點便可，因此只須要一個點的集合做爲參數：

points：一系列的用空格，逗號，換行符等分隔開的點。每一個點必須有2個數字：x值和y值。因此下面3個點 (0,0), (1,1)和(2,2)能夠寫成："0 0, 1 1, 2 2"。

 

多邊形 - polygon元素
　　這個元素就是比polyline元素多作一步，把最後一個點和第一個點連起來，造成閉合圖形。參數是同樣的。
points：一系列的用空格，逗號，換行符等分隔開的點。每一個點必須有2個數字：x值和y值。因此下面3個點 (0,0), (1,1)和(2,2)能夠寫成："0 0, 1 1, 2 2"。

 

路徑 - path元素
　　這個是最通用，最強力的元素了；使用這個元素你能夠實現任何其餘的圖形，不只包括上面這些基本形狀，也能夠實現像貝塞爾曲線那樣的複雜形狀；此外，使用path能夠實現平滑的過渡線段，雖然也可使用polyline來實現這種效果，可是須要提供的點不少，並且放大了效果也很差。這個元素控制位置和形狀的只有一個參數：
d：一系列繪製指令和繪製參數(點)組合成。

　　繪製指令分爲絕對座標指令和相對座標指令兩種，這兩種指令使用的字母是同樣的，就是大小寫不同，絕對指令使用大寫字母，座標也是絕對座標；相對指令使用對應的小寫字母，點的座標表示的都是偏移量。 

絕對座標繪製指令
　　這組指令的參數表明的是絕對座標。假設當前畫筆所在的位置爲(x0,y0)，則下面的絕對座標指令表明的含義以下所示：

指令

參數

說明

M

x y

將畫筆移動到點(x,y)

L

x y

畫筆從當前的點繪製線段到點(x,y)

H

x 

畫筆從當前的點繪製水平線段到點(x,y0)

V

y 

畫筆從當前的點繪製豎直線段到點(x0,y)

A

rx ry x-axis-rotation large-arc-flag sweep-flag x y

畫筆從當前的點繪製一段圓弧到點(x,y)

C

x1 y1, x2 y2, x y

畫筆從當前的點繪製一段三次貝塞爾曲線到點(x,y)

S

x2 y2, x y

特殊版本的三次貝塞爾曲線(省略第一個控制點)

Q

x1 y1, x y 

繪製二次貝塞爾曲線到點(x,y)

T

x y

特殊版本的二次貝塞爾曲線(省略控制點)

Z

無參數

繪製閉合圖形，若是d屬性不指定Z命令，則繪製線段，而不是封閉圖形。

　　移動畫筆指令M，畫直線指令：L，H，V，閉合指令Z都比較簡單；下面重點看看繪製曲線的幾個指令。

繪製圓弧指令：A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
　　用圓弧鏈接2個點比較複雜，狀況也不少，因此這個命令有7個參數，分別控制曲線的的各個屬性。下面解釋一下數值的含義：
rx,ry 是弧的半長軸、半短軸長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時針旋轉角度，負數表明順時針轉動的角度。
large-arc-flag 爲1 表示大角度弧線，0 表明小角度弧線。
sweep-flag 爲1表明從起點到終點弧線繞中心順時針方向，0 表明逆時針方向。
x,y 是弧終端座標。
　　前兩個參數和後兩個參數就很少說了，很簡單；下面就說說中間的3個參數：
x-axis-rotation表明旋轉的角度，體會下面例子中圓弧的不一樣：

 

<svg width="320px" height="320px">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

　上面的HTML畫出下面的圖形：

 

 

 

 

從圖中能夠看到橢圓旋轉參數的不一樣致使繪製的圓弧方向不一樣，固然這個參數對正圓來講沒有影響。

large-arc-flag和sweep-flag控制了圓弧的大小和走向，體會下面例子中圓弧的不一樣：

 

<svg width="325px" height="325px">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

這個HTML繪製了下面的幾幅圖：

 

 

 

 

從上面能夠看出，這幾個參數實際上是惟一肯定一段圓弧須要的參數。這裏也看到，SVG中的圓弧比canvas中的複雜一些。


繪製三次貝塞爾曲線指令：C  x1 y1, x2 y2, x y          

　　三次貝塞爾曲線有兩個控制點，就是(x1,y1)和(x2,y2)，最後面(x,y)表明曲線的終點。體會下面的例子：

這個HTML片斷繪製了下面的圖形：

 

<svg width="190px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

 

 

 

特殊版本的三次貝塞爾曲線：S  x2 y2, x y

　　不少時候，爲了繪製平滑的曲線，須要屢次連續繪製曲線。這個時候，爲了平滑過渡，經常第二個曲線的控制點是第一個曲線控制點在曲線另一邊的映射點。這個時候可使用這個簡化版本。這裏要注意的是，若是S指令前面沒有其餘的S指令或C指令，這個時候會認爲兩個控制點是同樣的，退化成二次貝塞爾曲線的樣子；若是S指令是用在另一個S指令或者C指令後面，這個時候後面這個S指令的第一個控制點會默認設置爲前面的這個曲線的第二個控制點的一個映射點，體會一下：

 

<svg width="190px" height="160px">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

這個HTML片斷繪製以下圖形：

 

 

 

相對座標繪製指令
　　與絕對座標繪製指令的字母是同樣的，只不過所有是小寫表示。這組指令的參數中涉及座標的參數表明的是相對座標，意思就是參數表明的是從當前點到目標點的偏移量，正數就表明向軸正向偏移，負數表明向反向偏移。不過對Z指令來講，大小寫沒有區別。

　　這裏要注意，絕對座標指令與相對座標指令是能夠混合使用的。有時混合使用能夠帶來更靈活的畫法。

 

SVG path繪製注意事項：
　　繪製帶孔的圖形時要注意：外層邊的繪製須要是逆時針順序的，裏面的洞的邊的順序必須是順時針的。只有這樣繪製的圖形填充效果纔會正確。

 

 

實用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/

官方文檔：http://www.w3.org/TR/SVG11/

 

本文出自：http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html

由W3C夢想站：http://www.w3cdream.com/content-sort-5-article-479.html 聯合整理，如需轉載請註明出處

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程