學習前端之前，先了解HTML的發展史

TML（HyperText Markup Language，超文本標記語言）是一種用于定義網頁內容的含義和結構的標記語言。除此之外，網頁還需要 CSS 描述網頁的展示效果和 JavaScript實現與用戶的交互性。它不是編程語言。

發明HTML

HTML 是由 Tim Berners-Lee 和同事 Daniel W.Connolly 于 1990 年創立的一種標記語言。當時，Tim Berners-Lee 發明了萬維網，并且為了方便閱讀網頁，又發明了 HTML、HTTP、URL，使用自制的瀏覽器去訪問網頁。HTML 中元素的設計深受 CERN 內部的 SGML 為基礎的文件格式 SGMLguid影響。

HTML 的發展

在Tim Berners-Lee 與 1990年發明了 HTML 后，經過了24年時間，到 2014年才發展到HTML 5，之間經歷了HTML 2.0、HTML 3.2、HTML 4.0、HTML4.01，直到HTML 5 這幾個版本。

Tim Berners-Lee加入的互聯網工程任務組（IETF）于 1993 年發布首個HTML規范的提案，并于6個月后過期，IETF創建了一個HTML工作組，并在 1995年完成 HTML 2.0，這是第一個HTML規范，而之前的版本只是草案階段，非正式版本。

而之后HTML標準的發展因為競爭利益遭到停歇，因此，從 1996 年開始，就一直由W3C組織維護HTML規范了，W3C 組織將標準化發布到 4.0版本后，終于在 2000年成為國際標準。

然而，發布了四個版本后，業界普遍認為 HTML 已經到了窮途末路，因此也將焦點轉移到了XML和XHTML上，因此，HTML迫切需要添加新功能，指定新規范，從而扭轉這一切。

就在這種情況下，一組人在 2004 年成立了 WHATWG，并創立了 HTML5 規范，同時也開始專門針對 Web 應用開發新功能，Web 2.0 就是在這時被發明的。在 2006 年，W3C 又重新介入 HTML，并與 WHATWG 合作共同，最終在 2008 年發布了 HTML5 工作草案。而在 HTML 5 規范還未定稿的情況下，各大瀏覽器廠商都開始將自家產品升級以支持 HTML 5 的新功能了。最終在 2014 年 10月 28 日完成標準化。

HTML5

HTML 5 是基于各種各樣的理念進行設計的，這些設計理念體現了對可能性和可行性的新認識。但 HTML 5 并不是顛覆性的革新。而是要保持一切新特性平滑過渡。

因為在 HTML 5 之前，在網頁上看視頻等，只能使用插件，如 Adobe 開發的 Flash，但瀏覽器廠商不想在自家產品上使用插件，因此，HTML 5 中的一個新特性就是讓瀏覽器直接處理那些原來要使用 Flash 的富內容。

總結

HTML 經過這些年的發展，已經走向成熟，是前端開發中不可或缺的一環，而 HTML 5 標準還沒有到最終版本，現在仍處在完善階段。前端要學習的還有很多，大家要加油！

xios是什么？

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。我們知道 Promise 是 js 異步的一種解決方案，它最大的特性就是可以通過 .then 的方式來進行鏈式調用。

其實說白了axios是對ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結一句話就是axios是ajax，ajax不止axios。

為什么選擇axios?

vue的作者尤雨溪推薦使用axios.
符合前后端分離的趨勢，及前端的MVVM的浪潮

功能特點：

在瀏覽器中發送XMLHttpRequests請求

在node.js中發送http請求

支持Promise API

攔截請求和響應

轉換請求和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 XSRF

支持多種請求方式：

axios(config)

axios.request(config)

axios.get(url, [, config])

axios.delete(url, [, config])

axios.head(url, [, config])

axios.post(url, [,data[,config] ])

axios.put(url, [,data[,config] ])

axios.patch(url, [,data[,config] ])

Axios的基本使用

axios的使用比較簡單，文檔講得也非常清晰，你應該先閱讀axios的官方文檔：axios文檔。

在html頁面中直接引入使用:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Html頁面基本使用

以下案例中的get請求地址為crmeb相關演示站地址，可用于測試獲取！

獲取一個get請求

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認為get
  }).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  })  
</script>

在get請求的url中傳參，只需要定義一個params:{}即可！

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認為get
    // 這里的鍵值對會拼接成這樣url?page=1&limit=3
    params: {
      page: 1,
      limit: 3
    }
  }).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  })  
</script>

發送一個post請求，與get請求類似，只需要將method改為post，定義一個data:{}即可,data中的數據則是服務器需要接收的字段數據！

<script>
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  });
</script>

發送一個并發請求

如果在開發中需要等到多個接口的數據同時請求到后才能繼續后邊的邏輯，那么即可使用并發請求，axios并發請求，使用all方法，all方法的參數為一個數組，數組的每個值可以為一次請求，請求完成后直接.then即可合并兩次請求的數據，返回結果為一個數組！

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
</script>

如果你想自動把這個數組展開的話在then()方法中傳入axios.spread()方法即可，如下所示：

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
</script>

但在使用vue組件化開發的時候一般我們會通過npm安裝，引入項目！

組件化開發中使用

使用npm進行安裝

npm install axios --save

