更新spring boot CRUD无法正常工作

时间:2017-04-20 17:05:23

标签: jquery ajax spring-boot thymeleaf crud

我是春季新手的新手,我根据文档和我发现的一些教程构建了这个用于学习目的的工具。因此,我使用从包org.springframework.data.repository扩展的CRUD存储库构建了一些代码。我使用这个RESTservice Impl

来UPDATE记录部分
public boolean modifyVacancy(Vacancy vacancy){
    boolean passedProcessFlow = false;
    if(vacancyRepository.exists(vacancy.getIdVacancy())){
        vacancyRepository.save(vacancy);
        passedProcessFlow = true;
    }
    return passedProcessFlow;
}

这是从Controller调用的:

@RequestMapping(value="/vacancies/edit/{id}", method = RequestMethod.POST)
public String editVacancy(@PathVariable Integer id, Model model,
                          @ModelAttribute("vacancyEdit") Vacancy vacancy){
    System.out.println("<<<<<<<<<<<<<<<<<<<<<IT PASSED THROUGH HERE>>>>>>>>>>>>>>>>>>>>>>>>>");
    //modelAndView.setViewName("vacancies");
    vacancyService.modifyVacancy(vacancy);

    return "redirect:vacancies";
}

最后但并非最不重要的是我的thymeleaf html:

