[ C# Web Angular 6 ]使用 TeamCity 實現 Auto Deployment ~ 進階篇

2018-09-09 / Jim Ou

最近因公司新專案要求，決定使用 Angular 6 ，經過一番努力終於成功把 Angular 6 成功的加入 C# 專案中，接著以為可以很順利的把 Angular 6 加入 Teamcity CI 中，卻意外的也花了不少時間，所以就把安裝設定的流程筆記下來，也供大家參考

Step 1.

要使用Angular 2 以上，必須先在本機安裝 node js 以及 typescript ，相對的我們也需要在TeamCity的Server上安裝，以下提供載點

TypeScript : https://www.typescriptlang.org/
Node JS : https://nodejs.org/en/

Step 2.

接著開始在 TeamCity 上設定 Auto Build ，這個部分原本打算用比較偷懶的方式，直接把Angular 6 的 node_modules 加入專案中並且 Push 到 Git Server上面，可是檔案真的太大了，過程中一直不太順利，所以後來還是決定在 TeamCity Build 之前，再去Install node_modules ，所以這一個部分我們需要再 TeamCity 的 Build Step 加上一段Command 的指令

螢幕快照 2018-09-09 下午3.48.59

螢幕快照 2018-09-09 下午3.50.14

Runner type : Command Line
Working directory : 選擇Web專案的目錄
Command script : npm install 他會去讀取Web專案下的package.json並安裝angular 的 module

Step 4.

接著再加一個Build Step 用來Build Project以及Publish to IIS

這段的詳細設定可以參考之前的文章：

螢幕快照 2018-09-09 下午4.00.01

Step 5.

到這一步基本上已經完成設定了，但是因為我沒有把node_modules加入專案中

螢幕快照 2018-09-09 下午4.12.32

在.csproj的專案檔中就不會去產生node_modules，所以相對的TeamCity在Publish時也不會把 node_modules Publish 到我們 IIS Web 的目錄下，這時候在瀏覽器開啟網頁時就會發現少了很多JS檔案，接著下一個步驟我們就要來解決這個問題

Step 6.

如果沒有把node_modules 加入專案中，在Publish時就不會被複製到 IIS Web 目錄下，所以這邊的解決方式是在 Publish 的設定檔中，加入一段設定，跟 MSBuild Tools 説哪一個資料夾也要Publish 上去

開啟Publish設定檔

螢幕快照 2018-09-09 下午4.22.10

在<Project>前面加入以下設定

  <Target Name="CustomCollectFiles">
    <ItemGroup>
      <_CustomFiles Include="node_modules\**\*" />
      <FilesForPackagingFromProject Include="%(_CustomFiles.Identity)">
        <DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>
  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>

    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      CustomCollectFiles;
      $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>

<_CustomFiles Include="node_modules\**\*" />

<DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>

</FilesForPackagingFromProject>

</ItemGroup>

</Target>

CustomCollectFiles;

$(CopyAllFilesToSingleFolderForPackageDependsOn);

</CopyAllFilesToSingleFolderForPackageDependsOn>

CustomCollectFiles;

$(CopyAllFilesToSingleFolderForMsdeployDependsOn);

</CopyAllFilesToSingleFolderForMsdeployDependsOn>

</PropertyGroup>

螢幕快照 2018-09-09 下午4.26.06

接著就可以把這一段直接Push到 Git Server上面，等 TeamCity Run 完之後就會發現node_modules已經成功的被複製到IIS中了

以上就是Angular 6與 TeamCity 整合的簡單筆記，有什麼疑問也歡迎各位前輩提出來一起討論，謝謝～

ASP. NET Web Api 2 學習筆記

2018-06-01 / Jim Ou

最近因為要把公司的一個 Java Web Api 的 Project，轉換成 ASP. NET Web Api 2 ，所以花了一點時間去研究一下ASP. NET Web Api 2，也特地花了錢去外面拜師求藝，就是希望可以掌握其中的精髓，以下就是對ASP. NET Web Api 2的一點心得及筆記～

一、了解Rest

REST(Representational State Transfer) 表現層狀態轉換
是Roy Thomas Fielding博士於2000年在他的博士論文中提出
為了設計不同系統在網路傳遞資料而生的架構風格
是一種風格而不是標準
通常基於使用HTTP，URI，和XML以及HTML這些現有的廣泛流行的協定和標準。

二、Restful的特色

統一介面(Uniform Interface) ：

以資源(Resources)為基礎，透過唯一的URI存取各個資源
透過Json/XML將Request/Response物件表現(Representations)出來

無狀態(Stateless) : 所有狀態都記錄在Client端，Server端不會紀錄狀態
可快取(Cacheable) ：回應的資料可快取，用以改善效率
分層設計(Layered System) ：不同層級的元件可以分工，提高擴充性
客戶伺服器分離模式(Client-Server) ：透過單一介面提高Client-Server互動的可見性

三、符合Restful的限制

客戶伺服器分離模式(Client-Server)
無狀態(Stateless)
可快取(Cacheable)
統一介面(Uniform Interface)
分層設計(Layered System)

只要符合上述6點我們即可以說此Web Api符合Restful 風格設計(Http即是符合Restful的設計)

四、Restful Web Api的設計

統一介面(Uniform Interface)，來表達所使用資源 Ex : ~/api/books

將動作(Action)，放在Http Method中 Ex : Get ~/api/books

回應狀態放置於Http StatusCode 中 Ex : HTTP/1.1 201 Created

五、常用的Http Method及狀態碼

Function	URI	Http Method	HTTP StatusCode
新增	/books	POST	201,400,401,409,500
修改	/books/{id}	PUT	204,400,401,404,409,500
刪除	/books/{id}	Delete	204,400,401,404,409,500
查詢	/books/{id}	Get	200,400,401,409,500
清單	/books	Get	200,400,401,409,500

一個好的Api設計，是可以從回傳的狀態碼，就可以看出Api成功或失敗以及失敗的原因是什麼，所以定義回傳的狀態碼是很重要的

Http Status Code 參考： http://www.restapitutorial.com/httpstatuscodes.html

了解基本的Web Api設計風格後我們就可以來實作囉～

Step 1 在Visual Studio新增一個Web Api 2的專案

螢幕快照 2018-05-29 下午5.30.39

Step 2 新增一個ApiController => BooksController

螢幕快照 2018-05-29 下午5.35.28

Step 3 路由設定，Web Api有兩種路由設定

傳統路由：由 WebApiConfig.cs 來定義路由規則與集中管理
屬性路由：由Controller來定義Api路由

所以我們可以先打開App_Start\WebApiConfig.cs來看一下，會發現專案原本就預設把兩種路由模式都開啟了

namespace WebApiDemo
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 設定和服務

            // Web API 屬性路由
            config.MapHttpAttributeRoutes();

            // Web API 傳統路由
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

namespace WebApiDemo

{

public static class WebApiConfig

{

public static void Register(HttpConfiguration config)

{

// Web API 設定和服務

// Web API 屬性路由

config.MapHttpAttributeRoutes();

// Web API 傳統路由

config.Routes.MapHttpRoute(

name: "DefaultApi",

routeTemplate: "api/{controller}/{id}",

defaults: new { id = RouteParameter.Optional }

);

}

基於設計Restful 的彈性清楚的路由結構，會比較建議使用屬性路由來設計

Step 4 於BooksController加入屬性路由設定

1. 在動作方法上加上[Route]屬性規則

// GET: api/Books
[Route("api/books")]
public IEnumerable<string> Get()
{
   return new string[] { "value1", "value2" };
}

// GET: api/Books

[Route("api/books")]

public IEnumerable<string> Get()

{

return new string[] { "value1", "value2" };

}

2. 指定路由參數型別

// GET: api/Books/5
[Route("api/books/{cat:int}")]
public string GetBooksByCategory(int cat)
{
    return "value";
}

// GET: api/Books/5

[Route("api/books/{cat:int}")]

public string GetBooksByCategory(int cat)

{

return "value";

}

3.路由參數Default Value

// GET: api/Books/5
[Route("api/books/{cat:int=1}")]
public string GetBooksByCategory(int cat)
{
    return "value";
}

// GET: api/Books/5

[Route("api/books/{cat:int=1}")]

public string GetBooksByCategory(int cat)

{

return "value";

}

// GET: api/Books/5
[Route("api/books/{cat:int?}")]
public string GetBooksByCategory(int cat=1)
{
    return "value";
}

// GET: api/Books/5

[Route("api/books/{cat:int?}")]

public string GetBooksByCategory(int cat=1)

{

return "value";

}

以上兩種會有相同的結果

4.指定路由套用順序(預設為0，數字越小表示優先權越高)

先比對是否設定路由順序 ( Order ) (預設值為 0) ex : [Route(“api/books”)]
純字串、無參數、無限制的路由 (Literal segments) ex : [Route(“api/books”)]
有路由參數，且有套用限定詞 ex : [Route(“api/books/{id:int}”)]
有路由參數，且無套用限定詞 ex : [Route(“api/books/{id}”)]
有萬用路由參數 (Wildcard parameter) 且有套用限定詞 ex : [Route(“{*id:int}”)]
有萬用路由參數 (Wildcard parameter) 且無套用限定詞 ex : [Route(“{*id}”)]

// GET: api/Books/5
[Route("api/books/{cat:int?} , Order=1")]
public string GetBooksByCategory(int cat=1)
{
    return "value";
}

// GET: api/Books/5

[Route("api/books/{cat:int?} , Order=1")]

public string GetBooksByCategory(int cat=1)

{

return "value";

}

5.在Controller加上[RoutePrefix]

    [RoutePrefix("api/books")]
    public class BooksController : ApiController
    {
        // GET: api/Books
        [Route("")]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET: api/Books/5
        [Route("{cat:int}")]
        public string GetBooksByCategory(int cat)
        {
            return "value";
        }

        // GET: api/Books/5
        [Route("{id:int=1}")]
        public string GetBooksById(int id)
        {
            return "value";
        }

        // POST api/others/5/books (用 ~ 可以覆寫 RoutePrefix 設定)
        [Route("~/api/others/{other:int}/books")]
        public void Post([FromBody]string value)
        {
        }

    }

[RoutePrefix("api/books")]

public class BooksController : ApiController

{

// GET: api/Books

[Route("")]

public IEnumerable<string> Get()

{

return new string[] { "value1", "value2" };

}

// GET: api/Books/5

[Route("{cat:int}")]

public string GetBooksByCategory(int cat)

{

return "value";

}

// GET: api/Books/5

[Route("{id:int=1}")]

public string GetBooksById(int id)

{

return "value";

}

// POST api/others/5/books (用 ~ 可以覆寫 RoutePrefix 設定)

[Route("~/api/others/{other:int}/books")]

public void Post([FromBody]string value)

{

}

最後我們可以用PostMan實際測試一下

螢幕快照 2018-05-30 下午6.43.23

以上就是屬性路由的介紹，接下來要來實作一下也很重要的，如何去定義自己的回應內容～

Step 5 Web Api 的 Action Result，總共會有4大類

void : 預設回應 HTTP 204 ，不會有內容
IEnumerable<T> : 任意型別，預設回應 HTTP 200，自動序列化物件到 HTTP 回應主體 (自動判斷 JSON 或 XML 格式)
IHttpActionResult : 透過呼叫 ExecuteAsync 方法來建立 HttpResponseMessage 物件
HttpResponseMessage : 此為 Web API 較為底層的回應訊息物件 (可回應任意內容) 只要針對該物件的屬性寫入資料，就可以自動產生 HTTP 回應訊息

1. void => 不會有回傳內容，回傳代碼為204

// PUT: api/Books/5
public void Put(int id)
{
}

// PUT: api/Books/5

public void Put(int id)

{

}

用PostMan實際測試

螢幕快照 2018-05-29 下午7.11.15

2. IEnumerable<T> => 回傳任意型別，回傳代碼為200

// GET: api/Books
[Route("")]
public IEnumerable<string> Get()
{
   return new string[] { "value1", "value2" };
}

// GET: api/Books

[Route("")]

public IEnumerable<string> Get()

{

return new string[] { "value1", "value2" };

}

用PostMan實際測試

螢幕快照 2018-05-30 下午6.43.23

3. IHttpActionResult => 可自定義回傳代碼及內容，較常使用

可以直接呼叫System.Web.Http.Results 中的代碼類別生成回傳物件

EX : System.Web.Http.Results.Ok(“Hello!”) => 200
System.Web.Http.Results.BadRequest(“Hello!”) => 400
System.Web.Http.Results.NotFound(“Hello!”) => 404
可參考官網的說明

// GET: api/Books/5
[Route("{id:int=1}")]
public IHttpActionResult GetBooksById(int id)
{
   return Ok("Success!!!");
}

// GET: api/Books/5

[Route("{id:int=1}")]

public IHttpActionResult GetBooksById(int id)

{

return Ok("Success!!!");

}

用PostMan實際測試

螢幕快照 2018-05-31 下午11.49.48

4. HttpResponseMessage => 最底層物件，可回傳任意內容，有兩種建立方式

透過 Request.CreateResponse 建立 HttpResponseMessage 物件

[Route("CreateBook")]
[HttpPost]
public HttpResponseMessage CreateBook([FromBody]string value)
{
    BooksEntity booksEntity = new BooksEntity
    {
       BookName = "Create Harry Porter!"
    };
    return Request.CreateResponse<BooksEntity>(HttpStatusCode.Created, booksEntity,
    GlobalConfiguration.Configuration.Formatters.JsonFormatter);
}

[Route("CreateBook")]

[HttpPost]

public HttpResponseMessage CreateBook([FromBody]string value)

{

BooksEntity booksEntity = new BooksEntity

{

BookName = "Create Harry Porter!"

};

return Request.CreateResponse<BooksEntity>(HttpStatusCode.Created, booksEntity,

GlobalConfiguration.Configuration.Formatters.JsonFormatter);

}

用PostMan實際測試

螢幕快照 2018-06-01 上午12.27.01

直接建立 HttpResponseMessage 物件

[Route("UpdateBook")]
[HttpPost]
public HttpResponseMessage UpdateBook([FromBody]string value)
{
    BooksEntity booksEntity = new BooksEntity()           
    {
        BookName = "Update Harry Porter!"
    };
    return new HttpResponseMessage()
    {
         StatusCode = HttpStatusCode.OK,
         Content = new ObjectContent<BooksEntity>(booksEntity, GlobalConfiguration.Configuration.Formatters.JsonFormatter)
    };
}

[Route("UpdateBook")]

[HttpPost]

public HttpResponseMessage UpdateBook([FromBody]string value)

{

BooksEntity booksEntity = new BooksEntity()

{

BookName = "Update Harry Porter!"

};

return new HttpResponseMessage()

{

StatusCode = HttpStatusCode.OK,

Content = new ObjectContent<BooksEntity>(booksEntity, GlobalConfiguration.Configuration.Formatters.JsonFormatter)

};

}

用PostMan實際測試

螢幕快照 2018-06-01 上午12.35.48

以上就是Web Api設計風格，路由，回傳型態及回傳代碼的簡單介紹，因為也是初學者，所以內容如有錯誤或是需要更精進的地方也歡迎大家指教！

ASP. NET Web Api 2 透過 JWT 進行資料驗證

2018-04-18 / Jim Ou

最近因專案需求開始接觸Web Api，在開發過程中為了要符合Restful中的「無狀態(Stateless)」，所以在資料驗證的部分就跟以往在Server Side判斷資料狀態的做法完全相反，必須把狀態儲存在Client端才符合Stateless，因此就開始在網路上看了一些資料，最後決定使用簡單又容易上手的JWT來做資料驗證。

JWT全名為JSON Web Token，是把資料加密後透過JSON的格式傳遞，總共分為3個部分header、payload和signature，並透過標點符號「.」將其串接起來，而這3個部分都會在前端透過Base64來解密，並且返回JSON格式的資料

header包含了加密演算法及token類型這兩項數據

{
  "alg": "HS256",
  "typ": "JWT"
}

{

"alg": "HS256",

"typ": "JWT"

}

payload主要是存放資料包含JWT規範的標準數據及自定義的數據

{
  iss：提供者 ==>為jwt標準數據
  sub：主旨 ==> 為jwt標準數據
  exp：過期時間 ==> 為jwt標準數據
  iat：創建時間 ==> 為jwt標準數據
  score : 80 ==> 為自定義數據
}

{

iss：提供者 ==>為jwt標準數據

sub：主旨 ==> 為jwt標準數據

exp：過期時間 ==> 為jwt標準數據

iat：創建時間 ==> 為jwt標準數據

score : 80 ==> 為自定義數據

}

signature主要是存放對header 及 payload加密的簽章演算法的字符串(ex: HS256，HS512 …等)

最後再將組好的字串前面加上Bearer存放至Http Request的 header中

螢幕快照 2018-04-08 下午5.22.28

在開始時做前，可以先看一下JWT的流程圖喔～

jwt-diagram

圖片來源

client 傳送帳號密碼作為驗證的資料
server將帳號密碼透過自定義的key及演算法加密後組成JWT的格式回傳至client
client透過base64來解密成JSON格式
client send request時，在header 的 Authorization中加入bearer + token
server必須使用相同的key及演算法解密驗證資料，如果沒錯即回傳client要求的資料

大致了解JWT流程之後，接下來就可以來實作囉～

step 1. 首先我們從NuGet安裝JWT的加密工具jose-jwt

螢幕快照 2018-04-11 下午5.37.11

step 2. 建立一個類別JwtAuthUtil.cs，負責產生token

螢幕快照 2018-04-11 下午5.49.29

加入此段加密產生token的程式碼

public class JwtAuthUtil
{
    public string GenerateToken()
    {
        string secret = "myJwtAuthDemo";//加解密的key,如果不一樣會無法成功解密
        Dictionary<string, Object> claim = new Dictionary<string, Object>();//payload 需透過token傳遞的資料
        claim.Add("Account", "jim");
        claim.Add("Company", "appx");
        claim.Add("Department", "rd");
        claim.Add("Exp", DateTime.Now.AddSeconds(Convert.ToInt32("100")).ToString());//Token 時效設定100秒
        var payload = claim;
        var token = Jose.JWT.Encode(payload, Encoding.UTF8.GetBytes(secret), JwsAlgorithm.HS512);//產生token
        return token;
    }
}

public class JwtAuthUtil

{

public string GenerateToken()

{

string secret = "myJwtAuthDemo";//加解密的key,如果不一樣會無法成功解密

Dictionary<string, Object> claim = new Dictionary<string, Object>();//payload 需透過token傳遞的資料

claim.Add("Account", "jim");

claim.Add("Company", "appx");

claim.Add("Department", "rd");

claim.Add("Exp", DateTime.Now.AddSeconds(Convert.ToInt32("100")).ToString());//Token 時效設定100秒

var payload = claim;

var token = Jose.JWT.Encode(payload, Encoding.UTF8.GetBytes(secret), JwsAlgorithm.HS512);//產生token

return token;

}

step 3. 建立一個LoginController : ApiController 帳號密碼正確的話就呼叫這個方法後回傳token

public class LoginController : ApiController
{
    public Object Post(LoginRequest loginRequest)
    {
        if( loginRequest.account == "jim" && loginRequest.password == "12345")
        {
            JwtAuthUtil jwtAuthUtil = new JwtAuthUtil();
            string jwtToken = jwtAuthUtil.GenerateToken();
            return new
            {
                status = true ,
                token = jwtToken
            };
        }
        else
        {
            return new
            {
                status = false,
                token = "Account Or Password Error"
            };
        }
    }
}

public class LoginController : ApiController

{

public Object Post(LoginRequest loginRequest)

{

if( loginRequest.account == "jim" && loginRequest.password == "12345")

{

JwtAuthUtil jwtAuthUtil = new JwtAuthUtil();

string jwtToken = jwtAuthUtil.GenerateToken();

return new

{

status = true ,

token = jwtToken

};

}

else

{

return new

{

status = false,

token = "Account Or Password Error"

};

}

step 4. 接下來我們可以先啟動專案，用PostMan來測試一下是否有成功取得token

螢幕快照 2018-04-12 上午11.07.10

由上圖可知我們經由帳號密碼登錄已經成功取得token了～

接下來我們每個呼叫api的動作都會使用取得的token來做身份驗證，所以我們需要加入驗證token是否正確的程式碼。由於可能會有很多隻不同功能的api，所以我們驗證的程式把它寫在request一定會經過的ActionFilter中，就不用每隻api都需要去呼叫這段程式碼，只需把不需驗證的api在裡面做排除的動作即可。

step 5. 新增一個 JwtAuthFilter 繼承 ActionFilterAttribute，並且Override OnActionExecuting這個方法，在這個方法中我們除了要驗證Token是否正確，還會判斷token時效是否過期，並且排除Login不需驗證

public class JwtAuthFilter : ActionFilterAttribute
{
    public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext)
    {
        string secret = "myJwtAuthDemo";//加解密的key,如果不一樣會無法成功解密
        var request = actionContext.Request;
        if (!WithoutVerifyToken(request.RequestUri.ToString()))
        {
            if (request.Headers.Authorization == null || request.Headers.Authorization.Scheme != "Bearer")
            {
                throw new System.Exception("Lost Token");
            }
            else
            {
                //解密後會回傳Json格式的物件(即加密前的資料)
                var jwtObject = Jose.JWT.Decode<Dictionary<string, Object>>(
                request.Headers.Authorization.Parameter,
                Encoding.UTF8.GetBytes(secret),
                JwsAlgorithm.HS512);

                if (IsTokenExpired(jwtObject["Exp"].ToString()))
                {
                    throw new System.Exception("Token Expired");
                }
            }
        }

        base.OnActionExecuting(actionContext);
    }

    //Login不需要驗證因為還沒有token
    public bool WithoutVerifyToken(string requestUri)
    {
        if (requestUri.EndsWith("/Login"))
            return true;
        return false;
    }

    //驗證token時效
    public bool IsTokenExpired(string dateTime)
    {
        return Convert.ToDateTime(dateTime) < DateTime.Now;
    }

}

public class JwtAuthFilter : ActionFilterAttribute

{

public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext)

{

string secret = "myJwtAuthDemo";//加解密的key,如果不一樣會無法成功解密

var request = actionContext.Request;

if (!WithoutVerifyToken(request.RequestUri.ToString()))

{

if (request.Headers.Authorization == null || request.Headers.Authorization.Scheme != "Bearer")

{

throw new System.Exception("Lost Token");

}

else

{

//解密後會回傳Json格式的物件(即加密前的資料)

var jwtObject = Jose.JWT.Decode<Dictionary<string, Object>>(

request.Headers.Authorization.Parameter,

Encoding.UTF8.GetBytes(secret),

JwsAlgorithm.HS512);

if (IsTokenExpired(jwtObject["Exp"].ToString()))

{

throw new System.Exception("Token Expired");

}

base.OnActionExecuting(actionContext);

}

//Login不需要驗證因為還沒有token

public bool WithoutVerifyToken(string requestUri)

{

if (requestUri.EndsWith("/Login"))

return true;

return false;

}

//驗證token時效

public bool IsTokenExpired(string dateTime)

{

return Convert.ToDateTime(dateTime) < DateTime.Now;

}

接著要把這隻JwtAuthFilter註冊在Global.asax.cs的Application_Start，網站啟動時才會生效

GlobalConfiguration.Configuration.Filters.Add(new JwtAuthFilter());

1	GlobalConfiguration.Configuration.Filters.Add(new JwtAuthFilter());

step 6. 新增一個HomeController : ApiController來簡單的測試

public class HomeController : ApiController
{
    public Object Get()
    {
        return new
        {
            status = true
        };
    }
}

public class HomeController : ApiController

{

public Object Get()

{

return new

{

status = true

};

}

開啟PostMan，第一次我們測試不輸入Token，看是否會出現預期的錯誤

螢幕快照 2018-04-12 上午11.48.18

結果有出現我們自己給的Lose Token的錯誤訊息，表示Filter有成功地去驗證

接著我們輸入Token，測試是否能順利通過Filter驗證

螢幕快照 2018-04-12 上午11.54.14

如圖所示，輸入正確Token後，就成功通過Filter的驗證了～

針對Web Api使用JWT，以及使用PostMan來驗證Api的簡單介紹就到這裡，如有什麼問題也歡迎大家留言討論喔

以下附上程式碼連結供大家參考https://github.com/jimmingOu/WebApi.JWT

使用 TeamCity 實現 Auto Deployment ~ Asp.Net設定篇

2018-04-01 / Jim Ou

繼上一篇設定完Asp.Net的Auto Build之後，接下來這一篇就要來介紹Deployment After Build ，Auto Deployment 這邊會透過 Visual Studio 的 Publish 來完成，所以文章的一開始我們會需要先完成 Visual Studio 的 Publish

step 1. 在設定Visual Studio Publish之前，我們必須在IIS上安裝Web Deploy的相關軟件才能設定成功，所以一開始我們先來安裝Web Deploy

透過下圖的「取得新的網頁平台元件」來安裝Web Platform

螢幕快照 2018-03-20 上午11.48.21

點選安裝即可

螢幕快照 2018-03-20 上午11.50.37

安裝完成後IIS介面就會多出一個Web Platform的選項，如下圖

螢幕快照 2018-03-20 上午11.56.03

step 2. 點選Web platform來安裝Web deploy的相關軟件

在右上方搜尋Web deploy，接著安裝下圖紅匡處的3個軟件

螢幕快照 2018-03-20 下午12.01.13

安裝完成後就會發現Server那一層多了一些選項

螢幕快照 2018-03-23 下午6.08.58

Application也多了一個項目

螢幕快照 2018-03-23 下午6.09.14

step 3 點選Sever那一層的Management Service，啟動remote connection

螢幕快照 2018-03-26 下午12.19.14

螢幕快照 2018-03-23 下午6.13.17

ps. 記得先stop才能修改喔，修改後也記得start

step 4 在Application點選IIS Manager Permission，加入Server上存在的帳號(VS Publish時要用的)

螢幕快照 2018-03-23 下午6.09.14 螢幕快照 2018-03-23 下午6.15.26

step 5. 將剛剛設定的帳號jim加入網站目錄下的權限，這樣才可以對這個網站存取

螢幕快照 2018-03-26 下午1.52.39 螢幕快照 2018-03-26 下午1.52.54

step 5. 記得打開Webdeploy 預設的port : 8172

螢幕快照 2018-03-26 下午12.33.24

step 7 接著我們回到Visual Studio，在專案上按右鍵 >> 發行

螢幕快照 2018-03-26 下午1.58.18

step 8 選擇IIS >> 發行

螢幕快照 2018-03-26 下午2.01.17

step 9 輸入發行相關設定後，可以驗證連線，沒問題後就可以儲存

伺服器：Server的遠端ip or DNS Name

網站名稱：IIS上建立的網站名稱，也可使用預設的Default Web Site

使用者名稱與密碼：剛才加入Permission的帳號密碼

目的地URL : 發行後欲開啟網站的網址

螢幕快照 2018-03-26 下午2.06.53

到這邊我們已經完成從Visual Stusio發行到IIS 的設定，大家也可以發行看看是否可以成功把網站Deploy 到IIS

接下來TeamCity就準備透過剛剛的設定來幫我們Auto Deploy Web Site

step 10 我們回到TeamCity並且進入Build Step的設定畫面，點選Edit

螢幕快照 2018-03-26 下午2.19.26

step 11 在最下方的Command line parameters輸入以下內容

/p:DeployOnBuild=True
/p:PublishProfile="CustomProfile"
/p:ProfileTransformWebConfigEnabled=False
/p:AllowUntrustedCertificate=true

/p:DeployOnBuild=True

/p:PublishProfile="CustomProfile"

/p:ProfileTransformWebConfigEnabled=False

/p:AllowUntrustedCertificate=true

螢幕快照 2018-03-26 下午2.18.01

PS. PublishProfile=”CustomProfile” >> CustomerProfile 是剛才我們在建立玩發行設定檔後會產生的一隻檔案CustomerProfile.pubxml，Teamcity會透過這個設定檔來幫我們Deploy，所以這隻檔案也記得要Push到Git Server上面喔～

螢幕快照 2018-03-26 下午2.25.04

最後就可以在TeamCity上測試是否可以成功Deploy囉～

PS. 最後筆者在Deploy的時候有遇到權限不足的錯誤

這邊有兩種解決方式

在CustomerProfile.pubxml加入密碼<Password>myPassword</Password>

螢幕快照 2018-03-26 下午2.35.04

2 .在Build Step 的 Command line parameters加入 /P:Password=myPassword

螢幕快照 2018-03-26 下午2.37.19

以上就是TeamCity 上 Asp.net to IIS Auto Build的簡單介紹，過程如有什麼錯誤也請大家多多指教～謝謝～～～

使用 TeamCity 實現 Auto Build ~ Asp.Net設定篇

2018-03-18 / Jim Ou

歷經一段時間終於把TeamCity Auto Build的部分告一段落，但是都是以Java Project來當範例，那Asp.Net有機會可以透過TeamCity來實現Auto Build嗎？答案是當然可以～接下來就為大家簡單的介紹Asp.Net在TeamCity上面的Auto Build

前情提要：

因為TeamCity會透過MSBuildTools來執行，所以如果電腦上面沒有MSBuildTools的話TeamCity Build Agent 就會有「Unmet requirements: MSBuildTools12.0_x86_Path 」這個錯誤訊息，最快的方式建議大家可以在TeamCity的Server裝Visual Studio就可以解決這個問題囉～(Ps. 建議安裝與開發環境相同版本的Visual Studio，不然可能會有版本不相容的問題出現)

step 1. 我們一樣到Administrator下，點選Create Project

螢幕快照 2018-03-16 下午4.35.59

step 2. 接著選取Project的Repository

螢幕快照 2018-03-16 下午4.38.26

step 3. 設定好Project後會導至Build Step的頁面，系統一樣會幫我們自動偵測Build Steps，這次只要選擇Visual Studio(sln)，接著點選Use Select 螢幕快照 2018-03-16 下午4.41.24

step 4. 最後記得點選Edit進去確認，預設的Visual Studio的版本是否跟TeamCity Server 安裝的一樣，否則可能會Build Faild

螢幕快照 2018-03-17 下午11.26.22

螢幕快照 2018-03-17 下午11.24.44

確認完成點選Save，Auto Build的部分就完成囉～

最後Java的部分可以Auto Deployment到Tomcat，JBoss….等Server上，相對的Asp.Net的部分也可以Auto Deployment 到IIS上面，下一篇在跟大家介紹一下如何在TeamCity實作Auto Deployment～

使用 TeamCity 實現 Auto Build ~ Github設定篇

2018-02-21 / Jim Ou

在介紹完TeamCity與BitBucket的AutoBuild之後，因為也很常用Github來作版本控管，所以也稍微研究一下Github的設定，其實跟BitBucket大同小異，接下來就簡單地跟大家介紹一下，TeamCity與Github之間的設定～

step 1. 首先我們在TeamCity上，Crete Project 選擇 From Github，這時候會跳出要求我們輸入Client ID and Client Secret 的視窗，我們就先停留在這個頁面

螢幕快照 2018-02-21 上午10.36.30

螢幕快照 2018-02-21 上午10.45.32

step 2. 接著我們需要到Github產生Client ID and Client Secret，首先我們先登入Github然後選擇右上角的Settings

螢幕快照 2018-02-21 上午10.47.33

step 3. 接著選擇Developer settings

螢幕快照 2018-02-21 上午10.47.46

step 4. 選擇OAuth Apps 然後點選 New OAuth App

螢幕快照 2018-02-21 上午10.47.57

step 5. 輸入自己定義的Application name，Homepage URL及 Authorization callback URL則可以到我們「step 1.」TeamCity 彈出的視窗上複製，填好相關資訊後就可以Register application

螢幕快照 2018-02-21 上午10.48.42

step 6. 將Github產生的Client ID and Client Secret填入TeamCity然後點選Save

螢幕快照 2018-02-21 上午11.08.13

螢幕快照 2018-02-21 上午10.45.32

step 7. 在TeamCity上點選Sign in to GitHub，之後TeamCity就會載入Github上的專案，接著就可以選擇自己想要AutoBuild的專案了

螢幕快照 2018-02-21 上午11.10.54

螢幕快照 2018-02-21 上午11.15.25

到這邊TeamCity及Github的相關設定已經完成，剩下的步驟跟BitBucket一樣，大家可以參考一下前幾篇文章，最後大家應該都還記得在BitBucket上有一個Webhook的功能可以在每次我們Push後及時通知TeamCity幫我們Build Project，當然Guthub上也有類似的功能～

接下來就跟大家介紹如何在Guthub上即時通知TeamCity Build Project

step 1. 我們先在Github上選擇我們要AutoBuild的專案，接著點選專案的Settings，然後點選Integration & services

ps. 這邊也可以使用Webhook的方式，設定上跟BitBucket差不多，所以這邊介紹的是GitHub另外提供的Integration & services，其實Integration & services也是Webhook一樣的概念，只是把一長串的Url拆成輸入介面給使用者用輸入的方式去做設定，這樣其實也增加了一些設定上的便利性

螢幕快照 2018-02-21 上午11.26.17

step 2. 點選Add services，然後選擇TeamCity

螢幕快照 2018-02-21 上午11.33.40

step 3. 接著輸入相關設定後點選Add service

Base url：TeamCity Server的網址

Build type：專案在TeamCity上的build configuration Id（參考此篇step 2）

Branches：如果有指定的分之才填沒有的話就勾選 Full branch ref

Username：TeamCity上的使用者名稱

Password ：TeamCity上的使用者密碼

螢幕快照 2018-02-21 上午11.44.04

到這邊Github上的即時通知已經完成設定接著就可以享受AutoBuild帶來的便利囉～～～以上就提供給大家參考，如有不對的地方也請大家多多指教～

使用 TeamCity 實現 Auto Build ~~進階設定篇

2018-02-04 / Jim Ou

繼上一篇針對Bitbucket與TeamCity的設定後，我們大致上已經完成了Project整合的部分，接下來這一篇會來實作算是比較進階的設定

GitServer即時通知TeamCity Build Project
TeamCity Auto Build完成之後，幫我們Auto Deployment到 TomCat
信件通知

Part 1. GitServer即時通知TeamCity Build Project

我們這邊依樣事先用BitBucket來做測試，而我們會使用到的設定就是Webhook(意指鉤子)，我們需要透過這個鉤子去通知TeamCity有新的Commit，接著我們就開始來設定

step 1. 我們一樣先登錄我們BitBucket的網頁，點選專案下面的設定，接著點選Webhooks >> Add Webhook

螢幕快照 2018-02-04 下午8.13.27

step 2. 接下來的畫面我們需要輸入TeamCity提供給外部Server呼叫的Url 格式範例，更多的Api可以參考官網的介紹

如下圖

http://<user name>:<user password>@<server address>/httpAuth/action.html?add2Queue=<build configuration Id>

1	http://<user name>:<user password>@<server address>/httpAuth/action.html?add2Queue=<build configuration Id>

<user name> : Teamcity 的帳號
<user password> : Teamcity 的密碼
<server address> : Teamcity 的url
<build configuration Id>: Teamcity 專案build id

範例如下

http://testuser:testpassword@appx.myteamcity.com:9998/httpAuth/action.html?add2Queue=build_id

1	http://testuser:testpassword@appx.myteamcity.com:9998/httpAuth/action.html?add2Queue=build_id

其中<build configuration Id> 大家可已到Teamcity Web ，Project > build > General Setting就可以看到build configuration Id

螢幕快照 2018-02-04 下午8.37.17

輸入完Url後我們就可以點選Save，這時候我們可以試著Push Code 到 Bitbucket ，Bitbucket就會透過Webhook的設定即時通知TeamCity程式碼有被修改，TeamCity就會自動當我們執行該Project的Build Agent，這樣的設定是不是比原本透過TeamCity本身的Trigger聰明多了呢？！

Part 2. TeamCity Auto Build完成之後，幫我們Auto Deployment到 TomCat

這個功能應該可以說是我們整合的最後一步，就是TeamCity可以幫我們自動Deploy，而這邊我們先用Tomcat來做設定

step 1. 我們先到TeamCity >> Project >> Build Step的設定，點選Add Build Step

螢幕快照 2018-02-04 下午8.58.42

step 2. 接著會到Build Step的設定頁面

Runner Type : 選擇Container Depolyer
Target : Tomcat Server 的 url
Container Type : 選擇Tomcat的版本
username : tomcat 的帳號（必須要擁有manager-script 的角色）
Password : tomcat 的密碼
Path to war archive : build完成後，產生的War檔位置

輸入完相關設定後就可以點選Save

螢幕快照 2018-02-04 下午9.01.02

最後我們就可以開始測試囉～～～

ps. 因為目前TeamCity只提供tomcat的container，其他的例如jboss，spring boot等…專案我們也可以透過Runner Type 選擇Command Line or SSH Upload的方式來達到Auto Deploy的目的喔！

part 3. TeamCity mail 通知

TamCity 可以幫我們Auto Build , Auto Deploy那可不可以寄信通知Build成功或失敗呢？當然是可以的喔～最後我們就來設定信件通知吧！！！

step 1. 首先我們先到Administrator的Email Notifier的設定

螢幕快照 2018-02-04 下午9.27.36

smtp server這邊是用Gmail的來設定，當然也可以自己架設一個smtp server(比較麻煩XD)，我們只要準備一個gmail 帳號

SMTP host : smtp.gmail.com
SMTP port : 587
Send email messages from : gmail 信箱
SMTP login : gmail 信箱
SMTP password : gmail密碼
SMTP connection : StartTLS

設定完我們可以點選Test connection測試一下設定是否可以成功寄信喔！如果測試沒問題點選Save，到這邊我們已經完成了smtp Server的設定

step 2. 接著我們要針對使用者來設定各自的寄信規則，我們先到Teamcity的使用者設定>>Notification Rules>>Add Rules

螢幕快照 2018-02-04 下午9.43.21

接著選擇該使用者需要收到通知的專案，以及通知的狀況，選擇之後點選Save

螢幕快照 2018-02-04 下午9.47.46

最後大家就可以收到TeamCity的信件通知囉～～如此一來我們Push上去的Code就有一套很好的機制幫我們Build and Deploy如果有錯誤也可以即時寄信通知我們，這樣是不是讓我們在專案的開發上可以更得心應手呢？！

TeamCity的介紹到這一篇大概也要告一個段落了，如果有什麼錯誤的地方也請各位前輩多多指教，當然還有許多更進階的功能可以使用，如果之後有用到什麼好用的功能再上來跟大家分享喔～～～

使用 TeamCity 實現 Auto Build ~ BitBucket設定篇

2018-01-28 / Jim Ou

繼上一篇安裝好TeamCity Server後，我們就可以來實作Project整合的部分了，而TeamCity也支援常見的Git Server( BitBucket，Github ………. )，在這篇實作的部分我是選擇BitBucket來當作我的Git Server，接下來就進入TeamCity 與 BitBucket設定的部分

step 1. 我們先登入TeamCity Web 接著點選右上角的Administrator 接著點選 Create Project

螢幕快照 2018-01-21 下午10.36.47

step 2. 接著我們選擇 From BitBucket Cloud

螢幕快照 2018-01-21 下午10.41.55

step 3. 因為還設定過BitBucket的Connection所以系統會自動幫我們導向設定Connection的頁面

螢幕快照 2018-01-22 上午10.28.45

step 4. 因為需要BitBucket的 key and secret來驗證連線，所以我們先登入BitBucket來取得key and secret ，我們點選BitBucket DashBoard左下角的BitBucket Setting

螢幕快照 2018-01-21 下午10.50.10

step 5. 接著點選OAuth

螢幕快照 2018-01-21 下午10.54.34

step 5. 點選 Add consumer

螢幕快照 2018-01-21 下午10.55.05

step 6. 填入相關資訊，選擇所需權限後點選save

ps. Callback url ，url ，Permissions可以照TeamCity Connection設定畫面上面的黃底提示填入即可

螢幕快照 2018-01-21 下午11.05.52

step 7. 回到OAuth的頁面後我們就可以看到Key and Secret

螢幕快照 2018-01-21 下午11.13.33

step 8.接著把Key and Secret填入TeamCity Connection 設定的頁面，然後點選Save

螢幕快照 2018-01-21 下午10.42.48

step 9. 接著就會回到Create Project的畫面，下面會出現Sign in to BitBucket的按鈕點選它

螢幕快照 2018-01-22 上午10.33.28

step 10. 登入BitBucket後就會出現BitBucket確認是否授權給TeamCity的頁面，我們點選Grant Access

螢幕快照 2018-01-22 上午10.33.54

step 11. 畫面回到Create Project會發現我們BitBucket上面的Project已經被載入了，接著我們就選擇我們要Build的專案

螢幕快照 2018-01-27 下午10.18.23

step 12. 接著會出現以下畫面，輸入密碼接著點選Proceed

螢幕快照 2018-01-27 下午10.32.09

step 13. 接著會出現以下畫面，點選Proceed

螢幕快照 2018-01-27 下午10.38.54

step 14. 接下來TeamCity會自動配置Build step，我們可以直接選擇TeamCity幫我們配置好的，當然也可以自己手動設定，設定好之後Use select

螢幕快照 2018-01-27 下午10.48.19

step 15. 接下來在以下畫面我們就可以看到有一個Bulid step，這時候我們可以點選上方的run執行看看

螢幕快照 2018-01-28 上午2.18.41

step 16. 接著我們可以點選上方Project選取自己專案接著點選Build，就可以看到Project Build成功或失敗囉～～～

螢幕快照 2018-01-28 上午2.38.35 螢幕快照 2018-01-28 上午2.38.55

step 17. 最後大家應該都會覺得，每一次Push Code都要自己來點選Run很不聰明，而TeamCity這邊也有提供trigger的功能可以去設定時間固定去判斷GitServer是否有新的Commit產生，依照下圖進入設定頁面

PS .TeamCity已經幫我們預設會有trigger了，所以我們只需要調整我們的時間即可

螢幕快照 2018-01-28 上午2.50.01

step 18. 可以選擇Globle或是選擇該專案自己的設定，這邊我們把時間設定成5秒方便測試，修改完儲存就可以囉～～這時候我們Push Code後就可以看到TeamCity會自動幫我們Build Code了～

螢幕快照 2018-01-28 上午2.50.35

PS. 下圖提供Globle的時間設定～

螢幕快照 2018-01-28 上午3.15.36

以上我們已經完成了Auto Build的設定了～但對我來說還是有美中不足的地方

例如：

需要用Trigger去偵測是否有新的Commit，可否讓GitServer即時通知呢？
Auto Build完成之後，可以幫我們Auto Deployment到 Web Server呢？

下一篇我們就會開始實作以上兩個主題，讓我們的整合可以達到最大的效益～～

使用 TeamCity 實現 Auto Build ~ 安裝篇

2018-01-20 / Jim Ou

因為工作上專案需求所以有機會接觸到 Java 專案整合的部分，也因此開始搜尋相關資料，最後決定使用TeamCity來實現 Java 整合，而我們想要達成的目標有下列幾項

當我們 push 至 git server 後，git server 去通知TeamCity
TeamCity接收到通知後可以自動下載project 並且 build 該project
把打包好的project自動deploy到tomcat server
最後在寄信通知使用者 build 成功或是失敗

而此篇先簡單介紹TeamCity安裝的部分，如果有什麼地方有問題也請大家不吝指教

安裝環境

Windows 10
Jdk 1.8
TeamCity 2017.2.1( 下載連結 )
MS SQL 2014

安裝步驟

step 1. 開起安裝檔並且點選Next

螢幕快照 2018-01-19 下午4.27.51

step 2. 接下來幾個步驟都可以直接按下一步，安裝完之後就會出現輸入TeamCity Server 要走的 port(*可依個人習慣) 輸入完點選 next

螢幕快照 2018-01-19 下午4.35.22

step 3. 設定Build Agent(*用來執行project) ，在這個階段我們使用系統預設的可以直接點選 save

螢幕快照 2018-01-19 下午4.36.40

step 4. 接著要設定Server 及agent 的Service 帳號，在這邊我們都點選第一個就好，然後點選next

螢幕快照 2018-01-19 下午4.39.03 螢幕快照 2018-01-19 下午4.39.19

step 5.選擇在完成安裝後要啟動的Server

螢幕快照 2018-01-19 下午4.43.45

step 6. 最後點選 Finish 完成安裝

螢幕快照 2018-01-19 下午4.54.45

step 7. 在瀏覽器輸入 http://localhost:9998 >> 點選 Proceed

螢幕快照 2018-01-19 下午5.00.50

step 8. database type 的部分這邊選擇MS SQL Server，選擇之後會出現紅匡中的錯誤訊息(這是正常的因為沒有MS SQL Server JDBC的driver)

螢幕快照 2018-01-19 下午5.04.48

step 9. 我們到微軟官網下載MS SQL Server JDBC( 下載連結 ) 並且把

sqljdbc.jar複製到C:\ProgramData\JetBrains\TeamCity\lib\jdbc

PS. ProgramData >> 是隱藏項目，沒看到的話記得要去資料夾選項設定

螢幕快照 2018-01-19 下午5.15.31

step 10. 點選Refresh JDBC drivera ，這個時候就會出現成功載入JDBC的訊息

螢幕快照 2018-01-19 下午5.26.03

step 11.接下來我們需要到MS SQL新增一個TeamCity的資料庫

螢幕快照 2018-01-19 下午5.28.29

step 12. 接著填入資料後點選Procced就會開始建立資料庫的Table

PS. 在這邊還有可能會遇到無法連接到資料庫的問題，可以優先至SQL Server的組態管理員檢查TCP/IP是否有Enable

螢幕快照 2018-01-20 下午11.15.06

step 13. 建立好資料庫之後會自動導向這一個頁面>>紅匡處打勾>>點選contiune

螢幕快照 2018-01-20 下午10.09.26

step 14. 這時候就會進入要求建立一組帳號密碼的頁面，輸入完成點選creat acount

螢幕快照 2018-01-20 下午11.21.35

step 15. 最後會進入Team City Web的帳號設定頁面，到這裡Team City Server的安裝已完成

螢幕快照 2018-01-20 下午11.22.54

其實Team City的安裝並不會太複雜，只要一步一步的設定基本上是不會遇到什麼問題的，如果有遇到安裝上的問題也歡迎大家提出來一起討論

下一篇將會接著設定TeamCity 與 Git Server的連動～～～

Java Struts Web 初體驗~~~

2017-11-05 / Jim Ou

近期因為負責的案子大多都是Java Web，所以也開始接觸了一些Java 的開源框架，也慢慢對Java有了更進一步的了解，而今天要介紹的就是Java Struts，Java Struts是一種走(MVC)架構的框架，跟之前學習過的Spring MVC在應用以及設定上其實有許多相似的地方，接下來就簡單的介紹一下Struts的Hello Worlds!!以及簡單的表單傳送~~~

開發工具 : Eclipse Java Neon.3 Release (4.6.3)
Struts版本 : 1.3.10
Server : Tomcat 9.0

step 1. 先下載Structs1.3.10 ( https://struts.apache.org/download.cgi )

step 2. 接著我們先從Eclipse新增一個Dynamic Web Project

struts-1

step 3. 把剛才下載好的Struts 1.3.10( \struts-1.3.10-all\struts-1.3.10\lib ) 裡面的jar檔加入參考

在專案folder上面點右，選擇Bulid Path >> Add Library

struts-2

選擇User Libraries點選Next，將( \struts-1.3.10-all\struts-1.3.10\lib ) 裡面的jar檔加入

struts-3

struts-4

step 4. 到剛才下載好的Struts1.3.10，找到 struts-blank-1.3.10.war ( struts-1.3.10\apps ) 將副檔名改成*.zip 並且解壓縮，將裡面的檔案複製到專案的WebContent下面

struts-5

這個是一個空白的範例~可以直接使用~裡面包含了核心設定檔struts-config.xml及web.xml透過這個可以加速我們Web App的開發，這時候我們可以直接用Tomcat執行此專案如果出現下圖所示的畫面代表Struts基本設定已經成功了~

struts-6

step 5. 接下來我們打開web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" 
    version="2.4">
  <display-name>StructWebDemo</display-name>
  
  <!-- Standard Action Servlet Configuration -->
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
 </servlet>


  <!-- Standard Action Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>


  <!-- The Usual Welcome File List -->
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

</web-app>

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"

version="2.4">

<display-name>StructWebDemo</display-name>

<servlet-name>action</servlet-name>

<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>

<init-param>

<param-name>config</param-name>

<param-value>/WEB-INF/struts-config.xml</param-value>

</init-param>

<load-on-startup>2</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>action</servlet-name>

<url-pattern>*.do</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

從web.xml中的<servlet>設定我們可以看到幾個重點

負責Controller工作的是ActionServlet，理論上只要是Client Request都會經過ActionServlet來發送
ActionServlet會去讀取struts-config.xml這隻設定檔其中包含了Sturts的一些相關設定
servlet-mapping設定，ActionServlet 會去處理所有來自*.do的Request

這些就是web.xml的幾個較為重要的設定~~~

step 6. 打開struts-config.xml，顧名思義這個檔案就是Struts的核心所在了

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE struts-config PUBLIC
          "-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
          "http://struts.apache.org/dtds/struts-config_1_3.dtd">
<struts-config>

	<action-mappings>
		
		<action path="/Hello" type="com.appx.action.HelloAction">			
		　　　　　<forward name="helloUser" path="/pages/Hello.jsp" />
　　　　　　　　　</action>

	
	</action-mappings>


	<!-- ======================================== Message Resources Definitions -->

	<message-resources parameter="MessageResources" />

	<plug-in className="org.apache.struts.validator.ValidatorPlugIn">
		<set-property property="pathnames"
			value="/org/apache/struts/validator/validator-rules.xml,
               /WEB-INF/validation.xml" />
	</plug-in>

</struts-config>

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE struts-config PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"

"http://struts.apache.org/dtds/struts-config_1_3.dtd">

<struts-config>

<action-mappings>

　　　　　　　　　</action>

</action-mappings>

<message-resources parameter="MessageResources" />

<plug-in className="org.apache.struts.validator.ValidatorPlugIn">

<set-property property="pathnames"

value="/org/apache/struts/validator/validator-rules.xml,

/WEB-INF/validation.xml" />

</plug-in>

</struts-config>

在struts-config.xml中，透過 action-mappings 的設定，來達成Client Request與Server的溝通

action-mappings : 設定Request與Server Action的對應關係，path=”Hello” and type=”com.appx.action.HelloAction” 時，當我們的Request是Hello發出時，就會使用HelloAction來處理這個Request，而forward的設定則是HelloAction執行結速後要導向的對象，一個action中可以有多個forward對象，在action中將會去對應forward上的name來尋找並返回對應ActionForward 物件，ActionServlet會根據action傳回的ActionForward來將請求轉發至指定的對象。

form-bean : 設定View(表單)，與對應的Class，當表單被送到Server時會將表單的name，去對應form-bean是否有相同的name，如果有找到相同的name，就會將值注入該form-bean對應的Class

step 7. 由action-mappings 的設定我們可以知道，必須要有一個HelloAction來處理Hello發出的請求，而HelloAction是必須繼承org.apache.struts.action.Action且覆寫execute()

package com.appx.action;


import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class HelloAction extends Action{

	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		request.setAttribute("message", " Hello World !!! ");

		return mapping.findForward("helloUser");
	}
	
}

package com.appx.action;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

public class HelloAction extends Action{

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,

HttpServletResponse response) throws Exception {

request.setAttribute("message", " Hello World !!! ");

return mapping.findForward("helloUser");

}

如此一來~只要是Hello發出的請求，就都會交由HelloAction來處理，當我們處理完這個Action要做的事之後，必須呼叫ActionMapping的物件，ActionMapping就會去struts-config.xml尋找是否有這個forward對象，如果有找到，Servlet就使用回傳的ActionForward將Request轉發至指定的對象。

因為我們設定的<forward name=”helloUser” path=”/pages/Hello.jsp” />因此我們在相對應得路徑中加入Hello.jsp的頁面

<%@page contentType="text/html" pageEncoding="UTF-8"
	errorPage="error.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>${message}</title>
</head>
<body>

	<H1>${message}</H1>
</body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"

errorPage="error.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>${message}</title>

</head>

<body>

<H1>${message}</H1>

</body>

</html>

然後就可以啟動Server，http://localhost:8080/${web.xml的display-name}/Hello.do，就可以看到以下畫面

struts-7

這樣我們就完成了Struts 的HelloWorld!!!

另外Struts中還有一個ActionForm的應用，ActionForm可以把我們的表單以物件來表示，所以當我們在設計物件時必須繼承org.apache.struts.action.ActionForm，並且要提供getter及setter的方法，在ActionForm產生後會去與相對應的物件做比對，如果有相同的參數就會用setter將數值注入其中，以下提供簡單的ActionForm操作例子～～～

step 1. 我們先來建立表的物件 UserForm.java

package com.appx.form;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;

public class UserForm extends ActionForm{

    private String username; 
    private String password;
     
    public void setUsername(String username) { 
        this.username = username; 
    } 
    
    public void setPassword(String password) { 
        this.password = password; 
    } 
    
    public String getUsername() { 
        return username; 
    }
    
    public String getPassword() {
        return password;
    } 
    
    public void reset(ActionMapping mapping,
                      HttpServletRequest request) {
        username = null;
        password = null;
    } 
    
}

package com.appx.form;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionMapping;

public class UserForm extends ActionForm{

private String username;

private String password;

public void setUsername(String username) {

this.username = username;

}

public void setPassword(String password) {

this.password = password;

}

public String getUsername() {

return username;

}

public String getPassword() {

return password;

}

public void reset(ActionMapping mapping,

HttpServletRequest request) {

username = null;

password = null;

}

ps.要記得繼承org.apache.struts.action.ActionForm才會有效果喔~~~

step 2. 在struts-config.xml加入<form-bean>設定表單名稱以及與剛剛建立的UserForm對應，並且在action中加入對應的表單名稱

<form-beans>		
          <form-bean name="userForm" type="com.appx.form.UserForm" />
</form-beans>
<action path="/Login" type="com.appx.action.LoginAction" name="userForm">
          <forward name="helloUser" path="/pages/Hello.jsp" />
	  <forward name="loginUser" path="/pages/LoginForm.jsp" />
</action>

<form-beans>

<form-bean name="userForm" type="com.appx.form.UserForm" />

</form-beans>

</action>

step 3. 接著處理Login的Action LoginAction.java

package com.appx.action;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.springframework.beans.factory.annotation.Autowired;

import com.appx.form.UserForm;
import com.appx.service.UserService;


public class LoginAction extends Action{
	
	private UserService userService = new UserService();
	
	public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		
            if( ((UserForm) form).getUsername().equals("test") && ((UserForm) form).getPassword().equals("test")  ){
        	    request.setAttribute("message", "Hi~~" + ((UserForm)form).getUsername());
        	    return mapping.findForward("helloUser");
            }else{
        	    request.setAttribute("message", "帳號或密碼錯誤請重新輸入！！！");
        	    return mapping.findForward("loginUser");        	
            }
		
	}
}

package com.appx.action;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.springframework.beans.factory.annotation.Autowired;

import com.appx.form.UserForm;

import com.appx.service.UserService;

public class LoginAction extends Action{

private UserService userService = new UserService();

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,

HttpServletResponse response) throws Exception {

if( ((UserForm) form).getUsername().equals("test") && ((UserForm) form).getPassword().equals("test") ){

request.setAttribute("message", "Hi~~" + ((UserForm)form).getUsername());

return mapping.findForward("helloUser");

}else{

request.setAttribute("message", "帳號或密碼錯誤請重新輸入！！！");

return mapping.findForward("loginUser");

}

經過設定，我們的表單會透過ActionForm傳進來，在這裡我們還需要把ActionForm轉型成UserForm才可以使用UserForm的getter方法，經過簡單的帳號密碼驗證，我們透過forward的方式導向登入成功就導向[helloUser]的頁面，失敗就回到登入頁面並顯示登入敗的訊息~~

step 4. 最後我們要加上登入表單的頁面 LoginForm.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"
	errorPage="error.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>${message}</title>
</head>
<body>
	<H1>Login</H1>
	<H1>${message}</H1>
	<form name="userForm" action="/StructWebDemo/Login.do" method="post">
		username : <input type="text" name="username" />
		<p>
			password : <input type="password" name="password" />
		<p>
			<input type="submit" />
	</form>
	<a href="/StructWebDemo/pages/AddUser.html">新增使用者</a>
</body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"

errorPage="error.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>${message}</title>

</head>

<body>

<H1>Login</H1>

<H1>${message}</H1>

username : <input type="text" name="username" />

<p>

password : <input type="password" name="password" />

<p>

</form>

<a href="/StructWebDemo/pages/AddUser.html">新增使用者</a>

</body>

</html>

最後我們就可以啟動Server來測是囉~~

struts-8

struts-9

到這邊ActionForm的基本應用也告段落了~~~

最後附上程式連結供大家參考喔~https://github.com/jimmingOu/StrutsWebDemo/