使用springboot和angularjs更新方法

时间：2017-05-15 23:04:41

标签： angularjs spring-boot

我尝试使用spring boot和angularjs实现更新方法但是它不起作用，有人可以帮我吗

这是DAO： 

package com.bank.pfe.metier;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.bank.pfe.dao.DatacenterRepository;
import com.bank.pfe.entities.Datacenter;

@Service
@Transactional
public class DatacenterMetierImpl implements DatacenterMetier{

    @Autowired
    DatacenterRepository datacenterRep;

    @Override
    public Datacenter saveDC(Datacenter dc) {
        return datacenterRep.save(dc);
    }

    @Override
    public Datacenter updateDC(Datacenter dc) {
        return datacenterRep.saveAndFlush(dc);
    }

    @Override
    public void deleteDC(long id) {
        datacenterRep.delete(id);
    }

    @Override
    public List<Datacenter> listDC() {
        return datacenterRep.findAll();
    }

    @Override
    public Datacenter findDC(long id) {
        return datacenterRep.findOne(id);
    }

    @Override
    public Datacenter findByName(String name) {
        return datacenterRep.findByName(name);
    }

    @Override
    public void deleteAllDCs() {
        datacenterRep.deleteAll();  
    }

    @Override
    public boolean isDCExist(Datacenter dc) {
        return findByName(dc.getName()) != null;
    }

}

以下是服务类： 

package com.bank.pfe.service;

import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.bank.pfe.entities.Datacenter;
import com.bank.pfe.metier.DatacenterMetier;

@RestController
public class DatacenterService {

    public static final Logger logger = LoggerFactory.getLogger(DatacenterService.class);

    @Autowired
    private DatacenterMetier datacenterMetier;

    // -------------------Create a Datacenter-------------------------------------------

    @RequestMapping(value="/datacenter/",method=RequestMethod.POST)
    public Datacenter saveDC(@RequestBody Datacenter dc) {
        logger.info("Creating Datacenter : {}", dc);

        return datacenterMetier.saveDC(dc);

    }

    // ------------------- Update a Datacenter ------------------------------------------------

    @RequestMapping(value="/datacenter/{id}",method=RequestMethod.PUT)
    public Datacenter updateDC(@PathVariable("id") long id, @RequestBody Datacenter dc) {
        logger.info("Updating Datacenter with id {}", id);

        Datacenter currentDC = datacenterMetier.findDC(id);

        currentDC.setName(dc.getName());
        currentDC.setNbRoom(dc.getNbRoom());
        currentDC.setAdress(dc.getAdress());
        currentDC.setType(dc.getType());
        currentDC.setCity(dc.getCity());
        currentDC.setCountry(dc.getCountry());

        return datacenterMetier.updateDC(currentDC);        
    }

    // -------------------Retrieve Single Datacenter------------------------------------------

    @RequestMapping(value="/datacenter/{id}",method=RequestMethod.GET)
    public Datacenter getDC(@PathVariable("id") long id) {
        logger.info("Fetching Datacenter with id {}", id);
        Datacenter datacenter = datacenterMetier.findDC(id);

        return datacenter;
    }

    // -------------------Retrieve All Datacenters---------------------------------------------

    @RequestMapping(value="/datacenter/",method=RequestMethod.GET)
    public List<Datacenter> listDC() {
        List<Datacenter> dcs = datacenterMetier.listDC();
        return dcs;
    }

    // ------------------- Delete a Datacenter-----------------------------------------

    @RequestMapping(value="/datacenter/{id}",method=RequestMethod.DELETE)
    public void deleteDC(@PathVariable("id") long id) {
        logger.info("Fetching & Deleting Datacenter with id {}", id);

        Datacenter dc = datacenterMetier.findDC(id);
        if (dc == null) {
            logger.error("Unable to delete. Datacenter with id {} not found.", id);
        }
        datacenterMetier.deleteDC(id);
    }

    // ------------------- Delete All Datacenters-----------------------------

    @RequestMapping(value = "/datacenter/", method = RequestMethod.DELETE)
    public void deleteAllDCs() {
        logger.info("Deleting All Datacenters");

        datacenterMetier.deleteAllDCs();
    }


}

