学习前端之前，先了解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小时内与您取得联系。

整合营销服务商