小案例展示
小案例实现
数据结构准备操作
首先需要使用sql语句在mysql中创建一个数据库
代码语言：javascript复制创建数据库：create database <数据库名> default charset utf8 collate utf8_general_ci;setting.py连接数据库
代码语言：javascript复制DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'dbpython', # 数据库名字
'USER': 'root',
'PASSWORD': '200208',
'HOST': '127.0.0.1', # 安装MySQL数据库的机器
'PORT': 3306 # 端口
}
}配置app文件
代码语言：javascript复制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对数据库表的操作，并搭建好数据结构先：
代码语言：javascript复制python manage.py makemigrations <自己创建的app名字>
python manage.py migratemodels.py 配置后端类
代码语言：javascript复制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路由
代码语言：javascript复制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后台函数
代码语言：javascript复制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
代码语言：javascript复制<!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
代码语言：javascript复制<!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
代码语言：javascript复制<!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>
