學(xué)習(xí)前端之前，先了解HTML的發(fā)展史

TML（HyperText Markup Language，超文本標(biāo)記語言）是一種用于定義網(wǎng)頁內(nèi)容的含義和結(jié)構(gòu)的標(biāo)記語言。除此之外，網(wǎng)頁還需要 CSS 描述網(wǎng)頁的展示效果和 JavaScript實現(xiàn)與用戶的交互性。它不是編程語言。

發(fā)明HTML

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

HTML 的發(fā)展

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

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

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

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

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

HTML5

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

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

總結(jié)

HTML 經(jīng)過這些年的發(fā)展，已經(jīng)走向成熟，是前端開發(fā)中不可或缺的一環(huán)，而 HTML 5 標(biāo)準(zhǔn)還沒有到最終版本，現(xiàn)在仍處在完善階段。前端要學(xué)習(xí)的還有很多，大家要加油！

xios是什么？

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

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

為什么選擇axios?

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

功能特點：

在瀏覽器中發(fā)送XMLHttpRequests請求

在node.js中發(fā)送http請求

支持Promise API

攔截請求和響應(yīng)

轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)

取消請求

自動轉(zhuǎn)換 JSON 數(shù)據(jù)

客戶端支持防御 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的使用比較簡單，文檔講得也非常清晰，你應(yīng)該先閱讀axios的官方文檔：axios文檔。

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

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

Html頁面基本使用

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

獲取一個get請求

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

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

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

發(fā)送一個并發(fā)請求

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

<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>

如果你想自動把這個數(shù)組展開的話在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組件化開發(fā)的時候一般我們會通過npm安裝，引入項目！

組件化開發(fā)中使用

使用npm進行安裝

npm install axios --save

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

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

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

// src/network/request.js

// 引入axios
import axios from 'axios'

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

使用我們封裝的request請求

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

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

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

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

之后再在組件中引入調(diào)用導(dǎo)出的相關(guān)接口方法即可，如：

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

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

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

何為攔截器？

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

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

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

如下所示：

  // 攔截請求，如果獲取某個請求需要攜帶一些額外數(shù)據(jù)
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應(yīng)
    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';

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

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

數(shù)據(jù)來自axios中文文檔

文將介紹如何制作Axure高保真數(shù)據(jù)可視化原型，供大家參考和學(xué)習(xí)。

高保真數(shù)據(jù)可視化原型設(shè)計，稱得上是Axure高階水平。

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

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

第1步：拖入內(nèi)聯(lián)框架（Inline Frame）

在Axure操作界面中，拖入一個Inline Frame（中文：內(nèi)聯(lián)框架）。

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

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

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

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

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

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

第4步：創(chuàng)建一個新的文件夾

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

第5步：使用Axure內(nèi)聯(lián)框架鏈接文件夾中HTML頁面

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

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

點擊生成html頁面按鈕：

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

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

這樣，我們就通過一個簡單的例子，在Axure中實現(xiàn)了數(shù)據(jù)可視化效果。

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

作者：魚日，公眾號：issnail

本文由 @魚日原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商