SlideShare uma empresa Scribd logo
1 de 33
報告人:莊嘉峻
   2012.04
 Overview
 Feature

 參考
   Struts 2 是 MVC 框架的一種, MVC 架構主要是要讓介面開
    發者和程式開發者的程式能夠分開且能彼此合作
   JAVA 相關的框架有 JSF, Spring MVC, Struts …
   Struts 2 是以 WebWork 為基準加上 Struts 的概念所開發的




       MVC Model
 Action 類別
 UI 類別

 Interceptor

 I18n

 其他整合應用
   是一種 POJO(Plain Old Java Object ), 簡單的
    java class
     POJO   wiki
 每個 Action 繼承 ActionSupport Class
 每個 Action 就是一個服務,如檢查帳號密碼

 配置 Action ,定義在 struts.xml(MVC 的 C) ,
  決定事件要導入哪個頁面
   提供了一些支援的標籤,如
     <s:textname="hello"/>
     <s:form action=“SayHello”/>



   需引用 <%@ taglib prefix="s" uri="/struts-tags"
    %>
   Struts 2 提供了 interceptor 的功能,攔截檢
    查到 action 前後的訊息




   可參考 http://struts.apache.org/2.0.14/docs/interceptors.html
   內建就有很多的 interceptor ,如 alias, auto,autowiring,… ,文章內有說明功能就不詳述
   可以達成像
     輸入驗證格式等功能

     類型轉換

     防止多次呼叫

     文件上傳
透過引用 interceptor-ref 在 stucts.xml 中
如
       <action name="login" class="tutorial.Login">
       <interceptor-ref name="timer"/>
       <interceptor-ref name="logger"/>
       <result name="input">login.jsp</result>
       <result name="success" type="redirectAction">/secure/home</result>
       </action>

   此外也可以自行定義
   Interceptor 是有順序的
   如 <action name="TestLogger" class="vaannila.TestLoggerAction">
   <interceptor-ref name="logger"/>
   <interceptor-ref name="timer"/>
   <result name="success">/success.jsp</result>
   </action>
   先執行 logger 在執行 timer


   若先執行 Timer 在執行 logger
 多國語言支援
 在 struts.xml 加入 以下的敘述
     <constant  name="struts.custom.i18n.resources"
      value="applicationResource" />
     value 就是自訂的名稱,

     struts2 資源檔的定義格式就是 自訂的名稱 _ 語系簡碼 _ 國
      家簡碼 .properties  例如 :
      applicationResource_zh_tw.properties
     properties 檔的設定文字必須要先轉成 unicode 的形式字串

     在 java 中 可以呼叫 native2ascii 來協助達成 , native2ascii -
      編碼 來源檔案 目標檔案
   在 JSP 下加入
     <s:text   name="hello"/>
 則網頁就會根據目前使用的語言來搜尋相關的
  資源檔,若找不到的話就是使用預設的
 要改預覽語言的方式:
     IE:工具 -> 網際網路選項 -> 語言
     Firefox :工具 -> 選項 -> 內容 -> 語言 -> 選擇
   整合 Dojo, DWR 等函式庫達成 AJAX
     Dojo
        http://demos.dojotoolkit.org/demos/

     DWR
        http://directwebremoting.org/dwr/introduction/index.html

   整合 Spring MVC, JSF, SiteMesh, jsper report,
    jfreechart, hibernate
   Spring MVC
   MVC framework 的一種
   wiki
 JSF
   MVC framework 的一種
   Wiki
 SiteMesh
   網頁介面的框架
   http://www.sitemesh.org/overview.html
 Jasper   Report
   利用  JAVA 產生得報表、分析圖
   Demo Page

 JFreeChart
   Java的繪圖分析軟體
   Demo Page

 Hibernate
  將  Java 中的物件與物件關係,映射至關聯式資料庫中
    的表格與表格之間的關係, Hibernate 提供了這個過
    程中自動對應轉換的方案。
   官網
