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框架（二）：路由自动加载与全局异常处理