uni-app编写一个含有姓名,班级,学号,座号,性别,爱好,年龄,并有提交功能的个人信息表
时间: 2024-06-09 11:10:49 浏览: 13
好的,你可以按照以下步骤来实现:
1. 创建一个uni-app项目,选择合适的模板。
2. 在pages文件夹下创建一个新的页面,命名为“personalInfo”。
3. 在personalInfo页面中,使用uni-ui或者iview-weapp等UI组件库来实现表单的布局和样式。
4. 添加表单控件,包括输入框、单选框、多选框等,用于输入个人信息。
5. 在表单中添加一个提交按钮,点击后将表单数据提交到后台服务器。
6. 在uni-app的manifest.json配置文件中添加网络权限,确保应用可以访问网络。
7. 编写JS代码,将表单数据发送到后台服务器,并获取服务器返回的结果。
8. 根据服务器返回的结果,在页面中显示提交成功或提交失败的消息。
下面是一个简单的代码示例,供你参考:
```
<template>
<view class="container">
<form>
<view class="form-item">
<view class="form-label">姓名</view>
<input class="form-input" type="text" v-model="name" />
</view>
<view class="form-item">
<view class="form-label">班级</view>
<input class="form-input" type="text" v-model="class" />
</view>
<view class="form-item">
<view class="form-label">学号</view>
<input class="form-input" type="text" v-model="studentId" />
</view>
<view class="form-item">
<view class="form-label">座号</view>
<input class="form-input" type="text" v-model="seat" />
</view>
<view class="form-item">
<view class="form-label">性别</view>
<radio-group v-model="gender">
<radio value="male">男</radio>
<radio value="female">女</radio>
</radio-group>
</view>
<view class="form-item">
<view class="form-label">爱好</view>
<checkbox-group v-model="hobbies">
<checkbox value="reading">读书</checkbox>
<checkbox value="music">听音乐</checkbox>
<checkbox value="sports">运动</checkbox>
</checkbox-group>
</view>
<view class="form-item">
<view class="form-label">年龄</view>
<input class="form-input" type="text" v-model="age" />
</view>
<button class="submit-btn" @click="submit">提交</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
class: '',
studentId: '',
seat: '',
gender: '',
hobbies: [],
age: '',
}
},
methods: {
submit() {
// 将表单数据发送到后台服务器
uni.request({
url: 'http://your-server-url.com/submit',
method: 'POST',
data: {
name: this.name,
class: this.class,
studentId: this.studentId,
seat: this.seat,
gender: this.gender,
hobbies: this.hobbies,
age: this.age,
},
success: (res) => {
// 根据服务器返回的结果,在页面中显示提交成功或提交失败的消息
if (res.statusCode === 200 && res.data.success) {
uni.showToast({
title: '提交成功',
icon: 'success',
})
} else {
uni.showToast({
title: '提交失败',
icon: 'none',
})
}
},
fail: () => {
uni.showToast({
title: '网络错误',
icon: 'none',
})
},
})
},
},
}
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.form-label {
width: 120rpx;
font-size: 28rpx;
}
.form-input {
flex: 1;
height: 56rpx;
border: 1rpx solid #999;
border-radius: 5rpx;
margin-left: 20rpx;
padding: 0 20rpx;
font-size: 28rpx;
}
.submit-btn {
width: 200rpx;
height: 80rpx;
background-color: #007aff;
border-radius: 40rpx;
color: #fff;
font-size: 28rpx;
margin-top: 40rpx;
}
</style>
```
相关推荐
![java](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)