<template>
    <view>
	<view>
            <!--form代表表单，里面的内容就是表单项，@submit就是提交，@reset就是重置-->
	    <form @submit="formSubmit" @reset="formReset">
                <!--input代表输入框，下面通过name来调取值，class用于css文件，vlue为默认上面是什么，placeholder在文本框里什么也没有的时候提示-->
		<input name="title" class="title" value="测试篇" type="text" placeholder="标题(填写春节篇,默契问答为固定格式)">
		<input name="icon" type="text" value="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic112.nipic.com%2Fpic%2F20161005%2F12799827_182828417000_4.jpg&refer=http%3A%2F%2Fpic112.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646134302&t=2adaf1ecfa13d123fbc294c221e53db2" placeholder="图片(请填写网址路径)">
		<input name="bgcolor" type="text" value="#7cb2ff" placeholder="颜色(请填写#fff等颜色格式)">
		状态：
                <!--switch返回的值为true和false，进入后端会自动转换成0和1-->
		<switch name="status"/>
		<button form-type="submit">发布</button>
	    </form>
	    {{yyy}}
        </view>
    </view>
</template>

<script>
    export default {
	data() {
	    return {
	        yyy:"yyy"
		}
	    },
	    methods: {
		formSubmit: function(e) {
                //定义一个formdata里面存入
		var formdata = e.detail.value
                //在终端打印formdata
		console.log(formdata)
                //定义一个req里面存入json转换完的formdata
		var req=JSON.stringify(formdata)
		//var req2='{"color":"#fff","icon":"jjj","status":1,"title":"ggg"}'
		console.log(req)
		uni.request({
                        //给url赋值请求地址，this就是指这个项目里的方法或者变量，$url.getadd则是在main.js定义的
			url: this.$url.getadd,
                        //默认为GET，在这里声明为POST请求
			method: "POST",
                        //data:是请求数据，req就是请求参数
			data:req,
                        //如果运行成功则返回res和后端的返回数据
			success:res=>{
				this.add=res.data;
				console.log(res.data)
			}
		})

		},
	getadd(){	
				
	}
}
}
</script>

<style>
/*引用同级目录下的add.css文件*/
@import url("add.css");
</style>

main.js文件:

//定义一个baseUrl，里面为请求的根目录
let baseUrl = "http://localhost:8085"
//定义一个map存放所有的接口地址
Vue.prototype.$url = {
    getadd: baseUrl + "/template/insert"
}