最近因为工作需要,开始捣鼓web框架!
接下来就带大家做一个小项目,方便企业内部数据统计,调查问卷!
一. 操作页
二.数据填写页
三.查询页
-
首先我们可以找一个自己喜欢的登录页模板,不怕麻烦的话也可以自己写,我套用的是Bootstrap其中的一个登录模板。有需要可以自己去看一下!
-
模板有了,下面开始创建一个Django项目,有条件的使用的是专业版可以在直接New Project新建一个。
是社区版的就老老实实在命令行执行命令吧,命令如下:创建一个项目 django-admin startproject Djangopjt
同级目录下创建app python manage.py startapp app
2.1 把创建好的app添加到setting中
2.2 把templates这个包添加
2.3 配置数据库,我这里用的mysql。
-
项目配置好之后,根据登录需求,在app下的models配置存储需求
3.1 映射数据库(生成数据表)python manage.py makemigrations python manage.py migrate
-
数据库有了,下一步写前端,在templates下新建一个login.html
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"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <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/v3.bootcss.com@1.0.29/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.29/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.29/examples/signin/signin.css" rel="stylesheet"> <!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.29/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.29/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 in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="text" id="inputUsername" name="usm" class="form-control" placeholder="Username" required="" autofocus=""> <label for="inputPassword" class="sr-only">Password</label> <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 in</button> </form> </div> <!-- END Container --> </body> </html>
-
在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.1 登录成功
6.2 密码错误