# 網頁SOP???--兩個禮拜網頁心得

## 選擇權回測系統
- 功能:
- 輸入介面
- 架構: flask
- 後端取前端值的方式:

    expire_far_near = request.args.get('expire_far_near', default="近月加遠月", type=str)
    call_put = request.args.get('call_put', default="買權加賣權", type=str)
    max_amount_per_month = request.args.get('max_trading_num', default=100, type=int)
    trading_num = request.args.get('trading_num', default=10, type=int)
    least_price = request.args.get('least_price', default=1, type=int)

- SOP
1. 下載一個模板
2. 建立flask架構的資料夾
3. 建立一個虛擬環境
- 方法如下: 先在終端機移動(cd 加路徑)到模板底下的資料夾,然後輸入以下三行指令
- python -m venv venv
- 建立虛擬環境
- venv\scripts\activate
- 進入虛擬環境
- pip install -r requirements.txt
- 裝好所有需要的套件
- python manage.py runserver
- 用python執行 manage.py(原先模板不會有這個py檔需自己建立)

3. manage.py(如何用一個最簡單的py?)
#### 連上伺服器可以開始寫有錢後端的網頁囉
1. 用pingendo寫前端
- 優點
- 排版快速,可以直接用拖曳的
- 可以快速排版不用每次都重新跑cmd
- 它會自動連結js,所以原先預設的按鈕都可以按(除了換頁)
- 字體字型可以直接調整不用寫程式
- 缺點
- 程式碼會偏亂,因為拖曳時會發生程式碼變亂的風險
2. JS-ajax

    function get_value() {
document.getElementById('div10').style.display = document.getElementById('div10').style.display = 'block';
    var expire_far_near = $('input:radio:checked[name="expire_far_near"]').val();
    // var call_put = document.getElementsByName("call_put").value;
    var call_put = $('input:radio:checked[name="call_put"]').val();
    var max_trading_num = document.getElementById("max_trading_num_id").value;
    $.ajax({
        type: "GET",
        url: "/calculate",
        dataType: 'json',
        async: true,
        data: {
//這是從前端送到後端. 有加引號是後端抓到的值.沒加是前方var的值
            'call_put': call_put,
            'max_trading_num': max_trading_num,
        },
        success: function(response) {
            // response是一個從後端傳到前端的變數為前方定義的型態(json)
            var data = response;
            var data1 = JSON.parse(data[0]); //保證金
            var data2 = JSON.parse(data[1]); //累積統計
            var data3 = JSON.parse(data[2]); //未平倉口數
            var data4 = JSON.parse(data[3]); //統計數據
            console.log(typeof(data4));
            draw_chart(data1, data2, data3);
            statical_value(data4);
        },
        beforeSend: function() {
            $('body').loading({
                onStart: function(loading) {
                    loading.overlay.slideDown(400);
                },
                onStop: function(loading) {
                    loading.overlay.slideUp(400);
                }
            });
        },
        complete: function() {
            $('body').loading('stop');
        },
        error: function() {
            console.log("error 3")
        }
    })
};

- 主要程式:
- html/js/py
-