Express、TypeScript、WebPackを使用して、Webプロジェクトのバックエンドインターフェイスを記述します

TypeScriptについては、ここではあまり説明しません。これはJavaScriptのスーパーセットであり、ES6標準をサポートしています。具体的な構文と使用法については、後のブログで説明します。簡単な使用法については、https：//blog.csdn.net/qq_41061437/article/details/112908807を参照してください。

Expressは柔軟なNode.jsWebアプリケーション開発フレームワークであり、最小のスケールを維持し、Webおよびモバイルアプリケーションに強力な機能セットを提供します。個人的には、従来のJava開発ではSpringMVCとして理解でき、ルーティングによく使用されます。

WebPackはモジュールパッカーです。WebPackの主な目的は、JavaScriptファイルを一緒にパッケージ化することであり、パッケージ化されたファイルはブラウザーで使用されますが、任意のリソースを変換、パッケージ化（バンドル）、またはパッケージ化（パッケージ化）することもできます。

1つ目は、対応するパッケージをインストールすることです。

npm install express
npm install mssql
npm install webpack

ここで使用するsqlserverデータベースの場合、最初にconfigフォルダーを作成し、config.tsを作成します。

export const mssqlconfig = {
    user: 'xxx',//用户名
    password: 'xxxxxxxx',//密码
    server: 'xx.xxx.x.xxx',//服务器地址
    database: 'xxx',//数据库
    port: 1433,
    options:{
      encrypt: true,
      enableArithAbort: true
    },
    pool:{
      max:10,
      min:5,
      idleTimeoutMillis:30000
    },
}

完了後、コマンドtscを使用してtsファイルをjsファイルに解析します。

Object.defineProperty(exports,"__esModule",{value:true});
exports.mssqlconfig = void 0;
exports.mssqlconfig = {
    user: 'xxx',//用户名
    password: 'xxxxxxxx',//密码
    server: 'xx.xxx.x.xxx',//服务器地址
    database: 'xxx',//数据库
    port: 1433,
    options:{
      encrypt: true,
      enableArithAbort: true
    },
    pool:{
      max:10,
      min:5,
      idleTimeoutMillis:30000
    },
};

データベース接続クラスdbUtilを作成します。

import mssql = require('mssql');
import config = require("../config/config");

export class dbUtil{
    dbClient(sql:string,callBack:(results:any) => any):any{
        var conn = new mssql.ConnectionPool(config.mssqlconfig);
        var req = new mssql.Request(conn);
        conn.connect(function (err){
           if(err){
               callBack(err);
           } 
           req.query(sql,function(err,results){
               if(err){
                   calBack(err); 
               }
               else{
                   callBack(results); 
               }
               conn.close();
           })

        });

    }
}

tsコマンドで解析した後のjs：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dbUtil = void 0;
var mssql = require("mssql");
var config = require("../config/config");
var dbUtil = /** @class */ (function () {
    function dbUtil() {
    }
    dbUtil.prototype.dbClient = function (sql, callBack) {
        var conn = new mssql.ConnectionPool(config.mssqlconfig);
        var req = new mssql.Request(conn);
        conn.connect(function (err) {
            if (err) {
                console.log(err);
                callBack(err);
            }
            req.query(sql, function (err, results) {
                if (err) {
                    console.log(err);
                    callBack(err);
                }
                else {
                    callBack(results);
                }
                conn.close();
            });
        });
    };
    return dbUtil;
}());
exports.dbUtil = dbUtil;

サーバーフォルダーを作成し、その中にserver.jsファイルを作成します。これはプロジェクト全体への入り口として使用され、package.jsonで構成する必要があります。

"scripts": {
    "start": "npm run server",
    "server": "node server/server.js",
    "lint": "tslint --project tsconfig.json -t codeFrame 'src/**/ts'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot  --config './webpack.config.js' --open",
    "build": "node build/build.js"
  },

構成後、server.jsファイルを書き込みます。

var express = require('express');
var bodyParser = require('body-parser');

var expressTestRouter = require('../routes/ExpressTestRoutes');

var port = process.env.PORT || 30001;
var app = express();
var apiRoutes = express.Router();