以下是app.js： 

    var app = angular.module("myApp",["ngRoute","ui.router"]);

    app.controller("DatacenterCntrl", function($scope,$http){

    $scope.dc=this;
    $scope.dcs=[];

    $http.get("/datacenter/")
    .success(function(data){
     $scope.dcs=data;
     });

     $scope.saveDC=function(){
      $http.post("/datacenter/",$scope.dc)
       .success(function(data){
        $scope.dc=data;
        alert("successfully added");
        $scope.dcs.push($scope.dc);
        });
      };

     $scope.deleteDC=function(id){
       var result=confirm("Are you sure you want to delete this Datacenter 
      ?");
         if(result===true){
         $http.delete("/datacenter/"+id)
         .success(function(){
           $http.get("/datacenter/")
           .success(function(data){
               $scope.dcs=data;
           });
           alert("successfully deleted");
      });
      }
    };

     $scope.updateDC=function(){
        $http.put("/datacenter/"+$scope.dc.id,$scope.dc)
         .success(function(){

            alert("successfully updated");
            $scope.dcs.push($scope.dc);

          });
      };
    });
    app.config(function($routeProvider){
      $routeProvider
      .when("/updateDC", {
           templateUrl : "/views/updateDC.html",
           controller : "DatacenterCntrl"
       })
    });

这是index.html： 

    <!DOCTYPE html>
    <html  ng-app="myApp">
    <head>
       <meta charset="ISO-8859-1">
       <title>Insert title here</title>

       <link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ 
        css/bootstrap.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1 
        /jquery.min.js"></script>
        <script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/ 
         3.3.7/js/bootstrap.min.js"></script>

        </head>
        <body>
          <div ng-controller="DatacenterCntrl">
          <form>
            <div class="form-group">
               <label for="name">Name:</label>
               <input  class="form-control" name="name" id="name" 
                type="text" ng-model="dc.name"/>
             </div>
             <div class="form-group">
                <label for="nbRoom">Number of rooms:</label>
                <input class="form-control" name="nbRoom" id="nbRoom" 
                type="number" ng-model="dc.nbRoom"/>
              </div>
              <div class="form-group">
                <label for="type">Type:</label>
                <input class="form-control" name="type" id="type" 
                type="text" ng-model="dc.type"/>
             </div>
             <div class="form-group">
             <label for="adress">Adress:</label>
             <input class="form-control" name="adress" id="adress" 
             type="text" ng-model="dc.adress"/>
             </div>
             <div class="form-group">
             <label for="city">City:</label>
             <input class="form-control" name="city" id="city" type="text" 
             ng-model="dc.city"/>
              </div>
              <div class="form-group">
              <label for="country">Country:</label>
              <input class="form-control" name="country" id="country" 
              type="text" ng-model="dc.country"/>
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-default" ng-
                 click=saveDC(dc)>Submit</button>
              </div>
          </form>
         <label>Search: <input ng-model="searchText"></label>
         <table id="fresh-table" class="table">
              <thead>
                 <th>ID </th>
                 <th>Nom</th>
                 <th>Nombre des salles</th>
                 <th>Adresse</th>
                 <th>Type</th>
                 <th>Ville</th>
                 <th>Pays</th>
                 <th></th>
                 <th></th>
              </thead>
              <tr ng-repeat="dc in dcs | filter:searchText" >
                <td>{{dc.id}}</td>
                <td>{{dc.name}}</td>
                <td>{{dc.nbRoom}}</td>
                <td>{{dc.adress}}</td>
                <td>{{dc.type}}</td>
                <td>{{dc.city}}</td>
                <td>{{dc.country}}</td>
                <td><a class="btn btn-primary" href="#updateDC">Update</a>
                </td>
                <td><button type="submit" class="btn btn-danger" ng-
                click=deleteDC(dc.id)>Delete</button></td>
             </tr>
           </table>

            <div ng-view></div>
       </body>
       </html>

以下是updateDC.html： 

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="ISO-8859-1">
          <title>Insert title here</title>
      </head>

      <body>
          <form>
              <div class="form-group">
                  <label for="id">ID:</label>
                  <input  class="form-control" name="id" id="id" type="text" ng-model="datacenter.id" />
              </div>
             <div class="form-group">
                <label for="name">Name:</label>
                <input  class="form-control" name="name" id="name" 
                type="text" ng-model="datacenter.name" />
             </div>
             <div class="form-group">
               <label for="nbRoom">Number of rooms:</label>
               <input class="form-control" name="nbRoom" id="nbRoom" 
               type="number" ng-model="datacenter.nbRoom"/>
             </div>
             <div class="form-group">
               <label for="type">Type:</label>
               <input class="form-control" name="type" id="type" type="text" 
          ng-model="datacenter.type"/>
        </div>
        <div class="form-group">
           <label for="adress">Adress:</label>
           <input class="form-control" name="adress" id="adress" type="text" 
         ng-model="datacenter.adress"/>
         </div>
         <div class="form-group">
            <label for="city">City:</label>
            <input class="form-control" name="city" id="city" type="text" 
         ng-model="datacenter.city"/>
       </div>
       <div class="form-group">
           <label for="country">Country:</label>
           <input class="form-control" name="country" id="country" 
           type="text" ng-model="datacenter.country"/>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-default" ng-
            click=updateDC(datacenter.id,datacenter)>Submit</button>
        </div>
      </form>
     </body>
    </html>

1 个答案:

答案 0 :(得分：0)

可能会从此代码周围的某处调试错误：

$scope.updateDC=function(){
    $http.put("/datacenter/"+$scope.dc.id,$scope.dc)

发送到服务器的请求包含未定义的id字段。尝试放一个console.log＆amp;找出为什么id的值没有通过。

$scope.updateDC=function(){
        console.log($scope.updateDC=function(){
        $http.put("/datacenter/"+$scope.dc.id,$scope.dc));
相关问题
最新问题