uniapp与Django前后端联动

uniapp与Django前后端联动

​ 本篇主要讲我们如何把前端(uniapp)和后端(Django)串联起来。而串联起来的方法很简单通过网络协议http协议进行沟通,简单点来说就是前端发送请求到后端,后端把回传发送回前端。

​ 主要的请求方式:

序号方法描述
1GET请求指定的页面信息,并返回实体主体。
2HEAD类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头
3POST向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4PUT从客户端向服务器传送的数据取代指定的文档的内容。
5DELETE请求服务器删除指定的页面。
6CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7OPTIONS允许客户端查看服务器的性能。
8TRACE回显服务器收到的请求,主要用于测试或诊断。
9PATCH是对 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
  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值