django和数据库交互，在微信小程序端添加用户输入的数据到数据库

后端：

一、跟上文如何查询数据库中的数据：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)
    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})

这样后端就完成了。

前端：

一、新建一页添加页

 二、add.js:

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
      res:1,
      name:null,
      phonenum:null,
      address:null
  }, 
  
  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
    })
  },
  add: function () { 
    var that = this;
    wx.request({     
        url: 'http://127.0.0.1:8000/api/mgr/customers',
        method:'POST',
       data:{
          action:'add_customer',
          data:{
            name:that.data.name,
            phonenumber:that.data.phonenum,
            address:that.data.address
          }
        },
        success(data){
          console.log(data.data.id)
          that.setData({res:data.data.ret})
        }
  
      })
    }
    })

三、add.wxml:

<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="add"> 添加用户 </button>

<view wx:if="{{res==0}}">添加成功</view>

四、add.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;
}

这样前端也就完成了。

效果展示：

输入数据：

 添加用户：

查看数据库：

 

添加数据完成。