使用 RESTful API、JSON 和 JavaScript 创建基于 Web 的工具

此示例展示如何创建一个通过简单公式计算债券价格的 Web 应用程序。它使用 MATLAB^® Production Server™ RESTful API 和 MATLAB 数据类型的 JSON 表示来描述使用 MATLAB Production Server 的端到端工作流。通过在 Web 界面中输入以下已知值来运行此示例：

票面价值（或到期债券价值）- M
优惠券支付 - C
支付次数 - N
利率 - i

该应用程序根据以下公式计算价格（P）：

P = C * ( (1 - (1 + i)^-N) / i ) + M * (1 + i)^-N

使用 Web 应用程序中的滑块来为不同的债券定价。

步骤 1：编写 MATLAB 代码

在 MATLAB 中写入以下代码来为债券定价。使用文件名 pricecalc.m 保存代码。

function price = pricecalc(face_value, coupon_payment,...
                           interest_rate, num_payments)
    M = face_value;
    C = coupon_payment;
    N = num_payments;
    i = interest_rate;
    
    price = C * ( (1 - (1 + i)^-N) / i ) + M * (1 + i)^-N;

步骤 2：使用 Production Server 存档编译器创建可部署存档

要为此示例创建可部署存档：

在 App 选项卡上，选择 Production Server 存档编译器。
在 Exported Functions 字段中，添加 pricecalc.m。
将存档重命名为 BondTools。
点击打包。

生成的可部署存档 BondTools.ctf 位于工程的输出文件夹中。

步骤 3：将可部署存档放在服务器上

如果需要，请从 https://www.mathworks.com/products/compiler/mcr 下载 MATLAB Runtime。有关详细信息，请参阅MATLAB Production Server 支持的 MATLAB Runtime 版本。
使用 mps-new 创建服务器。有关详细信息，请参阅使用命令行创建服务器实例。如果您尚未设置服务器环境，请参阅 mps-setup 以了解更多信息。
如果尚未指定 MATLAB Runtime 的位置，请编辑服务器配置文件 main_config 并指定 --mcr-root 的路径。有关详细信息，请参阅 Server Configuration 属性。
使用 mps-start 启动服务器，并使用 mps-status 验证它是否正在运行。
将 BondTools.ctf 文件复制到服务器上的 auto_deploy 文件夹进行托管。

步骤 4：在服务器上启用跨源资源共享 (CORS)

通过编辑服务器配置文件 main_config 并指定可向服务器发出请求的域源列表来启用跨域资源共享 (CORS)。例如，将 cors-allowed-origins 选项设置为 --cors-allowed-origins * 可允许来自任何域的请求访问服务器。有关详细信息，请参阅cors-allowed-origins和Server Configuration 属性。

步骤 5：使用 RESTful API 和 JSON 编写 JavaScript 代码

使用 RESTful API 和 MATLAB 数据类型的 JSON 表示形式作为指南，编写以下 JavaScript^® 代码。将此代码保存为名为 calculatePrice.js 的 JavaScript 文件。

代码：

calculatePrice.js

//calculatePrice.js : JavaScript code to calculate the price of a bond.
        function calculatePrice() 
        {
            var cp = parseFloat(document.getElementById('coupon_payment_value').value);
            var np = parseFloat(document.getElementById('num_payments_value').value);
            var ir = parseFloat(document.getElementById('interest_rate_value').value);
            var vm = parseFloat(document.getElementById('facevalue_value').value);

            // A new XMLHttpRequest object
            var request = new XMLHttpRequest();
            //Use MPS RESTful API to specify URL
            var url = "http://localhost:9910/BondTools/pricecalc";
            
            //Use MPS RESTful API to specify params using JSON
            var params = { "nargout":1,
                           "rhs": [vm, cp, ir, np] };

            document.getElementById("request").innerHTML = "URL: " + url + "<br>"
                    + "Method: POST <br>" + "Data:" + JSON.stringify(params);

            request.open("POST", url);

            //Use MPS RESTful API to set Content-Type
            request.setRequestHeader("Content-Type", "application/json");

            request.onload = function()
            {   //Use MPS RESTful API to check HTTP Status
                if (request.status == 200) 
                {
                    // Deserialization: Converting text back into JSON object
                    // Response from server is deserialized 
                    var result = JSON.parse(request.responseText);
					
                    //Use MPS RESTful API to retrieve response in "lhs"
                    if('lhs' in result)
                    {  document.getElementById("error").innerHTML = "" ;
                       document.getElementById("price_of_bond_value").innerHTML = "Bond Price: " + result.lhs[0].mwdata; }
                    else { document.getElementById("error").innerHTML = "Error: " + result.error.message; }
                }
                else { document.getElementById("error").innerHTML = "Error:" + request.statusText; }
                document.getElementById("response").innerHTML = "Status: " + request.status + "<br>"
                        + "Status message: " + request.statusText + "<br>" +
                        "Response text: " + request.responseText;
            }
            //Serialization: Converting JSON object to text prior to sending request
            request.send(JSON.stringify(params)); 
        }

        //Get value from slider element of "document" using its ID and update the value field
        //The "document" interface represent any web page loaded in the browser and
        //serves as an entry point into the web page's content.
        function printValue(sliderID, valueID) {
            var x = document.getElementById(valueID);
            var y = document.getElementById(sliderID);
            x.value = y.value;
        }
        //Execute JavaScript and calculate price of bond when slider is moved
        function updatePrice(sliderID, valueID) {
            printValue(sliderID, valueID);
            calculatePrice();
        }

