masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > uni-app > Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod)

Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod)

青灯夜游
Lepaskan： 2022-02-10 19:09:44
ke hadapan
7101 orang telah melayarinya

Bagaimana untuk menyerahkan borang dalam apl uni? Artikel berikut akan berkongsi dengan anda dua cara untuk menyerahkan borang dalam aplikasi uni. Saya harap ia akan membantu anda!

Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod)

Dua cara untuk uni-app menyerahkan borang

Kaedah 1: Elemen borang ialah lebih kecil Kurang

Sebagai contoh, log masuk pengguna, seperti yang ditunjukkan di bawah

Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod)

Contoh kod bahagian hadapan

Ini Beberapa kod berlebihan telah ditinggalkan

<template>
	<view style="padding:50rpx;">
		<view style="margin-top:60rpx;">
			<form @submit="submit">
				<view class="gui-border-b gui-form-item" style="margin-top:80rpx;">
					<view class="gui-form-body">
						<input type="number" class="gui-form-input" v-model="driverTel" name="driverTel" placeholder="手机号" placeholder-style="color:#CACED0"/>
					</view>
				</view>
				
				<view class="gui-border-b gui-form-item" style="margin-top:30rpx;">
					<view class="gui-form-body">
						<input type="password" class="gui-form-input" v-if="isPwd" 
						v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>
						<input type="text" class="gui-form-input" v-if="!isPwd" :disabled="true" 
						v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>
					</view>
					<text class="gui-form-icon gui-icons gui-text-center" 
						@click="changePwdType" :style="{color:isPwd?&#39;#999999&#39;:&#39;#008AFF&#39;}">&#xe609;</text>
				</view>
				
				<view style="margin-top:50rpx;">
					<button type="default" class="gui-button gui-bg-blue msgBtn" formType="submit" style="border-radius:50rpx;">
						<text class="gui-color-white gui-button-text-max">登录</text>
					</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	uni.request({
		url: _self.server_host + "/app/driver/login/password",
		method:&#39;POST&#39;,
		header:{&#39;content-type&#39; : "application/x-www-form-urlencoded"},
		data:{
			// 对于上面的form表单提交，我们可以直接在uni.request的data属性中直接提交就行了
			driverTel: _self.driverTel,
			password: _self.password
		},
		success: (res) => {
			// 服务器返回结果
		}
	})
</script>
Salin selepas log masuk

Contoh kod belakang

/**
* 这里可以以一个实体类来接收，实体类必须包含前端传参参数的对应字段
*/
@PostMapping("/password")
public Result loginByPassword(LoginUserVO loginUserVO) {
	// 处理业务逻辑
}

/**
* 也可以按照字段名来接收
*/
@PostMapping("/password")
public Result loginByPassword(String username, String passsword) {
	// 处理业务逻辑
}
Salin selepas log masuk

Kaedah 1: bentuk Terdapat banyak unsur bentuk

Kaedah di atas lebih menyusahkan untuk diproses apabila terdapat banyak unsur bentuk Secara umumnya, terdapat sekurang-kurangnya sedozen bentuk bentuk seperti menambah pengguna dan produk baru sebanyak berpuluh-puluh. Seperti yang ditunjukkan di bawah:
Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod)
Jika anda mengikuti kaedah penulisan di atas, bukan sahaja bahagian hadapannya menyusahkan dan tidak sedap dipandang, malah penerimaan latar belakang juga memerlukan penerimaan medan demi medan pada masa ini , kita boleh mentakrifkan objek formData, simpan data di dalamnya dan serahkan rentetan JSON terus ke hujung belakang apabila menyerahkan rentetan JSON dan menukarnya menjadi objek JSON, dan kemudian melaksanakan pemprosesan logik perniagaannya sendiri <. 🎜>

Contoh kod hadapan: 

<!-- 表单元素核心区域 -->
<scroll-view :scroll-y="true" :show-scrollbar="false" :style="{height:mainHeight+&#39;px&#39;}">
	<!-- 第1步 -->
	<view class="gui-padding" v-if="step == 1">
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">所属客户</text>
			<view class="gui-form-body">
				<picker mode="selector" :range="tenantList" :value="tenantIndex" @change="tenantChange($event,tenantList)" :range-key="&#39;tenantName&#39;">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-text">{{tenantList[tenantIndex].tenantName}}</text>
						<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">姓名</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.driverName" placeholder="请输入姓名" />
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">手机号</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.driverTel" placeholder="请输入手机号" />
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">身份证号码</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.idNumber" placeholder="请输入身份证号码" />
			</view>
		</view>
		
		<view class="gui-margin-top">
			<text class="gui-form-label" style="width: 100%;">身份证照片(个人信息面)</text>
		</view>
		<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
			<view class="gui-idcard-items-image" @tap="selectIdPhotoPositive">
				<gui-image :src="formData.idPhotoPositive" :width="380"></gui-image>
			</view>
		</view>
		
		<view class="gui-margin-top">
			<text class="gui-form-label" style="width: 100%;">身份证照片(国徽图案面)</text>
		</view>
		<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
			<view class="gui-idcard-items-image" @tap="selectIdPhotoReverse">
				<gui-image :src="formData.idPhotoReverse" :width="380"></gui-image>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">证件有效期</text>
			<view class="gui-form-body">
				<picker class="gui-form-picker" mode="date" @change="idNumberValidUntilChange">
					<text class="gui-text">{{formData.idNumberValidUntil}}</text>
					<text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
				</picker>
			</view>
		</view>
		
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">收款人</text>
			<view class="gui-form-body">
				<picker mode="selector" :range="payeeList" :value="payeeIndex" @change="payeeChange($event,payeeList)" :range-key="&#39;payeeName&#39;">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-text">{{payeeList[payeeIndex].payeeName}}</text>
						<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
					</view>
				</picker>
			</view>
		</view>
	</view>

	<!-- 第2步 -->
	<view class="gui-padding" v-if="step == 2">
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">驾驶证编号</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.drivingLicenseNumber" placeholder="请输入驾驶证编号" />
			</view>
		</view>
		
		<view class="gui-margin-top">
			<text class="gui-form-label" style="width: 100%;">驾驶证(主页)</text>
		</view>
		<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
			<view class="gui-idcard-items-image" @tap="selectDrivingLicensePhoto">
				<gui-image :src="formData.drivingLicensePhoto" :width="380"></gui-image>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">有效期开始</text>
			<view class="gui-form-body">
				<picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityStartChange">
					<text class="gui-text">{{formData.drivingLicenseValidityStart}}</text>
					<text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
				</picker>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">有效期结束</text>
			<view class="gui-form-body">
				<picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityEndChange">
					<text class="gui-text">{{formData.drivingLicenseValidityEnd}}</text>
					<text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
				</picker>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">发证机关</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.drivingLicenseIssuingOrg" placeholder="请输入驾驶证发证机关" />
			</view>
		</view>
		
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">准驾车型</text>
			<view class="gui-form-body">
				<picker mode="selector" :range="vehicleTypeList" :value="vehicleTypeIndex" @change="vehicleTypeChange($event,vehicleTypeList)" :range-key="&#39;codeSetName&#39;">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-text">{{vehicleTypeList[vehicleTypeIndex].codeSetName}}</text>
						<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">关联车辆</text>
			<view class="gui-form-body">
				<picker mode="selector" :range="vehicleList" :value="vehicleIndex" @change="vehicleChange($event,vehicleList)" :range-key="&#39;carNumber&#39;">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-text">{{vehicleList[vehicleIndex].carNumber}}</text>
						<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
					</view>
				</picker>
			</view>
		</view>
	</view>

	<!-- 第3步 -->
	<view class="gui-padding" v-if="step == 3">
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">资格证号码</text>
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.roadTransportQualificationCertificateNumber" placeholder="请输入从业资格证编号" />
			</view>
		</view>
		
		<view class="gui-margin-top">
			<text class="gui-form-label" style="width: 100%;">从业资格证</text>
		</view>
		<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
			<view class="gui-idcard-items-image" @tap="selectRoadTransportQualificationCertificatePhoto">
				<gui-image :src="formData.roadTransportQualificationCertificatePhoto" :width="380"></gui-image>
			</view>
		</view>
		
		<view class="gui-form-item gui-margin-top gui-border-b">
			<text class="gui-form-label">证件有效期</text>
			<view class="gui-form-body">
				<picker class="gui-form-picker" mode="date" @change="roadTransportQualificationCertificateValidUntilChange">
					<text class="gui-text">{{formData.roadTransportQualificationCertificateValidUntil}}</text>
					<text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
				</picker>
			</view>
		</view>
	</view>
