Django框架005：阶段性`实战小案例`“答辩“公司员工表

淼学派对

发布于 2023-10-14 11:12:38

1820

发布于 2023-10-14 11:12:38

文章被收录于专栏：云开发小程序1

小案例展示

小案例实现

数据结构准备操作

首先需要使用sql语句在mysql中创建一个数据库

创建数据库：create database <数据库名> default charset utf8 collate utf8_general_ci;

setting.py连接数据库

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'dbpython',  # 数据库名字
        'USER': 'root',
        'PASSWORD': '200208',
        'HOST': '127.0.0.1',  # 安装MySQL数据库的机器
        'PORT': 3306  # 端口
    }
}

配置app文件

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config'
]

orm操作数据表

Django框架003:orm与MySQL数据库的连接及踩坑记录_lqj_本人的博客-CSDN博客

这篇文章中的orm对数据库表的操作，并搭建好数据结构先：

python manage.py makemigrations <自己创建的app名字>
python manage.py migrate

models.py 配置后端类

from django.db import models

class Department(models.Model):
    title = models.CharField(max_length=16)
    name = models.CharField(max_length=32)
    age = models.IntegerField(null=True, blank=True)

urls.py路由

from django.urls import path
from app01 import views

urlpatterns = [
    path('login/', views.login),
    path('data_list/', views.data_list),
    path('add_list/', views.add_list),
    path('info_delete/', views.info_delete),

]

views.py后台函数

from django.shortcuts import render, HttpResponse, redirect
from app01 import models

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    else:
        print(request.POST)
        username = request.POST.get("admin")
        userpwd = request.POST.get("pwd")
    if username == 'lqj' and userpwd == '123':
        return redirect("/data_list/")
    else:
        tishi = "账号或密码错误"
        return render(request, "login.html", {"tishi_1": tishi})

def data_list(request):
    data_list = models.Department.objects.all()
    return render(request, 'data_list.html', {"data_list": data_list})


def add_list(request):
    if request.method == "GET":
        return render(request, 'add_list.html')
    title = request.POST.get("title")
    name = request.POST.get("name")
    age = request.POST.get("age")
    # 添加到数据库
    models.Department.objects.create(name=name, title=title, age=age)
    # return HttpResponse('添加成功')
    return redirect("/data_list/")


def info_delete(request):
    nid = request.GET.get('nid')
    models.Department.objects.filter(id=nid).delete()
    return redirect("/data_list/")

前端调用

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>“答辩”公司</title>
    <style>
        form{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        input{
            margin-top: 20px;

        }
    </style>
</head>
<body style="background: lightseagreen">
    <div style="margin-top: 100px;display: flex;flex-direction: row;justify-content: space-around">
        <h1 style="color: orange;font-weight: bold">“答辩”公司</h1>
    </div>

    <div style="margin-top: 100px;display: flex;flex-direction: row;justify-content: space-around">
        <form method="post" action="/login/">
            {% csrf_token %}
            <input  placeholder="请输入用户名" name="admin" type="text" >
            <input placeholder="请输入密码" name="pwd" type="text" >
            <input style="width: 100px;height: 50px" type="submit" value="登录" />
        </form>
    </div>

    <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 100px">
        <div style="color: red;font-weight: bold">{{ tishi_1 }}</div>
    </div>
</body>
</html>

data_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>“答辩”公司</title>
    <style>
        th{
            font-size: 40px;
        }
        td{
            font-size: 20px;
        }
        table{
            background: orange;

        }
        a{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .add{
            width: 100px;
            height: 50px;
            margin-top: 30px;
        }
        .table_area{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    </style>
</head>
<body style="background: lightseagreen">
<div style="margin-top: 100px;display: flex;flex-direction: row;justify-content: space-around">
    <h1>某“答辩”公司员工列表</h1>
</div>
<div class="table_area">
    <table border="2px">
    <thead>
    <tr>
        <th>ID</th>
        <th>部门</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody >
    {% for obj in data_list %}
        <tr>
            <td>{{ obj.id }}</td>
            <td>{{ obj.title }}</td>
            <td>{{ obj.name }}</td>
            <td>{{ obj.age }}</td>
            <td>
                <a href="/info_delete/?nid={{ obj.id }}"><button>删除</button></a>
            </td>
        </tr>
    {% endfor %}
    </tbody>

</table>
</div>
<a  href="/add_list/"><button class="add">添加</button></a>

</body>
</html>

add_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>“答辩”公司</title>
        <style>
        form{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        input{
            margin-top: 20px;
        }
    </style>
</head>
<body style="background: lightseagreen">
        <div style="margin-top: 100px;display: flex;flex-direction: row;justify-content: space-around">
        <h1 style="color: orange;font-weight: bold">添加信息</h1>
    </div>
    <form method="post">
        {% csrf_token %}
        <input type="text" name="title" placeholder="部门">
        <input type="text" name="name" placeholder="姓名">
        <input type="text" name="age" placeholder="年龄">
        <input style="width: 100px;height: 50px" type="submit" value="提交">
    </form>

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

数据库