文章目录
- 1、功能需求
- 2、展示用户列表
- 2.1 添加url
- 2.2 创建视图
- 2.3 编写html页面
- 3、添加用户
- 3.1 添加url
- 3.2 跳转到添加页面
- 3.3 编写添加用户页面
- 3.4 添加用户
- 3.5 实现效果
- 3.6 页面优化
- 4、删除用户
- 4.1 添加删除用户按钮
- 4.2 添加删除url
- 4.3 删除用户
- 4.4 实现效果
- 5、完整代码链接
1、功能需求
- 展示用户列表
2、展示用户列表
2.1 添加url
在urls.py中添加如下代码
path("user/list", views.user_list),
2.2 创建视图
在views.py中获取用户数据，并返回到页面user_list.html
# 获取用户列表信息
def user_list(request):
# 1、获取数据中所有的用户信息
data_list = UserInfo.objects.all()
print(data_list)
return render(request, 'user_list.html', {'data_list': data_list})
2.3 编写html页面
创建user_list.html页面，并展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
<div>
<div class="panel panel-primary">
<div class="panel-heading">用户列表</div>
<div class="panel-body">
<table class="table table-bordered" style="width: 70%">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{% for user in data_list %}
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.password}}</td>
<td>{{user.age}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
1.4 页面实现效果
3、添加用户
- url
- 函数
- GET请求——>看到添加页面
- 输入内容
- POST请求，提交——>写入到数据库
3.1 添加url
path("user/add", views.user_add),
3.2 跳转到添加页面
def user_add(request):
if request.method == 'GET':
return render(request, 'user_add.html')
3.3 编写添加用户页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
<h1>添加用户</h1>
<div class="panel panel-primary">
<div class="panel-heading">用户列表</div>
<div class="panel-body">
<form method="post" action="/user/add">
{% csrf_token %}
<input type="text" name="name" placeholder="用户名">
<input type="text" name="password" placeholder="密码">
<input type="text" name="age" placeholder="年龄">
<input type="submit" value="添加">
</form>
</div>
</div>
</body>
</html>
3.4 添加用户
在user_add函数中补充代码，使用ORM进行数据库操作
def user_add(request):
if request.method == 'GET':
return render(request, 'user_add.html')
# 获取用户提交的数据
name = request.POST.get('name')
password = request.POST.get('password')
age = request.POST.get('age')
# ORM操作数据库
UserInfo.objects.create(name=name, password=password, age=age)
# 跳转到用户列表页面
return redirect("/user/list")
3.5 实现效果
3.6 页面优化
在用户列表user_list页面添加添加用户按钮，点击之后跳转到添加用户页面
<a href="/user/add">添加用户</a>
4、删除用户
- url
- 函数
4.1 添加删除用户按钮
在用户列表页面添加删除用户链接
<th>操作</th>
<td><a href="/user/delete?nid={{ user.id }}">删除</a></td>
4.2 添加删除url
# 删除用户
path("user/delete", views.user_delete),
4.3 删除用户
使用ORM操作数据库，删除用户
def user_delete(request):
nid = request.GET.get('nid')
UserInfo.objects.filter(id=nid).delete()
return redirect("/user/list")
4.4 实现效果
5、完整代码链接
链接：https://pan.baidu.com/s/13yuD63aqqarkQHWx4RMpXw?pwd=qabn
提取码：qabn
--来自百度网盘超级会员V4的分享
