首頁 > web前端 > uni-app > 淺析uni-app中怎麼提交form表單? (程式碼解析)

淺析uni-app中怎麼提交form表單? (程式碼解析)

青灯夜游
發布: 2022-02-10 19:09:44
轉載
7102 人瀏覽過

uni-app中怎麼提交form表單?以下這篇文章就來跟大家分享下兩種uni-app提交form表單的方式,希望對大家有幫助!

淺析uni-app中怎麼提交form表單? (程式碼解析)

uni-app提交form表單的兩種方式

方式1:form表單元素較少

例如用戶登錄,如下圖

淺析uni-app中怎麼提交form表單? (程式碼解析)

前端程式碼範例

此處省略了部分多餘程式碼

<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>
登入後複製

後端程式碼範例

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

/**
* 也可以按照字段名来接收
*/
@PostMapping("/password")
public Result loginByPassword(String username, String passsword) {
	// 处理业务逻辑
}
登入後複製

方式1:form表單元素較多

上面的方法在form表單元素較多時處理起來就比較費事了,一般像新增使用者、商品之類的form表單少則十幾個,多則幾十個。如下圖:
淺析uni-app中怎麼提交form表單? (程式碼解析)
如果按照上面的寫法,不僅前端寫起來費事不雅觀,後台接受也要一個字段一個字段的接收也煞是費勁,這個時候我們可以定義一個對象formData,將資料儲存到裡面提交時直接提交JSON字串到後端,後端接收到JSON字串後轉成JSON對象,然後再進行自己的業務邏輯處理

前端程式碼範例:

<!-- 表单元素核心区域 -->
<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>
登入後複製

後端java程式碼範例

// 针对传参方式一:后台以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();
}
登入後複製

推薦:《uniapp教學

以上是淺析uni-app中怎麼提交form表單? (程式碼解析)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板