(一) python+Django实现登录页面

最近因为工作需要,开始捣鼓web框架!

接下来就带大家做一个小项目,方便企业内部数据统计,调查问卷!
一. 操作页

(一) python+Django实现登录页面_第1张图片
二.数据填写页
(一) python+Django实现登录页面_第2张图片
三.查询页
(一) python+Django实现登录页面_第3张图片

  1. 首先我们可以找一个自己喜欢的登录页模板,不怕麻烦的话也可以自己写,我套用的是Bootstrap其中的一个登录模板。有需要可以自己去看一下!

    Bootstrap模板

  2. 模板有了,下面开始创建一个Django项目,有条件的使用的是专业版可以在直接New Project新建一个。
    (一) python+Django实现登录页面_第4张图片
    是社区版的就老老实实在命令行执行命令吧,命令如下:

    创建一个项目
    django-admin startproject Djangopjt
    
    同级目录下创建app
    python manage.py startapp app
    

    (一) python+Django实现登录页面_第5张图片
    2.1 把创建好的app添加到setting中
    (一) python+Django实现登录页面_第6张图片
    2.2 把templates这个包添加 (一) python+Django实现登录页面_第7张图片
    2.3 配置数据库,我这里用的mysql。
    (一) python+Django实现登录页面_第8张图片

  3. 项目配置好之后,根据登录需求,在app下的models配置存储需求
    (一) python+Django实现登录页面_第9张图片
    3.1 映射数据库(生成数据表)

    python manage.py  makemigrations
    python manage.py  migrate 
    
  4. 数据库有了,下一步写前端,在templates下新建一个login.html
    (一) python+Django实现登录页面_第10张图片
    4.1 这里我是套用的模板,就省了很多事。(博主前端太废)

    DOCTYPE html>
    <html lang="en">
    <head>
    <title>登录title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <meta name="description" content="">
        <meta name="author" content="">
    
        <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/signin/">
    
        <link href="https://cdn.jsdelivr.net/npm/@bootcss/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    
        <link href="https://cdn.jsdelivr.net/npm/@bootcss/[email protected]/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    
        <link href="https://cdn.jsdelivr.net/npm/@bootcss/[email protected]/examples/signin/signin.css" rel="stylesheet">
    
        
        <script src="https://cdn.jsdelivr.net/npm/@bootcss/[email protected]/assets/js/ie-emulation-modes-warning.js">script>
    
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">script>
    
    
    head>
    <style>
    
    style>
    <body class="login" data-admin-utc-offset="0">
    <div class="container">
        <form method= 'post' enctype="multipart/form-data">
            {% csrf_token %}
            <h2 class="form-signin-heading">Please sign inh2>
            <label for="inputEmail" class="sr-only">Email addresslabel>
            <input type="text" id="inputUsername" name="usm" class="form-control" placeholder="Username" required="" autofocus="">
            <label for="inputPassword" class="sr-only">Passwordlabel>
            <input type="password" id="inputPassword" name="pwd" class="form-control" placeholder="Password" required="">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="remember-me"> Remember me
              label>
            div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" >Sign inbutton>
        form>
        div>
    
    body>
    html>
    
  5. 在views中添加请求参数,配置urls。

    from django.shortcuts import render
    from app.models import Users
    from django.http import HttpResponse
    # Create your views here.
    def login(request):
        if request.method == "POST":
            # 获取用户通过POST提交过来的数据
            usm = request.POST.get('usm')
            pwd = request.POST.get('pwd')
    
            if Users.objects.filter(username=usm):
                if Users.objects.filter(username=usm)[0].password == pwd:
                    return HttpResponse('登录成功')
                else:
                    return HttpResponse('密码错误')
            else:
                HttpResponse('用户不存在')
        return render(request, 'login.html')
    

    5.1 配置urls(实现页面跳转)

    from django.contrib import admin
    from django.urls import path
    from app import views
    urlpatterns = [
      path('admin/', admin.site.urls),
      path('',views.login,name='login')
    ]
    
  6. 实现效果
    (一) python+Django实现登录页面_第11张图片
    6.1 登录成功
    (一) python+Django实现登录页面_第12张图片
    6.2 密码错误
    (一) python+Django实现登录页面_第13张图片

* 后续讲解其他详情页面(以上不懂的可以私信,所有页面讲解完,项目会提交到github上,后面发布clone地址)

本文章若对你有帮助,烦请点赞,收藏,关注支持一下!

各位的支持和认可就是我最大的动力!

你可能感兴趣的:(Django,python,django,开发语言)