为什么不叫我的尖角前端和springboot后端

时间:2019-03-18 21:28:09

标签: angular

我尝试连接角度前端和springboot后端...

我尝试调用save方法。(后映射添加方法),但不调用,也没有错误...!。但是从前端开始,它显示所有传递的值。我找不到错误在哪里。我尝试创建新项目并复制我的代码,但仍然有此错误

这是component.ts文件...

import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicFormComponent } from 'src/app/components/core/dynamic-form/dynamic-form.component';
import { Occupationdto } from 'src/app/dto/occupationdto';
import { OccupationDynamicService }from'../../../../service/occupation-dynamic.service';

@Component({
selector: 'app-occupation-dynamic',
templateUrl: './occupation-dynamic.component.html',
styleUrls: ['./occupation-dynamic.component.css']
})
export class OccupationDynamicComponent implements OnInit {

constructor(private occ: OccupationDynamicService) { }

@ViewChild(DynamicFormComponent) form: DynamicFormComponent;
pageName = 'Occupation';

id = 'none';
occu: Occupationdto = null;
occupation1: Occupationdto = new Occupationdto();
manually = false;

ngOnInit() {
}


submit(value: any) {
console.log(value);

this.occu = new Occupationdto();

this.occu.occupationId = 'O001';
this.occu.code = 'COD001';
this.occu.createBy = 'nuwanNad';
this.occu.createDDate = '2019-01-01';
this.occu.isEnable = 1;
this.occu.modifyBy = 'new1';
this.occu.modifyDate = '2019-02-02';
this.occu.name = 'nuwanNadeera';
this.occu.sName = 'nuwan';

this.occ.saveOccupation(this.occu);
}

}

这是springboot后端控制器...

package lk.arpico.proddb.controller;    
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import lk.arpico.proddb.dto.NumberParamDto;
import lk.arpico.proddb.dto.OccupationDto;
import lk.arpico.proddb.entity.NumberParamsEntity;
import lk.arpico.proddb.entity.OccupationEntity;
import lk.arpico.proddb.service.OccupationService;

@RestController
@RequestMapping("occupation")
@CrossOrigin("*")
public class OccupationController {

@Autowired
private OccupationService occupationService;

@PostMapping("/add")
public void add(@RequestBody OccupationDto occupation) {
    occupationService.add(occupation);
    System.out.println("malinga"+occupation);
}

}

这是后端属性文件...

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/InsuranceQuatation2? 
createDatabaseIfNotExist=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=1997
spring.jpa.show-sql=true
server.port=8095
spring.jpa.hibernate.use-new-id-generator-mappings: true
spring.jpa.database-platform: 
org.hibernate.dialect.MySQL5InnoDBDialect
# ADMIN (SpringApplicationAdminJmxAutoConfiguration)
spring.application.admin.enabled=true
spring.application.admin.jmx- 
name=org.springframework.boot:type=Admin,name=SpringApplication 

以下是相关的角度服务...

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Occupationdto } from '../dto/occupationdto';
import { Observable } from 'rxjs';


export const MAIN_URL = 'http://localhost:8085';

const URL = '/api/v1/Occupation_Dynamic';

@Injectable()
export class OccupationDynamicService {

constructor(private http: HttpClient) { }

saveOccupation(occupation: Occupationdto): Observable<boolean> {
console.log('save occupation now');
console.log(occupation);
return this.http.post<boolean>('http://localhost:8095/occupation/add' 
, occupation);
}

}

所以任何人都可以告诉我这里的错误在哪里....?

1 个答案:

答案 0 :(得分:0)

这可能是“冷可观察”的情况。每个http调用(获取,发布,放置,删除)都返回“冷”的Observable,这意味着您需要订阅observable才能返回结果。 在您的 component.ts 文件中:

this.occ.saveOccupation(this.occu)
    .subscribe((data) => {
         // do what you want...
    });

了解有关冷热观测的更多信息: https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339