目录

Django框架简单搭建增删改查页面

一、前期的配置文件以及连接MySQL的基本准备

二、在数据库中准备好数据

三、将MySQL的数据展示到页面(简单认识HTML模板语法 for循环)

  • 在Django项目views.py文件中利用ORM模型语法查找所有的数据
def user_list(request):
# 1.获取user表中所有的数据展示到html页面上
user_data = models.UserInfo.objects.filter() # 括号内不填筛选条件等价于查所有
# QuerySet[对象1,对象2] 列表套对象
# 2.利用模版语法传递数据到html页面并完成处理最终返回给浏览器展示
return render(request,'user_list.html',{'user_data':user_data})

四、创建用户数据展示HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{# <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{# <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">数据展示页</h1>
<div class="col-md-8 col-md-offset-2"> <table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Password</th>
<th>Age</th>
<th class="text-center">Operation</th>
</tr>
</thead>
<tbody>
{% for user_obj in user_data %} # 接收Django提供的模板语法传过来的字典数据
<tr>
<td>{{ user_obj.id }}</td>
<td>{{ user_obj.name }}</td>
<td>{{ user_obj.password }}</td>
<td>{{ user_obj.age }}</td>
<td class="text-center">
<a href="" class="btn btn-primary btn-xs">编辑</a>
<a href="" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="/user_login/" class="btn btn-block btn-success">登录用户</a>
<a href="/user_register/" class="btn btn-block btn-danger">注册用户</a> </div>
</div> </div>
</body>
</html>

五、在urls.py路由层中加入视图函数的路径,后面都是如此

六、在浏览器地址栏输入http://127.0.0.1:8010/user_list查看数据展示页面

增----注册功能

  • 首先在views.py中写好一个简单的注册视图函数,记得写好后去路由层写一下功能路径
def user_register(request):
#2.根据不同的请求方式做不同的处理
if request.method == 'POST':
# 3.获取用户相关数据
username_data = request.POST.get('name') # name age password是前端表单中name属性定义的
age_data = request.POST.get('age') # 这里的数据是前端页面用户数据的数据
password_data = request.POST.get('password')
# 继续一些小的判断
if len(username_data) == 0 or len(password_data) == 0:
return HttpResponse("用户名或年龄不能为空")
user_data = models.UserInfo.objects.filter(name=username_data) # 用户输入的username拿去和数据库中已经存在的用户比较
if user_data:
return HttpResponse('用户名已经存在') # 不存在将用模型语法创建一个新用户数据
models.UserInfo.objects.create(name=username_data,age=age_data,password=password_data)
# 重定向到数据展示页
return redirect('/user_list/')
# 1.先返回一个获取注册新用户数据的html页面
return render(request, 'register.html')
  • 然后写一个注册用户的HTML页面,注意修改表单的请求方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{# <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{# <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">注册用户</h1>
<div class="col-md-6 col-md-offset-3">
<form action="" method="POST">
<p>用户名:
<input type="text" name="name" class="form-control">
</p>
<p>年龄:
<input type="text" name="age" class="form-control">
</p>
<p>密码:
<input type="text" name="password" class="form-control">
</p>
<input type="submit" value="注册" class="btn btn-warning btn-block">
</form> </div> </div>
</div> </body>
</html>
  • 然后去浏览器地址栏输入http://127.0.0.1:8010/register,就可以得到以下页面,当然在数据展示页面点击注册也可以跳到当页面

  • 在输入框输入新用户,则会看到新用户增加



ps:注意这里的a是get请求

查----登录功能

  • 首先在views.py中写好一个简单的登录视图函数,记得写好后去路由层写一下路径
def user_login(request):
# 2.根据不同的请求方式做不同的处理
if request.method == 'POST':
# 3.获取用户相关数据
username_data = request.POST.get('name') # 这里传的是input中name的值
age_data = request.POST.get('age')
password_data = request.POST.get('password')
# 继续一些小的判断
if len(username_data) == 0 or len(password_data) == 0:
return HttpResponse("用户名或年龄不能为空")
user_data = models.UserInfo.objects.filter(name=username_data,password=password_data) # 这里是拿出数据库的值(等号前面)和浏览器的值比较
if user_data:
return HttpResponse('登录成功')
return HttpResponse('该用户不存在')
# models.UserInfo.objects.create(name=username_data, age=age_data, password=password_data)
# 重定向到数据展示页
# return redirect('/user_list/')
# 1.先返回一个获取注册新用户数据的html页面
return render(request, 'login.html')
  • 然后写一个登录用户的HTML页面,注意修改表单的请求方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{# <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
{# <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">登录用户</h1>
<div class="col-md-6 col-md-offset-3">
<form action="" >
<p>用户名:
<input type="text" name="name" class="form-control">
</p>
<p>密码:
<input type="text" name="password" class="form-control">
</p>
<input type="submit" value="登录" class="btn btn-danger btn-block">
</form> </div>
</div>
</div>
</body>
</html>
  • 然后去浏览器地址栏输入http://127.0.0.1:8010/login,就可以得到以下页面,当然在数据展示页面点击登录也可以跳到当页面

  • 在输入框输入存在的用户名和密码,则会看到页面会返回到HttpResponse结果

改----编辑功能 (稍微复杂一丢丢)

  • 首先在views.py中写好一个简单的编辑视图函数,记得写好后去路由层写一下功能路径
def user_edit_func(request):
# 1.获取用户想要编辑的数据主键值
target_edit_id = request.GET.get('edit_id')
# 4.根据不同的请求处理不同的逻辑
if request.method == 'POST':
name_data = request.POST.get('name')
age_data = request.POST.get('age')
if len(name_data) == 0 or len(age_data) == 0:
return HttpResponse('用户名或年龄不能为空')
models.User.objects.filter(pk=target_edit_id).update(name=name_data, age=age_data)
# 5.重定向到数据展示页
return redirect('/user_list/')
# 2.根据主键值获取对应的数据
target_edit_obj = models.User.objects.filter(pk=target_edit_id)[0] # QuerySet [对象1,对象2,...]
# 3.返回一个编辑数据的页面 并且该页面上需要提前展示出原来的数据
return render(request, 'userEditPage.html', {'target_edit_obj': target_edit_obj})
  • 然后写一个编辑用户的HTML页面,注意修改表单的请求方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">数据编辑页</h1>
<div class="col-md-6 col-md-offset-3">
<form action="" method="post">
<p>name:
<input type="text" name="name" class="form-control" value="{{ target_edit_obj.name }}">
</p>
<p>age:
<input type="text" name="password" class="form-control" value="{{ target_edit_obj.password }}">
</p>
<input type="submit" value="编辑用户" class="btn btn-primary btn-block">
</form>
</div>
</div>
</div>
</body>
</html>

ps:这里需要注意的两个点,也是我第一次写的时候,由于逻辑没有理清,少写了edit_id参数在user_list.html文件中需要用get请求传的参数,所以出现了IndexError: list index out of range错误

  • 解决方法



    这里注意传点击的id参数
  • 在浏览器地址栏搜索编辑页面的时候,不能直接http://127.0.0.1:8010/user_edit/因为没有id,拿不到一个对象,所以列表为空,索引超出了范围

  • 只需要在地址栏输入http://127.0.0.1:8010/user_edit/?edit_id=2即可,展示页面如下

删----删除功能 (复习前端js的冒泡事件)

  • 首先在views.py中写好一个简单的编辑视图函数,记得写好后去路由层写一下功能路径
def user_delete(request):
target_delete_id = request.GET.get('delete_id')
models.UserInfo.objects.filter(pk=target_delete_id).delete()
return redirect('user_list')
  • 然后去user_list.html页面修改一下删除按钮a便签的href属性,注意修改表单的请求方式,给该便签绑定一个点击事件
 <td class="text-center">
<a href="/user_edit/?edit_id={{ user_obj.pk }}" class="btn btn-primary btn-xs">编辑</a>
<a href="/user_delete/?delete_id={{ user_obj.pk }}" class="btn btn-danger btn-xs delBtn">删除</a>
</td>

ps: 二次确认冒泡事件

 <script>
$('.delBtn').click(function () {
let res = confirm('你确定要删除嘛?')
if (res){
{# 如果点击确定 则执行事件冒泡 #}
}else{
return false {# 如果点击取消 则阻止事件冒泡 #}
}
})
</script>

Django请求生命周期流程图

1.Django请求的生命周期的含义

  • Django请求生命周期是指:当用户在浏览器上输入URL到用户看到网页的这个时间段内,Django后台所发生的事情。

2.Django请求的生命周期图解及流程



浏览器
发送请求(HTTP协议) web服务网关接口
1.请求来的时候解析封装
响应走的时候打包处理 2.django默认的wsgiref模块不能承受高并发 最大只有1000左右
上线之后会替换成uwsgi来增加并发量 3.WSGI跟wsgiref和uwsgi是什么关系
WSGI是协议
wsgiref和uwsgi是实现该协议的功能模块 django后端
1.django中间件
类似于django的保安 门户 2.urls.py 路由层
识别路由匹配对应的视图函数 3.views.py 视图层
网站整体的业务逻辑 4.templates文件夹 模版层
网站所有的html文件 5.models.py 模型层
ORM

Django框架简单搭建增删改查页面 Django请求生命周期流程图的更多相关文章

  1. 基于Django框架 CRM的增删改查

    思路: 创建表------从数据库读出数据展示出来------配置路由-----写视图函数------写对应页面 练习点: 数据库建表 ORM 数据库数据读取 数据 ModelForm  (form组 ...

  2. Django学习笔记(10)——Book单表的增删改查页面

    一,项目题目:Book单表的增删改查页面 该项目主要练习使用Django开发一个Book单表的增删改查页面,通过这个项目巩固自己这段时间学习Django知识. 二,项目需求: 开发一个简单的Book增 ...

  3. BitAdminCore框架应用篇:(二)创建一个简单的增删改查模块

    NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...

  4. [Django框架 - 静态文件配置、request对象方法初识、 pycharm链接数据库、ORM实操增删改查、django请求生命周期]

    [Django框架 - 静态文件配置.request对象方法初识. pycharm链接数据库.ORM实操增删改查.django请求生命周期] 我们将html文件默认都放在templates文件夹下 将 ...

  5. 通过flask实现web页面简单的增删改查bootstrap美化版

    通过flask实现web页面简单的增删改查bootstrap美化版 项目目录结构 [root@node1 python]# tree -L 2 . ├── animate.css ├── fileut ...

  6. 通过flask实现web页面简单的增删改查

    通过flask实现web页面简单的增删改查 # 1.后台程序falsk_web01.py #coding:utf-8 from flask import Flask,render_template,r ...

  7. springmvc+spring3+hibernate4框架简单整合,简单实现增删改查功能

    转自:https://blog.csdn.net/thinkingcao/article/details/52472252 C 所用到的jar包     数据库表 数据库表就不用教大家了,一张表,很简 ...

  8. 【转载】salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  9. Django框架(三)—— orm增删改查、Django生命周期

    目录 orm增删改查.Django生命周期 一.orm介绍 二.orm增删改字段 三.Django生命周期 orm增删改查.Django生命周期 一.orm介绍 1.什么是orm ORM即Object ...

  10. 用CI框架向数据库中实现简单的增删改查

    以下代码基于CodeIgniter_2.1.3版 用PHP向数据库中实现简单的增删改查(纯代码)请戳 http://www.cnblogs.com/corvoh/p/4641476.html Code ...

随机推荐

  1. kg打怪升级

    1.kaggle notebook容易断[continue部署] 2.换预训练模型[提交试试] 3.换fold次数

  2. springboot的websocket因IP问题无法连接

    首先遇到这个问题有点奇葩,出现在项目上线时的客户现场,头两天一直都无法确定原因,因为它的表现方式很奇怪,基于springboot实现的websocket,同样的代码在公司研发环境不会有问题,客户现场会 ...

  3. scrcpy投屏软件

    Android很好用得scrcpy 投屏软件: 下载传送门:https://github.com/Genymobile/scrcpy/releases 1.下载解压包后,解压至自己得电脑目录,并复制目 ...

  4. flask动态csv接口——编码问题

    @xxx_blueprint.route("/file", methods=["GET"]) def group_trend(): def generate() ...

  5. Vscode 界面语言换成中文

    作为编译器,Visual Studio Code是非常多能化的,但是界面英文对于我这种菜鸟新手造成了很大的困扰. 所以切换成中文更方便. Ctrl+shift+x   在左侧出现"扩展&qu ...

  6. 解决 SMTP Error: data not accepted php邮件发送失败的问题

    php 发送邮件 出现  SMTP Error: data not accepted   1.正常情况下 都是正常的 但是偶尔 发送失败了 163.com 邮箱发送不了了. 所以去查了下问题所在  在 ...

  7. 在 Sitecore 里使用 Solr 搜索 SortOrder 关联的 Item

    在 C# 使用 Solr 搜索 sitecore 的配置信息文件可直接丢进 <Instance>\App_Config 下,sitecore 会自动检测配置文件更新并加载到内存中. 通常情 ...

  8. Python学习笔记--异常+模块+包

    异常的捕获 基本语法: 示例: 捕获指定异常 基本语法:--必写 示例: 捕获多个异常 示例: 捕获所有异常 示例: 异常else--可写可不写 示例: 异常finally(无论是否出现异常,都会去执 ...

  9. Qcon 实时音视频专场:实时互动的最佳实践与未来展望

    互动直播.线上会议.在线医疗和在线教育是实时音视频技术应用的重要场景,而这些场景对高可用.高可靠.低延时有着苛刻的要求,很多团队在音视频产品开发过程中会遇到各种各样的问题.例如:流畅性,如果在视频过程 ...

  10. Win11右键菜单改回传统样式

    Win11右键菜单,比较不人性化,隐藏了一些常用选项,需要点"更多选项"才能显示,多次一举. 解决方法,一句话: reg.exe add "HKCU\Software\C ...