vue表单提交

vue的表单提交需要基于vue-resource



<template>

  <div class="hello">
    <form @submit.prevent="submit">
        <div>
            姓名:<input type="text" v-model="user.name">
        </div>
        
        <div>
            性別:
            <label>
                <input type="radio" value="1" v-model="user.gender"> 男
            </label>
            
            <label>
                <input type="radio" value="2" v-model="user.gender"> 女
            </label>
        </div>
        
        <input type="submit" value="提交">
    </form>
  </div>
</template>


<script>
export default {
  name: 'hello',
  data () {
    return {
       user: {
            name: '',
            gender: ''
        }
    }
  },
  methods:{
  submit: function() {
          var formData = JSON.stringify(this.user); // 这里才是你的表单数据
          
          this.$http.post('/admin/', formData).then((response) => {
              // success callback
          }, (response) => {
              // error callback
          });
        }
  }
}
</script>






在使用 Vue 实现表单提交页面时,需要结合 Vue 的模板语法、事件处理和数据绑定机制,同时确保与后端的交互逻辑正确。以下是一个完整的实现流程,涵盖表单数据绑定、提交逻辑以及与后端(如 Spring Boot)的通信。 ### 表单结构与数据绑定 使用 `v-model` 实现双向数据绑定,将表单输入与 Vue 实例中的数据字段关联。例如,一个简单的表单可以包含姓名、邮箱等字段: ```html <form @submit.prevent="submitForm"> <label for="name">姓名:</label> <input type="text" id="name" v-model="formData.name" required /> <label for="email">邮箱:</label> <input type="email" id="email" v-model="formData.email" required /> <button type="submit">提交</button> </form> ``` 在 Vue 实例中定义 `formData` 数据对象,用于存储用户输入: ```javascript data() { return { formData: { name: &#39;&#39;, email: &#39;&#39; } }; } ``` ### 表单提交逻辑 通过 `@submit.prevent="submitForm"` 阻止默认的表单提交行为,并调用 `submitForm` 方法处理提交逻辑。该方法可以使用 `fetch` 或 `axios` 将数据发送到后端: ```javascript methods: { submitForm() { fetch(&#39;http://localhost:8080/api/submit&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }, body: JSON.stringify(this.formData) }) .then(response => response.json()) .then(data => { alert(&#39;提交成功&#39;); console.log(&#39;Success:&#39;, data); }) .catch((error) => { console.error(&#39;Error:&#39;, error); alert(&#39;提交失败&#39;); }); } } ``` ### 后端接收与数据存储 后端(如 Spring Boot)需要定义一个接收表单数据的接口,并将数据保存到数据库中。例如,定义一个 `@RestController` 接收 POST 请求,并将数据保存到 MySQL: ```java @RestController public class FormController { @PostMapping("/api/submit") public ResponseEntity<String> handleFormSubmission(@RequestBody FormData formData) { // 保存数据到数据库 formRepository.save(formData); return ResponseEntity.ok("数据已保存"); } } ``` 对应的实体类 `FormData` 需要与数据库表结构匹配,并使用 JPA 注解: ```java @Entity public class FormData { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // getter 和 setter } ``` ### 表单验证 Vue 可以结合 HTML5 原生验证(如 `required`)和自定义验证逻辑来确保数据的完整性。例如,在提交前检查邮箱格式: ```javascript methods: { submitForm() { if (!this.validateEmail(this.formData.email)) { alert(&#39;请输入有效的邮箱地址&#39;); return; } // 提交逻辑 }, validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } } ``` ### 完整代码示例 以下是一个完整的 Vue 表单提交页面示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Vue 表单提交</title> <script src="https://unpkg.com/vue@3"></script> </head> <body> <div id="app"> <form @submit.prevent="submitForm"> <label for="name">姓名:</label> <input type="text" id="name" v-model="formData.name" required /> <label for="email">邮箱:</label> <input type="email" id="email" v-model="formData.email" required /> <button type="submit">提交</button> </form> </div> <script> const { createApp } = Vue; createApp({ data() { return { formData: { name: &#39;&#39;, email: &#39;&#39; } }; }, methods: { submitForm() { if (!this.validateEmail(this.formData.email)) { alert(&#39;请输入有效的邮箱地址&#39;); return; } fetch(&#39;http://localhost:8080/api/submit&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }, body: JSON.stringify(this.formData) }) .then(response => response.json()) .then(data => { alert(&#39;提交成功&#39;); console.log(&#39;Success:&#39;, data); }) .catch((error) => { console.error(&#39;Error:&#39;, error); alert(&#39;提交失败&#39;); }); }, validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } } }).mount(&#39;#app&#39;); </script> </body> </html> ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值