Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > uni-app > Hauptteil

Eine kurze Analyse, wie man ein Formular in der Uni-App einreicht? (Code-Analyse)

青灯夜游
Freigeben： 2022-02-10 19:09:44
nach vorne
7077 Leute haben es durchsucht

Wie reicht man ein Formular in der Uni-App ein? Der folgende Artikel zeigt Ihnen zwei Möglichkeiten, Formulare in der Uni-App einzureichen. Ich hoffe, er wird Ihnen helfen!

Eine kurze Analyse, wie man ein Formular in der Uni-App einreicht? (Code-Analyse)

Two Möglichkeiten für Uni-Apps, Formular

Method 1: Das Formular hat weniger Elemente. -Endcode

Einige redundante Codes werden hier weggelassen

<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>
Nach dem Login kopieren

Beispiel für Back-End-CodeEine kurze Analyse, wie man ein Formular in der Uni-App einreicht? (Code-Analyse)

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

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

Methode 1: Es gibt viele Formularelemente

Die obige Methode ist schwieriger zu verarbeiten Wenn viele Formularelemente vorhanden sind, gibt es im Allgemeinen mindestens ein Dutzend oder mehr Formulare, z. B. neue Benutzer und Produkte. Wie unten gezeigt:

Wenn Sie der oben genannten Schreibmethode folgen, ist nicht nur das Schreiben im Front-End umständlich und unansehnlich, sondern auch der Empfang im Back-End erfordert einen feldweisen Empfang. Zu diesem Zeitpunkt können wir definieren ein Objekt

und speichern Sie die darin enthaltenen Daten zur Übermittlung. Senden Sie den JSON-String direkt an das Backend, wandeln Sie ihn in ein JSON-Objekt um und führen Sie dann seine eigene Geschäftslogikverarbeitung durch. Endcode:

<!-- 表单元素核心区域 -->
<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>
Nach dem Login kopieren
Beispiel für Backend-Java-Code

// 针对传参方式一：后台以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();
}
Nach dem Login kopieren

empfehlt: „Eine kurze Analyse, wie man ein Formular in der Uni-App einreicht? (Code-Analyse)uniapp-Tutorial
“formData

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man ein Formular in der Uni-App einreicht? (Code-Analyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
uniapp 表单提交
Quelle：csdn.net
Vorheriger Artikel：Zusammenstellung von Einstiegswissen über UniAPP, das Sie kennen müssen Nächster Artikel：Fassen Sie zusammen und geben Sie eine kurze Einführung in die Uni-App
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1843
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
2014
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1696
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1596
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1613
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage