阅读本文大概需要 5~6 分钟
 
 
大家可能最近经常听到 API 这个概念，那什么是API，它又有什么特点和好处呢？
 
wiki 百科镇楼
 
 
 
…[APIs are] a set of subroutine definitions, protocols, and tools for building application software. In general terms, it’s a set of clearly defined methods of communication between various software components.
 
 
翻译：API 是用于构建应用程序软件的一组子程序定义，协议和工具。一般来说，这是一套明确定义的各种软件组件之间的通信方法。（回来再看(。・∀・)ノ）。
 
本篇文章中，我会用浅显的比喻来解释API，接口（interface），协议（protocol）这些基本概念。enjoy it !　
 
假设你有一个银行
 
 
 
 你有一个仓库来存钱，一个记账本来记各种业务。一个简单的管理银行的方法是直接将权限给所有人，让客户自己动手完成各种业务。
 
这种模式下，一个客户想要存钱的话，他需要：
 
拿着钱去银行
打开仓库把钱放进去
把这笔业务写到记帐本上
离开银行
 
显然这存在着问题：
 
想开开仓库门需要废很大力气，并不是所有的人都能打开，还有些人不识字不会记账。
在这个模式下，我们假定所有人都是诚实的，显然这并不成立。（说不定哪一个人存了100块钱记账的时候写了10000块）。
 
这时你遇到麻烦了。
 
雇一个柜员
 
 
要是我们雇一个体格棒，办事还麻利的人来处理开仓库，记账的问题呢？ 
 
小娜登场了。
 
现在模式为：建一个柜台将仓库和记账本和顾客分开，这样顾客就不需要再去管仓库和记账本了。想存钱的话直接找小娜就行。
 
 
这种模式下，要是有人想存钱，他们必须：
 
拿钱去银行
告诉小娜我是 MMM 我想要存￥￥￥。
小娜打开仓库把钱放进去
小娜把业务（transaction ）记录好
告诉你业务办好了
顾客离开银行
 
现在不会发生打不开仓库门或者是记错账的情况了，你觉得很满意。
 
到此我们引出今天的主角API（ Application Programming Interface），它能够帮你实现轻松的和其他软件组件（如服务器，操作系统等）的交互。
 
在上面举的例子中，我们雇一个收纳员帮顾客解决了开仓门，放钱，记账这一系列繁琐的过程。这大大节省了顾客的时间，同时提高了银行的效率。同理，如果我们将操作的具体实施步骤抽象化，这将会大大降低开发人员的负担（去记忆所有的步骤花费的力气），从而大大提高了效率。
 
另外的好处是，只要他们遵循了同一个协议，组件可以交换或者是改变。银行不需要知道时哪一个顾客或者说顾客是怎么进来的，顾客也不需要知道银行拿自己的钱去做什么了。只要负责的柜员在这里并做好工作，整个流程将会继续工作。
 
API 应用范围很广：从操作系统中简单的 fork() 到我们接触的百度地图API，和风天气API，又或者是邢远分享的段子，这些 API 都大大简化了程序员的工作。
 
银行里有什么
 
 
 
你可能已经注意到了银行分成了两个区域：顾客在前台排好队来办理业务，后台完成各种对钱的操作。在中间层，前台和后台发生了交互， 双方都不能越界 ，交互只能发生在中间的区域。
 
在 API 术语里面，我们管中间的这块区域叫做接口 Interface ；在这里各个部分发生交互。在我们的银行中，前台和后台都同意并且规定使用 Interface 来交换信息。
 
现在，我们假定 Bob 想要取钱。他到了柜台找到了小娜，小娜知道该怎样去取钱，她取好了之后告诉了 Bob。
 
 
Bob 这时候又问：“你知道今天的股票行情吗”
 
小娜：？？？？WTF ?
 
在这个例子里面，小娜知道怎样取钱和存钱 , 但是她不知道如何去给Bob查查今天的股票行情是怎样的。这个例子引出了另一个概念 协议（Protocol）。
 
在 API 术语中，协议 是规定了各部分之间如何进行交流的一系列规则的集合。各部分之间想要完成交互必须理解并且遵守同一个协议。
 
