Ⅰ web端自動化基礎篇
一、自動化測試的好處
1、 縮短測試周期：計算機行業更新迭代快速，大量頻繁的回歸測試消耗時間，自動化測試能夠將重復的實行交給計算機去做，加快測試速度。
2、避免人為出錯：測試人員不可能持續高度集中，並且人類易受外界影響(頭疼腦熱，精神不振)，可能會造成人為錯誤
3、測試信息存儲：自動化測試將測試信息和數據儲存在文件中，思路清晰明確，交接方便
4、輕易獲取覆蓋率：自動化測試能夠解放測試人員，使測試人員能夠有更多的精力做那些非重復性的工作。
5、其他：自動化測試可以是實現自動或者定時執行
注意： 自動化測試的方向是對的，而且趨勢也是如此，但是有些自動化實現不了的還是會手動測試的。
二、自動化分類
1、 整體分類
（1)自動化功能測試
（2)自動化性能測試
2、自動化功能測試的分類:
（1)單元測試：程序員搞定
（2)功能測試
（3)介面測試：大中型項目或長期項目可以採用自動化測試
3、性能測試主要是使用測試工具
（1）Loadrunner、Jmeter等，對軟體進行壓力測試、負載測試等等，因為這些無法用手工進行代替，所以必須自動化。
三、web自動化條件的使用和范圍
1、前提條件
（1)手動測試已經完成,後期再不影響進度的前提下逐漸實現自動化
（ 2)項目周期長，重復性的工作都交給機器去實現
（ 3）需求穩定,項目變動不大
（4)自動化測試腳本復雜度比較低
（ 5)可重復利用
2、使用自動化測試的場景
（1)頻繁的回歸測試
（2)冒煙測試
（3)傳統行業需求變化不大，應用頻繁
（4)性能測試
四、web自動化常用的工具
1、QTP(收費)
2、Selenium(開源)
3、RFT(收費）
4、（1）元素定位工具：css選擇器、xpath
（2）環境工具：（1)firefox35
（2)firebug插件
（3)firepath插件
5、什麼是xpath：XPath即為XML路徑語言，它是一種用來（標准通用標記語言的子集）在 HTML\XML 文檔中查找信息的語言。
6、什麼是xml：XML 指可擴展標記語言（EXtensible Markup Language）XML 是一種標記語言，很類似 HTMLXML 的設計宗旨是傳輸數據，而非顯示數據
7、（1）xml是設計為傳輸和存儲數據的。
（2）html是顯示數據以及更好的顯示數據
8、獲取元素
（1）nodename：選取此節點的所有子節點
（2）/從根節點選取
（3）//從匹配選擇當前節點選擇文檔的節點，不考慮位置
（4）「.」選取當前節點
（5）「..」選取當前節點的父節點
（6）@選取屬性
Ⅱ web自動化測試計劃和步驟
測試用例：前置、步驟、斷言
項目周期長：功能會越來越復雜
歷史功能：比較穩定
回歸，歷史功能
開發-介面自動化同步
項目-8大模塊-2000左右用例數
1、熟悉業務
需求文檔/手動測試/產品聊，了解模塊之間的關系/測試人員
項目目前在測試的階段，棘手的問題
2、分析
系統當中哪些模塊適合自動化、哪些模塊不適合
歷史功能穩定性、功能復雜性
核心模塊
使用頻率模塊，哪一個模塊bug率目前偏高
測試團隊、產品 開會討論
篩選2個模塊 400個功能測試用例
如果是介面 ---介面有多少個，每個介面有多少個用例
3、功能測試 ---篩選自動化測試用例----核心功能、主流程、主功能點---140
用例評審===
4、自動化計劃
自動化類型：web/介面
框架選型：
團隊人員：
搭框架、定規范
時間規劃：用例編寫時間2個半月
效果：覆蓋率是多少---用例通過率---跟項目測試進度結合
Ⅲ Gitlab+Jenkins通過鉤子實現自動部署web項目，圖文詳細教程
擴展參考：Jenkins+Gitlab通過腳本自動部署回滾web項目至集群
1）:Gitlab伺服器：ubuntu 192.168.152.131 ---參考搭建：Linux安裝gitlab，docker安裝gitlab教程
2）:Jenkins伺服器：ubunu 192.168.152.130 ---參考搭建：linux安裝Jenkins，或docker安裝Jenkins教程
在伺服器上生成ssh-keygen，用於配置web伺服器和Gitlab伺服器。
3）:web伺服器：centos 192.168.152.150 ---已搭建好LNMP環境
4）:開發者電腦：Windows+key密鑰 （用於提交代碼）
1：在gitlab創建項目Test Project
2.1）： 配置一個開發者電腦的ssh公鑰到gitlab
配置一個開發者電腦的ssh公鑰到gitlab，這樣才能模擬開發上傳代碼到gitlab。
windows生成key過程及git安裝，可參考：Windows下git和github的使用圖文詳細教程_the丶only的博客-CSDN博客_github win
在windows測試clone，和提交代碼。
註：最新版git 已經將默認分支master改為main了。所以看到main，而不是master不要太奇怪
測試成功，在gitlab也顯示有index.html文件。
2.2）： 配置jenkins公鑰到gitlab
同理，同樣需要jenkins公鑰，因為jenkins也需要拉去gitlab的代碼。
在 jenkins伺服器 上查看公鑰並復制添加到gitlab，並命名為jekins。
1：插件管理，安裝插件
jenkins本身沒什麼功能，主要是依靠插件來實現各種強大的功能。
基本需要添加的插件：Gitlab Hook、Build Authorization Token Root、Publish Over SSH、Gitlab Authentication、Gitlab、Git Parameter
可以在 Manage Jenkins >> Manage Plugins 查看管理插件。在Available 選項搜索安裝插件即可。
安裝完成後，重啟Jenkins。
2：添加需要部署的web主機
在 Manage Jenkins >> Configure System 中往下翻，找到 Publish over SSH 選項，點擊add ssh server。
在Jenkins伺服器上，查看私鑰，注，是私鑰，不是公鑰。
將私鑰填寫在key位置，還有添加web伺服器相關信息。
註：如果測試報錯如下
Failed to connect or change directory
jenkins.plugins.publish_over.BapPublisherException: Failed to add SSH key. Message [invalid privatekey: [B@2e54414f]
是因為默認用ssh-keygen命令，默認生成了OPENSSH 格式密鑰。而Jenkins暫時不支持這種私鑰，私鑰開頭結尾如下：
所以，需要生成rsa密鑰格式的。用開頭說的ssh-keygen加其他參數生成即可。
私鑰開頭結尾如下：
再次測試，顯示success，則成功。然後點擊save保存即可。
3：構建任務項目
首頁創建任務或者一個項目
命名為web-project，選擇為freestyle project 自由項目。然後ok確認。
3.1）：源碼管理 Source Code Management
選擇源碼管理，添加gitlab的項目clone地址。
註：最後路徑選擇分支，我gitlab主分支名字為main,如果是master，則寫master，或者合並的其他分支。
在add添加用戶
添加完成後，選擇git用戶，這時沒有紅色提醒，說明已成功連接
3.2）：構建觸發器 Build Triggers
現在Build Triggers，勾選build when....，其他默認，並記下鏈接 http://192.168.152.130:8080/project/web-project
點擊高級 advance 選項。
勾選filter branches regex選擇，填寫分支，生產token。其他默認
3.3）：構建 Build
選擇Build 選項。選擇ssh
添加web伺服器
添加完畢，最後save保存。
1：添加鉤子webhooks.
選擇自己的項目Test Project，在設置setting里，選擇鉤子webhooks.
填寫剛才記下的http://192.168.152.130:8080/project/web-project和token值。
最後Add webhook完成：
2：如添加失敗，報錯，更改Network
註：如填寫失敗提示Url is blocked: Requests to the local network are not allowed
還需更改Network選項。
3：測試鉤子
添加完成後，下面會出現鉤子選擇。點擊test中的，push event。
出現successful，即添加成功。
在Jenkins也可以看到剛才的測試時間信息。
在開發電腦上測試提交，我這里為Windows電腦測試。
打開Git Bash，輸入以下命令：
提交成功，回到Jenkins，查看是否構建成功：
綠色顯示構建成功，無錯誤顯示。回到gitlab查看項目。
時間顯示剛才也提交成功，無錯誤。最後在瀏覽器輸入web地址測試，本人配置了web訪問埠8082。所以輸入IP加埠訪問。
內容也已經自動更新成功。
完結撒花！！！
Ⅳ web自動化測試環境如何搭建
web自動化測試環境搭建主要包含如下幾點:
1. Python 開發環境
2. 安裝selenium包
3. 安裝瀏覽器
4. 安裝瀏覽器驅動 -- 保證能夠用程序驅動瀏覽器，實現自動化測試.
如果想學習更多的內容,一個朋友在傳智播客學習軟體測試.現在月薪12K。
Ⅳ 怎樣安裝和破解激活WebStorm11
WebStorm 11.0.3漢化破解版http://www.ddooo.com/softdown/79201.htm，附註冊碼，有詳細的安裝圖文教程。
WebStorm11安裝教程：
1、解壓安裝包，運行「WebStorm-11.0.3.exe」開始安裝
2、選擇軟體安裝目錄
3、選擇是否創建桌面快捷方式和關聯文件，根據提示完成安裝
4、打開漢化補丁，將文件「resources_cn.jar」復制到安裝目錄，lib文件夾中
5、運行WebStorm 11桌面快捷方式，選擇配置
6、彈出注冊界面，選擇「License server」，輸入「http://15.idea.lanyus.com/」點擊確定完成破解。
Ⅵ Web伺服器配置方法教程
伺服器是一種高性能計算機，作為網路的節點，存儲、處理網路上80%的數據、信息，因此也被稱為網路的靈魂。那麼該如何配置Web伺服器呢?如果你不知道，請看我整理的Web伺服器配置方法詳解吧!
2、單擊窗口中的“添加/刪除Windows組件”圖標，彈出“Windows組件向導”對話框。
3、選中“向導”中的“應用程序伺服器”復選框。單擊“詳細信息”按鈕，彈出“應用程序伺服器”對話框。
4、選擇需要的組件，其中“Internet信息服務(IIS)”和“應用程序伺服器控制台”是必須選中的。選中“Internet信息服務(IIS)”後，再單擊“詳細信息”按鈕，彈出“Internet信息服務(IIS)”對話框。
5、選中“Internet信息服務管理器”和“萬維網服務”。並且選中“萬維網服務”後，再單擊“詳細信息”按鈕，彈出“萬維網服務”對話框。
6、其中的“萬維網服務”必須選中。如果想要伺服器支持ASP，還應該選中“Active Server Pages”。逐個單擊“確定”按鈕，關閉各對話框，直到返回圖1的“Windows組件向導”對話框。
7、單擊“下一步”按鈕，系統開始IIS的安裝，這期間可能要求插入Windows Server 2003安裝盤，系統會自動進行安裝工作。
8、安裝完成後，彈出提示安裝成功的對話框，單擊“確定”按鈕就完成了IIS的安裝。
友情提示：如果想要同時裝入FTP伺服器，在“Internet信息服務(IIS)”對話框中應該把“文件傳輸協議(FTP)服務”的復選框也選中。
在IIS中創建Web網站
打開“Internet 信息服務管理器”，在目錄樹的“網站”上單擊右鍵，在右鍵菜單中選擇“新建→網站”，彈出“網站創建向導”：
網站描述就是網站的名字，它會顯示在IIS窗口的目錄樹中，方便管理員識別各個站點。本例中起名為“枝葉的網站”。
網站IP地址：如果選擇“全部未分配”，則伺服器會將本機所有IP地址綁定在該網站上，這個選項適合於伺服器中只有這一個網站的情況。也可以從 下拉式列表框中選擇一個IP地址(下拉式列表框中列出的是本機已配置的IP地址，如果沒有，應該先為本機配置IP地址，再選擇。)
TCP埠：一般使用默認的埠號80，如果改為其它值，則用戶在訪問該站點時必須在地址中加入埠號。
主機頭：如果該站點已經有域名，可以在主機頭中輸入域名。
主目錄路徑是網站根目錄的位置，可以用“瀏覽”按鈕選擇一個文件夾作為網站的主目錄。
網站訪問許可權是限定用戶訪問網站時的許可權，“讀取”是必需的，“運行腳本”可以讓站點支持ASP，其它許可權可根據需要設置。
單擊“下一步”，彈出“完成向導”對話框，就完成了新網站的創建過程，在IIS中可以看到新建的網站。把做好的網頁和相關文件復制到主目錄中，通常就可以訪問這個網站了。
訪問網站的方法是：如果在本機上訪問，可以在瀏覽器的地址欄中輸入“http://localhost/”;如果在網路中其它計算機上訪問，可以在瀏覽器的地址欄中輸入“http://網站IP地址”。
說明：如果網站的TCP埠不是80，在地址中還需加上埠號。假設TCP埠設置為8080，則訪問地址應寫為“http://localhost:8080/”或“http://網站IP地址：8080”。
網站的基本配置
如果需要修改網站的參數，可以在“網站名字”上單擊右鍵，在右鍵菜單中選擇“屬性”，可以打開“網站屬性”對話框。
1、“網站”標簽
“網站標識”：可以設置網站名字、IP地址、埠號。單擊“高級”按鈕可以設置主機頭名。
2、“主目錄”標簽
在本地路徑中可以設置主目錄的路徑名和訪問許可權。
3、“文檔”標簽
默認文檔是指訪問一個網站時想要打開的默認網頁，這個網頁通常是該網站的主頁。如果沒有啟用默認文檔或網站的主頁文件名不在默認文檔列表中，則訪問這個網站時需要在地址中指明文件名。
默認文檔列表中最初只有4個文件名：Default.htm、Default.asp、index.htm和Default.aspx。我用 “添加”按鈕加入了一個index.asp，並用“上移”按鈕把它移到了頂部。這主要是因為我的網站的主頁名為“index.asp”，所以應該把它加入 列表，至於是否位於列表頂部倒是無關緊要的。
經過以上配置，一個Web網站就可以使用了。把製作好的網頁復制到網站的主目錄中，網站主頁的文件名應該包含在默認文檔中。打開瀏覽器，在地址欄中輸入“http://本機IP地址”，就可以打開網站的主頁。其它頁面可以用網頁中的超鏈接打開。
虛擬目錄
虛擬目錄可以使一個網站不必把所有內容都放置在主目錄內。虛擬目錄從用戶的角度來看仍在主目錄之內，但實際位置可以在計算機的其它位置，而且虛擬目錄的名字也可以與真實目錄不同。如：
圖中用戶看到的一個位於主目錄下的文件夾“pic”，它的真實位置在伺服器的“D:myimage”處，而主目錄位於“C:mywww” 處。假設該網站的域名是“www.abc.com”，則用戶訪問“http://www.abc.com/pic/文件1”時，訪問的實際位置是伺服器的 “D:myimage文件1”，所以虛擬目錄的真實名字和位置對用戶是不可知的。
創建虛擬目錄的方法 ：
打開 Internet 信息服務窗口，在想要創建虛擬目錄的 Web 站點上 單擊右鍵，選擇“新建”→“虛擬目錄”。彈出虛擬目錄創建向導：
別名是映射後的名字，即客戶訪問時的名字;
路徑：伺服器上的真實路徑名，即虛擬目錄的實際位置;
訪問許可權：指客戶對該目錄的訪問許可權。
單擊“下一步”按鈕，彈出完成對話框，虛擬目錄就建立成功了。把相關文件復制到虛擬目錄中，用戶就可以按照虛擬的樹形結構訪問到指定文件了。
通常虛擬目錄的訪問許可權、默認文檔等都繼承自主目錄，如果需要修改，可在“Internet 信息服務管理器”中的虛擬目錄上單擊右鍵，選擇“屬性”，就可以修改虛擬目錄的參數設置了。
補充：伺服器介紹
伺服器，也稱伺服器，是提供計算服務的設備。由於伺服器需要響應服務請求，並進行處理，因此一般來說伺服器應具備承擔服務並且保障服務的能力。
伺服器的構成包括處理器、硬碟、內存、系統匯流排等，和通用的計算機架構類似，但是由於需要提供高可靠的服務，因此在處理能力、穩定性、可靠性、安全性、可擴展性、可管理性等方面要求較高。
在網路環境下，根據伺服器提供的服務類型不同，分為文件伺服器，資料庫伺服器，應用程序伺服器，WEB伺服器等。
相關閱讀：伺服器常見問題有哪些
1.系統藍屏、頻繁死機、重啟、反映速度遲鈍
伺服器的與我們平常電腦不論是硬體結構還是運行系統，都是極其類似的。因此，就如同我們的電腦一樣，一樣可能會感染病毒，同樣會因為系統漏洞、軟體沖突、硬體故障導致死機、藍屏、重啟等故障，同樣會因為垃圾緩存信息過多而導致反應遲鈍。
2.遠程桌面連接超出最大連接數
由於伺服器默認為允許連接數為2個，如果登陸後忘記注銷，而是直接關閉遠程桌面的話，伺服器識別此次登陸還是留在伺服器端的。出現這種情況，最常見的就是重啟伺服器，但是，如果是高峰期，重啟伺服器帶來的損失是顯而易見的。那麼此時，就可以利用mstsc/console指令進行強行登陸了。打開“運行”框，鍵入“mstsc/v:xxx.xxx.xxx.xxx(伺服器IP)/console”，即可強行登陸到遠程桌面了。
3.無法刪除的文件該怎麼清理
遇到這種情況，可能是該文件還在運行中，可以重啟刪之，或者運行CMD，輸入arrtib-a-s-h-r想要刪除的文件夾名，最後輸入del想要刪除的文件夾名即可刪除，運行該命令後無法恢復，請慎用。
4.系統埠隱患
對於伺服器來說，首要保障穩定性和安全性。因此，我們僅需保證伺服器最基本的功能即可，就像音效卡都是默認禁止的。我們並不需要太多的功能，也不需要太多的埠支持。像一些不必要，而且風險較高的埠大可封掉。而一些必要的，又有風險的埠，比如:3389、80等埠，我們可以通過修改注冊表的方法將其設置不特殊的秘密埠，這樣伺服器埠的安全隱患就不復存在了。
Ⅶ Web自動化的流程
web自動化流程
一. 了解需求，什麼是系統的核心業務
二. 編寫測試用例：用例名稱，前置條件，測試數據，測試步驟，期望結果
三. 自動化代碼的初步構建：所有的元素定位、元素操作、測試用例都寫在一個模塊中
問題：
1. 層次混亂，一旦頁面元素調整，需要挨個尋找對應的測試模塊，測試類，測試用例函數，不便於後期維護
2. 不便於代碼的復用
四. 引入PO模式，進行分層設計：實現測試用例和頁面對象分離
好處：
1. 層次清晰，相互獨立，易維護
2. 頁面對象可以多次調用，提高了代碼的復用度
五. 引入單元測試框架unittest
六. 優化分層設計
將每個頁面公共的屬性和方法提取出來，封裝成一個BasePage模塊下的BasePage類，後期各個頁面只需要繼承它，就可以獲得父類的所有屬性和方法，這樣不僅簡化了代碼，而且提高了復用度
七. 引入pytest：基於unittest，比unittest更"智能"
好處：
1. 可以通過打標記來運行特定的測試用例
2. 利用contest.py定義公共的fixture，多個測試類中都可以調用，不需要每個測試用例類都定義一遍環境准備和環境清理，簡化了代碼
3. pytest可以按一定規則自動發現測試用例，而unittest則需要向指定的測試套件中添加測試用例
4. 利用pytest-html庫，可以生成自帶的html報告和xml文件，而xml文件的好處是方便跟其它平台的集成和展示，方便做二次開發
八. 注意點
1. 做自動化前，要有獨立的賬號，避免外界環境的干擾
2. 頁面順序完全是由業務邏輯來決定，由測試用例來決定。因此在封裝頁面時不用考慮誰來調用它，不用考慮哪一個頁面操作之後再來使用它(或者哪一個功能操作之後再來使用它)，應該考慮的是無論前面做了什麼樣的操作，誰來用它，任何一個步驟來調用它的時候，它都能正常的操作(這也是為什麼一些頁面的元素需要滾動操作)
3. 在封裝功能時不要考慮在用例中是什麼意思，只需要考慮在本頁面是什麼功能(比如：標詳情頁面獲取余額功能的封裝，不需要把函數命名為get_user_left_money_before_invest，而是在只考慮它的功能的情況下命名為get_user_left_money)
4. 在選標的過程中，不要指定特定的標名，而是要隨機選擇，因為頁面上的標是會變的。因此測試數據的選取，用例的設計要遵循盡量不要依賴系統的原則，這樣也提高了代碼的穩定性
5. 投資操作的前置條件是：可用余額要大於投資金額，如何保證這個條件，有兩種方法：
1) 後台充值足夠多的錢
2) 判斷當前用戶余額夠不夠，不夠就充值，可以調用查詢介面查詢用戶余額，調用充值介面進行充值——因為API操作是非常快的，這也提高了測試用例的效率
6. 保證用例的獨立性：每一個測試用例都要重新打開瀏覽器
Ⅷ 如何用自己的電腦搭建web伺服器
如何用自己的電腦搭建web伺服器
這個可以直接網路搜索就有的。第一條經驗裡面就有裡面內容很詳細。搭建的時候。要看清楚自己的電腦是什麼系統。XP和WIN7的系統是有不同步驟的。
參考資料：:jingyan../article/9f63fb91d583b7c8400f0eef.
如何利用自己的電腦搭建WEB伺服器
如何利用自己的電腦搭建WEB伺服器？有各種方法，現在總結如下：
一、apache
1，下載wamp（windows+apache+mysql+php）環境安裝包，解壓到本地，就可以本地搭建web網站了，不過這種方法要求對代碼和apache比較精通。
2，下載phpstudy環境安裝包，解壓到本地，這個環境適合學習及本地測試，操作非常小白，界面式操作。
3，下載upupw適配安裝包，這個也是界面式的，可以選擇IIS、APACHE、KANGLE等各種環境。
二、IIS
目前windows7以上版本的系統，都支持IIS7.0。操作步驟比較繁瑣。
如何用自己的電腦搭建web伺服器，讓外網的用戶訪問
1、建議使用虛擬機，選擇好你需要的平台，在機子上裝好系統，以及對應的web服務端，然後在你的路由器上做好埠映射。
2、你要有個公網IP,如果沒有固定IP的話，可以用動態域名還做。
1.咱們先假定是固定IP的，如何域名解析？（我在區域網中用靜態IP，是固定的）
2.動態IP又如何域名解析？
3.自己的家的電腦想試試，還有就是學校的一台電腦伺服器也想試試
如何搭建自己的Web伺服器
安裝護衛神.主機大師，一鍵安裝web環境，支持IIS+ASP+ASP.+PHP+FTP+MYSQL+主機系統
如何用自己的電腦做一個WEB伺服器
伺服器具備的條件是24小時開機，因為要向外開放網路。web的話就必須搭建相應的環境，比如你製作的網站是asp環境就必須搭建asp環境的，還有php，jps等等，根據自己的需求安裝環境，還有其他的web應用。搭建網站的條件是1.域名（等等）2.伺服器（自己電腦，或者購買伺服器）3.腳本（aspaspxphpjsp等等）為了防止別人入侵你的網站你可以安裝相應的軟體來防止別人入侵你的網站比如：安全寶，安全狗。
xp用戶請下載iis for xp 的壓縮包。網路一下即可
一、IIS的添加
請進入「控制面板」，依次選「添加/刪除程序→添加/刪除Windows組件」，將「Inter信息服務（IIS）」前的小鉤去掉（如有），重新勾選中後按提示操作即可完成IIS組件的添加。用這種方法添加的IIS組件中將包括Web、FTP、NNTP和SMTP等全部四項服務。
二、IIS的運行
當IIS添加成功之後，再進入「開始→程序→管理工具→Inter服務管理器」以打開IIS管理器，對於有「已停止」字樣的服務，均在其上單擊右鍵，選「啟動」來開啟。
三、建立第一個Web站點
比如本機的IP地址為192.168.0.1，自己的網頁放在D:Wy目錄下，網頁的首頁文件名為Index.htm，現在想根據這些建立好自己的Web伺服器。
對於此Web站點，我們可以用現有的「默認Web站點」來做相應的修改後，就可以輕松實現。請先在「默認Web站點」上單擊右鍵，選「屬性」，以進入名為「默認Web站點屬性」設置界面。
1．修改綁定的IP地址：轉到「Web站點」窗口，再在「IP地址」後的下拉菜單中選擇所需用到的本機IP地址「192.168.0.1」。
2．修改主目錄：轉到「主目錄」窗口，再在「本地路徑」輸入（或用「瀏覽」按鈕選擇）好自己網頁所在的「D:Wy」目錄。
3．添加首頁文件名：轉到「文檔」窗口，再按「添加」按鈕，根據提示在「默認文檔名」後輸入自己網頁的首頁文件名「Index.htm」。
4．添加虛擬目錄：比如你的主目錄在「D:Wy」下，而你想輸入「192.168.0.1/test」的格式就可調出「E:All」中的網頁文件，這裡面的「test」就是虛擬目錄。請在「默認Web站點」上單擊右鍵，選「新建→虛擬目錄」，依次在「別名」處輸入「test」，在「目錄」處輸入「E:All」後再按提示操作即可添加成功。
5．效果的測試：打開IE瀏覽器，在地址欄輸入「192.168.0.1」之後再按回車鍵，此時就能夠調出你自己網頁的首頁，則說明設置成功！
四、添加更多的Web站點
1．多個IP對應多個Web站點
如果本機已綁定了多個IP地址，想利用不同的IP地址得出不同的Web頁面，則只需在「默認Web站點」處單擊右鍵，選「新建→站點」，然後根據提示在「說明」處輸入任意用於說明它的內容（比如為「我的第二個Web站點」）、在「輸入Web站點使用的IP地址」的下拉菜單處選中需給它綁定的IP地址即可（如圖1）；當建立好此Web站點之後，再按上步的方法進行相應設置。
如何在自己的電腦上搭建web伺服器
常見的Web伺服器有IIS，d和tomcat。Httpd和tomcat只需要下載只需要下載二進制包，解壓，從解壓目錄的bin目錄下運行d.exe或者startup.bat啟動即可。tomcat運行在java環境下，啟動之前還需要安裝java的jdk運行環境。另外，IIS自帶在微軟的Visual studio工具包里，安裝好以後可以通過控制面板裡面的安裝或關閉windows功能添加啟動服務。網路上都有相關安裝教程，可以參閱。
如何用nodejs搭建web伺服器
用nodejs搭建web伺服器方法：
引入需要用到的幾個模塊：
協議模塊
var = require('');
url解析模塊
var url = require('url');
文件系統模塊
var fs = require("fs");
路徑解析模塊
var path = require("path");
創建服務並在指定的埠監聽：
創建一個服務
var Server = .createServer(this.processRequest.bind(this));
在指定的埠監聽服務
Server.listen(port,function(){
console.log("[HttpServer][Start]","runing at :"+ip+":"+port+"/");
console.timeEnd("[HttpServer][Start]");
});
在創建服務的時候需要傳遞一個匿名函數processRequest 對請求進行處理，processRequest接收2個參數，分別是request和response, request對象中包含了請求的所有內容，response是用來設置響應頭以及對客戶端做出響應操作。
processRequest:function(request,response){
var hasExt = true;
var requestUrl = request.url;
var pathName = url.parse(requestUrl).pathname;
對請求的路徑進行解碼，防止中文亂碼
pathName = decodeURI(pathName);
如果路徑中沒有擴展名
if(path.extname(pathName) === ''){
如果不是以/結尾的，加/並作301重定向
if (pathName.charAt(pathName.length-1) != "/"){
pathName += "/";
var redirect = ":"+request.headers.host + pathName;
response.writeHead(301, {
location:redirect
});
response.end();
}
添加默認的訪問頁面,但這個頁面不一定存在,後面會處理
pathName += "index.";
hasExt = false; 標記默認頁面是程序自動添加的
}
獲取資源文件的相對路徑
var filePath = path.join("/webroot",pathName);
獲取對應文件的文檔類型
var contentType = this.getContentType(filePath);
如果文件名存在
fs.exists(filePath,function(exists){
if(exists){
response.writeHead(200, {"content-type":contentType});
var stream = fs.createReadStream(filePath,{flags:"r",encoding:null});
stream.on("error", function() {
response.writeHead(500,{"content-type": "text/"});
response.end("<h1>500 Server Error</h1>");
});
返迴文件內容
stream.pipe(response);
}else { 文件名不存在的情況
if(hasExt){
如果這個文件不是程序自動添加的，直接返回404
response.writeHead(404, {"content-type": "text/"});
response.end("<h1>404 Not Found</h1>");
}else {
如果文件是程序自動添加的且不存在，則表示用戶希望訪問的是該目錄下的文件列表
var = "<head><meta charset='utf-8'></head>";
try{
用戶訪問目錄
var filedir = filePath.substring(0,filePath.lastIndexOf('\'));
獲取用戶訪問路徑下的文件列表
var files = fs.readdirSync(filedir);
將訪問路徑下的所以文件一一列舉出來，並添加超鏈接，以便用戶進一步訪問
for(var i in files){
var filename = files[i];
+= "<div><a href='"+filename+"'>"+filename+"</a></div>";
}
}catch (e){
+= "<h1>您訪問的目錄不存在</h1>"
}
response.writeHead(200, {"content-type": "text/"});
response.end();
}
}
});
},
Ⅸ 如何用webpack實現自動化的前端構建工作流
1.首先 git clonehttps://github.com/bjtqti/font-end-boilerplate.git 一份到本地
2.然後 npm install && npm run start
3. 最後打開瀏覽器，運行http://localhost:4000
5.解析一下這些目錄的用途：
|- dist下面存放發布的js、css 文件 （自動生成）
|- node_moles 下面是npm安裝的包文件 （自動創建）
|- src 存放具體的業務代碼
|- task 存放webpack的配置代碼
|- task
|- webpack.api.conf.js 用於webpack的api方式的配置文件 server.js用到
|- webpack.dev.conf.js 用於CLI方式使用webpack 的配置
|- webpack.prod.conf.js 用於生產環境打包輸出的配置
|- .postcssrc.js post-loader的插件配置文件，由於後面用了postcss.config.js所以重命名了這個
|- .babelrc babel的配置文件，為了解析es6語法
|- .gitignore git的配置，指出要不參與版本控制的文件及文件夾
|- .package.json 包配置文件
|- postcss.config.js post-loader配置
|- README.md github.com自動創建的項目說明文件
|- server.js 本地開發調式用的web伺服器
需要重點掌握的是package.json 其次是server.js 和 task相關的配置內容
先看看package.json:
{
"name": "shop",
"version": "1.0.0",
"description": "webapp frontend shop",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
"build": "webpack --config ./task/webpack.prod.conf.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"mall",
"shop"
],
"author": "frog",
"repository": "https://github.com/bjtqti/font-end-boilerplate.git",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.15.0"
}
}
這個文件其實就是一個json對象，里邊重點掌scripts 的用法。比如start：node server.js 對應 npm run start （或 npm start) 這條命令就相當於是在node環境下運行了server.js
那麼server.js(文件名可以自已定）里邊保存了一些什麼內容？
var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
contentBase: webpackConfig.output.path,
publicPath: webpackConfig.output.publicPath,
//hot: true,
//stats: { colors: true },
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
//lazy: true,
//path:'/hmr',
log: () => {}
})
app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)
app.listen(4000, function () {
console.log("Listening on port 4000!");
});
其實就是使用了express來搭建一個小型的開發伺服器。然後引用webpack-dev-middleware和webpack-hot-middleware兩個中間件，結合webpack.api.conf.js的配置，實現打包和熱載入src下面的代碼。由於這里涉及到express的知識，不打算涉及全棧的前端只需了解一下即可，因為後面還有一個封裝好的工具可以替代這些工作--webpack-dev-server
所以我在script中添加了一個dev：webpack-dev-server 的命令，這全完是為了方便學習這兩種方式的應用，實際上任選其中一種就好了，這一種可能會感覺更簡單，因為它是第一種方式的封裝，但是要深入的了解，還是建議看看第一種方式，Vue-cli也是採用的第一方式，因為它可供開發者自由支配的空間更大。唯一需要注意的是，如果使用webpack-dev-server的話，目前還不能用webpack3.0+。
接下來運行npm run build 看看，dist目錄下是不是多了一些文件？這就是將來可以直接發布到線上的代碼了。
到這里，打包，發布 都介紹完了，下面簡單演示一下熱替換（也就是所謂的無刷新替換效果）。為了演示方便，我在src下放了一些代碼.
當我們打開http://localhost:4000的時候，瀏覽器上有一段綠色的文字:Hello world 還有一個時間毫秒數，加這個毫數的目的是為了演示，如果頁面刷新了，數字會改變。
然後修改style.css中的內容，比如把字體顏色改成紅色，瀏覽器上的字體顏色也相應的變化了，而數字沒有發生改變。如果手動刷新的話，可以看到數字是會變化的。
這不僅會節省時間，而且對於要保存頁面狀態（比如某按鈕選中）的情況非常有用。當我們修改hello.es6的時候，頁面變成了自動刷新，這是因為我沒有使用js的熱替換載入器。
如果對html的修改，也想要自動刷新的話，需要用到插件，發出相應的事件。比如vue-cli中的方式：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
這里只是發出一個通知：action:'reload'，要使頁面自動重新載入，還需要有一個接收通知的代碼：
比如在入口中加入：
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
這個地方比較深奧，沒有弄明白也沒關系，有其它方式同樣可以實現。比如webpack-dev-server 內部已經自動完成了對不支持熱替換的載入器，自動降為刷新。
這也是為什麼在開發環境下使用了extract-text-webpack-plugin（提取css的插件）後，樣式的熱替換變成了刷新效果的原因。