个人中心
gpt4 book ai didi

python - 与 Google App Engine 和 Flask 一起使用时 Angular 路由不起作用

转载 作者：太空狗 更新时间：2023-10-29 19:26:40 26 4
gpt4 key购买 nike

我正在尝试做的事情:

我正在尝试在 Google App Engine 上构建一个 RESTful Flask 应用程序，其中 Angular 处理路由和 View 逻辑，而 Flask 处理后端逻辑和资源。

问题:

当我启动 GAE 的开发服务器时，第一页加载完美。问题是，当我单击页面顶部的推荐链接时，正在加载的模板没有改变。

到目前为止我做了什么

虽然看起来我在下面粘贴了很多代码，但大部分都是标记，其中并没有任何复杂的应用程序逻辑，因此略读就足够了

我计划先构建前端，然后再构建后端(尽管我已经进行了一些后端设置)。目前，该应用程序不依赖于 flask 应用程序(它没有任何应用程序逻辑，也没有任何请求处理程序)

这是我的 app.js 文件，到目前为止我所做的只是路由，没有逻辑:

// app.js, only angular code in project and only does routing
var rcsApp = angular.module('rcsApp', [
    'ngRoute'
]);

rcsApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'templates/welcome-page.html'
            }).
            when('/index', {
                templateUrl: 'templates/welcome-page.html'
            }).
            when('/referrals', {
                templateUrl: 'templates/referrals.html'
            }).
            when('/404', {
                templateUrl: 'templates/404.html'
            }).
            otherwise({
                redirectTo: '/404'
            });

}]);

这是我的 app.yaml 文件，这是我用来提供静态页面的文件

# This file specifies your Python application's runtime configuration
# including URL routing, versions, static file uploads, etc. See
# https://developers.google.com/appengine/docs/python/config/appconfig
# for details.

# TODO: Enter your application id below. If you have signed up
# using cloud.google.com/console use the "project id" for your application
# id.
application: placeholder
version: 1
runtime: python27
api_version: 1
threadsafe: yes

# Handlers define how to route requests to your application.
handlers:
# App Engine serves and caches static files contained in the listed directories
# (and subdirectories). Uncomment and set the directory as needed.
#- url: /client
#  static_dir: client

- url: /css
  static_dir: static/css

- url: /img
  static_dir: static/img

- url: /js
  static_dir: static/js

- url: /templates
  static_dir: templates

- url: /api/.*  
  script: main.app

- url: .*
  static_files: templates/app-view-wrapper.html
  upload: templates/app-view-wrapper.html

# Third party libraries that are included in the App Engine SDK must be listed
# here if you want to use them.  See
# https://developers.google.com/appengine/docs/python/tools/libraries27 for
# a list of libraries included in the SDK.  Third party libs that are *not* part
# of the App Engine SDK don't need to be listed here, instead add them to your
# project directory, either as a git submodule or as a plain subdirectory.
# TODO: List any other App Engine SDK libs you may need here.
#libraries:
#- name: jinja2
#  version: latest

这是整个应用的基本 html 模板:

templates/app-view-wrapper.html

<!-- templates/app-view-wrapper.html -->
<!DOCTYPE HTML>

<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" ng-app="rcsApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.5.1/css/foundation.min.css"/>
        <link rel="stylesheet" href="/css/style.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        <script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>
        <script src="/js/app.js"></script>
        <title>Website Title</title>
    </head>
    <body>
        <header>
            <div class="row">
                <div class="large-4 columns"><img src="/img/website-logo.png" alt="Website logo"></div>
                <div class="large-8 columns">
                        <a href="#" class="button right">555-555-5555</a>
                        <a href="#" class=" button right">Make an Appointment</a>
                </div>
            </div>
            <div class="row" id="nav-row">
                <nav class=" top-bar">
                    <section class=" top-bar-section">
                        <ul class="left">
                            <li><a href="/">Home</a></li>
                            <li><a href="/">Services</a></li>
                            <li><a href="/">Meet the Doctor</a></li>
                            <li><a href="/">Patients</a></li>
                            <li><a href="/referrals">Referring Doctors</a></li>
                            <li><a href="/">Contact Us</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
            <div ng-view></div>
        </header>
        <footer class="row">
            <div class="large-5 columns">
                <h3>Location</h3>
                <div>123 ABC STREET</div>
                <div>Phone Number:  555-5555555</div>
                <div>Email: email@email.com</div>

            </div>
            <div class="large-4  columns">
                <h3>Quick Contact</h3>

                <div>Work:  555-5555555</div>
                <div>Cell:   555-5555555</div>
                <div>Fax: 555-5555555</div>
            </div>
            <div class="large-3 columns">
               Lorem Ipsum Sit Dolor Amet
            </div>

        </footer>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
        <script src="/js/script.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>

下面是三个模板:

templates/welcome-page.html

<!-- templates/welcome-page.html -->
<div><h1>MAIN PAGE</h1></div>

templates/referrals.html

<!-- templates/referrals.html -->
<div><h1>REFERRALS PAGE</h1></div>

模板/404.html

<!-- templates/404.html -->
<div><h1>404</h1></div>

文件层次结构如下:

- rcsbackend
  - templates
  - static
    - img
    - js
    - css
  - app.yaml
  - main.py

最佳答案

你的解决方案成功了，因为默认情况下 html5mode 被禁用，这就是为什么只有 # 之后的 URL 被 Angular 识别的原因路由，并且您在 URL 为您工作之前放置了路由。

解决方案

您需要在您的应用程序中启用html5mode 才能使您的路由正常工作，只需执行$locationProvider.html5Mode(true)。在您的 Angular 配置阶段。

代码

.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
})

现在你可以回到你的旧代码，将解决你的问题。

更新

要使用相对链接围绕您的应用程序进行链接，您需要在文档中设置一个。

<base href="/">

引用这个SO answer在应用程序中启用 html5mode 时会有所帮助。

关于python - 与 Google App Engine 和 Flask 一起使用时 Angular 路由不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30574398/

26 4 0
文章推荐： python - Sublime Text 3 REPL - 在同一 REPL 窗口中打开程序
文章推荐： python - 使用 Flask-SQLAlchemy 批量插入
文章推荐： python - 在 KV 语言中使用 Kivy Garden Graph
文章推荐： C# 捕获直接 3D 屏幕
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com