補充



     21
   <s:url action="hello" var="helloLink">
        <s:param name="userName">Bruce Phillips</s:param>
   </s:url>
   <p>
   <a href="${helloLink}">Hello Bruce Phillips</a></p>
<p>Get your own personal hello by filling out
 and submitting this form.</p>
 <s:form action="hello">
     <s:textfield   name="userName" label="Your name" /
      >
     <s:submit value="Submit" />

   </s:form>
 當然 Javascript 或 YUI, JQUERY 等方式都可
  以在 Client 端驗證
 不過有些驗證方式有必要藏在 server 端
    如   註冊碼的演算法邏輯
   可以參考 範例
       struts-2-validation-example
   注意地方
       X.jsp
          Action   要和 struct.xml 定義的名稱對到
       X.java
          在執行的      JAVA 檔下加入 Function (public void
           validate())
          錯誤訊息 addFieldError( “checkfield", “errormessage." );

       Struct.xml
          Action   下多一個標籤 <result name="input">X.jsp</result>
   <s:actionerror />
      自訂的錯誤訊息顯示地方

   <s:fielderror/>
      使用 addFieldError 後顯示的地方

   <s:form action=“x" method="post“>
      Form 格式

   <s:textfield name="username" label ="username" size="20" />
      文字輸入 , KEY 前面的說明 label 如 ‘帳號’

   <s:password name="password" label ="password" size="20" />
        密碼
   <s:submit method=“execute” label =“login” align=“center" />
        Submit
   可以參考 範例
        Struts 2 Validation Using XML File Example
   加入一個 XML
      原本定義的 action 是 x.java 的話
      檢查的 XML x-validation.xml

   Sample
   <!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
    "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
   <validators>
         <field name="userName"> <field-validator type="requiredstring">    <message>User Name is required.</
          message> </field-validator> </field>
         <field name="password"> <field-validator type="requiredstring">  <message key="password.required" />
            </field-validator> </field>
   </validators>
 實際套入範例會錯誤…
 錯誤訊息
     2012/2/23   下午 02:15:01
      com.opensymphony.xwork2.util.logging.commons.C
      ommonsLogger error
     嚴重的 : Caught exception while loading file
      vaannila/Login-validation.xml
 [1] Apache Struts 2
 [2] Struts 2 wiki

 [3] Struts Get Star t
Structs2簡介

Mais conteúdo relacionado

Mais procurados

Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkit
jay li
 
J2ee经典学习笔记
J2ee经典学习笔记J2ee经典学习笔记
J2ee经典学习笔记
yiditushe
 
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
 
常用数据库的链接方法
常用数据库的链接方法常用数据库的链接方法
常用数据库的链接方法
wensheng wei
 
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
Eric ShangKuan
 
Jdbc中驱动加载的过程分析(下)
Jdbc中驱动加载的过程分析(下)Jdbc中驱动加载的过程分析(下)
Jdbc中驱动加载的过程分析(下)
yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
appollo0312
 
Introduction to CodeIgniter
Introduction to CodeIgniterIntroduction to CodeIgniter
Introduction to CodeIgniter
Chun-Kai Wang
 
1.oracle 11g 用户管理新功能
1.oracle 11g 用户管理新功能1.oracle 11g 用户管理新功能
1.oracle 11g 用户管理新功能
WASecurity
 
Kissy模块化实践
Kissy模块化实践Kissy模块化实践
Kissy模块化实践
yiming he
 
第五章解答
第五章解答第五章解答
第五章解答
jiannrong
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解
wensheng wei
 

Mais procurados (20)

JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
 
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit TestingASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
 
系統架構設計 Android
系統架構設計  Android系統架構設計  Android
系統架構設計 Android
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkit
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
 
Qwrap jss
Qwrap jssQwrap jss
Qwrap jss
 
J2ee经典学习笔记
J2ee经典学习笔记J2ee经典学习笔记
J2ee经典学习笔记
 
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
 
常用数据库的链接方法
常用数据库的链接方法常用数据库的链接方法
常用数据库的链接方法
 
