{"id":38833,"date":"2023-08-09T03:12:51","date_gmt":"2023-07-16T19:41:04","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/"},"modified":"2024-04-30T17:41:31","modified_gmt":"2024-04-30T09:41:31","slug":"%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/","title":{"rendered":"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206"},"content":{"rendered":"

\u6211\u4e4b\u524d\u7528Spring Boot\u521b\u5efa\u4e86\u4e00\u4e2a\u540e\u7aef\u535a\u5ba2\u7a0b\u5e8f\uff0c\u7528\u4e8e\u8fd4\u56de\u5458\u5de5\u4fe1\u606f\u548c\u90e8\u95e8\u5217\u8868\u3002
\n\u8fd9\u6b21\u6211\u5c06\u4f7f\u7528Angular\u6765\u663e\u793a\u4ece\u540e\u7aef\u63a5\u6536\u5230\u7684\u6570\u636e\u3002<\/p>\n

\u521b\u5efaAngular\u9879\u76ee<\/h2>\n

\u5728\u9002\u5f53\u7684\u4f4d\u7f6e\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6\u5939\uff0c\u5e76\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002
\n\u8fd9\u6b21\u6211\u5728Documents\u4e2d\u521b\u5efa\u4e86\u4e00\u4e2a\u540d\u4e3asample\u7684\u6587\u4ef6\u5939\u3002<\/p>\n

ng new example\r\n<\/code><\/pre>\n
\u8f93\u5165y\u5e76\u6309\u4e0b\u56de\u8f66\u952e\u3002<\/p>\n
? Would you like to add Angular routing? (y\/N) y\r\n<\/code><\/pre>\n
\u9009\u62e9SCSS\u5e76\u6309\u4e0b\u56de\u8f66\u952e\u3002<\/p>\n
? Which stylesheet format would you like to use?\r\n  CSS\r\n> SCSS   [ https:\/\/sass-lang.com\/documentation\/syntax#scss                ]\r\n  Sass   [ https:\/\/sass-lang.com\/documentation\/syntax#the-indented-syntax ]\r\n  Less   [ http:\/\/lesscss.org                                             ]\r\n  Stylus [ http:\/\/stylus-lang.com                                         ]     \r\n<\/code><\/pre>\n
\u8fc7\u4e00\u6bb5\u65f6\u95f4\u540e\uff0c\u9879\u76ee\u5c06\u4f1a\u88ab\u521b\u5efa\u3002<\/p>\n
\u221a Packages installed successfully.\r\n    Successfully initialized git.\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u901a\u8fc7\u6253\u5f00VSCode\u7ec8\u7aef\u5e76\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff0c\u542f\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
npm start\r\n<\/code><\/pre>\n
\u7a0d\u7b49\u7247\u523b\uff0c\u4e0b\u9762\u7684\u4fe1\u606f\u5c06\u4f1a\u663e\u793a\u51fa\u6765\u3002<\/p>\n
** Angular Live Development Server is listening on localhost:4200, open your browser on http:\/\/localhost:4200\/ **\r\n: Compiled successfully.\r\n<\/code><\/pre>\n
\u8bbf\u95ee http:\/\/localhost:4200\u3002<\/p>\n
\"image.png\"<\/div>\n
\u7b49\u5f85\u786e\u8ba4\u540e\uff0c\u5c06\u6682\u505c\u670d\u52a1\u5668\u3002
\n\u5728\u7ec8\u7aef\u4e2d\u6309\u4e0bCtrl + C\u3002
\n\u8f93\u5165y\u4ee5\u505c\u6b62\u670d\u52a1\u5668\u3002<\/p>\n
: Compiled successfully.\r\n\u30d0\u30c3\u30c1 \u30b8\u30e7\u30d6\u3092\u7d42\u4e86\u3057\u307e\u3059\u304b (Y\/N)? y\r\n<\/code><\/pre>\n
\u5b89\u88c5 Angular Material \u548c FlexLayout<\/h2>\n
\u5728\u521b\u5efa\u753b\u9762\u4e4b\u524d\uff0c\u6211\u4eec\u9700\u8981\u5b89\u88c5Angular Material\u4f5c\u4e3aUI\u6846\u67b6\uff0c\u5e76\u4f7f\u7528flex-layout\u6765\u8fdb\u884c\u5e03\u5c40\u3002<\/p>\n
Angular \u6750\u6599<\/h4>\n
\u9996\u5148\uff0c\u4eceAngular Material\u8fdb\u884c\u5b89\u88c5\u3002
\n\u8f93\u5165\u5e76\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
ng add @angular\/material\r\n<\/code><\/pre>\n
\u8fc7\u4e86\u4e00\u4f1a\u513f\uff0c\u60a8\u4f1a\u88ab\u95ee\u5230\u4ee5\u4e0b\u95ee\u9898\uff0c\u7136\u540e\u76f4\u63a5\u6309\u4e0b\u56de\u8f66\u952e\u3002<\/p>\n
? Choose a prebuilt theme name, or \"custom\" for a custom theme: (Use arrow keys)\r\n> Indigo\/Pink        [ Preview: https:\/\/material.angular.io?theme=indigo-pink ]\r\n  Deep Purple\/Amber  [ Preview: https:\/\/material.angular.io?theme=deeppurple-amber ]\r\n  Pink\/Blue Grey     [ Preview: https:\/\/material.angular.io?theme=pink-bluegrey ]\r\n  Purple\/Green       [ Preview: https:\/\/material.angular.io?theme=purple-green ]\r\n  Custom\r\n<\/code><\/pre>\n
\u8bf7\u60a8\u8f93\u5165\u4e0b\u4e00\u4e2a\u95ee\u9898\uff0cy\u3002<\/p>\n
? Set up global Angular Material typography styles? (y\/N) y\r\n<\/code><\/pre>\n
\u8fd9\u8fb9\u4e5f\u9700\u8981\u8f93\u5165y\u3002<\/p>\n
? Set up browser animations for Angular Material? (Y\/n) y\r\n<\/code><\/pre>\n
\u7a0d\u7b49\u7247\u523b\uff0c\u5b89\u88c5\u5c06\u5b8c\u6210\u3002<\/p>\n
\u521b\u5efa MaterialModule<\/h3>\n
\u6211\u5011\u5c07\u5275\u5efa\u4e00\u500b\u540d\u70ba MaterialModule \u7684\u6a21\u584a\uff0c\u5b83\u5c07\u5f59\u7e3d\u7528\u65bc\u9805\u76ee\u7684 Angular Material \u6a21\u584a\u3002\u8acb\u8f38\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
ng g m material\r\n<\/code><\/pre>\n
src\/app\/material\/\u4e0b\u521b\u5efa\u4e86material.module.ts\u3002
\n\u4ee5\u4e0b\u662f\u7f16\u8f91\u540e\u7684\u4ee3\u7801\u3002<\/p>\n
import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> BrowserAnimationsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser\/animations<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatCheckboxModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/checkbox<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatButtonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/button<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatInputModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/input<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatAutocompleteModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/autocomplete<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatDatepickerModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/datepicker<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatFormFieldModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/form-field<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatRadioModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/radio<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSelectModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/select<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSliderModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/slider<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSlideToggleModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/slide-toggle<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatMenuModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/menu<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSidenavModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/sidenav<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatBadgeModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/badge<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatToolbarModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/toolbar<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatListModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/list<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatGridListModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/grid-list<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatCardModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/card<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatStepperModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/stepper<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatTabsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/tabs<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatExpansionModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/expansion<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatButtonToggleModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/button-toggle<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatChipsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/chips<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatIconModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/icon<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatProgressSpinnerModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/progress-spinner<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatProgressBarModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/progress-bar<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatDialogModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/dialog<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatTooltipModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/tooltip<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSnackBarModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/snack-bar<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatTableModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/table<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatSortModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/sort<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MatPaginatorModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/material\/paginator<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>,<\/span>\r\n    BrowserAnimationsModule<\/span>,<\/span>\r\n    MatCheckboxModule<\/span>,<\/span>\r\n    MatCheckboxModule<\/span>,<\/span>\r\n    MatButtonModule<\/span>,<\/span>\r\n    MatInputModule<\/span>,<\/span>\r\n    MatAutocompleteModule<\/span>,<\/span>\r\n    MatDatepickerModule<\/span>,<\/span>\r\n    MatFormFieldModule<\/span>,<\/span>\r\n    MatRadioModule<\/span>,<\/span>\r\n    MatSelectModule<\/span>,<\/span>\r\n    MatSliderModule<\/span>,<\/span>\r\n    MatSlideToggleModule<\/span>,<\/span>\r\n    MatMenuModule<\/span>,<\/span>\r\n    MatSidenavModule<\/span>,<\/span>\r\n    MatBadgeModule<\/span>,<\/span>\r\n    MatToolbarModule<\/span>,<\/span>\r\n    MatListModule<\/span>,<\/span>\r\n    MatGridListModule<\/span>,<\/span>\r\n    MatCardModule<\/span>,<\/span>\r\n    MatStepperModule<\/span>,<\/span>\r\n    MatTabsModule<\/span>,<\/span>\r\n    MatExpansionModule<\/span>,<\/span>\r\n    MatButtonToggleModule<\/span>,<\/span>\r\n    MatChipsModule<\/span>,<\/span>\r\n    MatIconModule<\/span>,<\/span>\r\n    MatProgressSpinnerModule<\/span>,<\/span>\r\n    MatProgressBarModule<\/span>,<\/span>\r\n    MatDialogModule<\/span>,<\/span>\r\n    MatTooltipModule<\/span>,<\/span>\r\n    MatSnackBarModule<\/span>,<\/span>\r\n    MatTableModule<\/span>,<\/span>\r\n    MatSortModule<\/span>,<\/span>\r\n    MatPaginatorModule<\/span>\r\n  ],<\/span>\r\n\r\n  exports<\/span>:<\/span> [<\/span>\r\n    MatCheckboxModule<\/span>,<\/span>\r\n    MatCheckboxModule<\/span>,<\/span>\r\n    MatButtonModule<\/span>,<\/span>\r\n    MatInputModule<\/span>,<\/span>\r\n    MatAutocompleteModule<\/span>,<\/span>\r\n    MatDatepickerModule<\/span>,<\/span>\r\n    MatFormFieldModule<\/span>,<\/span>\r\n    MatRadioModule<\/span>,<\/span>\r\n    MatSelectModule<\/span>,<\/span>\r\n    MatSliderModule<\/span>,<\/span>\r\n    MatSlideToggleModule<\/span>,<\/span>\r\n    MatMenuModule<\/span>,<\/span>\r\n    MatSidenavModule<\/span>,<\/span>\r\n    MatBadgeModule<\/span>,<\/span>\r\n    MatToolbarModule<\/span>,<\/span>\r\n    MatListModule<\/span>,<\/span>\r\n    MatGridListModule<\/span>,<\/span>\r\n    MatCardModule<\/span>,<\/span>\r\n    MatStepperModule<\/span>,<\/span>\r\n    MatTabsModule<\/span>,<\/span>\r\n    MatExpansionModule<\/span>,<\/span>\r\n    MatButtonToggleModule<\/span>,<\/span>\r\n    MatChipsModule<\/span>,<\/span>\r\n    MatIconModule<\/span>,<\/span>\r\n    MatProgressSpinnerModule<\/span>,<\/span>\r\n    MatProgressBarModule<\/span>,<\/span>\r\n    MatDialogModule<\/span>,<\/span>\r\n    MatTooltipModule<\/span>,<\/span>\r\n    MatSnackBarModule<\/span>,<\/span>\r\n    MatTableModule<\/span>,<\/span>\r\n    MatSortModule<\/span>,<\/span>\r\n    MatPaginatorModule<\/span>\r\n  ],<\/span>\r\n  providers<\/span>:<\/span> [<\/span>\r\n    MatDatepickerModule<\/span>,<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> MaterialModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
\u5c06\u521b\u5efa\u7684MaterialModule\u6dfb\u52a0\u5230app.module.ts\u4e2d\u3002<\/p>\n
import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/app-routing.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserAnimationsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser\/animations<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MaterialModule<\/span> }<\/span> from<\/span> '<\/span>.\/material\/material.module<\/span>'<\/span>;<\/span> \/\/ \u8ffd\u52a0<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    AppComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    AppRoutingModule<\/span>,<\/span>\r\n    BrowserAnimationsModule<\/span>,<\/span>\r\n    MaterialModule<\/span> \/\/\u8ffd\u52a0<\/span>\r\n  ],<\/span>\r\n  providers<\/span>:<\/span> [],<\/span>\r\n  bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
\u73b0\u5728Angular Material\u53ef\u4ee5\u4f7f\u7528\u4e86\u3002
\n\u4e0b\u4e00\u6b65\u662f\u5b89\u88c5Flexlayout\u3002<\/p>\n
\u5f39\u6027\u5e03\u5c40<\/h4>\n
\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
npm install --save @angular\/flex-layout\r\n<\/code><\/pre>\n
\u5728app.module.ts\u4e2d\u6dfb\u52a0Flexlayout\u3002<\/p>\n
import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/app-routing.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserAnimationsModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser\/animations<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MaterialModule<\/span> }<\/span> from<\/span> '<\/span>.\/material\/material.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> FlexLayoutModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/flex-layout<\/span>'<\/span>;<\/span> \/\/\u8ffd\u52a0<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    AppComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    AppRoutingModule<\/span>,<\/span>\r\n    BrowserAnimationsModule<\/span>,<\/span>\r\n    MaterialModule<\/span>,<\/span>\r\n    FlexLayoutModule<\/span> \/\/\u8ffd\u52a0<\/span>\r\n  ],<\/span>\r\n  providers<\/span>:<\/span> [],<\/span>\r\n  bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
\u73b0\u5728\u53ef\u4ee5\u51c6\u5907\u597d\u4f7f\u7528Flexlayout\u4e86\u3002<\/p>\n
\u521b\u5efa\u56fe\u50cf<\/h2>\n
\u5220\u6389app.component.html\u4e2d\u7684\u6240\u6709\u5185\u5bb9\uff0c\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u63cf\u8ff0\u3002<\/p>\n
<div<\/span> fxFlexFill<\/span> fxLayout=<\/span>\"column\"<\/span>><\/span>\r\n  <div<\/span> fxFlex=<\/span>\"none\"<\/span> class=<\/span>\"header\"<\/span>><\/span>\r\n    header\r\n  <\/div><\/span>\r\n  <div<\/span> fxFlex<\/span>><\/span>\r\n    <router-outlet><\/router-outlet><\/span>\r\n  <\/div><\/span>\r\n  <div<\/span> fxFlex=<\/span>\"none\"<\/span> class=<\/span>\"footer\"<\/span>><\/span>\r\n    footer\r\n  <\/div><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u7f16\u8f91 SCSS \u6587\u4ef6\u4ee5\u8c03\u6574\u6837\u5f0f\u3002<\/p>\n
\/* You can add global styles to this file, and also import other style files *\/<\/span>\r\n\r\nhtml<\/span>,<\/span> body<\/span> {<\/span> height<\/span>:<\/span> 100%<\/span>;<\/span> }<\/span>\r\nbody<\/span> {<\/span> margin<\/span>:<\/span> 0<\/span>;<\/span> font-family<\/span>:<\/span> Roboto<\/span>,<\/span> \"Helvetica Neue\"<\/span>,<\/span> sans-serif<\/span>;<\/span> }<\/span>\r\n\r\n.header<\/span>{<\/span>\r\n    height<\/span>:<\/span> 50px<\/span>;<\/span>\r\n    background-color<\/span>:<\/span> lightgreen<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.footer<\/span>{<\/span>\r\n    background-color<\/span>:<\/span> lightgreen<\/span>;<\/span>\r\n    height<\/span>:<\/span> 30px<\/span>;<\/span>\r\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8\u5e94\u7528\u7a0b\u5e8f\uff0c\u5e76\u8bbf\u95ee http:\/\/localhost:4200\/\u3002<\/p>\n
npm start\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u5982\u679c\u786e\u8ba4\u5b8c\u6210\uff0c\u8bf7\u4f7f\u7528Ctrl+C\u505c\u6b62\u670d\u52a1\u5668\u3002<\/p>\n
\u521b\u5efa\u7ec4\u4ef6 (Chuangjian zujian)<\/h2>\n
\u6211\u5011\u5c07\u7e7c\u7e8c\u5275\u5efa\u5167\u5bb9\uff08\u986f\u793a\u5728router-outlet\u7684\u90e8\u5206\uff09\u3002
\n\u6211\u5011\u5c07\u5275\u5efa\u4e00\u500bHome\u7d44\u4ef6\uff0c\u4ee5\u986f\u793a\u54e1\u5de5\u4fe1\u606f\u3002<\/p>\n
ng g c home\r\n<\/code><\/pre>\n
\u786e\u8ba4\u5df2\u88ab\u521b\u5efa\u3002<\/p>\n
CREATE src\/app\/home\/home.component.html (19 bytes)\r\nCREATE src\/app\/home\/home.component.spec.ts (614 bytes)\r\nCREATE src\/app\/home\/home.component.ts (268 bytes)\r\nCREATE src\/app\/home\/home.component.scss (0 bytes)\r\nUPDATE src\/app\/app.module.ts (467 bytes)\r\n<\/code><\/pre>\n
\u8def\u7531\u8bbe\u5b9a<\/h2>\n
\u5728\u6253\u5f00 http:\/\/localhost:4200\/home \u65f6\uff0c\u8bbe\u7f6e\u663e\u793a\u4e3b\u9875\u753b\u9762\u3002\u6253\u5f00 app-routing.module.ts\uff0c\u8fdb\u884c\u4ee5\u4e0b\u7f16\u8f91\u3002<\/p>\n
import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Routes<\/span>,<\/span> RouterModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HomeComponent<\/span> }<\/span> from<\/span> '<\/span>.\/home\/home.component<\/span>'<\/span>;<\/span>\/\/ \u8ffd\u52a0<\/span>\r\n\r\n\r\nconst<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n  {<\/span>path<\/span>:<\/span> '<\/span>home<\/span>'<\/span>,<\/span> component<\/span>:<\/span> HomeComponent<\/span>},<\/span>\/\/ \u8ffd\u52a0<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>RouterModule<\/span>.<\/span>forRoot<\/span>(<\/span>routes<\/span>)],<\/span>\r\n  exports<\/span>:<\/span> [<\/span>RouterModule<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppRoutingModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
\u5f00\u59cb\u542f\u52a8\u670d\u52a1\u5668\u3002<\/p>\n
npm start\r\n<\/code><\/pre>\n
\u5f53\u8bbf\u95ee http:\/\/localhost:4200\/home \u65f6\uff0c\u4f1a\u663e\u793ahome\u7ec4\u4ef6\u7684\u5185\u5bb9\u3002<\/p>\n
\"image.png\"<\/div>\n
\u4e0b\u4e00\u6b21\uff0c\u6211\u4eec\u8981\u5728\u9996\u9875\u663e\u793a\u5458\u5de5\u4fe1\u606f\u5217\u8868\u3002<\/p>\n
\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u6765\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011\u8fdb\u5165Angular\u7f16\u8f91\u5668\u2461<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6211\u4e4b\u524d\u7528Spring Boot\u521b\u5efa\u4e86\u4e00\u4e2a\u540e\u7aef\u535a\u5ba2\u7a0b\u5e8f\uff0c\u7528\u4e8e\u8fd4\u56de\u5458\u5de5\u4fe1\u606f\u548c\u90e8\u95e8\u5217\u8868\u3002 \u8fd9\u6b21\u6211\u5c06\u4f7f\u7528Angular […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38833","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u4f7f\u7528spring-boot-angular-mysql\u521b\u5efaweb\u5e94\u7528\u7a0b\u5e8f\u3011-angular\u7b2c\u4e00\u90e8\u5206\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206\" \/>\n<meta property=\"og:description\" content=\"\u6211\u4e4b\u524d\u7528Spring Boot\u521b\u5efa\u4e86\u4e00\u4e2a\u540e\u7aef\u535a\u5ba2\u7a0b\u5e8f\uff0c\u7528\u4e8e\u8fd4\u56de\u5458\u5de5\u4fe1\u606f\u548c\u90e8\u95e8\u5217\u8868\u3002 \u8fd9\u6b21\u6211\u5c06\u4f7f\u7528Angular […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u4f7f\u7528spring-boot-angular-mysql\u521b\u5efaweb\u5e94\u7528\u7a0b\u5e8f\u3011-angular\u7b2c\u4e00\u90e8\u5206\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-16T19:41:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T09:41:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d367b37434c4406c6fb3c\/10-0.png\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/\",\"name\":\"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-16T19:41:04+00:00\",\"dateModified\":\"2024-04-30T09:41:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u4f7f\u7528spring-boot-angular-mysql\u521b\u5efaweb\u5e94\u7528\u7a0b\u5e8f\u3011-angular\u7b2c\u4e00\u90e8\u5206\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206","og_description":"\u6211\u4e4b\u524d\u7528Spring Boot\u521b\u5efa\u4e86\u4e00\u4e2a\u540e\u7aef\u535a\u5ba2\u7a0b\u5e8f\uff0c\u7528\u4e8e\u8fd4\u56de\u5458\u5de5\u4fe1\u606f\u548c\u90e8\u95e8\u5217\u8868\u3002 \u8fd9\u6b21\u6211\u5c06\u4f7f\u7528Angular […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u4f7f\u7528spring-boot-angular-mysql\u521b\u5efaweb\u5e94\u7528\u7a0b\u5e8f\u3011-angular\u7b2c\u4e00\u90e8\u5206\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-16T19:41:04+00:00","article_modified_time":"2024-04-30T09:41:31+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d367b37434c4406c6fb3c\/10-0.png"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/","name":"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-16T19:41:04+00:00","dateModified":"2024-04-30T09:41:31+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010\u4f7f\u7528Spring Boot + Angular + MySQL\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u3011 Angular\u7b2c\u4e00\u90e8\u5206"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e4%bd%bf%e7%94%a8spring-boot-angular-mysql%e5%88%9b%e5%bb%baweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%91-angular%e7%ac%ac%e4%b8%80%e9%83%a8%e5%88%86\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38833"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38833\/revisions"}],"predecessor-version":[{"id":93341,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38833\/revisions\/93341"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}