我正在编写一个小的Angular应用程序。前端已构建，并且一些基本计算在Angular中进行。我正在尝试将用户请求的日期存储在数据库中，然后显示在主管视图中。我正在使用springboot进行服务，并休眠以生成表和列。
任何人都可以为我指出正确的方向，以继续我的申请。甚至连阅读材料的链接也将受到赞赏
request.component.html
<div>
<!-- Header with instructions -->
<div>
<h2 align="center">
Please Fill out the form to Request days off
<br><br> All required fields are marked with an *
</h2>
</div>
<form #testForm="ngForm">
<!-- Start of Page Body -->
<div class="card card-w-title">
<!-- Dropdown for user to select supervisor -->
<div class="ui-g">
<div class="ui-g-12 ui-md-2">
<p-dropdown [options]="supervisor2" [(ngModel)]="selectedSupervisor2" name="selectedSupervisor2" placeholder="Select a Supervisor*" optionLabel="name" required></p-dropdown>
</div>
</div>
<br><br><br><br><br>
<h3 align="center">Requested Dates</h3>
<!-- Fields where user will input dates -->
<div class="Dates" *ngFor="let dateline of dates">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-1" id="test">
<button pButton type="button" id="deleteButton" icon="pi pi-times" class="ui-button-danger" (click)="onRemoveClicked()"></button>
</div>
<div class="ui-g-12 ui-md-2" id="test">
<!-- Leave code field -->
<p-dropdown [options]="leaveCodes2" [(ngModel)]="dateline.leaveCode" name="selectedleaveCodes2" placeholder="Leave Code*" optionLabel="name" required></p-dropdown>
</div>
<div class="ui-g-12 ui-md-2" id="test">
<!-- Start date & time fields -->
<p-calendar [showIcon]="true" [(ngModel)]="dateline.fromDate" name="fromDate" [minDate]="minimumDate" [readonlyInput]="true" placeholder="From Date*" id="setter" required>
</p-calendar>
</div>
<div class="ui-g-12 ui-md-2" id="test">
<input type="text" [(ngModel)]="dateline.fromTime" name="fromTime" placeholder="Enter Time*" style="height: 2.186em" size="7" maxlength="8" pInputText required>
<!-- <p-inputMask mask="99:99 aa" placeholder="Select Time"></p-inputMask> -->
</div>
<div class="ui-g-12 ui-md-2" id="test">
<!-- End date & time fields -->
<p-calendar [showIcon]="true" [(ngModel)]="dateline.toDate" (ngModelChange)="calculateDiff(dateline)" name="toDate" [minDate]="minimumDate" [maxDate]="maxDate" [readonlyInput]="true" placeholder="To Date*" id="setter" required></p-calendar>
</div>
<div class="ui-g-12 ui-md-2" id="test">
<input type="text" [(ngModel)]="dateline.toTime" name="toTime" placeholder="Enter Time*" style="height: 2.186em" size="7" maxlength="8" pInputText required>
</div>
<!-- <p-inputMask mask="99:99 aa" placeholder="Select Time"></p-inputMask> -->
<!-- <input type="time" min="09:00" max="18:00" required> -->
<br><br><br>
</div>
</div>
<button pButton type="button" id="addButton" icon="pi pi-plus" class="ui-button-success" (click)="onAddClicked()"></button>
<br><br><br>
<!--aa{{testForm.invalid||!(testForm.valid&&testForm.dirty)}}bb cc{{testForm.invalid}} - {{testForm.valid}} - {{testForm.dirty}}bb -->
<!-- Action buttons to add or remove dates. Submit button is here aswell -->
<div class=modButtons>
<div class="ui-g-12">
<!-- <button pButton type="button" label="Add Dates +" class="ui-button-success" (click)="onAddClicked()"></button> -->
<!--<button pButton type="submit" label="Submit" [disabled]="testForm.invalid" (click)="submit()"
class="ui-button-success" id="righter"></button>-->
<button pButton type="submit" class="ui-button-primary" style="white-space:nowrap;margin:10px;" label="Submit" [disabled]="testForm.invalid||!(testForm.valid&&testForm.dirty)" (click)="submit()"></button>
</div>
</div>
<br><br><br><br><br><br><br>
<!-- Radio button for user to acknowledge` -->
<!-- <div class="radio-button" style="display: inline">
<p>
I have enough hours to cover these Absences*
</p>
<div class="ui-g-12" id="checkbox">
<p-radioButton name="group1" value="YES" label="YES" [(ngModel)]="YES" inputId="YES"></p-radioButton>
<p-radioButton name="group1" value="NO" label="NO" [(ngModel)]="NO" inputId="NO"></p-radioButton>
</div>
</div>-->
</div>
<!-- End of Page Body -->
</form>
</div>
request.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { toDate } from '@angular/common/src/i18n/format_date';
import { isDifferent } from '@angular/core/src/render3/util';
const date = new Date();
interface Supervisor {
name: string;
code: string;
}
interface LeaveCode {
name: string;
code: string;
}
@Component({
selector: 'app-fill-request',
templateUrl: './fill-request.component.html',
styleUrls: ['./fill-request.component.css']
})
export class FillRequestComponent implements OnInit {
@ViewChild('testForm') public test1234Form: NgForm;
ngOnInit() {
const today = new Date();
const month = today.getMonth();
const year = today.getFullYear();
const nextMonth = (month === 11) ? 0 : month + 4;
this.minimumDate = new Date(Date.now() - 12096e5);
this.lastDate = new Date(Date.now() - 12096e5);
this.maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
this.maxDate.setMonth(nextMonth);
// let diff: number;
// let date1: number;
// this.date1 = this.fromDate;
// this.date2 = this.toDate ;
//var diff = this.fromDate.valueOf() - this.toDate.valueOf();
// this.dates = [ ];
}
// dates: SelectItem[];
supervisor2: Supervisor[];
selectedSupervisor2: Supervisor;
leaveCodes2: LeaveCode[];
selectedLeaveCode2: LeaveCode;
// clicks: number = 0;
// dates = [1] //Initiazling date array
dates = [{ leaveCode: '', fromDate: '', fromTime: '', toDate: '', toTime: '' }];
minimumDate: Date;
maxDate: Date;
fromDate: Date;
toDate: Date;
fromDateMin: Date;
toDateMin: Date;
fromDateMax: Date;
toDateMax: Date;
fromTime: Date;
toTime: Date;
lastDate: Date;
// date1;
// date2;
// var diffDays = Math.ceil(diff/ (100*3600 *24));
// Method to add dates on button click for up to 4 dates
onAddClicked(dateline) {
if (this.dates.length < 8) {
this.dates.push({ leaveCode: "", fromDate: "", fromTime: "", toDate: "", toTime: "" })
;
}
}
// Method to remove dates on button click. Will always have one date field displayed
onRemoveClicked() {
if (this.dates.length > 1) { this.dates.pop(); }
}
calculateDiff(dateline) {
let diff = console.log((Math.abs(dateline.fromDate.getTime() - dateline.toDate.getTime())) / (1000 * 60 * 60 * 24));
let date1 = console.log('Input day: ' + dateline.fromDate);
let date2 = console.log('Output day: ' + dateline.toDate);
if (+diff > 30) {
console.log('Too many days');
}
}
submit(dateline) {
this.router.navigate(['submitted']);
}
// Array of Supervisors
constructor(private router: Router, ) {
this.supervisor2 = [
{ name: 'Sam Crackle', code: 'SC' },
{ name: 'Michael Coolman', code: 'MC' },
{ name: 'Kelly Bratton', code: 'KB' },
];
// Array of Leave Codes
this.leaveCodes2 = [
{ name: 'Personal Leave', code: 'PL' },
{ name: 'Sick Leave', code: 'SL' },
{ name: 'Vacation Leave', code: 'VL' },
];
}
}
supervisor.component.html
<h2 align='center'>
Leave Requests Received
</h2>
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Employee</th>
<th>Dates</th>
<th>Status</th>
<th>Submitted On</th>
<th>Comments</th>
</tr>
</ng-template>
答案 0 :(得分：2)
您可以参考以下教程： https://www.baeldung.com/spring-boot-angular-web
我建议您如示例所示在spring boot应用程序中创建POST控制器。这样会将数据保存在数据库中。
在Spring Boot中：
sf::st_read()然后从有角度的应用程序中，将此端点称为：
@PostMapping("/users")
void addUser(@RequestBody User user) {
userRepository.save(user);
}
类似于在主管屏幕中显示数据，您可以使用@GetMapping并在angular中调用this.http.get。