commit

package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "~13.0.0",
         "@angular/platform-browser-dynamic": "~13.0.0",
         "@angular/router": "~13.0.0",
+        "axios": "^0.26.0",
         "normalize-scss": "^7.0.1",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
@@ -3109,6 +3110,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -5379,7 +5388,6 @@
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -14257,6 +14265,14 @@
         }
       }
     },
+    "axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz",
@@ -16084,8 +16100,7 @@
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
-      "dev": true
     },
     "forwarded": {
       "version": "0.2.0",

package.json

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

src/app/app-routing.module.ts

@@ -4,21 +4,20 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 10:52:53
+ * @LastEditTime: 2022-03-09 10:52:56
  */
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from "@angular/router";
-import { HomeComponent } from './pages/home/home.component';
+import { HomeComponent } from "./pages/home/home.component";
-import { UserComponent } from './pages/user/user.component';
+import { UserComponent } from "./pages/user/user.component";
-
 const routes: Routes = [
   // 路由前面的路径不需要加/
   {
-    path: '',
+    path: "",
     component: HomeComponent,
   },
   {
-    path: 'user',
+    path: "user",
     component: UserComponent,
   },
 ];

src/app/app.component.html

@@ -4,8 +4,11 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 10:55:06
+ * @LastEditTime: 2022-03-09 11:47:49
 -->
 
 <!-- 路由配置后显示的区域 -->
+<!-- <a routerLink="/user">跳转到用户页</a> -->
+<!-- <a router></a> -->
 <router-outlet></router-outlet>
+<!-- <a router></a> -->

src/app/app.component.spec.ts

@@ -1,35 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'learnNg'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('learnNg');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('learnNg app is running!');
-  });
-});

src/app/app.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-08 10:53:14
+ * @LastEditTime: 2022-03-09 11:39:39
  */
 // 引入核心模块
 import { NgModule } from "@angular/core";
@@ -15,11 +15,13 @@ import { AppRoutingModule } from "./app-routing.module";
 // 引入根组件
 import { AppComponent } from "./app.component";
 // @ngModule装饰器 @ngModule接受一个元数据对象 告诉angular如何编译和启动对象\
-import { CoreModule } from "./core/core.module";
+import { CoreModule } from "./universalModel/core.module";
+// 在根模块中引入http模块
+import { HttpClientModule } from "@angular/common/http";
 
 @NgModule({
   declarations: [AppComponent], //配置项目运行的组件
-  imports: [BrowserModule, AppRoutingModule, CoreModule], //配置当前项目运行依赖的其他模块
+  imports: [BrowserModule, AppRoutingModule, CoreModule, HttpClientModule], //配置当前项目运行依赖的其他模块
   providers: [], //配置项目所需要的服务
   bootstrap: [AppComponent], //指定应用的主视图(称为根组件,通过引导AppModule来启动哟应用 这里写的一般是根组件)
 })

src/app/pages/home/components/body/body.component.spec.ts

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

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:07:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 13:34:58
+ * @LastEditTime: 2022-03-09 11:43:01
  */
 import { Component, OnInit } from "@angular/core";
 

src/app/pages/home/components/head/head.component.spec.ts

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

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

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-08 10:34:38
+ * @LastEditTime: 2022-03-09 10:55:03
 -->
 <app-head></app-head>
 <hr />
@@ -14,5 +14,11 @@
   <p>{{ result }}</p>
 </div>
 <app-body></app-body>
+<div class="root">
+  <a routerLink="/user">跳转</a>
+  <!-- <a >跳转到用户页面</a> -->
+  <!-- <a ></a> -->
+  <!-- <a [routerLink]="['/user']"></a> -->
+</div>
 <!-- <app-news></app-news> -->
 <!-- <app-list></app-list> -->

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

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

src/app/pages/home/home.module.ts

@@ -4,20 +4,19 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:01
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 16:58:46
+ * @LastEditTime: 2022-03-09 11:44:08
  */
 import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
+
 import { HomeComponent } from "./home.component";
 import { HeadComponent } from "./components/head/head.component";
 import { BodyComponent } from "./components/body/body.component";
-import { ComponentsModule } from "src/app/components/components.module";
-// 引入双向数据绑定
-import { FormsModule } from "@angular/forms";
 
+// import { AppRoutingModule } from "../../app-routing.module";
+import { PublicModule } from "src/app/universalModel/public.module";
 @NgModule({
   declarations: [HomeComponent, HeadComponent, BodyComponent],
-  imports: [CommonModule, ComponentsModule, FormsModule],
+  imports: [PublicModule],
   exports: [HomeComponent, HeadComponent, BodyComponent],
 })
 export class HomeModule {}

src/app/pages/pages.module.ts

@@ -4,18 +4,17 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:03:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 09:58:23
+ * @LastEditTime: 2022-03-09 11:30:57
  */
 import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
 import { HomeModule } from "./home/home.module";
 import { UserModule } from "./user/user.module";
 
 // 引入并且配置服务
 @NgModule({
   declarations: [],
-  imports: [CommonModule, HomeModule, UserModule],
+  imports: [HomeModule, UserModule],
   providers: [],
-  exports: [CommonModule, HomeModule, UserModule],
+  exports: [HomeModule, UserModule],
 })
 export class PagesModule {}

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

