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

qnakjoqk  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(2)|浏览(152)

我是django前端网页开发的新手。
我有一个index.html在我的模板文件夹,其中有两个缩略图注册或登录,然后点击它们会将你引导到signup.htmllogin.html。我已经在urls.py中包含了它们各自的url。我被困在如何编辑我的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>
bvjxkvbb

bvjxkvbb1#

我不确定我是否完全理解你的要求,但是如果它只是在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>

因为您在www.example.com中命名了URL,所以您可以在URL模板标签中通过名称引用它们,并且它将计算出完整的URL。urls.py you can reference them by name in the url template tag and it will figure out the full url.
例如,您将此登录名

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

使用以下

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

将导致它以url http://yoursite.com/login呈现
如果您实际上希望记录用户的点击次数,那么您可能需要设置一些模型来持久保存数据,然后以某种方式捕获视图中的点击

7kqas0il

7kqas0il2#

请避免在Django中硬编码url。您可以在这里使用反向url匹配的强大功能。由于您已经为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重定向到相应的url。
接下来,你需要创建一个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的登录和注销功能,这可能不是您的应用程序所需要的,但想法非常相似。

相关问题