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

前提：有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"
       ]
   }

    

2. 相关文件夹新建：先新建src/index.ts（这点很重要，防止无法找到主目录）再新建src/controller（用于文件调用）
3. 打开终端：分界面：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 文件夹中找到这些依赖包
4. 打开index.ts文件，输入： 用于配置后台服务

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

    

5. 在src/controller文件夹新建文件 A.ts 并写入相关函数： 用于确定交互成功

   export default class A{
       a(){
           return 1;
       }
   
       b(){
           return 2;
       }
   }

    

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

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

    

7. 浏览器中输入 http://localhost:9600/A/a 和  http://localhost:9600/A/b 根据对应结果确定是否完成交互，返回：                  a：{"d":1,"c":200,"i":"","e":""}        b：{"d":2,"c":200,"i":"","e":""}     即表明交互成功
8. 升级：调用本地文件并显示： 新建文件夹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”:中显示相关内容。

9. 数据库扩展：在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":""} 表示数据已经写入。