步骤 6：在 HTML 代码中嵌入 JavaScript

使用以下语法将上一步中的 JavaScript 嵌入到以下 HTML 代码中：

<script src="calculatePrice.js" type="text/javascript"></script>

将此代码保存为名为 bptool.html 的 HTML 文件。

代码：

bptool.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>Bond Pricing Tool</title>
</head>
<body>
    <!-- Embed the JavaScript code here by referencing calculatePrice.js -->
    <script src="calculatePrice.js" type="text/javascript"></script>
    <script>
        //Helper Code: Execute JavaScript immediately after the page has been loaded
        window.onload = function() {
            printValue('coupon_payment_slider', 'coupon_payment_value');
            printValue('num_payments_slider', 'num_payments_value');
            printValue('interest_rate_slider', 'interest_rate_value');
            printValue('facevalue_slider', 'facevalue_value');
            calculatePrice();
        }
    </script>
    <h1><a>Bond Pricing Tool</a></h1>
    <h2></h2>
    This example shows an application that calculates a bond price from a simple formula.<p>
    You run this example by entering the following known values into a simple graphical interface:<p>
      <ul>
        <li>Face Value (or value of bond at maturity) - M</li>
        <li>Coupon payment - C</li>
        <li>Number of payments - N</li>
        <li>Interest rate - i</li>
      </ul>
      The application calculates price (P) based on the following equation:<p>
      P = C * ( (1 - (1 + i)^-N) / i ) + M * (1 + i)^-N<p>
      <hr>
      <h3>M: Face Value </h3>
      <input id="facevalue_value" type="number" maxlength="4" oninput="updatePrice('facevalue_value', 'facevalue_slider')"/>
      <input type="range" id="facevalue_slider" value="0" min="0" max="10000" onchange="updatePrice('facevalue_slider', 'facevalue_value')"/>

      <h3>C: Coupon Payment </h3>
      <input id="coupon_payment_value" type="number" maxlength="4" oninput="updatePrice('coupon_payment_value', 'coupon_payment_slider')" />
      <input type="range" id="coupon_payment_slider" value="0" min="0" max="1000" onchange="updatePrice('coupon_payment_slider', 'coupon_payment_value')"/>
            
      <h3>N: Number of payments  </h3>
      <input id="num_payments_value" type="number" maxlength="4" oninput="updatePrice('num_payments_value', 'num_payments_slider')"/>
      <input type="range" id="num_payments_slider" value="0" min="0" max="1000" onchange="updatePrice('num_payments_slider', 'num_payments_value')"/>
      
      <h3>i: Interest rate </h3>
      <input id="interest_rate_value" type="number" maxlength="4" step="0.01" oninput="updatePrice('interest_rate_value', 'interest_rate_slider')"/>
      <input type="range" id="interest_rate_slider" value="0" min="0" max="1" step="0.01" onchange="updatePrice('interest_rate_slider', 'interest_rate_value')"/>

    <h2>BOND PRICE</h2>
    <p id="price_of_bond_value" style="font-weight: bold">
    <p id="error" style="color:red">

    <hr>
    <h3>Request to MPS Server</h3>
    <p id="request">
    
    <h3>Response from MPS Server</h3>
    <p id="response">
    <hr>
</body>
</html>

步骤 7：运行示例

确认部署了 MATLAB 函数的服务器正在运行。在 Web 浏览器中打开 HTML 文件 bptool.html。默认债券价格为 NaN，因为尚未输入任何值。尝试使用以下数值对债券进行定价：

面值 = 1000 美元
息票支付 = 100 美元
支付次数 = 5
利率 = 0.08 （相当于 8%）

最终债券价格为 1079.85 美元。

使用工具中的滑块为不同的债券定价。改变利率会导致债券价格发生剧烈的变化。

View of the bond pricing tool. There are fields that contain values for a bond at maturity, coupon payment, number of payments, interest rate, and the calculated bond price. The bottom section displays HTTP status codes, messages, and payloads for the HTTP request and response.

另请参阅

主题

排除 RESTful API 错误