xure小白的福利又來了，本教程主要講述查看原型的一系列基礎操作以及相關設置。

希望大家邊學邊操作，學習效果更佳哦。

Axure RP 8 教程 – 查看原型

1.快速預覽查看原型

快速原型的快捷鍵為“F5”。或者，單擊快捷鍵功能中的預覽圖標進行預覽。導航菜單“發布”-“預 覽選項”中進行預覽設置。

2.生成HTML查看原型。

生成原型的快捷鍵為“F8”。或者，單擊快捷鍵功能中生成圖標。還可以通過導航菜單“發布”-“生成原型文件”中進行生成。

3.生成部分原型界面

發布原型時，如果不需要將所有頁面生成或者發布，可以在生成HTML的設置中打開“頁面”的設置，取消“生成所有頁面”的勾選，則可以設置生成指定的頁面。注意，子級頁面無法單獨發布，勾選子級頁面時會自動勾選父級頁面。如果需要單獨發布子級頁面，需要在頁面管理面板將子級頁面的級別調整到一級頁面。

4.為原型添加標志

在生成HTML的設置中有“標志”的設置，可以為原型添加圖片標識或者文字標題。原型發布后會顯示在工具欄的頁面面板中。

5.發布原型到AxShare

發布原型到AxShare是將做好的原型發布到Axure官方提供的空間中，通過自動生成的網址進行訪問。發布到AxShare的快捷鍵為“F6”。發布到AxShare需要注冊相關賬號，網址為：http：//share.axure.com/

6.移動設備設置

制作移動設備原型需要遵循規范將原型制作成標準尺寸。移動設備原型尺寸計算工具：http：//www.iaxure.com/share/yxcc/ （個別移動設備可能會有出入）。

除了制作標準原型尺寸，還需要在生成的HTML文件配置中，進行“移動設備”的設置，讓生成的HTMl文件“包含視圖接口標記”才可以正常顯示。

7.web字體設置

當原型使用一些特殊字體時，在沒有安裝該字體的設備上將無法正常顯示。web字體可以較好的解決這個問題。

方法一

需要網絡以及在線CSS文件支持，以FontAwesome字體為例。在web字體設置中，單擊“+”添加新的配置，勾選“鏈接到CSS文件”，將該字體官方網站提供的“.CSS”文件地址填入到超鏈接中即可。這樣只要瀏覽原型時有網絡支持，即可正常顯示字體。

方法二

支持在線字體和本地字體，以FontAwesome字體為例，圖中的src是在線字體代碼。

如果是本地字體代碼應該為： font-family：FontAwesome

src：url（’fontawesome-webfont.ttf’）format(‘true-type’)

注：使用本地字體需要將字體文件“.ttf”復制到生成的HTML文件中。

本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。

 var Person=function(){
 			this.name='匿名',
 			this.age=18 
 		}
 		var Student=function(){}
 Student.prototype=new Person();
 var s1=new Student();
 

var div1=document.getElementById('div1');
var p1=document.creatElement('p'); //添加新節點
p1.innerHTML="this is p1"; 
div1.appendChild(p1); //添加新創建的元素
var p2=document.getElementById('p2');
div1.appendChild(p2); //移動元素，這里的p2不加引號

var div1=document.getElementById('div1');
var par=div1.parentElement;

var p2=document.getElementById('p2');
var child=p2.childNodes; //返回子元素的標簽數組

ev.stopPropagation()

a標簽的各種屬性都可以獲取到，取需要的數據就可以了

window.width
window.height

// 例如當前網址是 https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href) // https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.protocol) // https:
consloe.log(location.pathname) //timeline/frontend
consloe.log(location.search) //?a=10&b=10
consloe.log(location.hash) // #some

history.back()
history.forward()

SpringBoot Thymeleaf模板

原理：服務端渲染、模板變量替換。與 Spring Boot，MVC方言完美結合。

優勢

• 傳統J2E使用JSP方式開發，但 Spring Boot對JSP支持不好。JSP規范與Servlet規范緊密耦合，使用JSP需要喚起servlet進程。
• Thymeleaf支持HTML原型，可靜態使用。

劣勢

• 傳統模板頁面基于服務端，需要喚起servlet容器，走springmvc全套流程。
• 模板渲染IO操作
• 較難緩存。用戶請求在訪問到springboot server時，還會經過nginx，如果使用模板渲染，很難在nignx上做緩存。

