uniapp与Django前后端联动
本篇主要讲我们如何把前端(uniapp)和后端(Django)串联起来。而串联起来的方法很简单通过网络协议http协议进行沟通,简单点来说就是前端发送请求到后端,后端把回传发送回前端。
主要的请求方式:
序号 | 方法 | 描述 |
---|---|---|
1 | GET | 请求指定的页面信息,并返回实体主体。 |
2 | HEAD | 类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头 |
3 | POST | 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 |
4 | PUT | 从客户端向服务器传送的数据取代指定的文档的内容。 |
5 | DELETE | 请求服务器删除指定的页面。 |
6 | CONNECT | HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 |
7 | OPTIONS | 允许客户端查看服务器的性能。 |
8 | TRACE | 回显服务器收到的请求,主要用于测试或诊断。 |
9 | PATCH | 是对 PUT 方法的补充,用来对已知资源进行局部更新 。 |
不过用的最多的是GET和POST。
然后我们来写一个简单页面来实现一个简单的GET请求。
//这是index的默认代码,然后我们加入一个按钮
//为了方便测试我们加入一个输入框来更改我们发送的数据
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->//这个图片太影响查看了所以注销掉
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view>测试数据</view>
<tn-input v-model="data" type="text" placeholder="测试数据" height="100" border="true" borderColor="#01BEFF" /> //一个简单的输入框这个是用来ui的不要照搬
<!-- <input type="text" v-model="data" > --> //可以选择用这个反正只是一个输入框
<button @click='' >测试</button> //测试按钮
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
data:'', //输入框内的数据
}
},
onShow(){
},
onLoad() {
},
methods: {
Testapi(){ //写一个简单的get请求
uni.requset({
url:'http://127.0.0.1:8000/getches/', //get请求url
data:{
title:this.data, //发送的数据
},
method:'GET', //请求类型
success(res){ //通过把输入框内输入的数据发送到后端加几个字(在后端加)再接收到前端界面把Hello改变
let cessj1 = res.data['title']
this.title = cessj1
console.log(res)
},
fail(res){
console.log(res)
}
})
// this.title = uni.getStorageSync('cesshuj')
// console.log(this.title)
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
最后界面大概这样。
然后写上我们的后端函数。
#views.py文件
from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
# Create your views here.
#测试函数
def index(request):
return HttpResponse("hello world")
#GET测试函数
def getces(request):
title = request.GET.get('title')
print(title)
data = {
"code":200,
"title":"加几个字"+title
}
return JsonResponse(data)
#urls.py
from django.contrib import admin
from django.urls import path
import uniappclient.views as uniapp
urlpatterns = [
# path('admin/', admin.site.urls),
path('index/',uniapp.index),
path('getches/',uniapp.getces)#get测试的uel
]
然后我们运行Django服务简单测试一下。
OK成功了。我们查看服务端也可以看到GET请求是如何传输数据的。
E:\guoshusibieXM\guossb\uniappclient\views.py changed, reloading.
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
February 02, 2023 - 15:24:24
Django version 4.0.4, using settings 'guossb.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
123
[02/Feb/2023 15:26:39] "GET /getches/?title=123 HTTP/1.1" 200 53
123
[02/Feb/2023 15:28:24] "GET /getches/?title=123 HTTP/1.1" 200 53
你好世界
[02/Feb/2023 15:28:37] "GET /getches/?title=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C HTTP/1.1" 200 74