@@ -4,8 +4,16 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:45:56
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 11:31:02
+ * @LastEditTime: 2022-03-09 10:56:33
 -->
 <p>user works!</p>
 <app-info></app-info>
 <app-mine></app-mine>
+<div class="root">
+  <a routerLink="/">跳转回主页</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.spec.ts

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

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

@@ -1,15 +1,56 @@
-import { Component, OnInit } from '@angular/core';
+/*
-
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-04 10:45:56
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-08 17:32:59
+ */
+import { Component, OnInit } from "@angular/core";
+import { AxiosService } from "src/app/services/axios.service";
+import { RequestService } from "src/app/services/request.service";
 @Component({
-  selector: 'app-user',
+  selector: "app-user",
-  templateUrl: './user.component.html',
+  templateUrl: "./user.component.html",
-  styleUrls: ['./user.component.scss']
+  styleUrls: ["./user.component.scss"],
 })
 export class UserComponent implements OnInit {
-
+  constructor(public httpApi: RequestService, public axiosApi: AxiosService) {}
-  constructor() { }
+  public list: any;
-
+  ngOnInit(): void {}
-  ngOnInit(): void {
+  // async getApiData() {
+  //   try {
+  //     let res: any = await this.httpApi.getRequest();
+  //     this.list = res.articles;
+  //     console.log(this.list);
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
+  // }
+  async getApiData() {
+    try {
+      let res: any = await this.axiosApi.getApiData();
+      this.list = res.articles;
+      console.log(this.list);
+    } catch (err) {
+      console.log(err);
+    }
   }
 
+  async postUserData() {
+    let userInfo = {
+      user: {
+        email: "2333@qq.com",
+        username: "王五",
+        password: "31415926",
+      },
+    };
+    JSON.stringify(userInfo);
+    try {
+      let res = await this.httpApi.postRequest(userInfo);
+      console.log(res);
+    } catch (error) {
+      console.log(error);
+    }
+  }
 }

src/app/pages/user/user.module.ts

@@ -4,18 +4,17 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-04 10:42:33
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-07 11:29:54
+ * @LastEditTime: 2022-03-09 11:31:48
  */
 import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
+
-import { ComponentsModule } from "src/app/components/components.module";
 import { InfoComponent } from "./components/info/info.component";
 import { MineComponent } from "./components/mine/mine.component";
 import { UserComponent } from "./user.component";
-
+import { PublicModule } from "src/app/universalModel/public.module";
 @NgModule({
   declarations: [InfoComponent, MineComponent, UserComponent],
-  imports: [CommonModule, ComponentsModule],
+  imports: [PublicModule],
   exports: [InfoComponent, MineComponent, UserComponent],
 })
 export class UserModule {}

src/app/services/axios.service.ts

@@ -0,0 +1,23 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-08 17:23:05
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-09 11:37:17
+ */
+import { Injectable } from "@angular/core";
+import axios from "axios";
+@Injectable({
+  providedIn: "root",
+})
+export class AxiosService {
+  constructor() {}
+  async getApiData() {
+    const res = await axios.get("http://localhost:3000/api/articles");
+    console.log(res.data);
+    return new Promise<any>((resolve, reject) => {
+      resolve(res.data);
+    });
+  }
+}

src/app/services/request.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { RequestService } from './request.service';
-
-describe('RequestService', () => {
-  let service: RequestService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(RequestService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/request.service.ts

@@ -4,16 +4,18 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-08 10:51:22
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-08 14:52:32
+ * @LastEditTime: 2022-03-08 17:06:01
  */
 import { Injectable } from "@angular/core";
 // 引入rxjs
 import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 @Injectable({
   providedIn: "root",
 })
 export class RequestService {
-  constructor() {}
+  constructor(public http: HttpClient) {}
+  // public result: any;
   // 同步方法
   getData() {
     console.log("%c获取需要的数据", "color:pink");
@@ -35,4 +37,28 @@ export class RequestService {
     });
   }
   // 过一秒以后撤回刚才的操作
+
+  //执行get请求
+  getRequest() {
+    return new Promise((resolve, reject) => {
+      let api = "http://localhost:3000/api/articles";
+      this.http.get(api).subscribe((response: any) => {
+        resolve(response);
+        reject("请求失败");
+      });
+    });
+  }
+
+  // 执行post请求
+  postRequest(userInfo: Object) {
+    return new Promise((resolve, reject) => {
+      let api = "http://localhost:3000/api/users";
+      const httpOptions = {
+        headers: new HttpHeaders({ "Content-Type": "application/json" }),
+      };
+      this.http.post(api, userInfo, httpOptions).subscribe((response) => {
+        resolve(response);
+      });
+    });
+  }
 }

src/app/services/storage.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { StorageService } from './storage.service';
-
-describe('StorageService', () => {
-  let service: StorageService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(StorageService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/universalModel/public.module.ts

@@ -0,0 +1,20 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-09 11:13:29
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-09 11:40:26
+ */
+import { NgModule } from "@angular/core";
+import { AppRoutingModule } from "../app-routing.module";
+import { ComponentsModule } from "src/app/components/components.module";
+import { CommonModule } from "@angular/common";
+// 引入双向数据绑定
+import { FormsModule } from "@angular/forms";
+@NgModule({
+  declarations: [],
+  imports: [AppRoutingModule, ComponentsModule, FormsModule, CommonModule],
+  exports: [AppRoutingModule, ComponentsModule, FormsModule, CommonModule],
+})
+export class PublicModule {}