同时，我们注意到了交换时用的是中文。如果Bob 对小娜说「我想撳五百蚊出嚟呀唔該」，小娜不懂广东话，所以没法理解Bob说的是什么，这又引出了另一个概念 格式（Format）
 
在程序员的世界里，通用的格式包含 XML 和 JSON。
 
最后，让我们假设银行想要扩展业务到股市，这时候就需要一位特殊的接待员来处理与股票相关的业务了，这时，小冰就登场啦。 
 
 
在 API 术语里面， API 端点 通常是指在同一个接口中提供特定功能子集的服务提供者。在这种情况下，小冰和小娜都是端点。（小冰和小娜是同一个柜台不同功能的提供者）不同的端点可以有不同的协议和不同的格式。
 
总结起来：接口是不同组件进行交互的地方。协议是一系列规定了他们之间怎样进行交互的规则。格式定义了他们通过什么进行交流（JSON或者是XML），端点可以在同一个接口里面提供不同的功能。
 
柜员还能干什么？
 
 
到现在我们把 API 的基础知识过了一遍，接下来我们再来谈一谈 API　的其他特征。w(ﾟДﾟ)w
 
现在又有客户来取钱了，他想要取￥10000。 
 
 
首先，我们可以指示小娜在操作前先去确认一下 Bob 是否真的有这么多钱。（API 能确认所有的操作都是合法的。）
 
小娜查到 Bob 账户里只有一百块了，告诉 Bob 余额不足。（在发生错误的时候 API 会根据错误报告机制发出指示，减轻开发人员的负担。）
 
Bob 认为肯定是哪里出错了，他要求银行给他列一张表，给出他所拥有的每个账户上的余额。结果显示一共有 200 个账户。把他们一下子全给列出来不太实际，所以小娜每次给 Bob 看十个账户，看完了之后再来十个。（这叫做分页（pagination），可以节省带宽和服务器资源，因为你不需要一次获取数据集中的所有内容。）
 
如果 Bob 只想要知道他某一个账户中的余额的话，他可以要求小娜只给她看那个的（这称为过滤（filtering），它还有助于节省带宽和资源，并且更易于导航。）
 
在检查完所有账户之后，鲍勃现在知道他的帐户中确实没有10000美元。他知道爱丽丝购买股票并获得了大量资金，于是伪装成爱丽丝并重新进入银行。他告诉莎莉：“我是爱丽丝，我想从我的账户中提取10000美元。” 小娜识破了他的骗局。（API中内置授权和访问控制，以确保只有授权人员才能访问特定数据。）
 
最后，在试图从银行拿到10000美元失败后，他想报复小娜，他进入银行并多次从账户中提取0.01美元。 （我们可以实施速率限制来控制服务器资源的使用，以确保用户不会滥用服务。）
 
API 通常都会被设计具有这些功能，它可以充当防火墙，在保护您的资源免受滥用的同时允许合法请求通过。
 
再读Wiki
 
 
 
 
…[APIs are] a set of subroutine definitions, protocols, and tools for building application software. In general terms, it’s a set of clearly defined methods of communication between various software components.
 
 
API 是用于构建应用程序软件的一组子程序定义，协议和工具。一般来说，这是一套明确定义的各种软件组件之间的通信方法。
 
现在是不是头脑里对这个概念清晰多了呢。

为了方便各类开发者，现提供免费开放Api接口，所有接口均无使用限制，返回格式全是JSON，所以基本能满足大家的开发需求，但请各位不要将这些Api接入正式项目，因为有一些不稳定因素，目前服务器购买时长是三年，如果到期，我会自动续费，这些Api是我平时业余时间编写，可能有些不能满足需求的情况，请大家在留言区提出来，或者大家写Demo需要一些有关联的数据等等，都可以在留言区告诉我，我有时间一定会给大家处理。
 

api.apiopen.top

json.apiopen.top

 
目前接口列表：
 
新实时段子
 
https://api.apiopen.top/getJoke?page=1&count=2&type=video
 
通过Id查段子
 
https://api.apiopen.top/getSingleJoke?sid=28654780
 
快递查询：
 
https://api.apiopen.top/EmailSearch?number=1012002
 
随机单句诗词推荐：
 
