如何将Django Rest Framework API与AngularJS前端集成并获取数据列表

以下是无额外依赖的最简实现方案，全程使用AngularJS内置能力完成对接：

你提供的API界面参考如下：

1. 准备基础依赖 #

提前下载好AngularJS 1.x版本的本地JS文件，无需额外安装其他工具包。

2. 编写HTML页面结构 #

<!DOCTYPE html>
<html ng-app="listApp">
<head>
  <meta charset="UTF-8">
  <title>数据列表</title>
  <!-- 引入本地AngularJS文件 -->
  <script src="./angular.min.js"></script>
</head>
<body ng-controller="listController">
  <!-- 列表渲染区域 -->
  <ul>
    <li ng-repeat="item in resultList">
      <!-- 字段名根据API实际返回值调整即可 -->
      {{item.id}} - {{item.name}} - {{item.createTime}}
    </li>
  </ul>
</body>
</html>

3. 编写API对接逻辑 #

直接使用AngularJS内置的$http服务发起请求即可，无需引入第三方HTTP库：

var app = angular.module('listApp', []);
app.controller('listController', function($scope, $http) {
  // 替换为实际的API请求地址
  const targetApi = '你的接口地址';

  // 发起GET请求拉取列表数据
  $http.get(targetApi)
    .then(function(res) {
      // 请求成功后将列表数据赋值给作用域变量，返回层级根据API实际结构调整
      $scope.resultList = res.data.data;
    })
    .catch(function(err) {
      // 可选：添加请求异常处理逻辑
      console.log('请求失败', err);
    })
});

• 上述代码仅需要修改接口地址、返回字段匹配你截图中的API规则，即可直接运行
• 如果遇到跨域问题，优先让后端配置CORS跨域权限，是成本最低的解决方案

内容的提问来源于stack exchange，提问作者sanss