透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps透過 Windows Azure Mobile Services 開發各平台 Apps
透過 Windows Azure Mobile Services 開發各平台 Apps
 
Jdbc中驱动加载的过程分析(下)
Jdbc中驱动加载的过程分析(下)Jdbc中驱动加载的过程分析(下)
Jdbc中驱动加载的过程分析(下)
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Introduction to CodeIgniter
Introduction to CodeIgniterIntroduction to CodeIgniter
Introduction to CodeIgniter
 
1.oracle 11g 用户管理新功能
1.oracle 11g 用户管理新功能1.oracle 11g 用户管理新功能
1.oracle 11g 用户管理新功能
 
Role Based Access Control Fundamental
Role Based Access Control FundamentalRole Based Access Control Fundamental
Role Based Access Control Fundamental
 
Kissy模块化实践
Kissy模块化实践Kissy模块化实践
Kissy模块化实践
 
设计模式MVC
设计模式MVC设计模式MVC
设计模式MVC
 
J query
J queryJ query
J query
 
第五章解答
第五章解答第五章解答
第五章解答
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解
 

Semelhante a Structs2簡介

Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记
yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
yiditushe
 
Struts快速学习指南
Struts快速学习指南Struts快速学习指南
Struts快速学习指南
yiditushe
 
Javascript之昨是今非
Javascript之昨是今非Javascript之昨是今非
Javascript之昨是今非
Tony Deng
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
 
Script with engine
Script with engineScript with engine
Script with engine
Webrebuild
 
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
Justin Lin
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
jay li
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
 
Spring入门纲要
Spring入门纲要Spring入门纲要
Spring入门纲要
yiditushe
 
4, workflow tables & api
4, workflow tables & api4, workflow tables & api
4, workflow tables & api
ted-xu
 

Semelhante a Structs2簡介 (20)

Struts学习笔记
Struts学习笔记Struts学习笔记
Struts学习笔记
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Js培训
Js培训Js培训
Js培训
 
Struts快速学习指南
Struts快速学习指南Struts快速学习指南
Struts快速学习指南
 
JavaScript 技術手冊第 5 章
JavaScript 技術手冊第 5 章JavaScript 技術手冊第 5 章
JavaScript 技術手冊第 5 章
 
Javascript之昨是今非
Javascript之昨是今非Javascript之昨是今非
Javascript之昨是今非
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
 
Script with engine
Script with engineScript with engine
Script with engine
 
Hibernate
HibernateHibernate
Hibernate
 
Jsp
JspJsp
Jsp
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
Spring 2.0 技術手冊第八章 - View 層方案、Web 框架整合
 
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
從 Web Site 到 Web Application,從 Web Services 到 Mobile Services
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
 
Les3
Les3Les3
Les3
 
Spring入门纲要
Spring入门纲要Spring入门纲要
Spring入门纲要
 
JdonFramework中文
JdonFramework中文JdonFramework中文
JdonFramework中文
 
lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫lwdba – 開放原始碼的輕量級資料庫存取程式庫
lwdba – 開放原始碼的輕量級資料庫存取程式庫
 
4, workflow tables & api
4, workflow tables & api4, workflow tables & api
4, workflow tables & api
 

