美文网首页
图文实战-vue结合api接口开发移动端页面(1)

图文实战-vue结合api接口开发移动端页面(1)

作者: 麟12138 | 来源:发表于2019-04-24 18:44 被阅读0次

    在学前端的过程中,我们都会被没有后台数据困扰。虽然可以做前端的界面,但是没有实时更新的数据,只能自己敲点假数据,这样做出来的网站只能自己看看,并没有实际的用途。

    所以在这里,我们可以去了解api接口平台提供的接口,并且结合api接口去做一个网站,到项目完成之后上传到服务器,实现输入网址就能看到自己的网站。

    记录自己做的一个手机端新闻网,适配各种移动端的网页。自己看一下vue安装教程教程,这里不多说。

    不废话,直接上干货

    1,装VUE及其相关模块

    需要用到axios,router

    vue自己百度安装,安装好之后到创建项目。

    router在创建vue项目的时候可以选,无需另外安装

    axios安装

    npm install --save axios vue-axios

    然后在Main.js文件添加以下代码

    import axios from 'axios'

    Vue.prototype.$axios = axios

    这样在其他vue文件就可以直接用this.$axios发送请求了

    2,申请api接口

    后台数据我选择易源api提供的接口,官网

    https://www.showapi.com/

    创建账户申请对应的api,我选择的是免费的新闻api

    申请之后,打开控制台点击我的资源包,如果申请成功就显示对应的api,然后点击我的应用,就可以看到apiId和秘钥

    点击新闻api接口

    就可以看到接口的文档,上面有清晰的说明,我们直接调用就可以了。那么暂时到这里,下一章开始说怎么使用,以及处理返回的数据

    相关文章

      网友评论

          本文标题:图文实战-vue结合api接口开发移动端页面(1)

          本文链接:https://www.haomeiwen.com/subject/dghngqtx.html