如何利用阿里云提供的后端接口学习

最新推荐文章于 2025-08-04 10:00:55 发布

原创

最新推荐文章于 2025-08-04 10:00:55 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#阿里云 #vue

本文介绍了如何利用阿里云提供的新闻API进行前端开发学习，特别是通过Vue.js框架来渲染数据。作者分享了如何获取和配置阿里云API，以及在Vue组件中调用接口的具体实现，展示了将数据实时渲染到页面上的过程。

自学前端利用阿里云提供的数据学习

https://market.aliyun.com/data阿里云api
这里面有很多api可以免费调用
在这里插入图片描述

示例

自学过程中想做个新闻的网页，后台数据来源是阿里云提供的接口，本人使用Vue开发的，这里分享一下如何拿到后台数据。
使用阿里云市场中的api作为新闻数据来源
在真实的项目中，通常是使用自己服务器的api

阿里云：https://www.aliyun.com/

进入官网登录

新闻api：https://market.aliyun.com/products/57126001/cmapi011150.html

在这里插入图片描述
自己学习免费体验100次我是不够的，后来买了1块钱的1000次去学习。

Vue简单开发（渲染阿里云提供的数据）

使用axios库发送ajax请求，
这里把自己写的新闻组件放到这里：有新闻列表的接口和新闻频道的接口。

连接服务器

import axios from "axios";
import {
   
   APPCODE} from "./config";

export async function getNewsChannels() {
   
   
  var resp = await axios.get("http://ali-news.showapi.com/channelList", {
   
   
    headers:{
   
   
      Authorization :`APPCODE ${
    
    APPCODE}`
    },
  });
  return resp.data.showapi_res_body.channelList;
}

export async function getNews(channelId,page=1,limit=10) {
   
   
  var resp = await axios.get("http://ali-news.showapi.com/newsList", {
   
   
    headers: {
   
   
      Authorization: `APPCODE ${
    
    APPCODE}`,
    },
    params:{
   
   
      channelId,
      page,
      maxResult:limit,
      needAllList:false,
      needContent: 1,
    },
  });
  return resp.data.showapi_res_body.pagebean;
}