【若依前后端分离+app】第二篇--页面表单和前后端信息交互

示例图： 

index.vue页面代码：

<template>
	<view class="container">
		
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">详细信息</text>
		</uni-card>

		<view class="example">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="A" name="A" required>
					<uni-combox :candidates="AOptions"  v-model="formData.A" placeholder="请选择A">
					</uni-combox>
				</uni-forms-item>
				<uni-forms-item label="B" name="B" required>
					<uni-combox :candidates="BOptions" v-model="formData.B"  placeholder="请选择B" >
					</uni-combox>
				</uni-forms-item>
				<uni-forms-item label="C" name="C" required>
					<uni-number-box v-model="formData.C" :step="1" :min="1" :max="100" />
				</uni-forms-item>
				<button type="primary" @click="CBound">按钮</button>
			</uni-forms>
		</view>



	</view>


</template>

<script>
	
	import {
		ASelect,BSelect,CBound
	} from "@/api/one/one.js";
	export default {
		data() {
			return {
				//A信息
				AOptions: [],
				//B信息
				BOptions: [],
				
				messageText: null,
				msgType: null,
				formData: {
					A: '',
					B: '',
					C:1,
				},
				rules: {},
			}
		},
		created() {
			this.getA();
			this.getB();
		},
		methods: {
			/**
			 * 查询A信息
			 */
			getA() {
				ASelect().then(response => {
					var a= response.data
				 this.AOptions=a.map(a=>{				
					return a.A
					 })
					});
			},
			/**
			 * 查询B信息
			 */
			getB() {
				BSelect().then(response => {
					console.log(response)
					var b= response.data
					
				 this.BOptions=b.map(b=>{
					return b.B
					 })
				});
			},
			
			
			CBound() {
				console.log(this.formData)
				
					CBound(this.formData).then(response => {
					  this.$modal.msgSuccess("修改成功")
					})
					
				
			},
			
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	/* .number{
		.number::before{content: '*';color: red;}
	} */
</style>

api/one/one.js代码：

Content-Type 的值类型：header可以修改

1、默认是使用的application/json，消息主体是序列化后的json字符串

2、application/x-www-form-urlencoded ，是Jquery的Ajax请求默认方式，这种方式的好处就是浏览器都支持，在请求发送过程中会对数据进行序列化处理，以键值对形式。另外浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

import upload from '@/utils/upload'
import request from '@/utils/request'


//获取A信息
export function ASelect(){
  return request({
    url:'',//省略--补充例/XX/XX
    method:'get'
  })
}
//获取B信息
export function BSelect(){
  return request({
    url:'',//省略--补充
    method:'get'
  })
}

// 按钮
export function CBound(data) {
  return request({
    url: '',//省略--补充
    method: 'post',
    data: data,
	header : {"Content-Type":"application/x-www-form-urlencoded"}
  })
}

后端

get

/**
     * 获取A信息
     */
    @PreAuthorize("@ss.hasPermi('A:info:query')")
    @GetMapping("/ASelect")
    public AjaxResult ASelect()
    {
//获取数据内容
        return AjaxResult.success(AInfoService.ASelect());
    }

post

@PreAuthorize("@ss.hasPermi('C:info:remove')")
    @Log(title = "C信息", businessType = BusinessType.UPDATE)
    @PostMapping("/CBound")
    public AjaxResult CBound(String A, String B, int C) {
//数据处理
        return CService.CBound(A,B,C);
    }