工程目录结构说明
整体结构说明
src 目录下的说明
- src
- app 根节点
- common 常用文件
- controller 事件层
- login.controller.ts login 页面的事件层，代码如下
import { Component, OnInit, Input } from "@angular/core"; import { Router } from "@angular/router"; // 引用login的接口 import { userInfoModel } from "../../modules/login0000/login.module"; @Component({ selector: "", template: "", }) export class LoginController { constructor(private router: Router) {} // 创建变量使用接口类型进行赋值。注意赋值的类型必须和定义接口的类型一致，否则会报错 loginInfo: userInfoModel = { userName: "", userPassword: "", remember: false, }; }
modules 数据接口定义文件
- login.module.ts login 页面的接口定义,代码如下
//定义login的接口并暴露出去 export interface userInfoModel { userName: string; userPassword: string; remember?: boolean; }
pageCommon 组件复用
- header文件夹
- header.component.html 写 ui 的文件
- header.component.scss 写 css 的文件
- header.component.spec.ts 测试文件，不用管
- header.component.ts 写 js 事件的文件
// header.component.ts文件 // 页面使用header组件只需要在html顶部引入<app-header></app-header>就行了 // <app-header></app-header>就是selector的名称，selector修改了引入的也要修改 import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-header", templateUrl: "./header.component.html", styleUrls: ["./header.component.scss"], }) export class HeaderComponent implements OnInit { constructor() {} ngOnInit(): void {} }
- components
- home (home 页面)
- login0000 (login 页面)
- requests
- api.ts
import { get, post } from "./http"; //post(url,params) export const login = (params: any, headers: any) => post("/raku0000/login", params);
config.ts
let mockPort = 4200; export default { isMock: true, mockHost: "http://localhost:" + mockPort + "/", mockPort: mockPort, };
http.ts
/** * 网络请求配置 */ import axios from "axios"; import config from "./config"; axios.defaults.timeout = 50000; const mockHost = config.mockHost; axios.defaults.baseURL = "http://localhost:4200"; /** * http request 拦截器 */ axios.interceptors.request.use( (config: any) => { config.data = JSON.stringify(config.data); config.headers = { "Content-Type": "application/json", }; return config; }, (error: any) => { return Promise.reject(error); } ); /** * http response 拦截器 */ axios.interceptors.response.use( (response: any) => { if (response.data.errCode === 2) { console.log("过期"); } return response; }, (error: any) => { console.log("请求出错：", error); } ); /** * 封装get方法 * @param url 请求url * @param params 请求参数 * @returns {Promise} */ export function get(url: string, params: any) { return new Promise((resolve, reject) => { axios .get(url, { params: params, }) .then((response: any) => { landing(url, params, response.data); resolve(response.data); }) .catch((error: any) => { reject(error); axios .get(mockHost + "assets/mock-data" + url + ".json") .then((response: any) => { //关闭进度条 resolve(response.data); }); }); }); } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url: string, data: any) { return new Promise((resolve, reject) => { axios .post(url, data) .then((response: any) => { //关闭进度条 resolve(response.data); }) .catch((error: any) => { reject(error); axios .get(mockHost + "assets/mock-data" + url + ".json") .then((response: any) => { //关闭进度条 resolve(response.data); }); }); }); } /** * 封装patch请求 * @param url * @param data * @returns {Promise} */ export function patch(url: string, data: any) { return new Promise((resolve, reject) => { axios.patch(url, data).then( (response: any) => { resolve(response.data); }, (err: any) => { msag(err); reject(err); } ); }); } /** * 封装put请求 * @param url * @param data * @returns {Promise} */ export function put(url: string, data: any) { return new Promise((resolve, reject) => { axios.put(url, data).then( (response: any) => { resolve(response.data); }, (err: any) => { msag(err); reject(err); } ); }); } export function fecth( fecth: any, mockUrl: any, url: string, param: any ) { return new Promise((resolve, reject) => { switch (fecth) { case "get": get(url, param) .then(function (response) { resolve(response); }) .catch(function (error) { reject(error); }); break; case "post": post(url, param) .then(function (response) { resolve(response); }) .catch(function (error) { reject(error); }); break; default: break; } }); } //失败提示 function msag(err: any) { if (err && err.response) { switch (err.response.status) { case 400: alert(err.response.data.error.details); break; case 401: alert("未授权，请登录"); break; case 403: alert("拒绝访问"); break; case 404: alert("请求地址出错"); break; case 408: alert("请求超时"); break; case 500: alert("服务器内部错误"); break; case 501: alert("服务未实现"); break; case 502: alert("网关错误"); break; case 503: alert("服务不可用"); break; case 504: alert("网关超时"); break; case 505: alert("HTTP版本不受支持"); break; default: } } } /** * 查看返回的数据 * @param url * @param params * @param data */ function landing(url: string, params: any, data: any) { if (data.code === -1) { } }
- service 共同文件
- app.component.html 页面的根节点里面放的是看路由输出标签
<router-outlet></router-outlet>
- app.component.scss
- app.component.spec.ts
- app.component.ts
- app.module.ts 挂在文件，所有安装的依赖、组件都要在这里面挂载
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { AppComponent } from "./app.component"; import { HeaderComponent } from "./common/pageCommon/header/header.component"; import { FooterComponent } from "./common/pageCommon/footer/footer.component"; import { HomeComponent } from "./components/home/home.component"; import { AppRoutingModule } from "./router/app-routing.module"; import { Login0000Component } from "./components/login0000/login0000.component"; @NgModule({ declarations: [ AppComponent, HeaderComponent, FooterComponent, HomeComponent, Login0000Component, ], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
assets 静态资源文件
- images 图片文件
- styles 样式文件
- bacs.scss 基本的样式
body, textarea, input, select, option { font-size: 14px; color: #333; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"; -webkit-font-smoothing: antialiased; } body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form { margin: 0; } ol, ul, textarea, input, option, th, td { padding: 0; } table { border-collapse: collapse; } ul, li { list-style: none; }
index.html 入口页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>DefaultAngularApp</title> <base href="/" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <app-root></app-root> </body> </html>
- main.ts 入口文件
import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err));
- polyfills.ts 兼容不同的浏览器
import "zone.js";
