0

这是我第一次在 Stack Overflow 上发帖。我正在尝试使用 Python、Jinja2 和 Google App Engine 构建一个相对简单的游戏。目前，我刚刚构建了一些简单的 CRUD 函数，用于创建、编辑、列出和销毁游戏。而且，在大多数情况下，它似乎有效。但是，每当我传递一个值来检索特定游戏时，似乎都没有应用我的 CSS 样式表。但是，只要我不传递任何值，它似乎就可以正常工作。例如，如果我调用诸如“create_game”或“all_games”之类的不带任何参数的函数，它们各自的模板将使用相关的 CSS 样式正确呈现。但是，如果我调用像“edit_game/12345567”这样的函数，则根本不会应用 CSS 样式表，

我不确定问题出在哪里。这可能与模板的呈现方式有关吗？还是某种路由/映射问题？

这是我的 main.py：

    import webapp2
    from controllers.authController import *
    from controllers.baseController import *
    from controllers.gameController import *

    app = webapp2.WSGIApplication([('/', MainPage),                     
            ('/create_game',CreateGame),
            ('/player_games/([\d]+)',PlayerGames),
            ('/all_games',AllGames),
            ('/edit_game/([\d]+)',EditGame),
            ('/delete_game/([\d]+)',DeleteGame),
                    ],
                    debug=True)

和我的 baseController.py：

from controllers.authController import LoginSession
import webapp2
import cgi
import datetime
import urllib
import jinja2
import os
import wsgiref.handlers
from google.appengine.api import users

TEMPLATE_DIR = os.path.join(os.path.dirname(__file__), '../views/templates')
jinja_environment = \
        jinja2.Environment(loader=jinja2.FileSystemLoader(TEMPLATE_DIR))

class BaseHandler(LoginSession):
    @webapp2.cached_property
    def jinja2(self):
        return jinja2.get_jinja2(app=self.app)

    def render_template(
            self,
            filename,
            temp_values,
            **template_args):
            template = jinja_environment.get_template(filename)
            self.response.out.write(template.render(temp_values))

    def authvals(self): 
            current_player = LoginSession.current_player(self)
            url = LoginSession.url(self)
            url_linktext = LoginSession.linktext(self)
            auth_vals = {
                    'url': url,
                    'url_linktext': url_linktext,
                    'c_player': current_player,
            }
            return auth_vals

class MainPage(BaseHandler):    

    def get(self):
            gurl = self.request.get('/create_game')
            gurl_linktext = 'Create a New Game!'
            mp_vals = {
                    'game_url': gurl,
                    'game_url_linktext': gurl_linktext,
            }
            authvals = self.authvals()
            vals = dict(mp_vals.items() + authvals.items())
            self.render_template('index.html', vals)

下面是 gameController.py 中的两个类。虽然“AllGames”似乎可以正确渲染所有内容，包括正确的 CSS 样式，但“PlayerGames”似乎可以渲染正确的 python 生成的内容和 html，但似乎没有使用任何 CSS。我希望 CSS 与“base.html”一起被继承，因为这是应用 CSS 样式的地方。但是，不知何故，这并没有发生。

from models.gameModel import *
from authController import *
from baseController import * 
import baseController
from google.appengine.ext import db
from google.appengine.ext.db import Key

class AllGames(BaseHandler):

    #this returns all games 
    def get(self):
        games = GameModel.all()
        ag_vals = {
            'games': games
        }
        authvals = self.authvals()
        vals = dict(ag_vals.items() + authvals.items())

        self.render_template('all_games.html',vals)

class PlayerGames(BaseHandler):

    #This returns a given player's games
    def get(self,player_id):
        player = users.User(_user_id = 'player_id')

        g = GameModel.all()
        games = g.filter('game_created_by =', player)         
        pg_vals = {
        'games': games
        }
        authvals = self.authvals()
        vals = dict(pg_vals.items() + authvals.items())

        self.render_template('player_games.html',vals)

这是base.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
{% block head %}
    <link type="text/css" rel="stylesheet" href="views/static/css/main.css" />
    <link type="text/css" rel="stylesheet" href="views/static/css/reset.css" />
    <title>O2O: {% block title %}{% endblock %}</title>
{% endblock %}
</head>
<body>
<div class="login">
    {% block login %}
        <table>
            <tr>
                {% if c_player %}
                    <td>You are logged in as: {{ c_player }} </td>
                {% else %}
                    <td>You are not logged in.</td>
                {% endif %}

                <td><a href="{{ url }}">{{ url_linktext }}</a></td> 
            </tr>
        </table>
    {% endblock login %}
</div>
<div class="navbar">
    {% block navbar %}
    <table>
        <col class="navbar" />
        <colgroup class="controls"> 
            <col /> <col /> <col /> <col />
        </colgroup> 
        <tr>
            <th>
                <form action="/create_game" method="post"> 
                    <div><input type="submit" value = "Create a new Game!"></div>
                </form>
            </th>
            <th>
                <form action="/player_games/{{ c_player.user_id() }}" method="get">
                    <!--div><input type="hidden" value = {{ c_player.user_id() }} ></div-->
                    <div><input type="submit" value = "My Games" ></div>
                </form>
            </th>
            <!--th>
                <a href ="player_games/{{ c_player.user_id() }}">My Games</a>
            </th-->
            <th>
                <form action="/all_games" method="get">
                    <div><input type="submit" value = "All Games" ></div>
                </form>
            </th>

            <th>
                Stats?
            </th>
            <th>
                Current Games?
            </th>
        </tr>   
    </table>
    {% endblock navbar %}
