AngularJS-如何从 AngularJS 前端函数更改后端 Python 变量的值？

Question

我目前正在开发一个基于 Web 的应用程序，其后端使用 Django 和 Python 开发，前端使用 AngularJS 开发。

前端的其中一个页面上有一个表单，用户可以使用该表单将后端记录和存储的数据导出到电子表格中。

后端记录的所有数据都是“时间敏感的”，目前后端只设置了一个时区（UTC）。我想为添加多个新时区“创建”设置，以便记录的数据可以导出到不同的时区。

时区在 project/apps/appAbc/abc/settings.py 中设置：

class Production(Settings):
    ...
    TIME_ZONE = 'UTC'
    ...

“导出”表单有许多字段（预设、数据类型、按数量/期间排序数据、要导出到的文件类型），我刚刚添加了一个“时区”下拉列表：

<section class="panel panel-brand export-page panel-no-border-radius">
<div class="panel-body panel-body-fixed-md">
    ...
    <div class="divider"></div>
    <div class="row">
        <label data-i18n="Timezone:" class="col-sm-3"></label>
        <div ul-timezone-picker callback="selectTimezone" class="col-sm-9" default-label={{presetTimezone}} btn-class="btn-xs btn-default"></div>
    </div>
    <div class="divider"></div>
    <div class="row" ul-scroll-to-me="scrollToFtype">
        <label data-i18n="File type:" class="col-sm-3"></label>
        <div ul-options-menu class="col-sm-9" options="ftypeOptions"
             callback="selectFType" warning="{{ftypeWarning}}"
             btn-class="btn-xs btn-default" default-idx="0" default-label="{{presetFtype}}"></div>
    </div>
    <div class="divider divider-lg"></div>
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            <button class="btn btn-sm btn-block btn-brand" ng-hide="!btnDisabled" ng-click="setDownloadUrl(true)">
                <i class="ti-export"></i>
                <span data-i18n="Export"></span>
            </button>
            <a class="btn btn-sm btn-block btn-brand" role="button" target="_blank" href="{{downloadURL}}" ng-hide="btnDisabled">
                <i class="ti-export"></i>
                <span data-i18n="Export"></span>
            </a>
        </div>
    </div>
</div>

在 Pages/directive.js 中，我向 ulTimezonePicker 控制器添加了多个时区：

.directive('ulTimezonePicker', function() {
    return {
        ...
        controller: function ($scope) {
            $scope.options = [{label: 'UTC', value: 0},
            // Add in other timezones
            {label: 'GMT', value: 1},
            {label: 'BST', value: 2},
        ];
        ...
    ...
})

表单上ul-timezone-picker字段调用的selectTimezone()函数在project/libs/front/app/scripts/app/pages/exportCtrl.js中定义：

angular.module('app.pages').controller('ExportCtrl',
    function(...) {
        ...
        $scope.selectTimezone = function(option){
            if(option) {
                $scope.timezone = option;
                if(option.label != $scope.presetTimezone) {
                    $scope.presetTimezone = undefined;
                }
            }
        };
    ...
    }
}

所以，我的问题是，如何让selectTimezone() 函数实际更改settings.py 中定义的TIME_ZONE 变量的值？

我尝试在函数中声明变量的实例：

Production.TIME_ZONE = $scope.timezone;

但是当我这样做并在浏览器中查看包含表单的页面时，浏览器控制台会提示我一个错误：

ReferenceError：生产未定义

我如何从 AngularJS 函数中实际获取该 Python 类，以更改其中一个变量的值？

Answer 1

您不会与 AngularJS 中的 Python 类对话。您的 Python 应用和 Angular 应用是两个独立的程序，它们甚至不在同一台计算机上运行。

这里的挑战是发明一种这两个程序可以交流的“语言”。有很多方法可以设计这种语言，HTTP 是一个很好的默认选择。

您的后端使用的是 Django，而 Django 非常擅长理解和响应 HTTP 请求。花一两天时间阅读 Django 教程，弄清楚如何制作 Django 应用程序，然后思考您的应用程序需要能够处理的 HTTP 端点。将它添加到您的后端，稍微测试一下，然后转到 Angular 应用程序。

但要小心 - Django 应用程序通常不依赖存储在 class Production 之类的类中的全局状态，而是将状态存储在数据库中。

一旦你有了后端，使用 Angular 的$http service 将请求发送到你刚刚添加的地址。

我有点含糊（抱歉），但我在这里假设您目前是 Django 新手，本教程将比我可能提供的帮助更大。祝你好运！