From c39d741074164da1534d0a5a9319f0ed0679b647 Mon Sep 17 00:00:00 2001 From: Ruin <1830275783@qq.com> Date: Wed, 9 Mar 2022 11:48:19 +0800 Subject: [PATCH] commit --- package-lock.json | 21 ++++++- package.json | 1 + src/app/app-routing.module.ts | 15 +++-- src/app/app.component.html | 5 +- src/app/app.component.spec.ts | 35 ----------- src/app/app.module.ts | 8 ++- .../components/body/body.component.spec.ts | 25 -------- .../home/components/body/body.component.ts | 2 +- .../components/head/head.component.spec.ts | 25 -------- src/app/pages/home/home.component.html | 8 ++- src/app/pages/home/home.component.spec.ts | 25 -------- src/app/pages/home/home.module.ts | 11 ++-- src/app/pages/pages.module.ts | 7 +-- src/app/pages/user/user.component.html | 10 +++- src/app/pages/user/user.component.spec.ts | 25 -------- src/app/pages/user/user.component.ts | 59 ++++++++++++++++--- src/app/pages/user/user.module.ts | 9 ++- src/app/services/axios.service.ts | 23 ++++++++ src/app/services/request.service.spec.ts | 16 ----- src/app/services/request.service.ts | 30 +++++++++- src/app/services/storage.service.spec.ts | 16 ----- .../{core => universalModel}/core.module.ts | 0 src/app/universalModel/public.module.ts | 20 +++++++ 23 files changed, 185 insertions(+), 211 deletions(-) delete mode 100644 src/app/app.component.spec.ts delete mode 100644 src/app/pages/home/components/body/body.component.spec.ts delete mode 100644 src/app/pages/home/components/head/head.component.spec.ts delete mode 100644 src/app/pages/home/home.component.spec.ts delete mode 100644 src/app/pages/user/user.component.spec.ts create mode 100644 src/app/services/axios.service.ts delete mode 100644 src/app/services/request.service.spec.ts delete mode 100644 src/app/services/storage.service.spec.ts rename src/app/{core => universalModel}/core.module.ts (100%) create mode 100644 src/app/universalModel/public.module.ts diff --git a/package-lock.json b/package-lock.json index a1a0ee3..bf8445c 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" }, "forwarded": { "version": "0.2.0", diff --git a/package.json b/package.json index 4cfdaed..c362791 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3175414..e76731c 100644 --- a/src/app/app-routing.module.ts +++ b/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 { RouterModule, Routes } from '@angular/router'; -import { HomeComponent } from './pages/home/home.component'; -import { UserComponent } from './pages/user/user.component'; - +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; +import { HomeComponent } from "./pages/home/home.component"; +import { UserComponent } from "./pages/user/user.component"; const routes: Routes = [ // 路由前面的路径不需要加/ { - path: '', + path: "", component: HomeComponent, }, { - path: 'user', + path: "user", component: UserComponent, }, ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 76f9142..04dc2fe 100644 --- a/src/app/app.component.html +++ b/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 --> + + + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 5dfb2e5..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -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!'); - }); -}); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b2d2a21..c550b45 100644 --- a/src/app/app.module.ts +++ b/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来启动哟应用 这里写的一般是根组件) }) diff --git a/src/app/pages/home/components/body/body.component.spec.ts b/src/app/pages/home/components/body/body.component.spec.ts deleted file mode 100644 index 8f4a634..0000000 --- a/src/app/pages/home/components/body/body.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BodyComponent } from './body.component'; - -describe('BodyComponent', () => { - let component: BodyComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BodyComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BodyComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/home/components/body/body.component.ts b/src/app/pages/home/components/body/body.component.ts index cda665d..6ca416a 100644 --- a/src/app/pages/home/components/body/body.component.ts +++ b/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"; diff --git a/src/app/pages/home/components/head/head.component.spec.ts b/src/app/pages/home/components/head/head.component.spec.ts deleted file mode 100644 index 757ce36..0000000 --- a/src/app/pages/home/components/head/head.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeadComponent } from './head.component'; - -describe('HeadComponent', () => { - let component: HeadComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HeadComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(HeadComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 1e31d0f..9ca3524 100644 --- a/src/app/pages/home/home.component.html +++ b/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 -->
@@ -14,5 +14,11 @@

{{ result }}

+
+ 跳转 + + + +
diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts deleted file mode 100644 index 2c5a172..0000000 --- a/src/app/pages/home/home.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HomeComponent } from './home.component'; - -describe('HomeComponent', () => { - let component: HomeComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HomeComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(HomeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/home/home.module.ts b/src/app/pages/home/home.module.ts index d352f18..09f4151 100644 --- a/src/app/pages/home/home.module.ts +++ b/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 {} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index f02c8be..f088551 100644 --- a/src/app/pages/pages.module.ts +++ b/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 {} diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html index 9d519b6..3e01196 100644 --- a/src/app/pages/user/user.component.html +++ b/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 -->

user works!

+
+ 跳转回主页 + + +
    +
  • {{ item.description }}
    • +
+
diff --git a/src/app/pages/user/user.component.spec.ts b/src/app/pages/user/user.component.spec.ts deleted file mode 100644 index e6bf596..0000000 --- a/src/app/pages/user/user.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { UserComponent } from './user.component'; - -describe('UserComponent', () => { - let component: UserComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ UserComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(UserComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/user/user.component.ts b/src/app/pages/user/user.component.ts index 5df0c83..b558f4e 100644 --- a/src/app/pages/user/user.component.ts +++ b/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', - templateUrl: './user.component.html', - styleUrls: ['./user.component.scss'] + selector: "app-user", + templateUrl: "./user.component.html", + styleUrls: ["./user.component.scss"], }) export class UserComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { + constructor(public httpApi: RequestService, public axiosApi: AxiosService) {} + public list: any; + 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); + } + } } diff --git a/src/app/pages/user/user.module.ts b/src/app/pages/user/user.module.ts index 49e6ed0..37ece30 100644 --- a/src/app/pages/user/user.module.ts +++ b/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 {} diff --git a/src/app/services/axios.service.ts b/src/app/services/axios.service.ts new file mode 100644 index 0000000..3635c32 --- /dev/null +++ b/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((resolve, reject) => { + resolve(res.data); + }); + } +} diff --git a/src/app/services/request.service.spec.ts b/src/app/services/request.service.spec.ts deleted file mode 100644 index 8297f36..0000000 --- a/src/app/services/request.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/services/request.service.ts b/src/app/services/request.service.ts index c11eb28..10f7ea7 100644 --- a/src/app/services/request.service.ts +++ b/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); + }); + }); + } } diff --git a/src/app/services/storage.service.spec.ts b/src/app/services/storage.service.spec.ts deleted file mode 100644 index e7fe5b5..0000000 --- a/src/app/services/storage.service.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/src/app/core/core.module.ts b/src/app/universalModel/core.module.ts similarity index 100% rename from src/app/core/core.module.ts rename to src/app/universalModel/core.module.ts diff --git a/src/app/universalModel/public.module.ts b/src/app/universalModel/public.module.ts new file mode 100644 index 0000000..65b666d --- /dev/null +++ b/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 {}