uniapp与Django前后端联动

最新推荐文章于 2024-06-01 19:55:43 发布

慕容星言

最新推荐文章于 2024-06-01 19:55:43 发布

阅读量1.7k

点赞数 2

分类专栏： uniapp+Django+yolov5=果疏识别文章标签： django uni-app 前端

本文链接：https://blog.csdn.net/qq_55002406/article/details/128851487

版权

uniapp+Django+yolov5=果疏识别专栏收录该内容

5 篇文章 3 订阅

订阅专栏

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