我正在尝试用Apache部署一个演示Angular Flask应用程序。我的项目目录是/var/www/backend/basicapp/。此目录包含:
app.py
from flask import Flask, jsonify, render_template
from flask_cors import CORS, cross_origin
app = Flask(__name__)
CORS(app)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return app.send_static_file('index.html')
@app.route('/facts')
def facts():
return jsonify("Honey never spoils. Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old!")
@app.route('/jokes')
def jokes():
return jsonify("Why don't scientists trust atoms? Because they make up everything!")
if __name__=='__main__':
app.run()
app.wsgi
import sys
import logging
sys.path.insert(0, '/var/www/basicapp/backend')
from app import app as application
此外,这个目录还包含一个static文件夹,我在其中放置了Angular的所有构建文件。此静态文件夹还包含index.html文件,您可以在基本路由中看到该文件。
下面是Apache的httpd.conf文件中的虚拟主机配置:
<VirtualHost *:80>
ServerName 192.170.160.71
WSGIDaemonProcess basicapp user=apache group=apache threads=5
WSGIScriptAlias /basicapp /var/www/basicapp/backend/app.wsgi
<Directory /var/www/basicapp/backend>
WSGIProcessGroup basicapp
WSGIApplicationGroup %{GLOBAL}
Require all granted
</Directory>
ErrorLog /var/www/basicapp/backend/logs/error.log
CustomLog /var/www/basicapp/backend/logs/access.log combined
</VirtualHost>
现在,当我启动Apache服务器并访问www.example.com时192.170.160.71/basicapp/,我可以在UI上看到我的主页。同样,当我访问192.170.160.71/basicapp/facts/和192.170.160.71/basicapp/jokes/时,我可以看到UI上呈现的相应页面。但是,当我同时访问这两个路由(**192.170.160.71/basicapp/facts/和192.170.160.71/basicapp/jokes/jobs *)并刷新页面时,我看到的不是前端UI,而是后端数据以JSON的形式显示在屏幕上。基本上,它不是显示我用Angular编写的前端html和CSS,而是显示后端json消息,就像在app.py文件中显示/facts路由或/jokes路由一样。这种特殊的行为只在刷新页面时发生,我希望避免这种情况。我能做错什么呢?
它应该显示:correct behavior
但是在刷新页面时,它显示的不是UI:wrong behavior
请注意,只有在刷新页面或直接转到路由时,后端数据才会突然显示。我在主页上有一个按钮,可以转到事实路线,点击按钮后,前端UI就会正确显示。
最初,我只尝试render_template(index.html),但没有成功。然后我去了Flask文档,遇到了Single Page Application(SPA),我试图在代码中添加它,正如你所看到的。但那也没用。
2条答案
按热度按时间mrphzbgm1#
或者,您可以在Angular应用程序中使用基于散列的路由。这也应该能解决问题。
kq0g1dla2#
在我的应用程序中,前端和后端的url名称是相同的,这就是为什么会有一个名称冲突,导致后端数据呈现。基本上,为前端和后端保留单独的url名称解决了这个问题。