Question

我正在研究flask + Angular + MongoDb应用程序。我在角度使用状态提供程序。各州从申请中加载完美。但是当我刷新页面时，它会抛出404错误。

App.py :(烧瓶）

   application = Flask(__name__)
    @application.route('/')
    def showMachineList():
        print ("Inside the show machine list function")
        return application.make_response(open('templates/index.html').read())

App.js（Angular）

angular.module('testapp', ['ngCookies', 'ngResource',
        'ngSanitize', 'ui.router', 'ui.bootstrap','ngMaterial','ngCookies'
    ])
    .config(function($urlRouterProvider, $locationProvider,$interpolateProvider) {
        $urlRouterProvider.otherwise('/');
        //$interpolateProvider.startSymbol('//').endSymbol('//');
        $locationProvider.html5Mode(true).hashPrefix('!');
    });

国家

angular.module('testapp')
  .config(function ($stateProvider) {
    console.log("inside create outage request")
    $stateProvider
      .state('cor', {
        url: '/cor',
        template: '<cor></cor>'
        //templateUrl: '/static/client/app/acn/acn.html'
      });
  });

我也在index.html中添加了<base href="/">。当我刷新页面时"http://localhost:5000/cor"抛出404。你能让我知道我错过了什么吗？

Answer 1

这是单页应用程序的常见问题。看起来您的Angular应用程序可以在客户端正确处理cor状态，但您的Web服务器无法知道/cor路径应该在初始加载时路由到同一个Angular应用程序

尝试向您的终端添加第二条路线：

@application.route('/')
@application.route('/cor')
def showMachineList():
    ...

或者，您可以使用catch-all route来处理任何路径后缀。

Answer 2

当您刷新页面时，浏览器会将URL“http://localhost:5000/cor”发送到服务器。正如我在您的代码中看到的那样，没有定义/cor路由，只有/。我认为你必须定义一个。

@application.route('/cor')
def showMachineList():
    with open('templates/index.html') as fd:
        content = fd.read()
    return application.make_response(content)

问题可能出在您的模板中：您定义cor链接的问题。你应该有这样的东西：

<a href="#cor">link to cor</a>

我假设你写了这个：

<a href="/cor">link to cor</a>

Python Flask Angular应用程序状态不刷新

2 个答案: