Ruin/ng-frame
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Ruin
2022-03-09 11:48:19 +08:00
parent 8647de8177
commit c39d741074
23 changed files with 185 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

15
src/app/app-routing.module.ts
View File

@@ -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,
},
];

5
src/app/app.component.html
View File

@@ -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> -->

35
src/app/app.component.spec.ts
View File

@@ -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!');
});
});

8
src/app/app.module.ts
View File

@@ -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来启动哟应用 这里写的一般是根组件)
})

25
src/app/pages/home/components/body/body.component.spec.ts
View File

@@ -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();
});
});

2
src/app/pages/home/components/body/body.component.ts
View File

@@ -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";

25
src/app/pages/home/components/head/head.component.spec.ts
View File

@@ -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();
});
});

8
src/app/pages/home/home.component.html
View File

@@ -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> -->

25
src/app/pages/home/home.component.spec.ts
View File

@@ -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();
});
});

11
src/app/pages/home/home.module.ts
View File

@@ -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 {}

7
src/app/pages/pages.module.ts
View File

@@ -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 {}

10
src/app/pages/user/user.component.html
View File

@@ -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>

25
src/app/pages/user/user.component.spec.ts
View File

@@ -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();
});
});

59
src/app/pages/user/user.component.ts
View File

@@ -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);
}
}
}

9
src/app/pages/user/user.module.ts
View File

@@ -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 {}

23
src/app/services/axios.service.ts Normal file
View File

@@ -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);
});
}
}

16
src/app/services/request.service.spec.ts
View File

@@ -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();
});
});

30
src/app/services/request.service.ts
View File

@@ -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);
});
});
}
}

16
src/app/services/storage.service.spec.ts
View File

@@ -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();
});
});

0
src/app/core/core.module.ts → src/app/universalModel/core.module.ts
View File

20
src/app/universalModel/public.module.ts Normal file
View File

@@ -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 {}