2 動靜請求分離

動靜分離的設計原理：區分動靜態請求。

• 動態請求:每次都從服務端獲取數據請求。
• 靜態請求:不必每次從服務端獲取的頁面展示請求。

優勢

• 架構分離：分層優化
• 緩存策略分離：例如前端做nginx、瀏覽器、cdn等緩存。
• 研發框架分離：提高研發效率。

靜態資源服務器，例如nignx；動態請求服務器，例如Tomcat；前后端采用Ajax等前端異步化交互技術發起請求，獲取數據，填充靜態頁面。

實現技術

Ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

Nginx可以用作動態請求反向代理，也可以用作靜態請求使用html resources。

3 靜態請求緩存效率化

主要是CDN分發技術和Nginx proxy cache文件緩存。

CDN是內容分發網絡，具有高性能、高可用、高擴展性的優點。

• CDN是帶有緩存性質的網絡節點。即CDN是web服務器，提供了靜態資源緩存機制。
• 分發能力，請求分發到最近的節點。
• 具有負載均衡能力，沒有單點問題。
• 需要專門運營維護CDN網絡。

未使用CDN技術

使用CDN技術緩存靜態資源。

客戶端發起請求到DNS，查詢ip地址，根據CNAME返回CDN管控節點域名，實現DNS解析權移交。管控節點根據請求ip地址分發到最近的CDN節點（負載均衡與分發）。如果在CDN節點命中緩存，直接返回，否則請求靜態資源并備份。

運營廠商CDN實現原理中，HTTP 緩存頭起到了重要作用。

Http緩存頭 cache-ctrol

private:客戶端可以緩存.

public:客戶端和代理服務器都可以緩存。

max-age=xxx:緩存的內容將在XXX秒后失效。

no- cache:強制向服務端再驗證一次，判斷是否生效。

no-store:不緩存請求的任何返回內容。

有效性判斷（驗證時帶上如下參數）

ETag:資源唯一標識

If-None-Match:客戶端發送的匹配Etag標識符

Last- modified:資源最后被修改的時間

If- Modified- Since:客戶端發送的匹配資源最后修改時間的標識符

4 動態請求緩存

4.1 動態請求前置緩存

前置緩存的使用，提高查詢速度，減少數據庫訪問量。

• Redis集中式緩存
• 本地緩存：Tomcat緩存

包括主動失效、被動失效，需要解決緩存擊穿、降級等問題。

4.2 使用Nginx proxy cache

Nginx Lua腳本編程定制化：

在nginx生命周期中，Lua通過協程機制在某些環節實現鉤子機制。例如master進程創建worker進程時，運行初始化腳本；檢測到某個url請求時，直接調用Redis返回response，從而省掉springboot webmvc流程。

Nginx proxy cache使用較少，因為再快的文件讀寫速度也比不上內存的讀寫速度。

4.3 Nginx shared dic 本地緩存

原理：nginx服務器的內存緩存，所有worker進程共享，通過lua操作。

lua腳本

獲取緩存空間，從中獲取list緩存。如果為空則轉發請求，獲取響應數據并緩存。

5 全頁面靜態化技術

原理：服務端通過類似爬蟲的技術直接完成動態請求加載完成后的靜態頁面，將HTML、CSS、JS資源全部加載完后的頁面生成后部署到CDN上。

我們訪問頁面，發起靜態請求從CDN中獲取html資源文件，發起動態請求訪問nginx、tomcat獲取響應數據，然后在客戶端渲染頁面。需要三步操作。

如果將渲染好的頁面直接放到CDN上，則客戶端可以直接獲取。

優勢：無需加載、無需動態請求、可全部CDN化

實現：

• 類似爬蟲的技術
• 無頭瀏覽器：類似瀏覽器，加載HTML文件，運行JavaScript，執行Ajax請求，獲取數據，填充到DOM，輸出靜態資源文件。

HtmlUnit

Httpclient無法搞定動態請求，HtmlUnit可用于爬蟲，測試自動化工具等

HtmlUnit是一個無界面瀏覽器Java程序。為HTML文檔建模，提供了調用頁面、填寫表單、單擊鏈接等操作的APl。提供了對 Javascript的支持，甚至可以使用相當復雜的Ajax庫，根據配置的不同模擬 Chrome、 Firefox等瀏覽器。

上圖.test.html書寫錯誤

來源：https://www.cnblogs.com/dtyy/p/15531799.html