https://api.apiopen.top/singlePoetry
 
随机一首诗词推荐：
 
https://api.apiopen.top/recommendPoetry
 
搜索古诗词：
 
https://api.apiopen.top/searchPoetry?name=古风二首%20二
 
搜索古诗词作者：
 
https://api.apiopen.top/searchAuthors?name=李白
 
模糊搜索古诗词（可搜索诗词名、诗词内容、诗词作者）：
 
https://api.apiopen.top/likePoetry?name=李白
 
获取宋朝古诗词：
 
https://api.apiopen.top/getSongPoetry?page=1&count=20
 
获取唐朝古诗词：
 
https://api.apiopen.top/getTangPoetry?page=1&count=20
 
音乐搜索接口：
 
https://api.apiopen.top/searchMusic?name=不要说话
 
音乐电台接口：
 
https://api.apiopen.top/musicBroadcasting
 
音乐电台详情接口：
 
https://api.apiopen.top/musicBroadcastingDetails?channelname=public_tuijian_spring
 
音乐详情接口：
 
https://api.apiopen.top/musicDetails?id=604392760
 
音乐排行榜接口：
 
https://api.apiopen.top/musicRankings
 
音乐排行榜详情接口：
 
https://api.apiopen.top/musicRankingsDetails?type=1
 
每日视频推荐接口：
 
https://api.apiopen.top/todayVideo
 
视频大纲获取接口：
 
https://api.apiopen.top/videoHomeTab
 
视频分类推荐接口：
 
https://api.apiopen.top/videoCategory
 
视频分类推荐接口：
 
https://api.apiopen.top/videoCategoryDetails?id=14
 
根据ID推荐接口：
 
https://api.apiopen.top/videoRecommend?id=127398
 
新闻接口：
 
https://www.apiopen.top/journalismApi
 
随机推荐热门段子（包含文字、图片、GIF、视频）：
 
https://www.apiopen.top/satinApi?type=1&page=1
 
随机推荐热门段子【神评版本】（包含文字、图片、GIF、视频）：
 
https://www.apiopen.top/satinGodApi?type=1&page=1
 
随机推荐热门段子【神评版本】评论列表：
 
https://www.apiopen.top/satinCommentApi?id=27610708&page=1
 
热门小说推荐列表
 
https://www.apiopen.top/novelApi
 
小说搜索接口
 
https://www.apiopen.top/novelSearchApi?name=盗墓笔记
 
小说详情接口
 
https://www.apiopen.top/novelInfoApi?name=盗墓笔记
 
天气获取接口
 
https://www.apiopen.top/weatherApi?city=成都
 
美图获取接口
 
https://www.apiopen.top/meituApi?page=1
 
个性网名获取接口
 
https://www.apiopen.top/femaleNameApi?page=1
 
创建应用接口
 
https://www.apiopen.top/createUserKey?appId=com.chat.peakchao&passwd=123456
 
增加统计信息接口
 
https://www.apiopen.top/addStatistics?appKey=00d91e8e0cca2b76f515926a36db68f5&type=点击统计&typeId=1&count=2
 
查询统计信息接口
 
https://www.apiopen.top/findStatistics?appKey=00d91e8e0cca2b76f515926a36db68f5
 
用户注册接口
 
https://www.apiopen.top/createUser?key=00d91e8e0cca2b76f515926a36db68f5&phone=13594347817&passwd=123654
 
用户登陆接口
 
https://www.apiopen.top/login?key=00d91e8e0cca2b76f515926a36db68f5&phone=13594347817&passwd=123456
 
由于数据来源于网络，如有侵权，请告知，我将立即删除。
 
还没写完，现在赶项目，有时间了继续完善。

 
目录
 
前言
正文
一、vue项目的前期配置
二、配置config文件中的代理地址
vue cil2旧版本的代理配置——config/index.js
vuecil 3+ 新版本的代理配置--vue.config.js 文件
   
三、封装axios实例 —— request.js
四、封装请求——http.js
五、正式封装API，用于发送请求——api.js
六、如何在vue文件中调用
  
结语

 
前言
 
在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。
 
 
 