<!DOCTYPE html>

     

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <link th:href="@{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
          rel="stylesheet" media="screen" />
    <link th:href="@{static/css/login.css}"
          rel="stylesheet" media="screen" />        
    <script src="../static/js/login.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
    <link href="../static/css/guru.css"
          th:href="@{css/guru.css}" rel="stylesheet" media="screen"/>
    <link href="../static/css/guru.css"
          th:href="@{css/guru.css}" rel="stylesheet" media="screen"/>

    <script>
          $(document).ready(function () {

              var btnOpen = $('#btnOpen'),
                  btnOpenEdit = $('#btnOpenEdit'),
                  btnOnInterviewEdit = $('#btnOnInterviewEdit'),
                  btnOnInterview = $('#btnOnInterview'),
                  btnCloseEdit = $('#btnClosedEdit')
                  btnClose = $('#btnClosed')

                  $("#vacancyStatus").val("1");



              $("#btnOpen").click(function () {
                $("#vacancyStatus").val("1");
                    $(this).toggleClass('btn-default btn-info')
                    btnOnInterview.removeClass('btn-warning').addClass('btn-default')
                    btnClose.removeClass('btn-danger').addClass('btn-default')
                    });

              $("#btnOpenEdit").click(function () {
                $("#vacancyStatusEdit").val("1");
                    $(this).toggleClass('btn-default btn-info')
                    btnOnInterviewEdit.removeClass('btn-warning').addClass('btn-default')
                    btnCloseEdit.removeClass('btn-danger').addClass('btn-default')
                    });

                $("#btnOnInterview").click(function () {
                    $("#vacancyStatus").val("2");
                    $(this).toggleClass('btn-default btn-warning')
                    btnOpen.removeClass('btn-info').addClass('btn-default')
                    btnClose.removeClass('btn-danger').addClass('btn-default')
                    });

                $("#btnOnInterviewEdit").click(function () {
                    $("#vacancyStatusEdit").val("2");
                    $(this).toggleClass('btn-default btn-warning')
                    btnOpenEdit.removeClass('btn-info').addClass('btn-default')
                    btnCloseEdit.removeClass('btn-danger').addClass('btn-default')
                    });

                $("#btnClosed").click(function () {
                    $("#vacancyStatus").val("3");
                    $(this).toggleClass('btn-default btn-danger')
                    btnOnInterview.removeClass('btn-warning').addClass('btn-default')
                    btnOpen.removeClass('btn-info').addClass('btn-default')
                    });

                $("#btnClosedEdit").click(function () {
                    $("#vacancyStatusEdit").val("3");
                    $(this).toggleClass('btn-default btn-danger')
                    btnOnInterviewEdit.removeClass('btn-warning').addClass('btn-default')
                    btnOpenEdit.removeClass('btn-info').addClass('btn-default')
                    });

                 $('#search-form').submit(function(){
                      var formAction = $("#selectsearch").val() == "people" ? "user" : "content";
                      $("#search-form").attr("action", "/search/" + formAction);
                    });

                $('.editButton').on('click', function() {
                        // Get the record's ID via attribute
                        var id = $(this).attr('data-id');

                        $.ajax({
                            url: 'http://localhost:8080/api/vacancies/'+ id,
                            method: 'GET'
                        }).success(function(response) {
                            // Populate the form fields with the data returned from server
                            $('#vacancyEditForm')
                                .find('[id="idVacancyEdit"]').val(id).end()
                                .find('[id="positionTitleEdit"]').val(response.jobPositionTitle).end()
                                .find('[id="skillsDescriptionEdit"]').val(response.jobPositionSkillDescription).end()
                                .find('[id="vacancySlotsEdit"]').val(response.vacancySlots).end()
                                .find('[id="vacancyStatusEdit"]').val(response.vacancyState).end()
                                .prop("action", "/vacancies/edit/"+id)

                            // Show the dialog
                            bootbox
                                .dialog({
                                    title: 'Edit Vacancy',
                                    message: $('#vacancyEditForm'),
                                    show: false // We will show it manually later
                                })
                                .on('shown.bs.modal', function() {
                                    $('#vacancyEditForm')
                                        .show()                             // Show the login form
                                        //.formValidation('resetForm'); // Reset form
                                })
                                .on('hide.bs.modal', function(e) {
                                    // Bootbox will remove the modal (including the body which contains the login form)
                                    // after hiding the modal
                                    // Therefor, we need to backup the form
                                    $('#vacancyEditForm').trigger("reset");
                                    $('#vacancyEditForm').hide().appendTo('body');
                                    //$('#vacancyEditForm').hide();
                                })
                                .modal('show');
                        });
                    });





        });
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Vacancies List</title>
</head>
<body>

    <div class="container">

        <div >
            <h2>Vacancy List</h2>
            <br></br>
            <br></br>

            <div class="col col-xs-6 text-left">
                <a  data-toggle="modal" data-target="#modalVacancyInput"  class="btn icon-btn btn-success" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span>Add New Vacancy</a>
            </div>
            <br></br>
            <br></br>
            <br></br>
            <br></br>

            <table class="table table-striped">
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Skills Description</th>
                    <th>View</th>
                    <th>Edit</th>
                    <th>Delete</th>

                </tr>
                <tr th:each="vacancyO : ${vacancies}">
                    <td th:text="${vacancyO.idVacancy}">Vacancy Id</td>
                    <td th:text="${vacancyO.jobPositionTitle}">Job Title</td>
                    <td th:text="${vacancyO.jobPositionSkillDescription}">price</td>
                    <td><a class="btn btn-success" th:href="@{'/vacancy/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-eye-open">View</span></a></td>
                    <!--td><a class="btn btn-warning" th:attr="data-id=${vacancyO.idVacancy}" name="editButton" th:href="@{'/vacancy/edit/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-edit">Edit</span></a></td-->
                    <td><button class="btn btn-warning editButton" th:attr="data-id=${vacancyO.idVacancy}" ><span class="glyphicon glyphicon-edit">Edit</span></button></td>
                    <td><a class="btn btn-danger" th:href="@{'/vacancy/delete/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-trash">Delete</span></a></td>
                </tr>
            </table>

        </div>
    </div>


    <div id="modalVacancyInput" class= "modal fade in" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title">Vacancy</h1>
                    </div>
                    <div class="modal-body">
                        <form th:action="@{/vacancies}" id="vacancyForm" role="form" method="post"  th:object="${vacancy}" class="form-horizontal">
                            <fieldset>
                                <!-- Text input-->
                                <!--div class="form-group">
                                    <label class="col-md-4 control-label" for="idVacancy">Id Vacancy</label>  
                                    <div class="col-md-4">
                                        <input id="idVacancy" name="idVacancy" type="text" placeholder="Id. Vacancy" class="form-control input-md"/>
                                        <span class="help-block">help</span>  
                                    </div>
                                </div-->

                                <!-- Text input-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="positionTitle">Position Title</label>  
                                    <div class="col-md-4">
                                        <input id="positionTitle" th:field="*{jobPositionTitle}" name="positionTitle" type="text" placeholder="Position title" class="form-control input-md" required=""/>
                                        <span class="help-block">help</span>  
                                    </div>
                                </div>

                                <!-- Textarea -->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="skillsDescription">Skills Description</label>
                                    <div class="col-md-4">                     
                                        <textarea class="form-control" id="skillsDescription" th:field="*{jobPositionSkillDescription}" name="skillsDescription">Detail the required skills</textarea>
                                    </div>
                                </div>

                                <!-- Text input-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="vacancySlots">Positions to open</label>  
                                    <div class="col-md-4">
                                        <input id="vacancySlots" th:field="*{vacancySlots}" name="vacancySlots" type="number" placeholder="1" class="form-control input-md" required=""/>
                                        <span class="help-block">help</span>  
                                    </div>
                                </div>
                                <input value="1"  type="hidden" id="vacancyStatus" th:field="*{vacancyState}"/>
                                <!-- Text input-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label">Status</label>  
                                    <div class="btn-group-lg" align="left"> 
                                        <button type="button" id="btnOpen" value="Opened" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok" ></i></button>
                                        <button type="button" id="btnOnInterview"  value="OnInterview" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-warning-sign"></i></button>
                                        <button type="button" id="btnClosed"  value="Closed" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button>
                                    </div>
                                </div>


                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">
                                        Close
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        Save changes
                                    </button>
                                </div>



                            </fieldset>
                        </form>
                    </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    <div id="modalVacancyEdit" class= "modal fade in" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title">Vacancy</h1>
                </div>
                <div class="modal-body">
                    <form id="vacancyEditForm" role="form" th:method="POST"  th:object="${vacancyEdit}" class="form-horizontal">
                        <fieldset>
                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="idVacancyEdit">Id Vacancy</label>
                                <div class="col-md-4">
                                    <input id="idVacancyEdit" th:field="*{idVacancy}" name="idVacancy" type="text" placeholder="Id. Vacancy" class="form-control input-md" disabled="true"/>
                                </div>
                            </div>

                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="positionTitleEdit">Position Title</label>
                                <div class="col-md-4">
                                    <input id="positionTitleEdit" th:field="*{jobPositionTitle}" name="positionTitle" type="text" placeholder="Position title" class="form-control input-md" required=""/>
                                    <span class="help-block">help</span>
                                </div>
                            </div>

                            <!-- Textarea -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="skillsDescriptionEdit">Skills Description</label>
                                <div class="col-md-4">
                                    <textarea class="form-control" id="skillsDescriptionEdit" th:field="*{jobPositionSkillDescription}" name="skillsDescription">Detail the required skills</textarea>
                                </div>
                            </div>

                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="vacancySlotsEdit">Positions to open</label>
                                <div class="col-md-4">
                                    <input id="vacancySlotsEdit" th:field="*{vacancySlots}" name="vacancySlots" type="number" placeholder="1" class="form-control input-md" required=""/>
                                    <span class="help-block">help</span>
                                </div>
                            </div>
                            <input value="1"  type="hidden" id="vacancyStatusEdit" th:field="*{vacancyState}"/>
                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label">Status</label>
                                <div class="btn-group-lg" align="left">
                                    <button type="button" id="btnOpenEdit" value="Opened" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok" ></i></button>
                                    <button type="button" id="btnOnInterviewEdit"  value="OnInterview" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-warning-sign"></i></button>
                                    <button type="button" id="btnClosedEdit"  value="Closed" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button>
                                </div>
                            </div>


                            <div class="modal-footer">
                                <button type="button" class="btn btn-default"
                                        data-dismiss="modal">
                                    Close
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    Save changes
                                </button>
                            </div>



                        </fieldset>
                    </form>
                </div>


            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</body>

我让它很好地运行创建,但当我来到使用按钮编辑(用于编辑记录)的部分时,它显示一个包裹表单的引导模式&#34; vacancyEditForm&#34 ;和上一个示例中找到的javascript将form.action更改为某个路径,该路径应该由我的Controller在editVacancy方法中捕获...............但不是!!可能是我茫然失去的东西,但我现在一无所知......任何想法?

1 个答案:

答案 0 :(得分:0)

您的JS代码正在执行GET,Spring代码正在侦听POST。因此控制器动作不会被触发。更改JS以进行POST。