java - 查询用户输入，然后存储在数据库中，然后显示在页面上

Question

我正在编写一个小型 Angular 应用程序。前端已经构建完毕，一些基本计算是在 Angular 中处理的。我试图将用户请求的日期存储在数据库中，然后显示在主管 View 上。我使用 springboot 进行服务，使用 hibernate 生成表和列。

任何人都可以为我指明正确的方向，告诉我应该做什么才能继续我的申请。即使是阅读 Material 的链接也将不胜感激

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>

Answer 1

您可以引用以下教程: https://www.baeldung.com/spring-boot-angular-web

我建议您在 Spring Boot 应用程序中创建一个 POST Controller ，如示例所示。这会将数据保存在数据库中。

在 Spring Boot 中:

@PostMapping("/users")
void addUser(@RequestBody User user) {
    userRepository.save(user);
}

然后从 Angular 应用程序调用此端点:

this.http.post<User>(this.usersUrl, user);

与在主管屏幕中显示数据类似，您可以使用@GetMapping并以 Angular 调用this.http.get。