小程序-资料填写页面代码-实现数据填写、收集与发送功能

最新推荐文章于 2024-12-12 10:21:30 发布

ෆ小魚冻干

最新推荐文章于 2024-12-12 10:21:30 发布

阅读量1k

点赞数 30

文章标签：小程序 javascript 前端框架前端 css

本文链接：https://blog.youkuaiyun.com/m0_74346181/article/details/144187764

版权

文章目录

实现效果

提示：前端应用框架：uni-app；vue版本：vue3.js；开发工具：HBuilderX；效果显示工具：微信开发者工具。

一、代码实现

1. HTML与JS代码如下：

<template>
	<view class="totalbox">
		<view class="custom-navigation-bar">
			<text class="title-text">我的资料</text>
		</view>
		<view class="mysrc">
			<text class="userinfo">真实姓名*</text>
			<input class="inputbox" type="text" placeholder="请输入真实姓名" v-model="userInfoList.name" :disabled="inputdisabled"/>
		</view>
		<view class="mysrc">
			<text class="userinfo">性别*</text>
			<radio-group class="radiogroup">
				<label class="xb">
					<radio class="radioitem" value="男" :checked="ischeck" @click="userInfoList.sex='0'" :disabled="inputdisabled"/>
					<text class="text">男</text>
					<radio class="radioitem" value="女" @click="userInfoList.sex='1'" :disabled="inputdisabled"/>
					<text class="text">女</text>
				</label>
			</radio-group>
		</view>
		<view class="mysrc">
			<text class="userinfo">联系电话*</text>
			<input class="inputbox" type="number" placeholder="请输入联系电话" v-model="userInfoList.phonenumber" :disabled="inputdisabled"/>
		</view>
		
		<view class="btn">
			<button type="primary" class="btnitem" @click="sentUserInfo" v-show="showbtn">保存</button>
			<button type="primary" class="btnitem" @click="changeUserInfo" v-show="!showbtn">我要修改</button>
		</view>
	</view>
</template>
<script setup>
import { reactive } from 'vue';
import { myRequest } from '../../uti/api';

	//初始化用户信息
	let userInfoList = reactive({
		name:"",
		sex:"",
		phonenumber:"",
		state: 0,
	})
	
	//单选初始化
	let ischeck = ref(true)
	
	//两个按钮交替显示
	let showbtn = ref(true)
	
	//输入框是否禁止
	let inputdisabled = ref(false)
	
	//从本地缓存中取出userId
	let userInfo=uni.getStorageSync('userotherinfo');
	let userId=userInfo.userId;
	console.log(userId);
	
	//"保存"按钮功能
	function sentUserInfo(){
		console.log(userInfoList);
		if(userInfoList.state==0){
			getUserData()
		}else{
			changeUserData()
		}
		showbtn.value = false;
		inputdisabled.value = true;
	}
	
	//"我要修改" 按钮功能
	function changeUserInfo(){
		showbtn.value = true;
		inputdisabled.value = false;
		console.log(userInfoList);
	}
	
	//新增用户信息
	function getUserData(){
		//调用新增用户信息接口
		myRequest({
			url: 'xxxx/user/insertUserDetail',//接口地址
			method: 'POST',
			data:{
				userId: userId,
				name: userInfoList.name,
				sex: userInfoList.sex,
				phonenumber: userInfoList.phonenumber,
			}
		}).then(res=>{
			userInfoList.state=1;
			console.log(res);
			console.log("成功进入新增用户信息接口");
		}).catch(err=>{
			console.log(err);
		});
	}
	
	
	//修改用户信息
	function changeUserData(){
		//调用修改用户信息接口
		myRequest({
			url: 'xxxx/user/updateUserInfo',//接口地址
			method: 'POST',
			data:{
				userId: userId,
				name: userInfoList.name,
				sex: userInfoList.sex,
				phonenumber: userInfoList.phonenumber,
			},
		}).then(res=>{
			console.log(res);
			console.log("成功进入修改用户信息接口");
		}).catch(err=>{
			console.log(err);
		});
	}
</script>

2.CSS代码如下：


<style lang="scss" scoped>  
	.totalbox{
		position: relative;
		.custom-navigation-bar {
			margin-top: 20rpx;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.mysrc{
			height: 110rpx;
			border-bottom: 1rpx solid #ccc;
			.userinfo{
				position: relative;
				top: 31rpx;
				left: 60rpx;
				font-size: 38rpx;
				text-align: justify;
			}
			.inputbox{
				position: relative;
				display: inline-block;
				top: 41rpx;
				left: 90rpx;
			}
			.radiogroup{
				position: relative;
				display: inline-block;
				top: 38rpx;
				left: 105rpx;
				transform:scale(0.9);
				
				.xb{
					display: flex;
					align-items: flex-end; 
					.radioitem{
						margin-left: 50rpx;
						vertical-align: bottom;
					}
					.text{
						vertical-align: bottom;
					}
				}
			}
		}
		.date{
			position: relative;
			left: 275rpx;
			top: -13rpx;
		}
		.btn{
			position: relative;
			top: 70rpx;
			.btnitem{
				width: 70%;
			}
		}
	}	
	.select{
		width: 500rpx;
		height: 100rpx;
	}
</style>

二、代码分析

1.思路

分析要求，首先，页面需要有填写信息的能力，这个用input和radio组件就可以实现（在uni-app官网上，将大部分HTML标签都封装成了内置组件，绑定了很多属性很方法，很方便）；

其次是信息的收集，使用vue的双向数据绑定（v-model:value="xxx"）可以收集用户在input中填写的value，不过在这之前需要先初始化一个接收数据的“容器”，我习惯于将它们放在一起，用一个对象来接收所有数据（代码中是：userInfoList）。

最后是发送信息，这需要有一个已经搭建好的数据库和真实的后端接口作为基础。首次填写信息就调用“新增用户信息接口”（往数据库用户表新增一条记录），后面修改就调用“修改用户信息”接口（修改之前记录上的字段信息），同时在页面上控制按钮的交替显示（代码中由showbtn控制），点击“保存”按钮各个表单的disabled为true，点击“我要修改”按钮各个表单的disabled为false，为了方便，各个表单disabled的值由inputdisabled控制。

2.部分代码分析

1.myRequest：

对于两个POST请求，我都用到了myRequest（），其实它是我单独封装的一个函数，用来减少代码量（少写一句也是少）。因为每次请求其实都会有一些相同的部分，比如url中的服务器地址和端口号部分以及请求头，那个函数就是将每个接口都要用的部分提取固定了，它的本质是一个uni.request（）。但是至于它为什么没有挂载成全局的，其实我试过，但是不知到为什么用vue.prototype不太顺利，就直接引入。

     import { myRequest } from '../../uti/api';

2.uni.getStorageSync（）

有一段代码如：

     //从本地缓存中取出userId
    let userInfo=uni.getStorageSync('userotherinfo');
    let userId=userInfo.userId;
    console.log(userId);

这里是“从本地缓存中取出userId”，其实在这个页面之前有进行过登录操作，在小程序登录后将数据通过uni.setStorage(OBJECT)存储在了本地缓存中，key为“userotherinfo”，data是一个对象，对象里包含了user_Id。如：

//将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，是一个异步接口。
uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

//取，同步接口
let str = uni.getStorageSync('storage_key');

因为前面进行过存的操作，所以这里才取，代码是因情况而定的。