commit

angular.json

@@ -33,8 +33,20 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
-            "styles": ["src/styles.scss"],
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "src/theme.less",
+              "src/styles.scss",
+              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
+            ],
             "scripts": []
           },
           "configurations": {

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
         "axios": "^0.26.0",
+        "ng-zorro-antd": "^13.1.1",
         "normalize-scss": "^7.0.1",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
@@ -539,6 +540,14 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-5.1.1.tgz",
+      "integrity": "sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
     "node_modules/@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmmirror.com/@assemblyscript/loader/-/loader-0.10.1.tgz",
@@ -2321,6 +2330,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.5",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
@@ -4347,6 +4364,14 @@
       "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/date-format/-/date-format-4.0.4.tgz",
@@ -7549,6 +7574,62 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ng-zorro-antd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmmirror.com/ng-zorro-antd/-/ng-zorro-antd-13.1.1.tgz",
+      "integrity": "sha512-4haER9G+OlbAG66elL0lp/QO1jOKoyt79BVYw3bILDUSMBVWCe1UGKaIG47BCybLYFV0qcL8AiDuIGNLkddbjg==",
+      "dependencies": {
+        "@angular/cdk": "^13.0.1",
+        "@ant-design/icons-angular": "^13.0.1",
+        "date-fns": "^2.16.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^13.0.1",
+        "@angular/common": "^13.0.1",
+        "@angular/core": "^13.0.1",
+        "@angular/forms": "^13.0.1",
+        "@angular/platform-browser": "^13.0.1",
+        "@angular/router": "^13.0.1"
+      }
+    },
+    "node_modules/ng-zorro-antd/node_modules/@angular/cdk": {
+      "version": "13.2.5",
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/-/cdk-13.2.5.tgz",
+      "integrity": "sha512-kYya2Zd+tK5CmzNcxNADqILVZYEb5CKsOnr4DXPmRJ55IwlHiBZJKUdmSaavb7SCdyNOFP3e1dSwOrIIRLeCuQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/ng-zorro-antd/node_modules/@ant-design/icons-angular": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-angular/-/icons-angular-13.1.0.tgz",
+      "integrity": "sha512-bQ1pxiDmR8Hx7kUwQImxLGAtexv0uDCCMlKSWdyaw39TnNAPz+Hls0XL+UqVIjHgt/D4R8tkmSMpx3eBGFIY/Q==",
+      "dependencies": {
+        "@ant-design/colors": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.1",
+        "@angular/core": "^13.0.0",
+        "@angular/platform-browser": "^13.0.1",
+        "rxjs": "^6.4.0 || ^7.4.0"
+      }
+    },
+    "node_modules/ng-zorro-antd/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -12313,6 +12394,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@ant-design/colors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-5.1.1.tgz",
+      "integrity": "sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
     "@assemblyscript/loader": {
       "version": "0.10.1",
       "resolved": "https://registry.npmmirror.com/@assemblyscript/loader/-/loader-0.10.1.tgz",
@@ -13596,6 +13685,11 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.5",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
@@ -15291,6 +15385,11 @@
       "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/date-format/-/date-format-4.0.4.tgz",
@@ -17787,6 +17886,43 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ng-zorro-antd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmmirror.com/ng-zorro-antd/-/ng-zorro-antd-13.1.1.tgz",
+      "integrity": "sha512-4haER9G+OlbAG66elL0lp/QO1jOKoyt79BVYw3bILDUSMBVWCe1UGKaIG47BCybLYFV0qcL8AiDuIGNLkddbjg==",
+      "requires": {
+        "@angular/cdk": "^13.0.1",
+        "@ant-design/icons-angular": "^13.0.1",
+        "date-fns": "^2.16.1",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "@angular/cdk": {
+          "version": "13.2.5",
+          "resolved": "https://registry.npmmirror.com/@angular/cdk/-/cdk-13.2.5.tgz",
+          "integrity": "sha512-kYya2Zd+tK5CmzNcxNADqILVZYEb5CKsOnr4DXPmRJ55IwlHiBZJKUdmSaavb7SCdyNOFP3e1dSwOrIIRLeCuQ==",
+          "requires": {
+            "parse5": "^5.0.0",
+            "tslib": "^2.3.0"
+          }
+        },
+        "@ant-design/icons-angular": {
+          "version": "13.1.0",
+          "resolved": "https://registry.npmmirror.com/@ant-design/icons-angular/-/icons-angular-13.1.0.tgz",
+          "integrity": "sha512-bQ1pxiDmR8Hx7kUwQImxLGAtexv0uDCCMlKSWdyaw39TnNAPz+Hls0XL+UqVIjHgt/D4R8tkmSMpx3eBGFIY/Q==",
+          "requires": {
+            "@ant-design/colors": "^5.0.0",
+            "tslib": "^2.0.0"
+          }
+        },
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
     "axios": "^0.26.0",
+    "ng-zorro-antd": "^13.1.1",
     "normalize-scss": "^7.0.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -4,26 +4,43 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 14:00:45
+ * @LastEditTime: 2022-03-09 17:11:03
  */
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { HomeComponent } from "./pages/home/home.component";
+import { BodyComponent } from "./pages/home/components/body/body.component";
+import { HeadComponent } from "./pages/home/components/head/head.component";
 import { UserComponent } from "./pages/user/user.component";
+import { NotFoundComponent } from "./pages/not-found/not-found.component";
 const routes: Routes = [
   // 路由前面的路径不需要加/
   {
-    path: "",
+    // 父路由
+    path: "index",
     component: HomeComponent,
+    // 子路由
+    children: [
+      { path: "body", component: BodyComponent },
+      { path: "head", component: HeadComponent },
+      {
+        path: "**",
+        redirectTo: "head",
+      },
+    ],
   },
   {
     path: "user",
     component: UserComponent,
   },
+  {
+    path: "404",
+    component: NotFoundComponent,
+  },
   // 匹配不到路由时加载的组件或者跳转的路由
   {
     path: "**",
-    redirectTo: "",
+    redirectTo: "404",
   },
 ];
 

src/app/app.component.html

@@ -4,11 +4,14 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:47:49
+ * @LastEditTime: 2022-03-09 17:34:43
 -->
-
+<header>
-<!-- 路由配置后显示的区域 -->
+  <app-topbar></app-topbar>
-<!-- <a routerLink="/user">跳转到用户页</a> -->
+</header>
-<!-- <a router></a> -->
+<body>
   <router-outlet></router-outlet>
-<!-- <a router></a> -->
+</body>
+<footer>
+  <app-footer></app-footer>
+</footer>

src/app/app.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 13:41:44
+ * @LastEditTime: 2022-03-09 17:35:01
  */
 // 引入核心模块
 import { NgModule } from "@angular/core";
@@ -18,11 +18,25 @@ import { AppComponent } from "./app.component";
 import { CoreModule } from "./model/core.module";
 // 在根模块中引入http模块
 import { HttpClientModule } from "@angular/common/http";
+import { NZ_I18N } from "ng-zorro-antd/i18n";
+import { zh_CN } from "ng-zorro-antd/i18n";
+import { registerLocaleData } from "@angular/common";
+import zh from "@angular/common/locales/zh";
+import { FormsModule } from "@angular/forms";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+registerLocaleData(zh);
 
 @NgModule({
   declarations: [AppComponent], //配置项目运行的组件
-  imports: [BrowserModule, AppRoutingModule, CoreModule, HttpClientModule], //配置当前项目运行依赖的其他模块
+  imports: [
-  providers: [], //配置项目所需要的服务
+    BrowserModule,
+    AppRoutingModule,
+    CoreModule,
+    HttpClientModule,
+    FormsModule,
+    BrowserAnimationsModule,
+  ], //配置当前项目运行依赖的其他模块
+  providers: [{ provide: NZ_I18N, useValue: zh_CN }], //配置项目所需要的服务
   bootstrap: [AppComponent], //指定应用的主视图(称为根组件,通过引导AppModule来启动哟应用 这里写的一般是根组件)
 })
 //根模块不需要导出任何东西,以为其他组件不需要导入根模块

src/app/components/components.module.ts

@@ -4,16 +4,17 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:58:41
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:44:31
+ * @LastEditTime: 2022-03-09 17:20:28
  */
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { NewsComponent } from "./news/news.component";
-import { ListComponent } from "./list/list.component";
 
+import { TopbarComponent } from "./topbar/topbar.component";
+import { AppRoutingModule } from "../app-routing.module";
+import { FooterComponent } from "./footer/footer.component";
 @NgModule({
-  declarations: [NewsComponent, ListComponent],
+  declarations: [TopbarComponent, FooterComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, AppRoutingModule],
-  exports: [NewsComponent, ListComponent],
+  exports: [TopbarComponent, FooterComponent],
 })
 export class ComponentsModule {}

src/app/components/footer/footer.component.html

@@ -0,0 +1,15 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-09 15:33:39
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-09 16:56:27
+-->
+<div class="footer-root">
+  <div class="container">
+    <div class="w">
+      <p>2022</p>
+    </div>
+  </div>
+</div>

src/app/components/footer/footer.component.scss

@@ -0,0 +1,9 @@
+.footer-root {
+  position: relative;
+  width: 100vw;
+  height: 40px;
+  bottom: 0px;
+  line-height: 40px;
+  text-align: center;
+  background-color: skyblue;
+}

src/app/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/list/list.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListComponent } from './list.component';
-
-describe('ListComponent', () => {
-  let component: ListComponent;
-  let fixture: ComponentFixture<ListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/list/list.component.ts

@@ -1,27 +0,0 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-03-04 10:47:32
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:48:12
- */
-import { Component, OnInit } from "@angular/core";
-import { StorageService } from "src/app/services/storage.service";
-@Component({
-  selector: "app-list",
-  templateUrl: "./list.component.html",
-  styleUrls: ["./list.component.scss"],
-})
-export class ListComponent implements OnInit {
-  public today: any = new Date();
-
-  constructor(public storage: StorageService) {
-    console.log(this.today);
-  }
-  changeMsg() {
-    // this.storage.msg = "我是改变后的值";
-  }
-
-  ngOnInit(): void {}
-}

src/app/components/news/news.component.html

@@ -1,9 +0,0 @@
-<!--
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-03-03 16:59:15
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:00:44
--->
-<p>list works</p>

src/app/components/news/news.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewsComponent } from './news.component';
-
-describe('NewsComponent', () => {
-  let component: NewsComponent;
-  let fixture: ComponentFixture<NewsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NewsComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NewsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/news/news.component.ts

@@ -1,47 +0,0 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-03-03 16:59:15
- * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 14:58:48
- */
-
-import { Component, OnInit } from "@angular/core";
-
-@Component({
-  selector: "app-news",
-  templateUrl: "./news.component.html",
-  styleUrls: ["./news.component.scss"],
-})
-export class NewsComponent implements OnInit {
-  public msg: string = "我是新闻模块";
-  constructor() {}
-  ngOnInit(): void {}
-  getNum() {
-    alert("执行方法");
-  }
-  getData() {
-    console.log(this.msg);
-  }
-  setData() {
-    this.msg = "我是再次改变的msg";
-  }
-  pressKeyboard(e: any) {
-    // keyCode为13代表回车
-    if (e.keyCode === 13) {
-      // e.target.value 代表获取dom元素中input输入框中的值
-      console.log("按下了回车", e.target.value);
-    } else {
-      //获取当前输入的值
-      console.log(e.code);
-      // 获取按键的代号
-      console.log(e.keyCode);
-    }
-  }
-  changeDom(e: any): any {
-    // 操作dom更改字体颜色
-    e.target.style.color = "red";
-    console.log(e.target.style);
-  }
-}

src/app/components/topbar/topbar.component.html

@@ -0,0 +1,24 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-09 15:00:25
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-09 17:24:52
+-->
+<div class="topbar-root">
+  <div class="container">
+    <div class="w">
+      <ul>
+        <li *ngFor="let item of tobMenu; let key = index">
+          <a [routerLink]="item.src" routerLinkActive="active">{{
+            item.title
+          }}</a>
+        </li>
+        <!-- <span>
+          <input type="text" />
+        </span> -->
+      </ul>
+    </div>
+  </div>
+</div>

src/app/components/topbar/topbar.component.scss

@@ -0,0 +1,44 @@
+.topbar-root {
+  width: 100vw;
+  height: 70px;
+  background-color: blue;
+
+  .container {
+    width: 100%;
+    position: fixed;
+    z-index: 999;
+    top: 10px;
+    .w {
+      ul {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        background-color: pink;
+        border-radius: 18px;
+        border: 1px solid #ccc;
+        li {
+          font-size: 16px;
+          text-align: center;
+          display: inline-block;
+          line-height: 50px;
+          // margin: 0 20px;
+          // &:nth-child(6) {
+          //   margin-right: 20px;
+          // }
+          a {
+            display: block;
+            width: 100px;
+            height: 50px;
+          }
+          background-color: red;
+          width: 100px;
+        }
+      }
+    }
+  }
+}
+.active {
+  color: green;
+  background-color: blue;
+  transition: all 0.3s;
+}

src/app/components/topbar/topbar.component.ts

@@ -0,0 +1,24 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-09 15:00:25
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-09 17:06:29
+ */
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-topbar",
+  templateUrl: "./topbar.component.html",
+  styleUrls: ["./topbar.component.scss"],
+})
+export class TopbarComponent implements OnInit {
+  constructor() {}
+  public tobMenu: any = [
+    { title: "首页", id: "1", src: "/index" },
+    { title: "商品", id: "2", src: "/user" },
+    { title: "关于我们", id: "3", src: "/user" },
+  ];
+  ngOnInit(): void {}
+}

src/app/model/public.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-09 11:13:29
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 13:39:27
+ * @LastEditTime: 2022-03-09 17:35:19
  */
 import { NgModule } from "@angular/core";
 import { AppRoutingModule } from "../app-routing.module";
@@ -12,10 +12,16 @@ import { ComponentsModule } from "src/app/components/components.module";
 import { CommonModule } from "@angular/common";
 // 引入双向数据绑定
 import { FormsModule } from "@angular/forms";
-
+import { NzButtonModule } from "ng-zorro-antd/button";
 @NgModule({
   declarations: [],
   imports: [],
-  exports: [AppRoutingModule, ComponentsModule, FormsModule, CommonModule],
+  exports: [
+    AppRoutingModule,
+    ComponentsModule,
+    FormsModule,
+    CommonModule,
+    NzButtonModule,
+  ],
 })
 export class PublicModule {}

src/app/pages/home/components/head/head.component.html

@@ -4,11 +4,9 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:07:14
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:06:02
+ * @LastEditTime: 2022-03-09 17:40:22
 -->
 <div class="root">
   <p>head works</p>
-  <div class="searchInput">
+  <button nz-button nzType="primary" style="z-index: 0">123123</button>
-    <input type="type" (change)="getSearchData($event)" />
-  </div>
 </div>

src/app/pages/home/home.component.html

@@ -4,25 +4,24 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 14:01:40
+ * @LastEditTime: 2022-03-09 17:37:45
 -->
-<app-head></app-head>
+<div class="home-root">
-<hr />
+  <div class="container">
-<div>
+    <div class="w">
-  <p>home work</p>
+      <aside>
-  <!-- <p>{{ storage.inputData }}</p> -->
+        <ul>
-  <p>{{ result }}</p>
+          <li><a routerLink="/index/body">1</a></li>
+          <li><a routerLink="/index/head">2</a></li>
+          <li><a routerLink="/index/body">1</a></li>
+          <li><a routerLink="/index/head">2</a></li>
+          <li><a routerLink="/index/body">1</a></li>
+          <li><a routerLink="/index/head">2</a></li>
+        </ul>
+      </aside>
+      <section>
+        <router-outlet></router-outlet>
+      </section>
+    </div>
   </div>
-<app-body></app-body>
-<div class="root">
-  <a routerLink="" routerLinkActive="active">跳转回主页</a>
-
-  <a routerLink="/user" routerLinkActive="active" [queryParams]="{ aid: key }"
-    >跳转</a
-  >
-  <!-- <a >跳转到用户页面</a> -->
-  <!-- <a ></a> -->
-  <!-- <a [routerLink]="['/user']"></a> -->
 </div>
-<!-- <app-news></app-news> -->
-<app-list></app-list>

src/app/pages/home/home.component.scss

@@ -0,0 +1,33 @@
+.home-root {
+  // height: calc(100vh - 110px);
+  // overflow-y: scroll;
+  .w {
+    display: flex;
+    aside {
+      flex: 3;
+      border-right: 1px solid pink;
+      ul {
+        li {
+          font-size: 16px;
+          // background-color: red;
+
+          border-bottom: 1px solid black;
+          a {
+            display: block;
+            height: 40px;
+            padding: 5px;
+            line-height: 30px;
+            // background-color: red;
+
+            border-bottom: green;
+          }
+        }
+      }
+    }
+
+    section {
+      flex: 7;
+      background-color: yellow;
+    }
+  }
+}

src/app/pages/home/home.component.ts

@@ -4,13 +4,13 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 13:47:01
+ * @LastEditTime: 2022-03-09 16:52:44
  */
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 import { RequestService } from "src/app/services/request.service";
 // 引入服务
 import { StorageService } from "src/app/services/storage.service";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router, NavigationExtras } from "@angular/router";
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
@@ -23,7 +23,8 @@ export class HomeComponent implements OnInit {
   constructor(
     public storage: StorageService,
     public request: RequestService,
-    public route: ActivatedRoute
+    public route: ActivatedRoute,
+    public routeFn: Router
   ) {}
   // init结尾的函数只会调用一次 checked结尾的函数会多次调用
   // 初始化组件和指令时调用(一般用于请求api)
@@ -45,4 +46,10 @@ export class HomeComponent implements OnInit {
     //   console.log("延迟期触发");
     // }, 1000);
   }
+  navigateToUser() {
+    let queryParams: NavigationExtras = {
+      queryParams: { ad: 1234 },
+    };
+    this.routeFn.navigate(["/user"], queryParams);
+  }
 }

src/app/pages/not-found/not-found.component.html

@@ -2,8 +2,8 @@
  * @Description: {{ByRuin}}
  * @Version: 2.0
  * @Author: Ruin 🍭
- * @Date: 2022-03-04 10:47:32
+ * @Date: 2022-03-09 17:09:54
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:00:33
+ * @LastEditTime: 2022-03-09 17:10:07
 -->
-<p>list works</p>
+<h1>404</h1>

src/app/pages/not-found/not-found.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss']
+})
+export class NotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/pages.module.ts

