后端:
一、跟上文如何查询数据库中的数据:https://blog.csdn.net/ahc176/article/details/119080900?spm=1001.2014.3001.5501
二、修改customer.py的内容:
这样我们增删查改的功能都完成了
import json
from django.http import JsonResponse
from czx.models import Customer
def dispatcher(request):
# 将请求参数统一放入request的params属性中
# GET请求参数在request对象的GET属性中
if request.method == 'GET':
request.params = request.GET
# POST/PUT.DELETE请求参数从request对象的body属性中获取
elif request.method in ['POST', 'PUT', 'DELETE']:
# 根据接口,请求的消息体都是json格式
request.params = json.loads(request.body)
# 根据不同的action分派给不同你的函数进行处理
action = request.params['action']
if action == 'list_customer':
return listcustomers(request)
elif action == 'add_customer':
return addcustomer(request)
elif action == 'modify_customer':
return modifycustomer(request)
elif action == 'delete_customer':
return deletecustomer(request)
else:
return JsonResponse({'ret': 1, 'msg': '不支持该类型http请求'})
def listcustomers(request):
qs = Customer.objects.values()
retlist = list(qs)
return JsonResponse({'ret': 0, 'retlist': retlist})
def addcustomer(request):
info = request.params['data']
#从请求信息获取要添加的客户信息
#插入数据库
record = Customer.objects.create(
name=info['name'],
phonenumber=info['phonenumber'],
address=info['address']
)
return JsonResponse({'ret':0,'id':record.id})
def modifycustomer(request):
customerid=request.params['id']
newdata =request.params['newdata']
try:
customer=Customer.objects.get(id=customerid)
except Customer.DoesNotExist:
return {
'ret':1,
'msg':f'id为‘{customerid}’的用户不存在'
}
if 'name' in newdata :
customer.name=newdata['name']
if 'phonenumber' in newdata:
customer.phonenumber=newdata['phonenumber']
if 'address' in newdata:
customer.address=newdata['address']
customer.save()
return JsonResponse({'ret': 0})
def deletecustomer(request):
customerid=request.params['id']
try:
customer = Customer.objects.get(id=customerid)
except Customer.DoesNotExist:
return {
'ret':1,
'msg':f'id为’{customer}‘的客户不存在'
}
customer.delete()
return JsonResponse({'ret':0})
前端:
一、建一个修改信息页
二、modify.js:
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
res:1,
id:null,
name:null,
phonenum:null,
address:null
},
bindinput:function(e){
this.setData({
id: e.detail.value
})
},
bindinput1:function(e){
this.setData({
name: e.detail.value
})
},
bindinput2:function(e){
this.setData({
phonenum: e.detail.value
})
},
bindinput3:function(e){
this.setData({
address: e.detail.value
})
},
modify: function () {
var that = this;
wx.request({
url: 'http://127.0.0.1:8000/api/mgr/customers',
method:'POST',
data:{
action:'modify_customer',
id:that.data.id,
newdata:{
name:that.data.name,
phonenumber:that.data.phonenum,
address:that.data.address
}
},
success(data){
console.log(data.data.ret)
that.setData({res:data.data.ret})
}
})
}
})
三、modify.wxml:
<view class="view-contain-ti">
<text class="text-ti">用户id</text>
<input class="input1" bindinput="bindinput"></input>
</view>
<view class="view-contain-ti">
<text class="text-ti">名字</text>
<input class="input1" bindinput="bindinput1"></input>
</view>
<view class="view-contain-ti">
<text class="text-ti">电话</text>
<input class="input1" bindinput="bindinput2"></input>
</view>
<view class="view-contain-ti">
<text class="text-ti">住址</text>
<input class="input1" bindinput="bindinput3"></input>
</view>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="modify"> 修改用户 </button>
<view wx:if="{{res==0}}">修改成功</view>
四、modify.wxss:
.view-contain-ti {
display: flex;
height: 40px;
margin: 20px;
border: 3rpx solid #2b8847;
border-radius: 10rpx;
}
.text-ti {
position: absolute;
font-size: 12px;
background: white;
margin: -10px 0 0 10px;
padding: 0 5px;
color: rgb(144, 147, 167);
}
.input1 {
margin: auto 10px;
}
效果:
输入要修改的信息:
修改用户:
数据库:
修改成功