【使用Spring Boot + Angular + MySQL创建Web应用程序】 Angular第一部分

1 年 ago
逸, 科
5 minutes

我之前用Spring Boot创建了一个后端博客程序，用于返回员工信息和部门列表。
这次我将使用Angular来显示从后端接收到的数据。

创建Angular项目

在适当的位置创建一个文件夹，并执行以下命令。
这次我在Documents中创建了一个名为sample的文件夹。

ng new example

输入y并按下回车键。

? Would you like to add Angular routing? (y/N) y

选择SCSS并按下回车键。

? Which stylesheet format would you like to use?
  CSS
> SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

过一段时间后，项目将会被创建。

√ Packages installed successfully.
    Successfully initialized git.
image.png

通过打开VSCode终端并执行以下命令，启动应用程序。

npm start

稍等片刻，下面的信息将会显示出来。

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

访问 http://localhost:4200。

image.png

等待确认后，将暂停服务器。
在终端中按下Ctrl + C。
输入y以停止服务器。

: Compiled successfully.
バッチ ジョブを終了しますか (Y/N)? y

安装 Angular Material 和 FlexLayout

在创建画面之前，我们需要安装Angular Material作为UI框架，并使用flex-layout来进行布局。

Angular 材料

首先，从Angular Material进行安装。
输入并执行以下命令。

ng add @angular/material

过了一会儿，您会被问到以下问题，然后直接按下回车键。

? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
  Custom

请您输入下一个问题，y。

? Set up global Angular Material typography styles? (y/N) y

这边也需要输入y。

? Set up browser animations for Angular Material? (Y/n) y

稍等片刻，安装将完成。

创建 MaterialModule

我們將創建一個名為 MaterialModule 的模塊，它將彙總用於項目的 Angular Material 模塊。請輸入以下命令。

ng g m material

src/app/material/下创建了material.module.ts。
以下是编辑后的代码。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatBadgeModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],

  exports: [
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatBadgeModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  providers: [
    MatDatepickerModule,
  ]
})
export class MaterialModule { }

将创建的MaterialModule添加到app.module.ts中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module'; // 追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule //追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在Angular Material可以使用了。
下一步是安装Flexlayout。

弹性布局

输入以下命令。

npm install --save @angular/flex-layout

在app.module.ts中添加Flexlayout。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule } from '@angular/flex-layout'; //追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule //追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在可以准备好使用Flexlayout了。

创建图像

删掉app.component.html中的所有内容，按照以下方式进行描述。

<div fxFlexFill fxLayout="column">
  <div fxFlex="none" class="header">
    header
  </div>
  <div fxFlex>
    <router-outlet></router-outlet>
  </div>
  <div fxFlex="none" class="footer">
    footer
  </div>
</div>

接下来，我们编辑 SCSS 文件以调整样式。

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.header{
    height: 50px;
    background-color: lightgreen;
}

.footer{
    background-color: lightgreen;
    height: 30px;
    text-align: center;
}

使用以下命令启动应用程序，并访问 http://localhost:4200/。

npm start
image.png

如果确认完成，请使用Ctrl+C停止服务器。

创建组件 (Chuangjian zujian)

我們將繼續創建內容（顯示在router-outlet的部分）。
我們將創建一個Home組件，以顯示員工信息。

ng g c home

确认已被创建。

CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (268 bytes)
CREATE src/app/home/home.component.scss (0 bytes)
UPDATE src/app/app.module.ts (467 bytes)

路由设定

在打开 http://localhost:4200/home 时，设置显示主页画面。打开 app-routing.module.ts，进行以下编辑。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';// 追加


const routes: Routes = [
  {path: 'home', component: HomeComponent},// 追加
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

开始启动服务器。

npm start

当访问 http://localhost:4200/home 时，会显示home组件的内容。

image.png

下一次，我们要在首页显示员工信息列表。

【使用Spring Boot + Angular + MySQL来创建Web应用程序】进入Angular编辑器②

✖
广告
将在 10 秒后关闭
bannerAds