|
實戰DW MX和VSS開發Web項目(上)
|
|
|
|
由于Web項目程序代碼非常分散不集中，大的Web項目程序代碼源文件多達上百個甚至更多，小的也有數十個，怎樣合理地管理這些源代碼還是一個問題，本文提出一種針對Web項目開發過程中代碼控制的解決方案。我們將利用Dreamweaver MX和Visual SourceSafe來實現Web項目代碼開發的全程控制。這2種軟件大家都比較熟悉，但為了保持本文的完整性我還是分別簡要介紹一下這2種軟件。
????Dreamweaver MX(以下簡稱DW MX)是Macromedia公司網頁制作三劍客之一，其強大功能在此不再復述，DW MX整合了Dreamweaver 4和Dreamweaver UltraDev 4的所有功能，他同時適合Web界面開發人員和Web后臺開發人員使用，DW MX幾乎支持所有常見動態Web編程語言，如PHP,ASP/ASP.net,JSP等，他最大特點就是整合了團隊開發的功能，比如Design Notes(設計筆記)能夠方便開發成員互相交流，他還可以與Vislual SourceSafe的數據庫鏈接起來，達到代碼控制的目的。
????Visual SourceSafe(以下簡稱VSS)是Microsoft Visual Studio 6.0這個開發產品家族的一員，VSS主要功能是對項目進行版本控制和源碼控制，它能夠詳細記錄一個源碼文件從創建到發布的所有修改和版本信息，而且還可以讓你查看所有歷史記錄并對不同時間的源碼進行比較分析，恢復代碼到某一時刻和版本狀態。VSS具有強大的用戶管理權限，可以對每個用戶設置R(Read)、C(Check Out)、A(Add)、D(Destroy)權限，非常適合團隊開發。
????一、網絡環境的搭建
????圖1-1將介紹團隊開發的網絡環境拓撲結構：
????
圖1－1 開發網絡拓撲結構
????Server主要功能是代理Internet和整個網絡控制，而Test Server主要負責代碼調試工作，在該服務器上要搭建與Web發布服務器一樣的平臺(包括內部DNS，IIS等)，為了節省資源在該服務器上裝一個數據庫，Backup Server服務器主要能是數據的備份，包括開發代碼，開發文檔，以及對網站的常規備份，定期對Backup Server服務器上的數據進行物理備份(主要指把數據保存到活動硬盤或刻成光盤)，在Backup Server服務器上安裝VSS，當然如果你的開發資源比較豐富的話，我覺得有必要添加數據庫服務器和VSS服務器。
????二、VSS配置
????先分別在服務器和開發客戶端上安裝VSS服務器，DW MX和VSS客戶端。在開始配置VSS時先解釋一下2個最基本的概念，Check Out，將VSS數據庫上的文件最新內容下載到本地工作路徑，并將該文件鎖定，不允許其他人修改，但可以得到文件最新內容。Check In，將本地工作路徑中已修改好的文件更新到服務器上，并將本地路徑的文件屬性設為只讀，釋放VSS服務器上該文件的鎖定狀態，這是VSS最基本的2個概念一定要弄明白。下面將介紹創建一個VSS項目的詳細步驟。
????1、打開VSS的管理員操作界面，執行Tools/Create Databse命令創建一個VSS數據庫，當創建成功后執行Users/Open SourceSafe Database命令，打開VSS數據庫。
????2、執行Users/Add User命令，打開圖1-2操作界面，輸入用戶名和密碼，若你只賦予該用戶只讀權限，就選取Read Only復選框。
????
圖1-2 添加用戶界面
????3、設置用戶權限，在管理界面中用鼠標選取用戶名Cat，然后執行Tools/Rights Assignments for user...命令打開設置用戶權限對話框如圖1-3。這里面有4個權限，他們含義分別是Read(只讀)，Check Out/Check In(文件的鑒入和鑒出)，Add/Rename/Delete(添加/修改/刪除VSS上的文件)，Destroy(徹底刪除，無法恢復，設置時要小心)。然后重復2到3步添加開發小組中的其他成員。
????
圖1-3 設置用戶權限
????4、設置VSS項目中的目錄結構，點擊程序欄中的Microsoft Visual SourceSafe 6.0命令，彈出登錄對話框，輸入用戶名或者密碼，單擊Browse...按鈕，找到服務器共享的VSS目錄路徑(支持網絡路徑)。
5、創建對象，執行File/Create Project...命令，也可以直接點擊快捷菜單欄中的按鈕，打開創建對象對話框如圖1-4，在此可以輸入對象名還有相關的描述。所創建的對象在VSS的All Projects欄中表現形式為文件夾。
????
圖1-4 創建對象對話框
????6、添加文件，VSS用戶界面中支持文件夾的拖拽操作，先進入到項目(文件夾)中，在本地選取好要放到服務器上的文件，然后直接拖拽到VSS的用戶界面，就會彈出一個上傳對話框如圖1-5，在對話框中可以輸入注釋。還有其他相關選項，在此簡單說明一下：
????Store Only latest version ：保存文件最后版本。
Check Out Immediately：當文件以添加完后將它Check Out。
Remove local Copy：文件添加完后就將本地的的文件刪除掉，最好在添加的文件的時候不要選取這一項。
File Type：選擇添加文件的類型，一般選擇Auto-detect(自動識別)，可選擇項目是二進制文件和文本文件。
????
圖1-6 添加文件對話框
????至此基本將介紹完VSS的設置，在準備開發以前必須在VSS中建好相應的文件夾和小組用戶帳號。圖1-7是已經創建好的VSS對象結構圖。
????
圖1-7 VSS客戶端使用界面
????三、DW配置
????由于VSS已經定義好了，再將DW和VSS連接起來不是很困難，下面是配置DW的詳細步驟
????1、進入DW的編輯界面，執行Site/New Site...命令，打開定義站點對話框，默認是Local Info(本地信息)選項卡，在界面中填入開發項目的名稱和項目源碼所在的地址，填完后入圖1-8。
????
圖1-8 Local Info選項卡
????2、在站點定義選項對話框中選取Remote Info(遠程信息)選項卡如圖1-9，在界面的Access(遠程訪問類型)中選取SourceSafe Database。Automatically Upload files to server，在DW中修改文件保存后自動將修改的信息更新到VSS服務器上。Check Out File when Opening，在DW中打開文件自動Check Out服務器上對應的文件。
????
圖1-9 Remote Info選項卡
????3、在Remote Info選項卡中點擊Settings...按鈕，打開圖1-10對話框，在該對話中分別填入Database Path，VSS數據庫路徑，。項目路徑，注意對象路徑一定要以$開始，路徑支持中文。然后填入VSS用戶的用戶名和密碼。
????
圖1-10 VSS客戶端登錄設置
|
4、在站點定義選項對話框中選取Testing Server(測試服務器信息)選項卡如圖1-11，Server Model：選擇Web項目所才用的技術類型，DW支持絕大多數的Web動態語言。Access：訪問類型，有FTP和Local/Network(本地/局域網)，Testing Server：測試服務器地址。 Refresh Remote File List Automatic：自動刷新遠程文件列表，URL Prefix：測試服務器訪問的URL地址。
????
圖1-11 Testing Server
????至此，DW和VSS的配置都已經基本配置好了，上面講到的配置都是必須要設置的，否則2種軟件不能夠友好協作，其他還有一些參數可以根據具體情況來設置。
????四、實戰開發
????到了這一步你可以具體開發了，由于已經將DW和VSS已經連接起來了，對VSS文件的常規操作不需要登錄VSS去實現，直接在DW中就可以方便實現。下面將從2個方面來實戰開發，先介紹在DW中開發然后再介紹在VSS中進行版本控制和代碼恢復比較等。
????(一)、在DW中的相關應用
????1、在DW中連接VSS服務器
????打開DW編輯窗口后的第一件事就是連接遠程服務器，也就是VSS服務器。在DW中執行Site/Site Files...命令或者按F8快捷鍵打開圖1-12 Site面板，Site面板中可以查看到本地文件列表、測試服務器文件列表和遠程VSS上面的文件列表。我們對文件的編寫和操作主要是在Local View中進行的。當然你也可以不連接遠程服務器，在本地打開一個未被其他小組成員Check Out的文件時DW自動連接VSS服務器，并且將該文件自動Check Out，在Site面板中的文件有三種狀態，文件鎖定狀態：當前文件沒有被任何其他成員Check Out編輯，這樣的文件DW在文件名前加一個小鎖。文件被自己Check Out 狀態：也就是文件自己正在編輯或者已經Check Out了，DW在文件名前加一個綠色的小勾。文件被別人Check Out 狀態：文件被其他小組成員Check Out了，DW在文件名前加一個紅色的小勾。
????
圖1-12 Site面板
????2、源代碼文件的基本操作
????在圖1-12 Site編輯界面中可以對文件進行Put/Get,Check Out/In操作，Check Out 和Check In在前面已經介紹過了不在說明了。Put是將本地文件上載到VSS服務器上，Get就是把VSS服務器上的文件下載下來。Put/Get和Check Out/In的區別就是VSS是否對文件內容的操作做了備份和記錄，Check Out/In操作在VSS上都有相應的記錄，而Put/Get就沒有。
????在Site界面中可以用鼠標直接拖拽實現文件的Put/Get，在DW默認設置中從VSS服務器上拖拽文件會彈出如圖1-13的信息提示框(Check Out/In操作也會有這個提示框)，該文本框的含義是是否將與該文件有關連的文件都Put/Get(Check Out/In)。強烈建議在此選擇No，而且還把不要提示消息這個復選框勾選。如果你選擇了Yes，你的操作將會非常慢而且還會造成一些不必要的錯誤(DW會用VSS上舊文件覆蓋本地已修改但未Check In的文件)，DW把與當前文件有關連的所有文件都操作了，如Include文件、圖片文件、CSS文件等，其實有些不是經常需要修改的文件。如果有一天需要選擇它同時操作與他有關聯的文件，執行Edit/Preferences...命令打開參數設置對話框，選擇Site選項卡，把Dependent Files(關連文件)中的2個復選框勾選即可。
????
圖1-13 信息提示框
????3、Design Notes(設計筆記)
????細心的人也許發現了圖1－12中有幾個文件名后面有個黃色的小標記，這是Macromedia在發布Dreamweaver 3.0時增加的一個功能Design Notes(設計筆記)，開發人員可以對該文件增加設計筆記和心得，這些筆記和心得是累加的，可以記錄各個開發人員的筆記，這些信息任何一個打開該文件的開發人員都可以查看到，這樣開發人員就可以非常方便地勾通。當用DW和VSS聯合開發時，這些筆記心得還可以保存到VSS服務器上。VSS對每個文件都有個Comment(注釋)功能，這和DW的Design Notes的功能有點重復，不過DW的Design Notes功能強大許多，還是推薦使用Desgin Notes，在DW3和DW4的版本中Design Notes不支持中文，但DW MX可以支持中文，這一點對那些英文不太好的人來說是一個福音。
????若要對一個文件添加Design Notes，就先用鼠標在Files面板中選取該文件，點擊鼠標右建彈出快捷菜單執行Design Notes命令，打開圖1-13。在界面中就有2個選項卡，一個是Basic Info(基本信息)，另一個是All Info(所有信息)，先選擇該文件的當前版本，然后在Notes(筆記)文本框中添加信息，可以通過點擊日期按鈕插入當前系統的日期。在All Info選項卡中可以查看所Notes。
????
圖1-14 設計筆記對話框
????4、保持與遠程服務器的同步(Synchronize)
????同步是把本地源代碼和遠程服務器上源代碼統一，如果不統一就用最新的覆蓋本地或服務器舊文件。用鼠標在Site面板中選取本地一個源代碼，然后點擊鼠標右建彈出快捷菜單執行Synchronize...命令，打開圖1-15對話框，在該對話框中可以設置與遠程服務器(VSS服務器)的同步方式。
????
圖1-15 設計筆記對話框
????Synchornize下拉菜單中有2個選項：
????a、整個本地站點和遠程服務器同步，它會顯示當前已定義的站點名稱
b、僅對本地已選擇的文件和遠程服器上的文件同步，可以按住鍵盤Ctrl鍵選取多個文件和遠程服務器相應文件同步
????Direction(方式)下拉菜單中有3個選項：
Put newer files to remote：把最新的文件放到遠程服務器上。
Get newer files from remote：從遠程服務器上得到最新的文件。
Get and Put newer files：保持本地和遠程服務器上都是最新文件。
????復選框的含義是，刪除遠程服務器上不在本地的所有文件。
????設置完參數后，點擊Preview按鈕，DW就自動按照規則搜索需要更新的相關文件，如果沒有需要同步的文件DW彈出一個消息框，否則完成同步操作。
????(二)VSS中的相關應用
????由于在DW中可以對VSS的文件進行常規操作，開發人員不需要經常到VSS客戶端中進行操作，但比如為代碼設置版本、恢復文件等操作需要在VSS中進行。VSS記錄了一個源代碼文件從創建、修改到發布的全過程，記錄了每次對該文件的Check In操作，所以在源代碼查錯調試方面非常有用。下面將介紹VSS幾種典型的操作。
????1、源碼操作
????登錄進入VSS客戶端界面，用鼠標選取源代碼文件點擊右建彈出快捷菜單執行Show History...命令，彈出圖1-16 歷史選項。這是查看記錄選項，在此可以定義你要查看的歷史記錄。
????
圖1-16 歷史選項
????Include Labels：包括用戶指定的標簽的歷史記錄。
Labels Only：僅顯示有用戶定義標簽的歷史記錄。
From：限制查詢歷史記錄的開始日期，可以輸入日期、日期:時間、version(版本)或者label(標簽)，在輸入日期時間格式是需要加一個前綴"D"，如"D02/29/95;12:15"，在輸入版本號時需要加一個前綴"L"，如Lbeta1。若僅日期格式不需要添加任何前綴，以下格式都是合法的，08.15.95, 08-15-95, or 08/15/95 format, but not as August 15, 1995，注意這些時間格式是老外的習慣，你在輸入時候需要注意一下。
To：限制查詢歷史記錄的結束日期，可以輸入日期、日期:時間、version(版本)或者label(標簽)，其輸入規則與From的一樣。
User： 指定用戶名。
在輸入特定條件后單擊"OK"按鈕彈出歷史紀錄列表，如圖1-17 歷史記錄列表。
????
圖1-17 歷史記錄列表
????View：查看源碼詳細信息，如果是二進制文件將不能正常顯示。
Details：查看文件的詳細信息，點擊該按鈕會彈出一個對話框，可以查看該文件的版本信息、操作時間、操作人以及文件的注釋。
Get：得到當前歷史記錄的源代碼文件，并不是該代碼的最新版本。
Check Out：將該文件Check Out。
Diff：源碼比較。單擊該按鈕會彈出源碼比較選項對話框，直接單擊"OK"按鈕打開圖1-18界面。從界面中可以清晰看到代碼的異同。VSS中用3種顏色來區分代碼的變化，藍色代碼表示被刪除的行，紅色代碼表示被修改的代碼，綠色代碼表示新增加的代碼。
????
圖 1-18 源代碼對比
????Pin/Unpin：鎖定/解鎖所選擇的源代碼文件，不允許別人再做Check Out/In操作。文件被鎖定后VSS就在文件名前加一個標識。
????Rollback：恢復當前版本。該操作是不可逆的，源碼被恢復后，比該記錄晚的歷史記錄全部被清除。建議不要過多使用該功能，可以用通過單擊"Get"按鈕得到當前版本的源代碼，再對源碼做出修改，這樣做保留了歷史記錄不被清楚，同時也達到了Rollback的功能。
????Report：對比報告。VSS把分析出來的結果輸出到打印機、文件和剪貼板。
????2、恢復刪除記錄
????VSS中可以對刪除的文件和對象進行恢復，如果用戶在刪除文件時選擇了Destroy permanently(永久刪除)，那該操作不可恢復。只有用戶的權限含有Destroy才能進行徹底刪除，當然也只有具有Destroy權限的用戶才能恢復被刪除的文件。用鼠標在VSS客戶端界面的All Projects窗口中選擇一個對象(也就是文件夾)，然后點擊右建彈出快捷菜單執行Properties...命令，打開該對象的屬性面板選擇Deleted Items(刪除項目)選項卡如圖1-19所示。
????用鼠標選擇欲操作的文件，可以按鍵盤Ctrl鍵選取多個文件，然后單擊Recover(恢復)或Purge(徹底刪除，不可恢復)按鈕。
????
圖 1-19 恢復被刪除的文件
????3、版本控制
????當Web項目開發完成后，就有必要對源代碼封一個版本，這樣有利于項目發布以及升級，用鼠標在VSS客戶端界面的All Projects窗口中選擇一個對象(也就是文件夾)，然后點擊右建彈出快捷菜單執行Label...命令，打開設置版本窗口如圖1-20
????
圖 1-20 版本設置
????只需要在Label中輸入版本號然后單擊OK按鈕就可以了，在Comment中可輸入描述內容。當封了一個版本后，該項目下面的所有源代碼都封了一個版本，如圖1-17 可以看到有條歷史記錄的Action是"Label 1"。