Structs2簡介

  • 3. Struts 2 是 MVC 框架的一種, MVC 架構主要是要讓介面開 發者和程式開發者的程式能夠分開且能彼此合作  JAVA 相關的框架有 JSF, Spring MVC, Struts …  Struts 2 是以 WebWork 為基準加上 Struts 的概念所開發的 MVC Model
  • 4.  Action 類別  UI 類別  Interceptor  I18n  其他整合應用
  • 5. 是一種 POJO(Plain Old Java Object ), 簡單的 java class  POJO wiki  每個 Action 繼承 ActionSupport Class  每個 Action 就是一個服務,如檢查帳號密碼  配置 Action ,定義在 struts.xml(MVC 的 C) , 決定事件要導入哪個頁面
  • 6.
  • 7.
  • 8. 提供了一些支援的標籤,如  <s:textname="hello"/>  <s:form action=“SayHello”/>  需引用 <%@ taglib prefix="s" uri="/struts-tags" %>
  • 9.
  • 10. Struts 2 提供了 interceptor 的功能,攔截檢 查到 action 前後的訊息  可參考 http://struts.apache.org/2.0.14/docs/interceptors.html  內建就有很多的 interceptor ,如 alias, auto,autowiring,… ,文章內有說明功能就不詳述
  • 11. 可以達成像  輸入驗證格式等功能  類型轉換  防止多次呼叫  文件上傳
  • 12. 透過引用 interceptor-ref 在 stucts.xml 中 如  <action name="login" class="tutorial.Login">  <interceptor-ref name="timer"/>  <interceptor-ref name="logger"/>  <result name="input">login.jsp</result>  <result name="success" type="redirectAction">/secure/home</result>  </action>  此外也可以自行定義
  • 13. Interceptor 是有順序的  如 <action name="TestLogger" class="vaannila.TestLoggerAction">  <interceptor-ref name="logger"/>  <interceptor-ref name="timer"/>  <result name="success">/success.jsp</result>  </action>  先執行 logger 在執行 timer  若先執行 Timer 在執行 logger
  • 14.
  • 15.  多國語言支援  在 struts.xml 加入 以下的敘述  <constant name="struts.custom.i18n.resources" value="applicationResource" />  value 就是自訂的名稱,  struts2 資源檔的定義格式就是 自訂的名稱 _ 語系簡碼 _ 國 家簡碼 .properties  例如 : applicationResource_zh_tw.properties  properties 檔的設定文字必須要先轉成 unicode 的形式字串  在 java 中 可以呼叫 native2ascii 來協助達成 , native2ascii - 編碼 來源檔案 目標檔案
  • 16. 在 JSP 下加入  <s:text name="hello"/>  則網頁就會根據目前使用的語言來搜尋相關的 資源檔,若找不到的話就是使用預設的  要改預覽語言的方式:  IE:工具 -> 網際網路選項 -> 語言  Firefox :工具 -> 選項 -> 內容 -> 語言 -> 選擇
  • 17.
  • 18. 整合 Dojo, DWR 等函式庫達成 AJAX  Dojo  http://demos.dojotoolkit.org/demos/  DWR  http://directwebremoting.org/dwr/introduction/index.html  整合 Spring MVC, JSF, SiteMesh, jsper report, jfreechart, hibernate
  • 19. Spring MVC  MVC framework 的一種  wiki  JSF  MVC framework 的一種  Wiki  SiteMesh  網頁介面的框架  http://www.sitemesh.org/overview.html
  • 20.  Jasper Report  利用 JAVA 產生得報表、分析圖  Demo Page  JFreeChart  Java的繪圖分析軟體  Demo Page  Hibernate 將 Java 中的物件與物件關係,映射至關聯式資料庫中 的表格與表格之間的關係, Hibernate 提供了這個過 程中自動對應轉換的方案。  官網
  • 21. 補充 21
  • 22. <s:url action="hello" var="helloLink">  <s:param name="userName">Bruce Phillips</s:param>  </s:url>  <p>  <a href="${helloLink}">Hello Bruce Phillips</a></p>
  • 23. <p>Get your own personal hello by filling out and submitting this form.</p>  <s:form action="hello">  <s:textfield name="userName" label="Your name" / >  <s:submit value="Submit" />  </s:form>
  • 24.  當然 Javascript 或 YUI, JQUERY 等方式都可 以在 Client 端驗證  不過有些驗證方式有必要藏在 server 端 如 註冊碼的演算法邏輯
  • 25. 可以參考 範例  struts-2-validation-example  注意地方  X.jsp  Action 要和 struct.xml 定義的名稱對到  X.java  在執行的 JAVA 檔下加入 Function (public void validate())  錯誤訊息 addFieldError( “checkfield", “errormessage." );  Struct.xml  Action 下多一個標籤 <result name="input">X.jsp</result>
  • 26.
  • 27.
  • 28.
  • 29. <s:actionerror />  自訂的錯誤訊息顯示地方  <s:fielderror/>  使用 addFieldError 後顯示的地方  <s:form action=“x" method="post“>  Form 格式  <s:textfield name="username" label ="username" size="20" />  文字輸入 , KEY 前面的說明 label 如 ‘帳號’  <s:password name="password" label ="password" size="20" />  密碼  <s:submit method=“execute” label =“login” align=“center" />  Submit
  • 30. 可以參考 範例  Struts 2 Validation Using XML File Example  加入一個 XML  原本定義的 action 是 x.java 的話  檢查的 XML x-validation.xml  Sample  <!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">  <validators>  <field name="userName"> <field-validator type="requiredstring"> <message>User Name is required.</ message> </field-validator> </field>  <field name="password"> <field-validator type="requiredstring"> <message key="password.required" /> </field-validator> </field>  </validators>
  • 31.  實際套入範例會錯誤…  錯誤訊息  2012/2/23 下午 02:15:01 com.opensymphony.xwork2.util.logging.commons.C ommonsLogger error  嚴重的 : Caught exception while loading file vaannila/Login-validation.xml
  • 32.  [1] Apache Struts 2  [2] Struts 2 wiki  [3] Struts Get Star t