如果你能看到这篇文章，鉴于有很多小白可能会参考我这篇文章来进行前期配置，特说明下正式配置路线：
 
 
拿到项目及后台接口，首先做的是配置全局代理及第二点；
全局封装axios及第三点request.js；
过滤axios请求方式，控制路径及参数的格式及第四点http.js；
正式封装api及第五点api.js；
页面调用；
 
 
正文
 
一、vue项目的前期配置
 
新建vue项目，下载axios，并在main.js中导入axios
 
npm i axios -S
 
//main.js
import axios from "axios";
 
二、配置config文件中的代理地址
 
在项目config目录下的修改 index.js文件，这里是主要书写配置多个后台接口。关于代理可能出现的问题，可以查看我的另一篇文档VueCil代理本地proxytable报错的解析；
 
vue cil2旧版本的代理配置——config/index.js
 
 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088
    proxyTable: {
      '/testIp': {
        target: 'http://197.82.15.15:8088',
        changeOrigin: true,
        pathRewrite: { 
          '^/testIp': ''
        }
      },
      '/elseIp': {
        target: 'http://182.83.19.15:8080',
        changeOrigin: true,
        pathRewrite: { 
          '^/esleIp': ''
        }
      },
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

 
vuecil 3+ 新版本的代理配置–vue.config.js 文件
 
关于多代理配置：
 
		 devServer: {
            overlay: { // 让浏览器 overlay 同时显示警告和错误
              warnings: true,
              errors: true
            },
            host: "localhost",
            port: 8080, // 端口号
            https: false, // https:{type:Boolean}
            open: false, //配置后自动启动浏览器
            hotOnly: true, // 热更新
            // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
            proxy: { //配置多个代理
                "/testIp": {
                    target: "http://197.0.0.1:8088",
                    changeOrigin: true,
                    ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/testIp": "/"
                    }
                },
                "/elseIp": {
                    target: "http://197.0.0.2:8088",
                    changeOrigin: true,
                    //ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/elseIp": "/"
                    }
                },
            }
        }
 
其中vue.config.js详细参考我另一篇博客：vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置
 
如果有多后台，就可以在api文件夹下另外新建一个elseApi.js ，书写当前ip下的接口请求。方法同上，只是 let resquest = "/elseIp/request/" 调用的时候把端口更改一下。
 
三、封装axios实例 —— request.js
 
在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。
 
/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message} from 'element-ui';
//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: process.env.BASE_API,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
   config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
   config.headers = {
     'Content-Type':'application/x-www-form-urlencoded' //配置请求头
   }
   //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
   const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
   if(token){
      config.params = {'token':token} //如果要求携带在参数中
      config.headers.token= token; //如果要求携带在请求头中
    }
  return config
}, error => {
  Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等
  
  return response
}, error => {
   /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权，请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        window.location.href = "/NotFound"
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时，请刷新当前页')
    }
    error.message = '连接服务器失败'
  }

  Message.error(error.message)
  /***** 处理结束 *****/
  //如果不需要错误处理，以上的处理过程都可省略
  return Promise.resolve(error.response)
})
//4.导入文件
export default service
 
特殊说明：
 
 
 
鉴于有很多朋友问关于数据转换这块的问题，特在页面中单独回复一下！
 
 
config.data = JSON.stringify(config.data);
config.headers = { 'Content-Type':'application/x-www-form-urlencoded'  }
const token = getCookie('名称')
if(token){ 
  config.params = {'token':token} ; 
  config.headers.token= token; 
}
 
 
上述的代码都是请求的配置项，非必须，也是分情况的，data/headers /params 这种本身的参数都有多种，和后台沟通，需要什么就配什么！
 config.data = JSON.stringify(config.data);为什么不用qs.stringify，因为我的后台想要的只是json类型的传参，而qs转换会转换成为键值对拼接的字符串形式。当然你们后台需要传递字符串类型参数，那就换成qs或者其他格式方式。
 const token = getCookie('名称')这是token的取值，在取之前你肯定需要发请求拿到token，然后setCookie存起来，而名称就是你存的token的名称，每个人的不一样；
 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' }请求头内容的配置，也是不同的，application/x-www-form-urlencoded ：form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式），你可以根据实际情况去配置自己需要的；
 如果最终配完成后，报错连接服务器失败，那是正常的，因为示例配置的服务器地址http://197.0.0.2:8088是假地址，需要替换成自己服务器；
 
 
 
 