@@ -4,15 +4,16 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:03:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 11:30:57
+ * @LastEditTime: 2022-03-09 17:20:50
  */
 import { NgModule } from "@angular/core";
 import { HomeModule } from "./home/home.module";
 import { UserModule } from "./user/user.module";
+import { NotFoundComponent } from "./not-found/not-found.component";
 
 // 引入并且配置服务
 @NgModule({
-  declarations: [],
+  declarations: [NotFoundComponent],
   imports: [HomeModule, UserModule],
   providers: [],
   exports: [HomeModule, UserModule],

src/app/pages/user/user.component.html

@@ -4,18 +4,6 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 13:23:58
+ * @LastEditTime: 2022-03-09 15:41:40
 -->
-<p>user works!</p>
+<div class="user-root">我是用户页</div>
-<app-info></app-info>
-<app-mine></app-mine>
-<div class="root">
-  <a routerLink="" routerLinkActive="active">跳转回主页</a>
-
-  <a routerLink="/user" routerLinkActive="active">跳转</a>
-  <button (click)="getApiData()">get请求数据</button>
-  <button (click)="postUserData()">post增加数据</button>
-  <ul>
-    <li *ngFor="let item of list">{{ item.description }}</li>
-  </ul>
-</div>

src/app/pages/user/user.component.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-09 13:59:01
+ * @LastEditTime: 2022-03-09 14:50:10
  */
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
@@ -25,7 +25,7 @@ export class UserComponent implements OnInit {
   public list: any;
   ngOnInit(): void {
     this.route.queryParams.subscribe((params) => {
-      console.log("路由传过来的参数", params);
+      console.log("get接收到的参数", params);
     });
     // this.route.params.subscribe((params) => {
     //   console.log("动态路由路径", params);

src/styles.scss

@@ -1,9 +1,27 @@
 /* You can add global styles to this file, and also import other style files */
 @import "../node_modules/normalize-scss/sass/normalize";
+@import "~ng-zorro-antd/ng-zorro-antd.min.css";
+
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box !important;
+  a {
+    text-decoration: none;
+    color: black;
+  }
 }
 .active {
   color: red;
 }
+.w {
+  width: 1400px;
+  margin: 0 auto;
+}
+ul {
+  padding: 0;
+  margin: 0;
+  li {
+    list-style: none;
+  }
+}

src/theme.less

@@ -0,0 +1,9 @@
+
+// Custom Theming for NG-ZORRO
+// For more information: https://ng.ant.design/docs/customize-theme/en
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+
+// Override less variables to here
+// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
+
+// @primary-color: #1890ff;