前后台交互实例二：前台通过django在数据库里面增删改查数据
Posted 梦中琴歌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后台交互实例二：前台通过django在数据库里面增删改查数据相关的知识，希望对你有一定的参考价值。
url(r‘^userinfo/‘, views.userinfo),
url(r‘^userdetail-(?P<nid>\d+)/‘, views.userdetail),
url(r‘^userdel-(?P<nid>\d+)/‘, views.userdel),
url(r‘^useredit-(?P<nid>\d+)/‘, views.user_edit),
views
def userinfo(request):
if request.method =="GET":
user_list=models.UserInfo.objects.all()
return render(request,‘userinfo.html‘,{‘user_list‘:user_list})
elif request.method == "POST":
u = request.POST.get(‘user‘)
p = request.POST.get(‘pwd‘)
models.UserInfo.objects.create(username=u,password=p)
return redirect(‘/CC/userinfo/‘)
def userdetail(request,nid):
obj=models.UserInfo.objects.filter(id=nid).first()
return render(request,‘userdetail.html‘,{‘obj‘:obj})
def userdel(request,nid):
models.UserInfo.objects.filter(id=nid).delete()
return redirect(‘/CC/userinfo/‘)
def user_edit(request, nid):
if request.method == "GET":
obj = models.UserInfo.objects.filter(id=nid).first()
return render(request, ‘user_edit.html‘,{‘obj‘: obj})
elif request.method == "POST":
nid = request.POST.get(‘id‘)
u = request.POST.get(‘username‘)
p = request.POST.get(‘password‘)
models.UserInfo.objects.filter(id=nid).update(username=u,password=p)
return redirect(‘/CC/userinfo/‘)
model.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.db import models
# Create your models here.
class UserInfo(models.Model):
username=models.CharField(max_length=32)
password=models.CharField(max_length=64)
class zte(models.Model):
id=models.AutoField(primary_key=True) #主键，自增
username=models.CharField(max_length=32)
password=models.CharField(max_length=64)
email=models.CharField(max_length=64,null=True)
userinfo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.menu{
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div style="height: 48px;background-color: black;color: white">
---------------------------------------
</div>
<div>
<div style="position: absolute;top:48px;bottom: 0;left: 0;width: 200px;background-color: brown;">
<a class="menu" href="/CC/userinfo/">用户管理</a>
<a class="menu" href="/CC/usergroup/">用户组管理</a>
</div>
<div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">
<h3>添加用户</h3>
<form method="POST" action="/CC/userinfo/">
<input type="text" name="user" />
<input type="text" name="pwd" />
<input type="submit" value="添加"/>
</form>
<h3>用户列表</h3>
<ul>
{% for row in user_list %}
<li>
<a href="/CC/userdetail-{{ row.id }}/">{{ row.username }}</a> |
<a href="/CC/userdel-{{ row.id }}/">删除</a> |
<a href="/CC/useredit-{{ row.id }}/">编辑</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</body>
</html>
useredit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.menu{
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div style="height: 48px;background-color: black;color: white">
11111111111111111
</div>
<div>
<div style="position: absolute;top:48px;bottom: 0;left: 0;width: 200px;background-color: brown;">
<a class="menu" href="/CC/userinfo/">用户管理</a>
<a class="menu" href="/CC/usergroup/">用户组管理</a>
</div>
<div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">
<h1>编辑用户</h1>
<form method="post" action="/CC/useredit-{{ obj.id }}/">
<input style="display: none" type="text" name="id" value="{{ obj.id }}" />
<input type="text" name="username" value="{{ obj.username }}" />
<input type="text" name="password" value="{{ obj.password }}"/>
<input type="submit" value="提交" />
</form>
</div>
</div>
</body>
</html>
userdetail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.menu{
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div style="height: 48px;background-color: black;color: white">
3333333333333333333333333333333
</div>
<div>
<div style="position: absolute;top:48px;bottom: 0;left: 0;width: 200px;background-color: brown;">
<a class="menu" href="/CC/userinfo/">用户管理</a>
<a class="menu" href="/CC/usergroup/">用户组管理</a>
</div>
<div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">
<h1>用户详细信息</h1>
<h5>{{ obj.id }}</h5>
<h5>{{ obj.name }}</h5>
<h5>{{ obj.password }}</h5>
</div>
</div>
</body>
</html>
以上是关于前后台交互实例二：前台通过django在数据库里面增删改查数据的主要内容，如果未能解决你的问题，请参考以下文章
前台通过form表单向Django后台传输数据，Django处理后返回给前台
不通过服务器控件时用前端javascript与c#后台交互的方法
Vue前后台数据交互实例演示，使用axios传递json字符串数组