新闻网站项目django--登录页

最新推荐文章于 2024-04-30 19:24:04 发布

weixin_30361753

最新推荐文章于 2024-04-30 19:24:04 发布

阅读量256

点赞数

文章标签： python ui

原文链接：http://www.cnblogs.com/xyxpython/p/6725091.html

版权

models.py：

# 用户信息表
class UserProfile(models.Model):
    belong_to = models.OneToOneField(to=User, related_name="profile")  # 所属用户
    avatar = models.FileField(upload_to='avatar')  # 用户头像

    def __str__(self):
        return self.belong_to.username

views.py：

def login(request):
    if request.method == 'GET':
        form = LoginForm()
    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data.get("username")
            password = form.cleaned_data.get("password")
            user = authenticate(username=username,password=password)
            if user:
                user_login(request,user)              #由于login方法和我自定义的login视图重名，这里将django.contrib.auth中的login方法重命名为user_login导入
                return redirect(to='index')
            else:
                return HttpResponse('用户名不存在或用户名密码错误')

    context={}
    context['form'] = form

    return render(request,'login.html',context=context)

模板css login.css：

body{
    background-image:url(../images/login/backgroundimg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.ui.basic.segment.container.content{
  width: 425px;

  margin-left: 50%;
  margin-top: 389px;
}
.ui.header{
  color:red;
  font-size: 50px !important;
  height: 75px;
}
input{
    border-radius: 31.5px!important;
    height: 31px!important;
    background-color: #ffffff!important;
    border: solid 1px #ededed!important;
}
.field{
  position: relative;
}
.two.fields > .field{
  position: relative;
}
.ui.image.top{
  position: absolute;
  left: -20px;
  top:10px;
}
.ui.image.bottom{
  width: 10px;
  height: 10px;
  position: absolute;
  left: -20px;
  margin: 0;
}
label{
  font-size: 12px!important;
  color: #9b9b9b !important;
}
.ui.right.floated.red.circular.button{
    width: 102px;
    height: 31px;
    background-color: #f30c28;
    margin-top: 6px;
    margin-right: 5px;
    font-size: 16px!important;
    font-weight: bold;
    padding-top: 7px;
}
.ui.basic.segment.container.footer{
  position: relative;
  margin-top: 150px;
}
.ui.circular.red.button.backtoindex{
  width: 31px!important;
  height: 62px;
  border-radius: 15.5px;
  background-color: #f30c28;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top:30px;
  padding: 0;
}
img{
  margin-left: 2px;
}
h4{
    font-size: 12px!important;
    color: #ffffff;
    margin-left: 2px;
}
.ui.image.title{
  position: relative;
  transform: translate(-50%);
  left: 50%;
  top:45px;
}

模板文件 login.html：

<!DOCTYPE html>
{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8">
    <title>登录页</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css/login.css' %}" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="ui basic segment container content">
      <h1 class="ui center aligned header">登录</h1>
      <form class="ui form" method="post">
        <div class="field">
          <div class="ui image top">
            <img src="{% static 'images/login/usericon.png' %}" alt="" />
          </div>
          {{form.username}}
        </div>
        <div class="field">
          <div class="ui image top">
            <img src="{% static 'images/login/lockicon.png' %}" alt="" />
          </div>
          {{form.password}}
        </div>
        {% csrf_token %}
        <div class="two fields">
          <div class="field">
            <div class="ui image bottom" style="top:6px;">
              <img src="{% static 'images/login/checkboxicon.png' %}" alt="" />
            </div>
            <label>记住我</label>
            <div class="ui image bottom" style="top:29px;">
              <img src="{% static 'images/login/passwordicon.png' %}" alt="" />
            </div>
            <label>忘记密码</label>
          </div>
          <div class="field">
            <button class="ui right floated red circular button" type="submit" name="button">登录</button>
          </div>
       </div>
    </form>
    </div>
    <div class="ui basic segment container footer">
      <div class="bottom">
        <div class="ui divider"></div>
        <button type="button" name="button" class="ui circular red button backtoindex">
            <img src="{% static 'images/login/homeicon.png' %}" style="position:absolute;left:18%;top:10%;">
            <h4>首页</h4>
        </button>
        <div class="ui image title">
            <img src="{% static 'images/login/zhiribao.png' %}" alt="" />
        </div>
      </div>

    </div>
  </body>
</html>

urls.py：

url(r'^login/', login, name='login')

转载于:https://www.cnblogs.com/xyxpython/p/6725091.html

weixin_30361753

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
新闻网站项目django--登录页

models.py：# 用户信息表class UserProfile(models.Model): belong_to = models.OneToOneField(to=User, related_name="profile") # 所属用户 avatar = models.FileField(upload_to='avatar') # 用户头像 ...
复制链接

扫一扫