整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML（HyperText Markup Language，超文本標(biāo)記語(yǔ)言）是一種用于定義網(wǎng)頁(yè)內(nèi)容的含義和結(jié)構(gòu)的標(biāo)記語(yǔ)言。除此之外，網(wǎng)頁(yè)還需要 CSS 描述網(wǎng)頁(yè)的展示效果和 JavaScript實(shí)現(xiàn)與用戶的交互性。它不是編程語(yǔ)言。
HTML 是由 Tim Berners-Lee 和同事 Daniel W.Connolly 于 1990 年創(chuàng)立的一種標(biāo)記語(yǔ)言。當(dāng)時(shí)，Tim Berners-Lee 發(fā)明了萬(wàn)維網(wǎng)，并且為了方便閱讀網(wǎng)頁(yè)，又發(fā)明了 HTML、HTTP、URL，使用自制的瀏覽器去訪問(wèn)網(wǎng)頁(yè)。HTML 中元素的設(shè)計(jì)深受 CERN 內(nèi)部的 SGML 為基礎(chǔ)的文件格式 SGMLguid影響。
在Tim Berners-Lee 與 1990年發(fā)明了 HTML 后，經(jīng)過(guò)了24年時(shí)間，到 2014年才發(fā)展到HTML 5，之間經(jīng)歷了HTML 2.0、HTML 3.2、HTML 4.0、HTML4.01，直到HTML 5 這幾個(gè)版本。
Tim Berners-Lee加入的互聯(lián)網(wǎng)工程任務(wù)組（IETF）于 1993 年發(fā)布首個(gè)HTML規(guī)范的提案，并于6個(gè)月后過(guò)期，IETF創(chuàng)建了一個(gè)HTML工作組，并在 1995年完成 HTML 2.0，這是第一個(gè)HTML規(guī)范，而之前的版本只是草案階段，非正式版本。
而之后HTML標(biāo)準(zhǔn)的發(fā)展因?yàn)楦?jìng)爭(zhēng)利益遭到停歇，因此，從 1996 年開(kāi)始，就一直由W3C組織維護(hù)HTML規(guī)范了，W3C 組織將標(biāo)準(zhǔn)化發(fā)布到 4.0版本后，終于在 2000年成為國(guó)際標(biāo)準(zhǔn)。
然而，發(fā)布了四個(gè)版本后，業(yè)界普遍認(rèn)為 HTML 已經(jīng)到了窮途末路，因此也將焦點(diǎn)轉(zhuǎn)移到了XML和XHTML上，因此，HTML迫切需要添加新功能，指定新規(guī)范，從而扭轉(zhuǎn)這一切。
就在這種情況下，一組人在 2004 年成立了 WHATWG，并創(chuàng)立了 HTML5 規(guī)范，同時(shí)也開(kāi)始專門(mén)針對(duì) Web 應(yīng)用開(kāi)發(fā)新功能，Web 2.0 就是在這時(shí)被發(fā)明的。在 2006 年，W3C 又重新介入 HTML，并與 WHATWG 合作共同，最終在 2008 年發(fā)布了 HTML5 工作草案。而在 HTML 5 規(guī)范還未定稿的情況下，各大瀏覽器廠商都開(kāi)始將自家產(chǎn)品升級(jí)以支持 HTML 5 的新功能了。最終在 2014 年 10月 28 日完成標(biāo)準(zhǔn)化。
HTML 5 是基于各種各樣的理念進(jìn)行設(shè)計(jì)的，這些設(shè)計(jì)理念體現(xiàn)了對(duì)可能性和可行性的新認(rèn)識(shí)。但 HTML 5 并不是顛覆性的革新。而是要保持一切新特性平滑過(guò)渡。
因?yàn)樵?HTML 5 之前，在網(wǎng)頁(yè)上看視頻等，只能使用插件，如 Adobe 開(kāi)發(fā)的 Flash，但瀏覽器廠商不想在自家產(chǎn)品上使用插件，因此，HTML 5 中的一個(gè)新特性就是讓瀏覽器直接處理那些原來(lái)要使用 Flash 的富內(nèi)容。
HTML 經(jīng)過(guò)這些年的發(fā)展，已經(jīng)走向成熟，是前端開(kāi)發(fā)中不可或缺的一環(huán)，而 HTML 5 標(biāo)準(zhǔn)還沒(méi)有到最終版本，現(xiàn)在仍處在完善階段。前端要學(xué)習(xí)的還有很多，大家要加油！
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。我們知道 Promise 是 js 異步的一種解決方案，它最大的特性就是可以通過(guò) .then 的方式來(lái)進(jìn)行鏈?zhǔn)秸{(diào)用。
其實(shí)說(shuō)白了axios是對(duì)ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結(jié)一句話就是axios是ajax，ajax不止axios。
axios的使用比較簡(jiǎn)單，文檔講得也非常清晰，你應(yīng)該先閱讀axios的官方文檔：axios文檔。
在html頁(yè)面中直接引入使用:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>以下案例中的get請(qǐng)求地址為crmeb相關(guān)演示站地址，可用于測(cè)試獲取！
<script>
const url = 'https://store.crmeb.net/api/pc/get_category_product'
axios({
url: url,
method: 'get', // 這里可以省略，默認(rèn)為get
}).then(res => {
// 返回請(qǐng)求到的數(shù)據(jù)
console.log(res)
}).catch(err => {
// 返回錯(cuò)誤信息
console.log(err)
})
</script><script>
const url = 'https://store.crmeb.net/api/pc/get_category_product'
axios({
url: url,
method: 'get', // 這里可以省略，默認(rèn)為get
// 這里的鍵值對(duì)會(huì)拼接成這樣url?page=1&limit=3
params: {
page: 1,
limit: 3
}
}).then(res => {
// 返回請(qǐng)求到的數(shù)據(jù)
console.log(res)
}).catch(err => {
// 返回錯(cuò)誤信息
console.log(err)
})
</script><script>
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res => {
// 返回請(qǐng)求到的數(shù)據(jù)
console.log(res)
}).catch(err => {
// 返回錯(cuò)誤信息
console.log(err)
});
</script>如果在開(kāi)發(fā)中需要等到多個(gè)接口的數(shù)據(jù)同時(shí)請(qǐng)求到后才能繼續(xù)后邊的邏輯，那么即可使用并發(fā)請(qǐng)求，axios并發(fā)請(qǐng)求，使用all方法，all方法的參數(shù)為一個(gè)數(shù)組，數(shù)組的每個(gè)值可以為一次請(qǐng)求，請(qǐng)求完成后直接.then即可合并兩次請(qǐng)求的數(shù)據(jù)，返回結(jié)果為一個(gè)數(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>如果你想自動(dòng)把這個(gè)數(shù)組展開(kāi)的話在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組件化開(kāi)發(fā)的時(shí)候一般我們會(huì)通過(guò)npm安裝，引入項(xiàng)目！
npm install axios --save一般在實(shí)際項(xiàng)目中我們并不會(huì)像上邊這樣直接去使用axios請(qǐng)求數(shù)據(jù)，而是將axios封裝在一個(gè)單獨(dú)的文件，這樣做的目的主要是用來(lái)抽取公共邏輯到一個(gè)配置文件里，對(duì)這些公共邏輯做一個(gè)封裝，即使某一天這個(gè)axios框架不維護(hù)了，或者出現(xiàn)了重大bug也不再修復(fù)的時(shí)候，我們可以只修改配置文件即可達(dá)到全局修改的目的，如果把每次請(qǐng)求邏輯都寫(xiě)到對(duì)應(yīng)的組件中，那修改起來(lái)簡(jiǎn)直就是一個(gè)噩夢(mèng)！
在項(xiàng)目的src目錄下創(chuàng)建一個(gè)network文件夾，再在其中創(chuàng)建一個(gè)request.js文件，路徑為：src/network/request.js
// src/network/request.js
// 引入axios
import axios from 'axios'
// 這里未使用default導(dǎo)出，是為了以后的擴(kuò)展，便于導(dǎo)出多個(gè)方法
export function request(config){
// 創(chuàng)建axios實(shí)例
const instance = axios.create({
// 這里定義每次請(qǐng)求的公共數(shù)據(jù)，例如全局請(qǐng)求頭，api根地址，過(guò)期時(shí)間等
// 具體參數(shù)可參考axios的官方文檔
baseURL: 'http://demo26.crmeb.net/api',
timeout: 5000
})
// 攔截請(qǐng)求，如果獲取某個(gè)請(qǐng)求需要攜帶一些額外數(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ā)送請(qǐng)求
return instance(config) 一般我們會(huì)將所有的請(qǐng)求放在一個(gè)api.js文件中，將每次請(qǐng)求封裝為一個(gè)方法,比如我這里會(huì)在request.js的同目錄創(chuàng)建一個(gè)api.js文件封裝我們所有的請(qǐng)求。
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)
})以上就是一個(gè)簡(jiǎn)單的封裝，其中有個(gè)攔截請(qǐng)求和攔截響應(yīng)，可能很多初學(xué)的人理解起來(lái)有點(diǎn)吃力，我在這里以個(gè)人淺見(jiàn)闡述，希望能帶給你些許啟發(fā)！
還是發(fā)揮閱讀理解能力，攔截?cái)r截其實(shí)就是此路是我開(kāi)，此樹(shù)是我栽，要想過(guò)此路，留下買(mǎi)路錢(qián)，攔截請(qǐng)求就是比如某些請(qǐng)求需要攜帶一些額外的信息才能訪問(wèn)，實(shí)際項(xiàng)目中最常見(jiàn)的就是需要登錄后才能查看的信息，請(qǐng)求中就必須攜帶token才能訪問(wèn)，就可以在這里處理，還有攔截響應(yīng)，比如請(qǐng)求到數(shù)據(jù)之后，發(fā)現(xiàn)不符合要求，先攔下來(lái)處理一下，再返回給前端，這就是一個(gè)攔截器的基本工作流程！
如下所示：
// 攔截請(qǐng)求，如果獲取某個(gè)請(qǐng)求需要攜帶一些額外數(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實(shí)例中，使其只作用于某個(gè)實(shí)例！
然后來(lái)看一下 axios 的所有配置信息:
數(shù)據(jù)來(lái)自axios中文文檔
文將介紹如何制作Axure高保真數(shù)據(jù)可視化原型，供大家參考和學(xué)習(xí)。
高保真數(shù)據(jù)可視化原型設(shè)計(jì)，稱得上是Axure高階水平。
數(shù)據(jù)可視化在原型設(shè)計(jì)中是一個(gè)重要的分支，但是對(duì)于Axure使用者具有一定要求。清晰的數(shù)據(jù)可視化原型可以減少與需求方和研發(fā)工程師等的溝通成本，且可具象。
Axure本身具有高級(jí)交互的能力，結(jié)合數(shù)據(jù)可視化的方式，以低成本的方式，達(dá)到預(yù)期的演示的效果，本文介紹如何制作Axure高保真數(shù)據(jù)可視化原型。
在Axure操作界面中，拖入一個(gè)Inline Frame（中文：內(nèi)聯(lián)框架）。
Axure本身可生成HTML頁(yè)面，本質(zhì)上而言，只要帶有實(shí)例圖的為HTML文件，并可正常訪問(wèn)即可。至于HTML是以何種方式制作生成，不做限制。
點(diǎn)擊進(jìn)入圖后，所示頁(yè)面如下圖。左側(cè)為折線圖效果對(duì)應(yīng)的代碼，右側(cè)是折線圖的效果。可以在左側(cè)修改代碼，運(yùn)行后可在右側(cè)查看修改后的效果（此處不做贅述）。
點(diǎn)擊頁(yè)面右下角的“Download”按鈕，下載折線圖的HTML頁(yè)面。
使用任意一種代碼編輯器（筆者喜歡用komodo），打開(kāi)html頁(yè)面，修改html頁(yè)面代碼中自帶的api。如果發(fā)現(xiàn)運(yùn)行后html報(bào)錯(cuò)api過(guò)期時(shí)，需要自行創(chuàng)建api，將其進(jìn)行替換。
創(chuàng)建一個(gè)新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒(méi)有要求。將下載的HTML頁(yè)面，放置在文件夾中。
雙擊拖入Axure操作界面的內(nèi)聯(lián)框架（Inline Frame），選擇“l(fā)ink to an external url or file”（選擇一個(gè)外部的urd或文件），輸入HTML頁(yè)面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：
點(diǎn)擊生成html頁(yè)面按鈕：
將生成html文件的目錄，更改為上文創(chuàng)建的文件夾。如下圖：
點(diǎn)擊確認(rèn)后，“axure and echarts”文件夾中會(huì)存在axure生成的html頁(yè)面和html頁(yè)面。同時(shí)，會(huì)自動(dòng)打開(kāi)一個(gè)html頁(yè)面，可查看效果，如下圖：
這樣，我們就通過(guò)一個(gè)簡(jiǎn)單的例子，在Axure中實(shí)現(xiàn)了數(shù)據(jù)可視化效果。
筆者在本文中分享的是實(shí)現(xiàn)的方法，但是實(shí)際應(yīng)用過(guò)程中，通過(guò)一款數(shù)據(jù)可視化產(chǎn)品的視角去實(shí)操，會(huì)讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。
作者：魚(yú)日，公眾號(hào)：issnail
本文由 @魚(yú)日 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
