TypeScript小白初体验之前后端交互

最新推荐文章于 2026-04-19 19:09:53 发布

原创最新推荐文章于 2026-04-19 19:09:53 发布 · 3.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

TypeScript

本文详细介绍如何使用TypeScript配置后端服务，包括环境搭建、依赖包安装、服务启动及数据库操作等关键步骤。

前提：有TS环境配置，有运行VSCode基本经历；

环境配置：打开任意新文件夹，新建文件：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"
    ]
}

相关文件夹新建：先新建src/index.ts（这点很重要，防止无法找到主目录）再新建src/controller（用于文件调用）
打开终端：分界面：1界面输入：tsc -w ；1界面输入：yarn 或者 yarn init -y 用于初始化；初始化完成后，输入：
```
yarn add @ctsy/server @ctsy/controller @ctsy/model @ctsy/relation @ctsy/config @ctsy/router @types/node 
```
用于依赖包的安装。安装完成后，可以在 node_modules 文件夹中找到这些依赖包

打开index.ts文件，输入：用于配置后台服务

import server from '@ctsy/server'
import {install as RouterInstall} from '@ctsy/router'
server.install({install : RouterInstall})
server.start(9600);//设置端口

在src/controller文件夹新建文件 A.ts 并写入相关函数：用于确定交互成功
```
export default class A{
    a(){
        return 1;
    }

    b(){
        return 2;
    }
}
```

开始配置调试文件：打开 .vscode/launch.json 文件，输入相关，再在调试处点击 server-9600 开始运行

{
            "type": "node",
            "request": "launch",
            "name": "server-9600",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/dist/index.js"
        },

浏览器中输入 http://localhost:9600/A/a 和 http://localhost:9600/A/b 根据对应结果确定是否完成交互，返回： a：{"d":1,"c":200,"i":"","e":""} b：{"d":2,"c":200,"i":"","e":""} 即表明交互成功

升级：调用本地文件并显示：新建文件夹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”:中显示相关内容。

数据库扩展：在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；再网页刷新：

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":""} 表示数据已经写入。

标签

#小白教学 #TypeScript #前后端简单交互教程