工程目录结构说明

整体结构说明

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

polyfills.ts 兼容不同的浏览器

import "zone.js";

angular工程目录结构说明

工程目录结构说明

整体结构说明

src 目录下的说明

热门文章

最新文章

相关课程

相关电子书