django views - 带缩略图的超链接

时间:2016-08-18 21:09:28

标签: python html django twitter-bootstrap

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

我的模板文件夹中有一个index.html,其中包含两个用于注册或登录的缩略图,点击它们会将您定向到signup.htmllogin.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>

2 个答案:

答案 0 :(得分:1)

我不确定我是否完全按照您的要求进行操作,但如果只是将用户引导到网址中,那么您应该使用带有此类内容的网址模板标记

<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>

会使用网址http://yoursite.com/login

进行渲染

如果您实际上想要记录用户所做的点击次数,那么您可能需要设置一些模型以保留数据,然后以某种方式捕获视图中的点击次数

答案 1 :(得分:0)

请避免在Django中对网址进行硬编码。你可以在这里使用反向网址匹配的力量。由于您已经为自己的网址分配了名称,因此您可以在container中使用index.html,如下所示:

<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以显示在signuplogin页面上。由于您已从模型中导入Customer,因此我假设您要为其创建signuplogin

所以你可以加入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>

最后修改您的loginsignup观看次数以存储数据:

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的登录和注销功能。这可能不是您想要的应用程序。但这个想法非常相似。 我希望这会有所帮助。