Notas do Editor

  1. Overview 相關 框架 Mvc 功能 Filter 輸入驗證 I18n Taglib AJAX 整合 Spring, JSF,SiteMesh,jsper report, jfreechart, hibernate, structs 1
  2. Model–view–controller wiki http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller#Java
  3. I18n AJAX 整合 Spring, JSF,SiteMesh,jsper report, jfreechart, hibernate, structs 1
  4. http://supermand9362787.wordpress.com/ 最後,我們總結一下給一個定義把, POJO 是一個簡單的、正規 Java 對象,它包含業務邏輯處理或持久化邏輯等,但不是 JavaBean 、 EntityBean 等,不具有任何特殊角色和不繼承或不實現任何其它 Java 框架的類或接口
  5. 要複寫 execute 回傳值要定義好
  6. S: xxx 就是 struct2 的 tag
  7. http://struts.apache.org/2.0.14/docs/interceptors.html &lt;interceptors&gt; &lt;interceptor name=&amp;quot;alias&amp;quot; class=&amp;quot;com.opensymphony.xwork2.interceptor.AliasInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;autowiring&amp;quot; class=&amp;quot;com.opensymphony.xwork2.spring.interceptor.ActionAutowiringInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;chain&amp;quot; class=&amp;quot;com.opensymphony.xwork2.interceptor.ChainingInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;conversionError&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.StrutsConversionErrorInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;clearSession&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.ClearSessionInterceptor&amp;quot; /&gt; &lt;interceptor name=&amp;quot;createSession&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.CreateSessionInterceptor&amp;quot; /&gt; &lt;interceptor name=&amp;quot;debugging&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.debugging.DebuggingInterceptor&amp;quot; /&gt; &lt;interceptor name=&amp;quot;externalRef&amp;quot; class=&amp;quot;com.opensymphony.xwork2.interceptor.ExternalReferencesInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;execAndWait&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.ExecuteAndWaitInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;exception&amp;quot; class=&amp;quot;com.opensymphony.xwork2.interceptor.ExceptionMappingInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;fileUpload&amp;quot; class=&amp;quot;org.apache.struts2.interceptor.FileUploadInterceptor&amp;quot;/&gt; &lt;interceptor name=&amp;quot;i18n&amp;quot; class=&amp;quot;com.opensymphony.xwork2.interceptor.I18nInterceptor&amp;quot;/&gt; … &lt;/interceptors&gt;
  8. 可參考 http://catonchuang.blogspot.com/2011/01/struts2.html
  9. &lt;s:actionerror /&gt; 是錯誤的時候顯示的標籤, 定一在 class