一般在實際項目中我們并不會像上邊這樣直接去使用axios請求數據，而是將axios封裝在一個單獨的文件，這樣做的目的主要是用來抽取公共邏輯到一個配置文件里，對這些公共邏輯做一個封裝，即使某一天這個axios框架不維護了，或者出現了重大bug也不再修復的時候，我們可以只修改配置文件即可達到全局修改的目的，如果把每次請求邏輯都寫到對應的組件中，那修改起來簡直就是一個噩夢！

封裝一個axios的請求文件request.js

在項目的src目錄下創建一個network文件夾，再在其中創建一個request.js文件，路徑為：src/network/request.js

// src/network/request.js

// 引入axios
import axios from 'axios'

// 這里未使用default導出，是為了以后的擴展，便于導出多個方法
export function request(config){
    // 創建axios實例
    const instance = axios.create({
        // 這里定義每次請求的公共數據，例如全局請求頭，api根地址，過期時間等
        // 具體參數可參考axios的官方文檔
        baseURL: 'http://demo26.crmeb.net/api',
        timeout: 5000
    })
    
    // 攔截請求，如果獲取某個請求需要攜帶一些額外數據
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
    
    // 發送請求
    return instance(config)

使用我們封裝的request請求

一般我們會將所有的請求放在一個api.js文件中，將每次請求封裝為一個方法,比如我這里會在request.js的同目錄創建一個api.js文件封裝我們所有的請求。

import { request } from '../api/request'

// 獲取分類
export const getHomeCategory = () => {
    return request({
        url: '/category'
    })
}

// 獲取banner圖
export const getHomeBanner = () => {
    return request({
        url: '/pc/get_banner'
    })
}

之后再在組件中引入調用導出的相關接口方法即可，如：

import { getHomeBanner } from "../network/api"

getHomeBanner().then(res => {
	console.log(res)
})

以上就是一個簡單的封裝，其中有個攔截請求和攔截響應，可能很多初學的人理解起來有點吃力，我在這里以個人淺見闡述，希望能帶給你些許啟發！

何為攔截器？

還是發揮閱讀理解能力，攔截攔截其實就是此路是我開，此樹是我栽，要想過此路，留下買路錢，攔截請求就是比如某些請求需要攜帶一些額外的信息才能訪問，實際項目中最常見的就是需要登錄后才能查看的信息，請求中就必須攜帶token才能訪問，就可以在這里處理，還有攔截響應，比如請求到數據之后，發現不符合要求，先攔下來處理一下，再返回給前端，這就是一個攔截器的基本工作流程！

axios有一個全局攔截的方式：axios.interceptors()

攔截成功后必須return返回，否則數據無法請求到

如下所示：

  // 攔截請求，如果獲取某個請求需要攜帶一些額外數據
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )

axios還為我們提供了一些全局配置，如下：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

當然也可以將其配置在我們之前創建的axios實例中，使其只作用于某個實例！

然后來看一下 axios 的所有配置信息:

數據來自axios中文文檔

文將介紹如何制作Axure高保真數據可視化原型，供大家參考和學習。

高保真數據可視化原型設計，稱得上是Axure高階水平。

數據可視化在原型設計中是一個重要的分支，但是對于Axure使用者具有一定要求。清晰的數據可視化原型可以減少與需求方和研發工程師等的溝通成本，且可具象。

Axure本身具有高級交互的能力，結合數據可視化的方式，以低成本的方式，達到預期的演示的效果，本文介紹如何制作Axure高保真數據可視化原型。

第1步：拖入內聯框架（Inline Frame）

在Axure操作界面中，拖入一個Inline Frame（中文：內聯框架）。

第2步：選擇帶有實例圖的HTML頁面

Axure本身可生成HTML頁面，本質上而言，只要帶有實例圖的為HTML文件，并可正常訪問即可。至于HTML是以何種方式制作生成，不做限制。

第3步：修改實例圖樣式，編輯HTML頁面代碼

點擊進入圖后，所示頁面如下圖。左側為折線圖效果對應的代碼，右側是折線圖的效果。可以在左側修改代碼，運行后可在右側查看修改后的效果（此處不做贅述）。

點擊頁面右下角的“Download”按鈕，下載折線圖的HTML頁面。

使用任意一種代碼編輯器（筆者喜歡用komodo），打開html頁面，修改html頁面代碼中自帶的api。如果發現運行后html報錯api過期時，需要自行創建api，將其進行替換。

第4步：創建一個新的文件夾

創建一個新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒有要求。將下載的HTML頁面，放置在文件夾中。

第5步：使用Axure內聯框架鏈接文件夾中HTML頁面

雙擊拖入Axure操作界面的內聯框架（Inline Frame），選擇“link to an external url or file”（選擇一個外部的urd或文件），輸入HTML頁面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：

第6步：Axure界面中操作生成html文件

點擊生成html頁面按鈕：

將生成html文件的目錄，更改為上文創建的文件夾。如下圖：

點擊確認后，“axure and echarts”文件夾中會存在axure生成的html頁面和html頁面。同時，會自動打開一個html頁面，可查看效果，如下圖：

這樣，我們就通過一個簡單的例子，在Axure中實現了數據可視化效果。

筆者在本文中分享的是實現的方法，但是實際應用過程中，通過一款數據可視化產品的視角去實操，會讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。

作者：魚日，公眾號：issnail

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

題圖來自Unsplash，基于CC0協議

在線咨詢

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：快速接入 GitHub、QQ 第三方登錄方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商