【问题标题】:GAE/Python best practice for a pop-up alert?弹出警报的 GAE/Python 最佳实践?
【发布时间】:2015-05-31 17:21:07
【问题描述】:

当用户输入会创建重复项的值时,我需要在 Google App Engine 中弹出警报。最好的方法是什么?

我找到了一种方法,但它远非优雅:

当用户输入重复的项目代码时,我会显示一个新页面“error-message.html”,它会向用户解释发生了什么并提供一个“返回”按钮。但是,我宁愿在“add-project.html”页面上显示警报。 Javascript 是个好主意,但它无法在数据库中验证,所以没用。

在 GAE/Python 中显示由代码触发的警报框的最佳做法是什么?

因此,我们将不胜感激任何帮助或建议!

谢谢!

代码:

我现在正在开发的应用程序是一个简单的项目经理工具。我正在使用 GAE 中包含的 webapp2。

当前工作流程: 1) 在 AddProject 中,我向用户展示了一个输入新项目数据的页面(“add-project.html”)。该页面基于 JINJA 模板。用户填写数据并单击提交。 2) 如果项目代码已经存在,提交调用 SaveAddedProject 会在 NDB 中检查。 3)如果项目代码还没有在 NDB 中,则新项目保存在 NDB 中,代码重定向到一般项目页面。 4)如果项目存在,我会显示一个名为“error-message.html”的新页面,它告诉用户他/她正在输入重复值并提供一个返回按钮。然后用户可以更改他的值并重试。

型号:

class Project(ndb.Model):
  # Models and individual Project entry
  proj_id = ndb.StringProperty(required = True)
  proj_desc = ndb.StringProperty(required = True)
  proj_status = ndb.StringProperty(required = True)

调度员:

class AddProject(webapp2.RequestHandler):
# Displays template to fill-in data for new project, 
# then calls SaveAddedProject
  def post(self):
    user = users.get_current_user() # We use Google's login system
    logout_url = users.create_logout_url(self.request.url)
    template_values = {
        'user_id': user,
        'logout_url': logout_url,
    }

    template = JINJA_ENVIRONMENT.get_template('add-project.html')
    self.response.write(template.render(template_values))

class SaveAddedProject(webapp2.RequestHandler):
# Saves a new project. Is called from AddProject
  def post(self):
    proj_id_str = self.request.get('proj_id')
    proj_desc_str = self.request.get('proj_desc')
    proj_status_str = self.request.get('proj_status')
    # The add template already validates required fields aren't empty :-)

    # Verify we don't duplicate the project_id
    pq = Project.query(ancestor = get_projects_key())
    pq = pq.filter(Project.proj_id == proj_id_str)
    pq_result = pq.fetch(limit=1)
    if len(pq_result) > 0:  # Notify the user
            template_values = {'error_message': 'Project ID ' + proj_id_str + ' already exists',
            }
            template = JINJA_ENVIRONMENT.get_template('error-message.html')
            self.response.write(template.render(template_values))
    else:
        # Create new project
        project = Project(parent=get_projects_key()) # Use root ancestor key  
        # Populate fields, save to NDB
        project.proj_id = proj_id_str
        project.proj_desc = proj_desc_str
        project.proj_status = proj_status_str
        project.put()
        self.redirect('/projects')

add-project.html 的 HTML:

<!DOCTYPE html>
{% autoescape true %}
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/pages.css" />
    <title>Action List</title>
    <script>
      function validateForm() {
    var count = 0;
    var x = document.forms["form1"]["proj_id"].value;
    if (x == null || x == "") {
       count = 1;
       }
     var x = document.forms["form1"]["proj_desc"].value;
     if (x == null || x == "") {
       count = 1;
       }
    if (count == 1) {
       document.getElementById('AlertMsg').innerHTML = '<font color="red">Please fill in all fields marked with *</font>';
        return false;
       }
     }
</script>
</head>
<body>
  <h2>Add Project</h2>
  <br>
  <b>User: {{ user_id }} </b>
  <br><br>
  <form name="form1" action="/p-save-add" onsubmit="return validateForm()" method="post">
    <div>
      ID * <input value="" name="proj_id" size="15">
     Description * <input value="" name="proj_desc" size="50">
     Status: <select name='proj_status'>
        <option value='Open'>Open</option>
        <option value='Closed'>Closed</option>
      </select>
    </div>   
    <br>
    <div><input type="submit" value="Save"></div>
  </form>
  <br>
  <br>
  <b id='AlertMsg' > </b>
</body>
</html>
{% endautoescape %}

error-message.html 的 HTML:

<!DOCTYPE html>
{% autoescape true %}

<script>
function goBack() {
  window.history.back();
}
</script>


<html>
  <head>
    <title>ActionList</title>
     <link type="text/css" rel="stylesheet"      href="/stylesheets/messages.css" />
  </head>

<body>
  <h3> Sorry, an error ocurred!</h3>    
  {{ error_message }}
  <br>
  <br>
  <button onclick="goBack()">Back</button>
</body>

{% endautoescape %}

【问题讨论】:

    标签: python html google-app-engine


    【解决方案1】:

    您应该同时使用这两种方法。简单地显示错误页面的方法是从安全角度(需要在服务器上进行验证,因为可以以绕过 JavaScript 验证的方式提交表单)和从兼容性角度处理问题的正确方法透视图(浏览器可能会禁用 JavaScript 并在没有它的情况下访问您的表单)。

    但是,从用户体验的角度来看,在与表单相同的页面上获得验证错误是很好的,而不必导航到某个新页面来查看错误(并且必须再次填写表单)。请注意,即使您的验证检查必须在服务器上进行,您仍然可以通过 JavaScript 在 UI 中进行此验证;您可以通过使用XMLHttpRequest 在 JavaScript 中提交表单来做到这一点,以便您的 JavaScript 代码能够查看/处理响应。然后,您可以让您的响应消息将此指示为各种可能的错误之一。

    例如,查看“反馈”机制在my website 上的工作原理;您会注意到有一个版本的表单可以在没有 JavaScript 的情况下工作(“/feedback”页面),但如果您启用了 JavaScript,该按钮实际上会在 JavaScript 中打开一个对话框,使用 XMLHttpRequest 提交表单,如果表单提交失败,直接在对话框中报告错误,无需导航到新页面(通过读取响应的状态码或查看服务器返回的 JSON 响应中包含的详细错误消息)。

    【讨论】:

    • 感谢您的宝贵反馈。我将开始研究双重解决方案。
    猜你喜欢
    • 2021-08-19
    • 2015-06-20
    • 1970-01-01
    • 2018-03-03
    • 2013-10-09
    • 2011-09-23
    • 2019-11-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多