</div>
<div class="content">{% block content %}{% endblock %}</div>
<div class="footer">
    {% block footer %}
    &copy; Copyright 2012</a>.
    {% endblock %}
</div>
</body>
</html>

这是 all_games.html，它看起来确实被正确渲染了：

{% extends "base.html" %}
{% block title %} All Games {% endblock %}
{% block content %}     
    <h2>All Games</h2>

    <h4>These are all of the games:</h4>
        <table>
            <tr>
                <th>Time Created:                   </th>
                <th> ----------                     </th>
                <th>Game ID:                        </th>
                <th>Creator:                        </th>
                <th>Edit?                           </th>
                <th>Edit via button?                </th>
                <th>Delete?                         </th>
            </tr>       
            {% for game in games %}
            <tr>                
                <td> {{ game.game_created_at }}     </td>
                <td> ----------                     </td>   
                <td> {{ game.key().id() }}          </td>
                <td> {{ game.game_created_by }}     </td>
                <td>
                    <a href ="edit_game/{{ game.key().id() }}"> edit </a>
                </td>
                <td>    
                <!--button to view the game --> 
                    <form action="/edit_game/{{ game.key().id() }}" method="get">
                        <!--div><input type="hidden" name ="game_id" value={{ game.key().id() }}></div-->
                        <div><input type="submit" value = "Edit Game!" ></div>
                    </form> 
                </td>
                <td>        
                <!-- button to destroy the game -->
                    <form action="/delete_game/{{ game.key().id() }}" method="get">
                        <!--div><input type="hidden" name ="this_game" value={{ game.key().id() }}></div-->
                        <div><input type="submit" value = "Delete This Game?" ></div>
                    </form>
                </td>                           
            </p>
            </tr>                               
        {% endfor %}
        </table>        
{% endblock %}

这里是 player_games.html，它与 all_games.html 几乎相同。然而，这似乎是在没有 CSS 的情况下呈现的，尽管 html 和内容显然是正确显示的：

{% extends "base.html" %}
{% block title %} PLayer's Games {% endblock %}
{% block content %}
    <h2>{{ c_player }}'s Games</h2>

    <h4>These are all of the games:</h4>
    <div id="gamelist">
        <table>
            <tr>
                <th>Time Created:                   </th>
                <th> ----------                     </th>
                <th>Game ID:                        </th>
                <th>Creator:                        </th>
                <th>Edit?</th>
                <th>Delete?</th>
            </tr>       
            {% for game in games %}
            <tr>                
                <td> {{ game.game_created_at }}     </td>
                <td> ----------                     </td>   
                <td> {{ game.key().id() }}  </td>
                <td> {{ game.game_created_by }}     </td>
                <td>    
                <!--button to edit the game --> 
                    <form action="/edit_game/{{ game.key().id() }}" method="get">
                        <!--div><input type="hidden" name ="game_id" value={{ game.key().id() }}></div-->
                        <div><input type="submit" value = "Edit Game!" ></div>
                    </form> 
                </td>
                <td>        
                <!-- button to destroy the game -->
                    <form action="/delete_game/{{ game.key().id() }}" method="get">

                        <div><input type="submit" value = "Delete This Game?" ></div>
                    </form>
                </td>                           
            </p>
            </tr>                               
        {% endfor %}
        </table>
    </div>
{% endblock %}

这是 main.css，这可能不是问题，因为它在某些页面上正确呈现：

.login {
    background-color: black;
    color: #DDDDDD;
}

.navbar {
    background-color: black;
    color: #DDDDDD;
}

.content {
    background-color: white;
}

.footer {
    background-color: #DDDDDD;
}

虽然我怀疑这是否真的与问题相关，但这里也是 authController.py：

import webapp2
import main
from google.appengine.api import users

class LoginSession(webapp2.RequestHandler):
    def current_player(arg):
        return users.get_current_user() 

    def linktext(arg):
        if users.get_current_user():
            return 'logout'
        else:
            return 'Login'

    def url(arg):
        if users.get_current_user():
            return users.create_logout_url(arg.request.uri)
        else:
            return users.create_login_url(arg.request.url)

我的一些代码基于这个简单的笔记应用程序示例：https ://github.com/fRuiApps/cpfthw/tree/master/webapp2 ，因为我发现它有一个很好、清晰的 MVC 结构。显然我的代码要广泛得多，但是关于如何呈现模板的一些代码或多或少基于示例。但是，该示例并没有受到我似乎遇到的 CSS 样式消失问题的影响。即，当我传递编辑特定注释的请求时，该示例似乎可以正确呈现 CSS。

我已经尝试解决这个问题几个小时了，尽管我付出了所有努力，但我似乎一无所获。由于我通常能够在 StackOverflow 上找到非常有用的信息，因此我认为这可能是发布问题的最佳地点。任何帮助将不胜感激！谢谢！

4

1 回答 1

4

您正在使用相对路径加载 CSS。当 HTML 是“顶级”页面 (/create_game) 时，CSS 路径是相对于根的，一切都很好。当您下降一级 (/edit_game/1234) 时，CSS 会尝试从 /edit_game/views 加载。将 HTML 中的链接 href 更改为 begin /views，它可能会起作用。（如果您在您选择的浏览器中检查开发工具，您应该会看到 CSS 的 404，并且您将能够看到浏览器试图从哪里加载它们。）

于 2012-05-22T21:06:34.933 回答