Koa+TypeScript從0到1實現簡易CMS框架（一）：項目搭建以及配置

目錄

• Koa+TypeScript從0到1實現簡易CMS框架（一）：項目搭建以及配置
• Koa+TypeScript從0到1實現簡易CMS框架（二）：路由自動加載與全局異常處理
• Koa+TypeScript從0到1實現簡易CMS框架（三）：用戶模型、參數校驗與用戶註冊接口

項目地址：koa-typescript-cms

前言

最近學習了慕課網七月老師的《從0到1手把手教你用Node.js+KOA2打造超好用的Web框架》，本身使用TypeScript重構了一個簡單的cms框架，具備路由自動註冊、全局異常處理、參數校驗、JWT鑑權、權限管理等cms基礎功能。

主要工具庫

• koa web框架
• koa-bodyparser 處理koa post請求
• koa-router koa路由
• sequelize、sequelize-typescript、mysql2 ORM框架與Mysql
• validator、class-validator 參數校驗
• jsonwebtoken jwt
• bcryptjs 加密工具
• reflect-metadata 給裝飾器添加各類信息
• nodemon 監聽文件改變自動重啓服務
• lodash 很是好用的工具函數庫

項目目錄

├── dist                                        // ts編譯後的文件
├── src                                         // 源碼目錄
│   ├── components                              // 組件
│   │   ├── app                                 // 項目業務代碼
│   │   │   ├── api                             // api層
│   │   │   ├── service                         // service層
│   │   │   ├── model                           // model層
│   │   │   ├── validators                      // 參數校驗類
│   │   │   ├── lib                             // interface與enum
│   │   ├── core                                // 項目核心代碼
│   │   ├── middlewares                         // 中間件
│   │   ├── config                              // 全局配置文件
│   │   ├── app.ts                              // 項目入口文件
├── tests                                       // 單元測試
├── package.json                                // package.json                                
├── tsconfig.json                               // ts配置文件
複製代碼

項目初始化

初始化package.json

建立項目文件夾，再控制檯中打開此文件夾，輸入npm init -y初始化package.json文件。

初始化TypeScript配置文件

根目錄運行tsc --init後，自動建立tsconfig.json文件，完成後，執行npm install typescript ts-node @types/node命令

tsconfig.json文件源碼：

{
  "compilerOptions": {
    "target": "ES2015",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "typeRoots": ["./node_modules/@types"],                       /* List of folders to include type definitions from. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  },
  "exclude": ["node_modules"],
  "include": ["src"]
}
複製代碼

初始化koa服務

執行npm install koa @types/koa命令 在根目錄建立src文件夾，並在文件夾下建立app.ts文件

app.ts文件代碼：

import Koa from 'koa';
const app = new Koa()

app.listen(3000);

console.log('Server running on port 3000');
複製代碼

使用nodemon自動監聽文件改變並重啓服務

執行npm install nodemon命令
修改package.json文件中的scripts字段
添加"start": "nodemon -e ts,tsx --exec ts-node ./src/app.ts"
添加此命令後，nodemon會監聽src目錄下文件改變，自動重啓

修改後：

"scripts": {
    "start": "nodemon -e ts,tsx --exec ts-node ./src/app.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
}
複製代碼

建立配置文件

再src目錄建立config文件夾，並建立config.ts文件

定義各種Interface

config interface

export interface configInterface {
  environment?: string; // 環境變量
  database: databaseInterface; // 數據庫配置
  security: securityInterface; // token生成配置
  wx: wxInterface; // 微信小程序參數配置
}
複製代碼

security interface

export interface securityInterface {
  secretKey?: string; // jwt的secretKey
  expiresIn?: number; // jwt的失效時間
}
複製代碼

datebase interface

export interface databaseInterface {
  dbName: string; // 數據庫名稱
  host: string; // 數據庫地址
  port: number; // 數據庫端口
  user: string; // 數據庫用戶名
  password?: string; // 數據庫密碼
}
複製代碼

wx interface

export interface wxInterface {
  AppID?: string; // AppID
  AppSecret?: string; // AppSecret
  LoginUrl?: string // 小程序登陸請求地址
}
複製代碼

所有配置代碼

export const config: configInterface = {
  environment: "dev",
  database: {
    dbName: "koacms",
    host: "localhost",
    port: 3306,
    user: "root",
    password: ""
  },
  security: {
    secretKey: "5465asd6as5d4as65d46sd",
    expiresIn: 60 * 60 * 24 * 30
  },
  wx: {
    AppID: "你的AppID",
    AppSecret: "你的AppSecret",
    LoginUrl: 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code'
  }
};
複製代碼

下一篇：Koa+TypeScript從0到1實現簡易CMS框架（二）：路由自動加載與全局異常處理