从Flask向Angular传递URL参数

1 投票

1 回答

2281 浏览

提问于 2025-04-18 12:40

我有一个Flask的路由叫做 search，它用来提供搜索结果的json数据，还有一个叫 index 的路由，用来展示搜索页面，简单来说就是这样：

@app.route('/search')
def search():
    res = querydb(request.args)
    return jsonify(res)


@app.route('/index')
def index():
    return render_template('index.html')

在index.html里，我有一些搜索表单，这些表单和Angular的变量连接在一起，还有一个按钮可以通过Angular的 $http 来查询 /search，并使用搜索表单中的网址参数。

我希望能够根据网址来获取初始结果，比如说，如果网址是 /index?color=red，那么它可以加载 /index 页面，并在加载时从 /search?color=red 获取结果。

为了实现这个功能，我把jinja模板标签重新定义为 <%blah%>（这样就不会和Angular的标签冲突），然后用 render_template('index.html', color='red') 来渲染页面，html中有一段代码是这样的：

<div ng-controller="MainCtrl" ng-init="fetch('<%color%>')"> </div>

我觉得应该有更好的方法把参数从Flask传给Angular（尝试 $routeParams 或 $location.search() 似乎在Flask中不起作用，返回的是空对象）。或者我应该以其他方式来组合视图吗？

web development client-server communication flask angular url parameters json data search functionality jinja templates

1 个回答

你应该用 Angular 来处理页面的路由，用 Flask 来处理 API 的接口。所以你的 Flask 文件可能看起来像这样：

@app.route('/api/search')
def search():
    res = querydb(request.args)
    return jsonify(res)


@app.route('/')
def index():
    return render_template('index.html')

Angular 应用

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
            .when('/index', {
                templateUrl: 'mainView.html'
                controller: 'MainCtrl'
            });
});

控制器

var MainCtrl = function($location, $http, $scope) {
    //Now you can access the search params
    var searchParams = $location.search();

    $http.get('/api/search?color=' + searchParams.color).success(function(data) {
        $scope.results = data;
    });
}

现在如果你访问 http://somedomain/#/index?color=red，它应该会获取初始的结果。注意，Angular 处理的是 URL 中 /# 后面的部分。此外，你还需要引入 angular-route.js 文件，才能让 Angular 的路由功能正常工作。

当你使用 Angular 路由时，你的 index.html 文件只需要包含你想在每个视图中使用的基本内容，而页面的布局会放在 mainView.html 中。index.html 中需要在 <body> 标签里放一个 <div ng-view></div>，这样 Angular 就知道在哪里插入 mainView.html 的内容。

回答于 2025-04-18 由 Python大师

分享举报

从Flask向Angular传递URL参数

1 个回答

撰写回答