后端:
一、创建django项目,在项目下建两个app
一个用来定义数据库,一个写接口方法
python manage.py startapp czx
python manage.py startapp mgr
二、在djangoProject目录下的settings.py部分字段修改:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'czx.apps.CzxConfig',
'mgr' #app名
]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'HOST': '127.0.0.1', # 数据库主机
'PORT': 3306, # 数据库端口
'USER': 'root', # 数据库用户名
'PASSWORD': 'admin', # 数据库用户密码
'NAME': 'czx' # 数据库名字
}
}
三、修改djangoProject目录下的urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('api/mgr/', include('mgr.urls')),
]
四、将czx目录下的models.py定义数据库的类
from django.db import models
#定义图书模型类BookInfo
class Customer(models.Model):
name = models.CharField(max_length=200)
phonenumber = models.CharField(max_length=200)
address = models.CharField(max_length=200)
五、将mgr目录下建一个customer.py写入
dispatcher是一个分配的函数,通过请求的action属性分配给不同的函数处理,就像我们需要在前端输出数据库的值,就需要前端定义action:'list_customer'传给后端,后端会调用listcustomers函数
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)
else:
return JsonResponse({'ret': 1, 'msg': '不支持该类型http请求'})
def listcustomers(request):
qs = Customer.objects.values()
retlist = list(qs)
return JsonResponse({'ret': 0, 'retlist': retlist})
六、在mgr目录下建一个urls.py
from django.urls import path
from mgr import customer
urlpatterns = [
path('customers', customer.dispatcher)
]
七、在终端输入
python manage.py makemigrations (生成迁移文件)
python manage.py migrate (将结构变化应用到数据库)
可以看到表都建好了
八、在数据库里写些数据
九、运行django
打开http://127.0.0.1:8000/api/mgr/customers?action=list_customer
显示
前端:
一、建个项目
二、index.js
Page({
data: {
play:[]
},
bindtest: function () {
var that = this;
wx.request({
url: 'http://127.0.0.1:8000/api/mgr/customers',
method:'GET',
data:{
action:'list_customer'
},
success(data){
console.log(data.data)
that.setData({play:data.data.retlist})
}
})
}
})
二、index.wxml
<view> <button bindtap='bindtest'>test</button> </view>
<view wx:for="{{play}}">
<view>{{item.name}}</view>
<view>{{item.phonenumber}}</view>
<view>{{item.address}}</view>
</view>
三、点test
前后端交互成功