Question

我是vue.js.的新手。我正在寻找如何在数据库中保存带有axios的表单数据。我使用spring和thymeleaf模板引擎。

以下是我的代码：

Html页面：

df %>% 
  mutate(obs_network = if_else(is.na(obs_network), 
                       paste0("pseudoplot", "_",  match(paste0(date,loc), unique(paste0(date,loc)))),
                       obs_network))

我在表中声明了描述字段NOT NULL，当我执行此代码时，我在控制台中有这个异常：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <div id="app">
    <h1>TEST FORM</h1>
     <form action="#" method="post">
        <p>Type description: <input type="text" v-model="description" /></p>
        <p><button v-on:click="addType()"> Send </button><input type="reset" value="Reset" /></p>
    </form>
    </div>


 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script> 
    <script>
     Vue.prototype.$http = axios;
      new Vue({
            el: '#app',
            data:{
                 description: ' '
            },
           methods:{
             addType(){
               var vm = this;
               this.$http.post('/insert', {
                    body:vm.description
               }).then(response => {})
            }
         }
      }); 
    </script>

</body>
</html>

我想这是在表单字段中输入的未检索的值。我该如何解决这个问题？

这是我使用spring的插入方法：

org.sqlite.SQLiteException: [SQLITE_CONSTRAINT_NOTNULL]  A NOT NULL constraint failed (NOT     NULL constraint failed: type.description)

提前感谢您的帮助。

Answer 1

您的post方法正文应位于data属性下，您应该以{{1}}的身份访问Vue实例的说明：

this.description

希望这有帮助！

Answer 2

使用URLSearchParams（）函数制作如下所示的帖子对象

var postdata = new URLSearchParams();
postdata.append('name',value);
axios.post("url-where-to-post",postdata).then(function(response){
    console.log(response.data);
});

使用axios和spring的post方法

2 个答案: