最近因为工作需要,开始捣鼓web框架!
接下来就带大家做一个小项目,方便企业内部数据统计,调查问卷!
一. 操作页
![在这里插入图片描述](https://img-blog.csdnimg.cn/19ac23e52b0942928567bf0bd475adff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_20,color_FFFFFF,t_70,g_se,x_16)
二.数据填写页
![在这里插入图片描述](https://img-blog.csdnimg.cn/ed0dd97c6ca7493aa77b5cb3bd637771.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_17,color_FFFFFF,t_70,g_se,x_16)
三.查询页
![在这里插入图片描述](https://img-blog.csdnimg.cn/6bc973c3d91c48ee97bae1243bad5a3b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_20,color_FFFFFF,t_70,g_se,x_16)
-
首先我们可以找一个自己喜欢的登录页模板,不怕麻烦的话也可以自己写,我套用的是Bootstrap其中的一个登录模板。有需要可以自己去看一下!
Bootstrap模板
-
模板有了,下面开始创建一个Django项目,有条件的使用的是专业版可以在直接New Project新建一个。
![在这里插入图片描述](https://img-blog.csdnimg.cn/c20d3b82e3964c9cbc73df761fa5c0a3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_20,color_FFFFFF,t_70,g_se,x_16)
是社区版的就老老实实在命令行执行命令吧,命令如下:
创建一个项目
django-admin startproject Djangopjt
同级目录下创建app
python manage.py startapp app
![](https://img-blog.csdnimg.cn/8500bc53b0274e16a62bed42a625854d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_11,color_FFFFFF,t_70,g_se,x_16)
2.1 把创建好的app添加到setting中
![在这里插入图片描述](https://img-blog.csdnimg.cn/340ae3bfa4e64e85981034d0263605ae.png)
2.2 把templates这个包添加 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ab5ab4e7e5f3496bbf49dbfe4a691600.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_16,color_FFFFFF,t_70,g_se,x_16)
2.3 配置数据库,我这里用的mysql。
![在这里插入图片描述](https://img-blog.csdnimg.cn/0d424e11e08b404db136e9bba28f7317.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_11,color_FFFFFF,t_70,g_se,x_16)
-
项目配置好之后,根据登录需求,在app下的models配置存储需求
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e66f17eba794616b4e95bc2c09b9d64.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_12,color_FFFFFF,t_70,g_se,x_16)
3.1 映射数据库(生成数据表)
python manage.py makemigrations
python manage.py migrate
-
数据库有了,下一步写前端,在templates下新建一个login.html
![在这里插入图片描述](https://img-blog.csdnimg.cn/6211440a9c894ab093cc0d4d53cee5c6.png)
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')
]
-
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/47e02c94010f4e0086c1574abdf64144.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_20,color_FFFFFF,t_70,g_se,x_16)
6.1 登录成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/e1fa7404e6e14c8d9850a0b73e5583ea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_10,color_FFFFFF,t_70,g_se,x_16)
6.2 密码错误
![在这里插入图片描述](https://img-blog.csdnimg.cn/81822f62a16c4da8ad33e7dcb4a61d1b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5Lya57-75aKZ55qE5rOw6ZqG,size_7,color_FFFFFF,t_70,g_se,x_16)
* 后续讲解其他详情页面(以上不懂的可以私信,所有页面讲解完,项目会提交到github上,后面发布clone地址)
本文章若对你有帮助,烦请点赞,收藏,关注支持一下!
各位的支持和认可就是我最大的动力!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)