//使用bodyparser中间件
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.use(apiRoutes);

app.use('/api/expressTest',expressTestRouter );

apiRoutes.get('/api/base/get', function (req, res) {
    res.json('hello world');
});


module.exports = app.listen(port, function (err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('Listening at http://localhost:' + port + '\n');
});

Expressはここで直接使用されます。server.jsで参照されるExpressTestRoutesのルートを定義します。これは、実際にはガイドパッケージと同等です。app.use（ '/ api / expressTest'、expressTestRouter）を使用して、ルートをに追加します。定義されたモニター。ポートポートは30001です。「helloworld」を返すインターフェイスはここで直接定義されます。すべての書き込みが完了したら、/ api / express / base / getに直接アクセスして、返された「helloworld」を取得できます。ページ。

書き込みルーティング：


import expressTestService = require('../service/impl/ExpressTestServiceImpl');
import express = require('express');

var router = express.Router();


router.get('/getTest', function (req, res) {

    new expressTestService.ExpressTestServiceImpl().getTest(req.query.loginName, function (result) {
        res.send(result);
    })

});


module.exports = router;

ここで示すものにはパラメーターインターフェイスがあります。パラメーターを取得するには、req.queryに続けてパラメーター名を使用します。tsコマンドは次のようにjsに解析されます。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var expressTestService = require("../service/impl/ExpressTestServiceImpl");
var express = require("express");
var router = express.Router();
router.get('/getTest', function (req, res) {
    new expressTestService.ExpressTestServiceImpl().getTest(req.query.loginName, function (result) {
        res.send(result);
    });
});


module.exports = router;

インターフェイスクラスを記述します。

import express = require("express")

export interface ExpressTestService{

    getTest(date:any,callBack:(results:any)=>any):any;
}

tsコマンドはjsに解析され、インターフェースには実際の解析コードはありません：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

次に、インターフェイス実装クラスを記述します。

import expressTestService = require("../ExpressTestService );
import expressTestDao = require("../../dao/ExpressTestDao");

export class ExpressTestServiceImpl implements expressTestService.ExpressTestService {
    
    getTest(date: any, callBack: (results: any) => any): any {
        new expressTestDao .ExpressTestDao().getTest(loginName, function (result) {
            callBack(result);
        })
    };

}

jsを解析するtsコマンド：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressTestServiceImpl = void 0;
var expressTestDao = require("../../dao/ExpressTestDao ");
var ExpressTestServiceImpl = /** @class */ (function () {
    function ExpressTestServiceImpl () {
    }
    //通过月份时间获取绩效
    ExpressTestServiceImpl.prototype.getTest = function (loginName, callBack) {
        new expressTestDao.ExpressTestDao ().getTest (loginName, function (result) {
            callBack(result);
        });
    };

    return ExpressTestServiceImpl ;
}());
exports.ExpressTestServiceImpl = ExpressTestServiceImpl ;

daoレイヤーを作成します。

import db = require("../utils/dbUtil");
import express = require("express")


export class ExpressTestDao {


  getTest(loginName:any, callBack: (results: any) => any): any {
    new db.dbUtil().dbClient("SELECT * FROM TESTDB WHERE LOGIN_NAME = '" + loginName+"'", callBack);
  };


}

tsコマンド分析：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpressTestDao = void 0;
var db = require("../utils/dbUtil");
var ExpressTestDao = /** @class */ (function () {
    function ExpressTestDao() {
    }
    ExpressTestDao.prototype.getTest= function (date, callBack) {
        new db.dbUtil().dbClient("SELECT * FROM TESTDB WHERE LOGIN_NAME= '" + loginName+ "'", callBack);
    };

    return ExpressTestDao;
}());
exports.ExpressTestDao = ExpressTestDao ;

この時点で、プロジェクトプロセス全体が完了しました。プロジェクトを開始し、ツールを使用してテストできます。

server.jsで/ api / base / getを最初にテストします。

次に、データベースに接続するインターフェイスをテストしてデータを取得できます。特別な理由により、このテストはここには示されていません。

Express、TypeScript、WebPackを使用して、Webプロジェクトのバックエンドインターフェイスを記述します

おすすめ