django 视图 - 带有缩略图的超链接答案

【问题标题】：django views - hyperlinks with thumbnailsdjango 视图 - 带有缩略图的超链接
【发布时间】：2016-08-18 21:09:28
【问题描述】：

我是 django 前端 Web 开发的新手。

我的模板文件夹中有一个index.html，其中有两个用于注册或登录的缩略图，单击它们会将您定向到signup.html 和login.html。我已经在urls.py 中包含了相应的网址。我不知道如何编辑我的views.py，以便我可以记录用户为了执行导演而采取的选项。我在 HTML 代码中使用了超链接和缩略图。

目前我的views.py 看起来像这样：

 from django.shortcuts import render
 from .models import Customer

 # Create your views here.
 def index(request):
    return render(request, 'newuser/index.html', {})

 def login(request):
    return render(request, 'newuser/login.html', {})

def signup(request):
    return render(request, 'newuser/signup.html', {})`

还有urls.py:

from django.conf.urls import url 
from . import views

urlpatterns = [
    url(r'^$', views.index, name = 'index'),
    url(r'^login$', views.login, name = 'login'),
    url(r'^signup$', views.signup, name = 'signup'),
]

最后，这是我的index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Zucumber </title>
    <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/bootstrap-theme.min.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> 
    <link rel = "stylesheet" href = "{% static 'css/newuser.css' %}">
</head>
<body>
    <div class = "page-header">
        <h1> Welcome to My Site </h1>
    </div>
    <style>
      .container {
           margin-left: 300px;
           margin-right: 300px;
      }
   </style>
   <div class = "container">
       <div class="row">
           <div class="col-xs-6 col-md-3">
                <a href="signup" class="thumbnail">
                <img src="/static/img/signup.jpg" alt = "Sign Up as New User">
                </a>
                <h3> Sign Up </h3>
           </div>
           <div class="col-xs-6 col-md-3">
               <a href="login" class="thumbnail">
               <img src="/static/img/login.jpg" alt = "Log In as Existing User">
               </a>
               <h3> Log In </h3>
           </div>
       </div>
    </div>
</body>
</html>

【问题讨论】：

完全不清楚你在问什么。当用户点击注册时，他们将进入注册视图，登录时也是如此。你的问题到底是什么？
@DanielRoseman，一旦他们进入注册视图，我想收集表单数据，如果我编辑相应的视图，页面将不会显示。如何编辑索引视图，以便我可以使用 if-else 呈现注册和登录？
那么您是否尝试获取用户放入字段的信息，然后对这些数据进行处理？或者您是否试图让用户从 index.html 重定向到某个视图？
@MichaelPlatt，我想将它们重定向到 index.html 中的适当视图。但我使用了超链接和缩略图，因为这是我做出的设计选择。如果我有一个按钮，我可以使用 on-click 属性...但是在这种情况下我该如何实现呢？
不确定您使用的是哪个版本的 Django，但我会在此处为您指出此文档：docs.djangoproject.com/en/1.10/intro/tutorial01 在使用 Django 时它对我有很大帮助，而且听起来您没有完全掌握 Django 如何充分发挥作用。基本上每个视图都有一个随附的 .html 文件和视图方法。尝试读取该链接并构建示例应用程序，看看它是如何工作的。如果您仍然感到困惑，请随时询问:-)

标签： python html django twitter-bootstrap

【解决方案1】：

我不确定我是否完全按照您的要求进行操作，但如果它只是在 url 中引导用户，那么您应该使用带有类似这样的 url 模板标签

<a href="{% url 'signup' %}" class="thumbnail">
    <img src="/static/img/signup.jpg" alt = "Sign Up as New User">
</a>

<a href="{% url 'login' %}" class="thumbnail">
    <img src="/static/img/login.jpg" alt = "Log In as Existing User">
</a>

因为您在 urls.py 中命名了 url，您可以在 url 模板标签中按名称引用它们，它会找出完整的 url。

例如，您将这个登录名命名为

url(r'^login$', views.login, name = 'login'),

使用以下

<a href="{% url 'login' %}" class="thumbnail">click here</a>

将导致它使用 url http://yoursite.com/login 进行渲染

如果您实际上希望记录用户进行的点击，这会稍微复杂一些，并且您可能希望设置一些模型来保存数据，然后以某种方式捕获视图中的点击

【讨论】：

【解决方案2】：

请避免在 Django 中硬编码网址。您可以在此处使用反向 url 匹配的强大功能。由于您已经为您的网址分配了名称，因此您可以在您的 index.html 中添加 container，如下所示：

<div class = "container">
   <div class="row">
       <div class="col-xs-6 col-md-3">
            <a href="{% url 'signup' %}" class="thumbnail">
            <img src="/static/img/signup.jpg" alt = "Sign Up as New User">
            </a>
            <h3> Sign Up </h3>
       </div>
       <div class="col-xs-6 col-md-3">
           <a href="{% url 'login' %}" class="thumbnail">
           <img src="/static/img/login.jpg" alt = "Log In as Existing User">
           </a>
           <h3> Log In </h3>
       </div>
   </div>
</div>

这将有助于使用您的urls.py 重定向到相应的网址。

接下来，您需要创建一个forms 以显示在signup 和login 页面上。由于您已经从模型中导入了Customer，我假设您要为它们创建signup 和login。

所以你可以输入你的forms.py:

from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django import forms

from .models import Customer

class LoginForm(AuthenticationForm):
    username = forms.CharField(label="Username", max_length=30,
                               widget=forms.TextInput(attrs={'class': 'form-control', 'name': 'username'}))
    password = forms.CharField(label="Password", max_length=30,
                widget=forms.PasswordInput(attrs={'class': 'form-control', 'name': 'password'}))


class SignUpForm(UserCreationForm):
    class Meta:
        model = Customer

在SignUpForm 中，您还可以通过提供fields 作为Customer 模型的属性列表，在注册时指定用户想要的字段。

在您的login.html 中，您可以为您的LoginForm 提供一个空间来呈现如下：

<form action="{% url 'login' %}" method="POST">
  {% csrf_token %}
  {% for field in form %}
    <b>{{ field.label }}</b>:
    {{ field }}<br>
    {{ field.errors }}
  {% endfor %}
  <input type="submit" value="Sumbit">
</form>

同样，您的signup.html 也会提供如下形式：

<form action="{% url 'signup' %}" method="POST">
  {% csrf_token %}
  {% for field in form %}
    <b>{{ field.label }}</b>:
    {{ field }}<br>
    {{ field.errors }}<br>
  {% endfor %}
  <input type="submit" value="Sumbit">
</form>

最后编辑您的login 和signup 视图以存储数据，如下所示：

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout

from .forms import LoginForm, SignUpForm

def login(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(username=username, password=password)
        if user is not None:
            login(request, user)
            return HttpResponse("Logged in", status=200)
        else:
            form = LoginForm(request.POST)
            context = {'form': form}
            return render(request, 'login.html', context=context, status=401)
    if request.method == 'GET':
        form = LoginForm(None)
        context = {'form': form}
        return render(request, 'login.html', context=context)


def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
        else:
            context = {'form': form}
            return render(request, 'signup.html', context=context)
        return HttpResponse("Registered Successfully", status=200)

    if request.method == 'GET':
        form = SignUpForm(None)
        context = {'form': form}
        return render(request, 'signup.html', context=context)

请注意，我使用了django.contrib.auth 的登录和注销功能。这可能不是您想要的应用程序。但这个想法非常相似。我希望这会有所帮助。

【讨论】：