以上
 我已经举了很清晰的例子，写代码的过程是自己动脑去搭建工程的，希望能看到我文章的各位，善于搜索，善于思考，善于总结；
 当然我很喜欢帮大家解决问题，但是相关的基础问题，还是建议自己去学习掌握。
 
 
四、封装请求——http.js
 
在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。
 
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http
 
五、正式封装API，用于发送请求——api.js
 
在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。
 
写法一：适合分类导出
 
import http from '../utils/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export function getListAPI(params){
    return http.get(`${resquest}/getList.json`,params)
}
// post请求
export function postFormAPI(params){
    return http.post(`${resquest}/postForm.json`,params)
}
// put 请求
export function putSomeAPI(params){
    return http.put(`${resquest}/putSome.json`,params)
}
// delete 请求
export function deleteListAPI(params){
    return http.delete(`${resquest}/deleteList.json`,params)
}

 
写法二：使用全部导出
 
import http from '../utils/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export default{
 	getListAPI(params){
    	return http.get(`${resquest}/getList.json`,params)
	},
	 postFormAPI(params){
    	return http.post(`${resquest}/postForm.json`,params)
	}
}
 
注意：一个项目中如果后台请求不是同一个ip，而是多个ip的时候，可以在api文件夹下建立多个js，用来调用请求。
 我们看下之前遗留的一个问题：
 
//创建新的axios实例，
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 3 * 1000
})
 
在之前封装公共接口的baseUrl时候，用了webpack中的全局变量process.env.BASE_API，而不是直接写死ip，也是为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况。
 
以上 关于配置环境 和接口 基本搭建完毕，下面看一下调用：
 
六、如何在vue文件中调用
 
方法一：用到哪个api 就调用哪个接口——适用于上文接口分类导出；
 
 import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'

  methods: {
      //promise调用，链式调用， getList()括号内只接受参数；
      //   get不传参
      getList() {
        getListAPI().then(res => console.log(res)).catch(err => console.log(err))
      },
		//post传参
      postForm(formData) {
        let data = formData
        postFormAPI(data).then(res => console.log(res)).catch(err => console.log(err))
      },

      //async await同步调用
      async postForm(formData) {
        const postRes = await postFormAPI(formData)
        const putRes = await putSomeAPI({data: 'putTest'})
        const deleteRes = await deleteListAPI(formData.name)
        // 数据处理
        console.log(postRes);
        console.log(putRes);
        console.log(deleteRes);
      },
   }
 
方法二 ：把api全部导入，然后用哪个调用哪个api——适用于全部导出
 
   import api from '@/api/api'
   methods: {
     getList() {
        api.getListAPI(data).then(res => {
          //数据处理
        }).catch(err => console.log(err))
      }
    }  
 
结语
 
以上就详细介绍了，在vue-cil项目中 如何封装axios，封装请求，封装公共的api，配置多个接口，页面如何调用请求等问题，都是亲测有用的~ 但是这种封装方法的话，更适合大中型项目，配置比较合理，如果是自己小项目，就直接用axios就完事了。。。
 
补充：
 
关于代理的配置及若出现配置代理报错404的问题，可以参考我的文章：代理的配置来解决；
vue3学习：vue3.0中如何使用router路由、vuex、element-plus
 
如果本文对你有帮助的话，请不要忘记给我点赞打call哦~o(￣▽￣)ｄo
 有其他问题留言 over~

 
 
 
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序
 
 
直接跳到末尾 获取完整源码
 
 
 
 
⛅ Weather.io ☔
 
 

  
⚓ 第 1 步 - 设置环境并收集所有资源
  
🛵 第 2 步 - 从 index.html 开始
  
🚋 第 3 步 - 设置索引文件的样式
  
🛸 第 4 步 - 获取 Weather API 和 Unsplash API 密钥
  
🚀 第 5 步 - 从 JavaScript 编码开始
  
🚁 第 6 步 - 免费托管您的网站！
  
代码获取方式
  
🛬 wuhu ! 起飞 !