前提:有TS环境配置,有运行VSCode基本经历;

  1. 环境配置:打开任意新文件夹,新建文件:tsconfig.json用于ts配置,内容包括:
{
    "compilerOptions":{
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "declaration": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "preserveConstEnums": true,
        "target": "es2018"
    },
    "exclude": [
        "node_modules"
    ]
}
  1. 相关文件夹新建:先新建src/index.ts(这点很重要,防止无法找到主目录)再新建src/controller(用于文件调用)
  2. 打开终端:分界面:1界面输入:tsc -w ;1界面输入:yarn 或者 yarn init -y 用于初始化;初始化完成后,输入:
yarn add @ctsy/server @ctsy/controller @ctsy/model @ctsy/relation @ctsy/config @ctsy/router @types/node
  1. 打开index.ts文件,输入: 用于配置后台服务
import server from '@ctsy/server'
import {install as RouterInstall} from '@ctsy/router'
server.install({install : RouterInstall})
server.start(9600);//设置端口
  1. 在src/controller文件夹新建文件 A.ts 并写入相关函数: 用于确定交互成功
export default class A{
    a(){
        return 1;
    }

    b(){
        return 2;
    }
}
  1. 开始配置调试文件:打开 .vscode/launch.json 文件,输入相关,再在调试处点击 server-9600 开始运行
{
            "type": "node",
            "request": "launch",
            "name": "server-9600",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/dist/index.js"
        },
  1. 浏览器中输入 http://localhost:9600/A/a 和  http://localhost:9600/A/b 根据对应结果确定是否完成交互,返回:                  a:{"d":1,"c":200,"i":"","e":""}        b:{"d":2,"c":200,"i":"","e":""}     即表明交互成功
  2. 升级:调用本地文件并显示: 新建文件夹data ,添加文件 test.txt ;将 A.ts 文件修改为:
import { readFile } from "fs";
export default class A{
    a(){
        return 1;
    }

    b(){
        return 2;
    }
    fun(){
        return new Promise((s)=>{
        //调用文件:test.txt
            readFile('data/test.txt',(e,d)=>{
                s(d.toString())
            })
        })
    }
}

打开文件 test.txt(文本),添加任意内容,保存后运行,浏览器输入:http://localhost:9600/A/fun,于 “d”:中显示相关内容。

  1. 数据库扩展:在src下新建db/test.ts,输入: 用于对数据库中某一数据的获取
import { DbDataType } from "@ctsy/model";
export default {
    //声明一个类型为整形的数据库表
    UID:{
        primaryKey:true,
        type:DbDataType.bigint,
    }
}

       修改调试文件:用于对数据库的获取

{
            "type": "node",
            "request": "launch",
            "name": "DB",
            "program": "${workspaceFolder}/dist/index.js",
            "env": {
                "DB_HOST":"127.0.0.1",
                "DB_NAME":"test",
                "DB_USER":"root",
                "DB_PWD":"123456",
                "DB_PORT":"3306"
            }
        },

在src的contoller中新建db.ts,输入:与之前的A.ts类似的功能,通过select查找一个名为test的数据库表:

import BaseController from "@ctsy/controller/dist/base_controller";

export default class db extends BaseController{
    async select(){
        return await this.M('test').select();
    }
}

然而在调试显示过程中: http://localhost:9600/db/select/ 输出为:

{"d":"","c":404,"i":"","e":{"m":"DB_DEFINE_NOT_FOUND:test"}}  即文件不存在

这时候试着将vscode重启,并删除dist文件夹,修改db下文件名,再重新编译tsc -w,再去数据库端查看test库中是否有表test,表内UID对应的添加数据,对应用户root修改插件为mysql_native_password;再网页刷新:

typescript做服务端 typescript后端开发_前后端简单交互教程

http://localhost:9600/db/select 输出为: {"d":[{"UID":1},{"UID":2}],"c":200,"i":"","e":""} 表示获取到数据中的内容。获取数据库数据完成。

添加数据至数据库:在db.ts文件中添加函数add如下:

async add(){

return await this.M('test').add({UID:8})

}

通过调用 http://localhost:9600/db/add 直接输出: {"d":{"UID":8},"c":200,"i":"","e":""}  

通过再次调用 http://localhost:9600/db/selec直接输出: {"d":[{"UID":1},{"UID":2},{"UID":8}],"c":200,"i":"","e":""} 表示数据已经写入。