</scroll-view>

<script>
	export default {
		data() {
			return {
				// 表单数据记录
				formData: {
					// 第一步
					tenantId: &#39;&#39;,															// 所属客户
					payeeId: &#39;&#39;,															// 收款人
					driverName: &#39;&#39;,															// 司机姓名
					driverTel: &#39;&#39;,															// 司机电话
					idNumber: &#39;&#39;,															// 身份证号码
					idNumberValidUntil:&#39;请选择证件有效期&#39;,									// 身份证有效期
					idPhotoPositive: &#39;https://www.zzwlnet.com/files/images/upload_identity_card_front.png&#39;,							// 身份证正面（个人信息面）
					idPhotoReverse: &#39;https://www.zzwlnet.com/files/images/upload_identity_card_contrary.png&#39;,						// 身份证反面（国徽面）
					
					// 第二步
					drivingLicenseNumber: &#39;&#39;,												// 驾驶证编号
					drivingLicensePhoto: &#39;https://www.zzwlnet.com/files/images/upload_driving_license.png&#39;,							// 驾驶证图片
					drivingLicenseValidityStart: &#39;请选择证件有效期开始时间&#39;, 					// 驾驶证有效期开始
					drivingLicenseValidityEnd: &#39;请选择证件有效期结束时间&#39;,					// 驾驶证有效期结束
					drivingLicenseIssuingOrg: &#39;&#39;,											// 驾驶证发证机关
					quasiDrivingType: &#39;&#39;,													// 准驾车型
					vehicleId: &#39;&#39;,															// 关联车辆
					
					// 第三步
					roadTransportQualificationCertificateNumber: &#39;&#39;,						// 从业资格证号
					roadTransportQualificationCertificatePhoto: &#39;https://www.zzwlnet.com/files/images/upload_road_transport_qualification_certificate.png&#39;,	// 从业资格证图片
					roadTransportQualificationCertificateValidUntil: &#39;请选择证件有效期&#39;,		// 从业资格证有效期
				},
			}
		},
		methods: {
			submit: function() {
				uni.request({
					url: _self.server_host + &#39;/api&#39;,
					method: &#39;POST&#39;,
					header: {&#39;content-type&#39; : "application/x-www-form-urlencoded"},
					data: {
						// 传参方式一：以JSON字符串的形式提交form表单数据
						formData: JSON.stringify(_self.formData),
						// 传参方式二：将form表单数据以对象形式传递
						// formData: _self.formData,
					},
					success: res => {
						// 服务器返回数据，后续业务逻辑处理
					},
					fail: () => {
						uni.showToast({ title: "服务器响应失败，请稍后再试！", icon : "none"});
					},
					complete: () => {}
				});
			}
		}
	}
</script>
Salin selepas log masuk

Contoh kod java belakang

// 针对传参方式一：后台以String的方式接收
public Result add(String formData){
	// 将JSON字符串转换成JSONObject
	JSONObject jsonObject= JSONObject.parseObject(formData);
	// 继续后续业务逻辑处理
	return Results.success();
}

// 针对传参方式二：后台以Object的方式接收
public Result add(Object driverObj){
	// 继续后续业务逻辑处理
	return Results.success();
}
Salin selepas log masuk
Disyorkan: "

tutorial uniapp"

Atas ialah kandungan terperinci Analisis ringkas tentang cara menyerahkan borang dalam apl uni? (analisis kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
uniapp 表单提交
sumber：csdn.net
Artikel sebelumnya：Kompilasi ilmu peringkat permulaan tentang UniAPP yang wajib anda ketahui Artikel seterusnya：Ringkaskan dan kongsi pengenalan ringkas kepada uni-app
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2080
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2242
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1888
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1767
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1805
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan