angular工程目录结构说明

世间万物皆对象

发布于 2024-03-20 20:06:32

770

发布于 2024-03-20 20:06:32

文章被收录于专栏：startstart

整体结构说明

文件名称	文件说明
node_modules	npm 安装的第三方依赖
src	存放业务源码
angular.json	angular 配置文件
karma.conf.js	测试配置文件（给 karma 用的）
package.json	项目包文件（node_modulesd 的依赖是根据 package.json 来下载的）
README.md	项目说明文件
tsconfig.json	TypeScript 配置文件
tsconfig.app.json	tsconfig.app.json 是 tsconfig.json 的扩展文件

src 目录下的说明

src

app 根节点

common 常用文件

controller 事件层

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的接口并暴露出去
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));