Express、TypeScript、WebPack编写Web项目后端接口

TypeScript这里不作过多说明，其是JavaScript的一个超集，支持 ES6 标准，具体的语法用法等会在后期博客中说明。简单使用可以参考：https://blog.csdn.net/qq_41061437/article/details/112908807

Express是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。个人感觉可以理解为传统Java开发中的SpringMVC，常作路由使用。

WebPack是一个模块打包器。WebPack的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源。

首先是安装相应的包：

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文件夹，并在其中建立一个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，我定义一个ExpressTestRoutes的路由，在server.js里面引用，其实就相当于导包，使用app.use('/api/expressTest',expressTestRouter )即将该路由加入，定义的监听的端口port是30001，这里直接定义了一个返回“hello world”的接口，等所有编写完毕，可以直接访问/api/express/base/get在页面获取到返回的“hello world”。

编写路由：


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);
        })
    };

}

ts命令解析js：

"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项目后端接口

猜你喜欢