Django | 结合前端实现ORM对数据的增删改查

191 阅读2分钟

页面表格展现数据

修改功能的逻辑

  1. 修改哪条记录?如何确定?可否通过主键Id锁定
  2. 点击修改的按钮,应该跳转到一个修改的页面
  3. 应该通过ID查询到原来的数据,并且把这个记录的数据展示到修改的页面
  4. 开始修改,提交到后端的修改数据的方法中

删除功能的逻辑

  1. 确定杉树哪条记录,怎么确定?通过主键ID确定唯一一条记录
  2. 点击删除的按钮,请求到后端的删除地址
  3. 后端拿到ID直接做删除操作、跳转到列表页面

实现

创建表格

在settings.py选择数据库

DATABASES = {  
'default': {  
'ENGINE': 'django.db.backends.mysql',  
'NAME': 'Django',  
'HOST': '127.0.0.1', # 本机  
'PORT': 3306, # 端口  
'USER': 'root', # 用户名  
'PASSWORD': 'a1234567', # 密码  
'CHARSET': 'UTF-8'  
}  
}

在models.py里面添加表

from django.db import models  
  
# Create your models here.  
  
class UserInfo(models.Model):  
  
username = models.CharField(max_length=64, verbose_name='用户名')  
password = models.CharField(max_length=64, verbose_name='密码')  
age = models.IntegerField()  
gender = models.CharField(max_length=64, verbose_name='性别')  
major = models.CharField(max_length=64, verbose_name='专业')

在views.py里面添加数据

from django.shortcuts import render,HttpResponse  
  
# Create your views here.  
  
from demo import models  
def index(request):  
# 增加数据  
models.UserInfo.objects.create(username='JJ',password=123,age=25,gender='Male',major='CS')  
models.UserInfo.objects.create(username='Kevin',password=321,age=25,gender='Male',major='EE')  
models.UserInfo.objects.create(username='Jack',password=123,age=18,gender='Male',major='MAT')  
models.UserInfo.objects.create(username='Marry',password=321,age=21,gender='Female',major='ECN')  
models.UserInfo.objects.create(username='Kathy',password=123,age=25,gender='Female',major='ECN')  
models.UserInfo.objects.create(username='Maria',password=321,age=30,gender='Female',major='DRA')  
return HttpResponse("OK")

在urls.py里面添加路由

from django.contrib import admin  
from django.urls import path  
from demo import views  
  
urlpatterns = [  
path('admin/', admin.site.urls),  
path('index/', views.index),  
]

到这步为止,数据应该都成功添加

数据的展示

动静态网页

静态网页--->在页面上写死的数据,一直不会改变

动态网页--->在动态网页是从后端获取到的数据在页面展示,数据在数据库中查询出来的也是动态。

后端数据展示到界面

在views里面的几种写法:

第一种写法

def ab_render(request):  
  
user_dict = {'username':'JJ', 'age':23}  
return render(request,"ab_render.html" , {'user_dict':user_dict})

第二种写法

def ab_render(request):  
  
user_dict = {'username':'JJ', 'age':23}  
return render(request,"ab_render.html" , user_dict)

第三种写法

# 模版变量的分配  
def ab_render(request):  
  
user_dict = {'username':'JJ', 'age':23}  
return render(request,"ab_render.html" , locals())

分别对应HTML文件里的写法

<!DOCTYPE html>  
<html lang="en">  
<head>  
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>  
<meta charset="UTF-8">  
<title>ab_render</title>  
</head>  
<body>  
<h1>{{ user_dict.username }}</h1>  
<h1>{{ username }}</h1>  
<h1>{{ user_dict.username}}</h1>  
</body>  
</html>

循环展示列表数据

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
<meta charset="UTF-8">  
<title>userlist</title>  
  
<script src="/static/js/jquery.js"></script>  
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">  
<script src="/static/bootstrap/js/bootstrap.min.js"></script>  
  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <h1 class="text-center">用户数据展示</h1>  
        <table class="table table-hover table-striped table-bordered ">  
            <thead>  
            <tr>  
            <th class="text-center">ID</th>  
            <th class="text-center">用户名</th>  
            <th class="text-center">密码</th>  
            <th class="text-center">年龄</th>  
            <th class="text-center">性别</th>  
            <th class="text-center">专业</th>  
            <th class="text-center">操作</th>  
            </tr>  
            </thead>  
            <tbody>  
                {% for user in user_list %}  

                    <tr>  
                        <td class="text-center">{{ user.id }}</td>  
                        <td class="text-center">{{ user.username }}</td>  
                        <td class="text-center">{{ user.age }}</td>  
                        <td class="text-center">{{ user.gender }}</td>  
                        <td class="text-center">{{ user.major }}</td>  
                        <td class="text-center">{{ user.password }}</td>  
                        <td class="text-center">  
                        <a href="" class="btn btn-danger btn-xs">删除</a>  
                        <a href="" class="btn btn-success btn-xs">修改</a>  
                        </td>  
                    </tr>  

                {% endfor %}  
            </tbody>  
        </table>  
    </div>  
</div>  
</body>  
</html>

值得我们注意的是Django模版语法: {{ user.id }}