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 非常好用的工具函数库

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── 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文件源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"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文件代码:

1
2
3
4
5
6
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目录下文件改变,自动重启

修改后:

1
2
3
4
"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

1
2
3
4
5
6
export interface configInterface {
environment?: string; // 环境变量
database: databaseInterface; // 数据库配置
security: securityInterface; // token生成配置
wx: wxInterface; // 微信小程序参数配置
}

security interface

1
2
3
4
export interface securityInterface {
secretKey?: string; // jwt的secretKey
expiresIn?: number; // jwt的失效时间
}

datebase interface

1
2
3
4
5
6
7
export interface databaseInterface {
dbName: string; // 数据库名称
host: string; // 数据库地址
port: number; // 数据库端口
user: string; // 数据库用户名
password?: string; // 数据库密码
}

wx interface

1
2
3
4
5
export interface wxInterface {
AppID?: string; // AppID
AppSecret?: string; // AppSecret
LoginUrl?: string // 小程序登录请求地址
}

全部配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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框架(二):路由自动加载与全局异常处理

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×