## 基礎搭建
### MVC配置
```
// 安裝模板
yarn add ejs --save
// main.ts
import { join } from 'path';
import { NestFactory } from '@nestjs/core';
// 引入app模塊
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './common/filters/http-exception.filter';
import { ApiParamsValidationPipe } from './common/pipe/api-params-validation.pipe';
import { NestExpressApplication } from "@nestjs/platform-express";
async function bootstrap() {
// 工廠方式創建服務器
const app = await NestFactory.create<NestExpressApplication>(AppModule);
//設置 視圖層
app.useStaticAssets(join(__dirname, '.', 'public'));
app.setBaseViewsDir(join(__dirname, '.', 'views'));
app.setViewEngine('ejs');
// 設置錯誤處理
app.useGlobalFilters(new HttpExceptionFilter());
app.useGlobalPipes(new ApiParamsValidationPipe());
await app.listen(3001); // 使用3000端口監聽應用程序
}
bootstrap(); // 啟動應用程序 -> localhost:3000
~~~
```
### 錯誤處理
#### 全局錯誤代碼
api-error-code.enum.ts
```
export enum ApiErrorCode {
TIMEOUT = -1, // 系統繁忙
SUCCESS = 0, // 成功
USER_ID_INVALID = 10001, // 用戶id無效
USER_NAME_HAVA = 10002, // 用戶已經存在
USER_NAME_NO = 10003, // 用戶無效
USER_NICKNAME_NO = 10004, // 用戶昵稱無效
USER_EMAIL_NO = 10005 // 用戶郵箱無效
}
```
#### 全局過濾錯誤
http-exception.filter.ts
```
import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from '@nestjs/common';
import { ApiException } from '../exceptions/api.exception';
@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
catch(exception, host: ArgumentsHost) {
const ctx = host.switchToHttp();
const response = ctx.getResponse();
const request = ctx.getRequest();
const status = exception.getStatus();
if (exception instanceof ApiException) {
response
.status(status)
.json({
errorCode: exception.getErrorCode(),
errorMessage: exception.getErrorMessage(),
date: new Date().toLocaleDateString(),
path: request.url,
});
} else {
response
.status(status)
.json({
statusCode: status,
date: new Date().toLocaleDateString(),
path: request.url,
});
}
}
}
```
#### 全局管道錯誤
api-params-validation.pipe.ts
```
import { ArgumentMetadata, PipeTransform, Injectable, HttpStatus } from '@nestjs/common';
import { ApiException } from '../exceptions/api.exception';
import { plainToClass } from 'class-transformer';
import { validate } from 'class-validator';
@Injectable()
export class ApiParamsValidationPipe implements PipeTransform {
async transform(value: any, metadata: ArgumentMetadata) {
const { metatype } = metadata;
// 如果參數不是 類 而是普通的 JavaScript 對象則不進行驗證
if (!metatype || !this.toValidate(metatype)) {
return value;
}
// 通過元數據和對象實例,去構建原有類型
const object = plainToClass(metatype, value);
const errors = await validate(object);
if (errors.length > 0) {
// 獲取到第一個沒有通過驗證的錯誤對象
const error = errors.shift();
const constraints = error.constraints;
const contexts = error.contexts;
// 將未通過驗證的字段的錯誤信息和狀態碼,以ApiException的形式拋給我們的全局異常過濾器
for (const key in constraints) {
throw new ApiException(constraints[key], contexts[key].errorCode, HttpStatus.BAD_REQUEST);
}
}
return value;
}
private toValidate(metatype): boolean {
const types = [String, Boolean, Number, Array, Object];
return !types.find((type) => metatype === type);
}
}
```
#### 獲取錯誤
api.exception.ts
```
import { HttpException, HttpStatus } from '@nestjs/common';
import { ApiErrorCode } from '../enums/api-error-code.enum';
export class ApiException extends HttpException {
private errorMessage: string;
private errorCode: ApiErrorCode;
constructor(errorMessage: string, errorCode: ApiErrorCode, statusCode: HttpStatus) {
super(errorMessage, statusCode);
this.errorMessage = errorMessage;
this.errorCode = errorCode;
}
getErrorCode(): ApiErrorCode {
return this.errorCode;
}
getErrorMessage(): string {
return this.errorMessage;
}
}
```
- css用法技巧
- 陰影被后面div遮擋
- 繪制一個三角形
- 圖像的灰白處理
- 一切居中
- 禁用鼠標事件
- 模糊文本
- 字體省略號
- 垂直居中
- box投影
- css動畫
- javaScript常見工具封裝
- 地址欄參數獲取
- 日期格式化
- Ajax
- scroll
- 緩動函數
- 事件綁定
- 阻止冒泡和默認行為
- 偽數組正常化
- 日期生成
- 拷貝
- javaScript基本知識
- javaScript基本知識
- javascript常見代碼塊
- vue常見問題
- 獲取參數
- vue常見問題/vue混入
- v-html指令問題集錦
- 正則獲取html中所有的中文字符
- 時間格式化
- 監聽路由的變化
- vue移動端滑動事件
- vue移動端圖片點擊放大
- 打包后背景圖片404的問題
- webpack打包后部分樣式失效
- IE的兼容問題
- post請求后臺無法接受參數
- 驗證碼
- vue開啟Gzip報錯
- v-html修改樣式
- app.css文件過大
- vue中中使用iframe
- babel對es6編譯不徹底 出現ie不兼容的問題
- vue單頁應用優化
- 吸頂問題
- 跨域session無法共享
- 登陸返回上一頁
- axois中使用delete數據傳遞問題
- 監聽數組對象數組中的屬性
- webpack
- webpack基本使用
- webpack打包刪除注釋
- js插件
- 輪播圖
- 面向對象模板
- 左滑右滑
- 存儲
- appcan
- appcan
- js深入研究
- 數組的參數傳遞問題
- 采用jquery的方法載入公共頁面后出現閃爍的問題
- html拼接無法綁定事件
- 吸頂問題
- async配合promise使用
- flutter
- 模擬器加載報錯
- 底部導航實現
- 模擬器出現錯誤
- flutter在idea下的快捷鍵
- flutter學習筆記
- 設計模式
- 觀察者模式
- nest
- nest基本說明
- nest錯誤處理
- vue高級
- 動態注入路由
- nest實戰
- 一項目準備
- window
- 端口進程被占
- mis包
- reactNative
- react-native-router-flux
- esLint
- eslint
- Cesium