Vue+ElementUIに基づくバックグラウンド管理システム開発のまとめ

4531 ワード
バックグラウンド管理 element-ui vue.js
第一歩:ツールの紹介
仕事がうまくいくにはまず道具を利する必要がありますので、まずこのプロジェクトで使われた道具をまとめてみます.主に自分に慣れていなくて、初めて触れたもののまとめです.これらのツールは大体3種類に分けられます.プロジェクト管理ツール、プロジェクト包装ツール、プロジェクト運行依存です.
プロジェクト管理ツール
SourceTree:無料Gitグラフィックス管理ツール
プロジェクト包装ツール
Webpack:モジュール包装機
プロジェクトの実行依存
Nodejs:サーバ端の、非遮断式I/Oの、イベント駆動
開発仕様
  • カスタム属性命名プレフィックス:
  • のすべての経路構成(テスト、シミュレーション)などのアドレスは、別のファイル集中管理によって、入口ファイルmian.jsに
    • を導入する.
    問題とまとめ
    1:変数名
  • 1.1 input入力ボックスのバインディングに関する変数(this)の名前は、loadData内のGet方法のパラメータ(reqParam)と一致する.さらにinputのイベントバインディング関数のパラメータ(this)もこれと一致した.入力ボックスを条件としてクエリーを行う場合、ボックスに値を入力すると、get方法のパラメータがバインディングの値
    • を増加する.
  • .inputにおけるv-modelバインディングの値は、バックエンド所定のフィールドを直接使用することができず、inputコンポーネントの@changeイベントが応答できなくなる.
  • 1.3 v-modelの変数は点で取得できますが、propの変数は取得できません.
    • 2:element UIコンポーネント
  • 2.10テーブル:el-table-columnでは、scopeは現在の行または列のすべてのデータ情報
    • を取得することができます.
  • 2.1.1 tableテーブル:el-tableコンポーネントにバインディングされたdataタイプは配列でなければならず、el-table-columnのpropはdata[x]オブジェクトの属性名に対応しなければならず、dataはバインディングされたサーバがデータreponse.dataのデータ構造を返す必要があります.
    lr
  • 2.2すべての検証が必要なデータは、formで小包(el-formグループ価格のv-modelバインディングの変数はaFormで定義されています).el-formコンポーネントのmodel,ref,rules関係:(:model="aForm";ref="aForm";rules="aRules")Form-Intemコンポーネント内の要素バインディングのデータ:model=「aForm.xxx」の形.dataが戻ってきたreturnの中で、aRules:{xxx:}、xxx:「{}」.
    • .
  • .多選枠の検証[el-select]について、プロップ属性が設定されている場合、validatorの検証がある場合、トリガの条件は、changeを追加する必要があり、@changeイベントを設定する必要がない
    productPriceType: [
                        { validator: checkType, trigger: 'blur,change' }
                  ]
    • .
    3:サーバから返されるデータ処理
    プロジェクトでバックエンドサーバに返されたデータは多くのところで処理が必要です.サーバから返されたデータは基本的にJson形式です.
  • 1.1戻るjsonデータは文字列タイプ
    • である.
      ：JSONstring       
{
"orgPay":{"query":"20.00","pay":"2.50"},
"orgPayZhiMa":{"check":"2.50"},
"bankauth":{"mobilecode":"0.05","bankauth":"0.95","bankauth3":"0.90"},
"facereco":{"ocr":"0.10","liveExamVSIDPhoto":"0.20","policeVSLiveExam":"1.70"},
"psnZhiMa":{"check":"2.00"},
"psnCheck":{"idInfoCheck":"0.85"},
"bizConfirm":{"bizCheck":"2.50"},
"telecomauth":{"telecomauth":"1.00"}}

     JSON        js        ，  ，       
（ ）：eval  
var jsObj = eval( "(" + JSONstring + ")" )
    ：
               eval     JavaScript               （expression）     ，       （statement）    json     json  。
        eval    JSON          ，        ，   eval      JSON   ，          （     ）
（ ）：JSON.parse()
    ：
    JSON.parse()    JSON            JavaScript
    4:サーバのデータを返します.
    -1要求されたデータフォーマットを参照しても良いです.
      ：put    "content"        ***json      ***
let json = {"orgPay":{"query": priceForm.orgPay_query, "pay": priceForm.orgPay_pay },
            "orgPayZhiMa": {"check": priceForm.orgPayZhiMa_check },
            "bankauth": {"mobilecode": priceForm.bankauth_mobilecode, "bankauth": priceForm.bankauth_bankauth , "bankauth3": priceForm.bankauth_bankauth3 },
            "facereco": {"ocr": priceForm.facereco_ocr, "liveExamVSIDPhoto": priceForm.facereco_liveExamVSIDPhoto, "policeVSLiveExam": priceForm.facereco_policeVSLiveExam },
            "psnZhiMa": {"check": priceForm.psnZhiMa_check },
            "psnCheck": {"idInfoCheck": priceForm.psnCheck_idInfoCheck },
            "bizConfirm": {"bizCheck": priceForm.bizConfirm_bizCheck },
            "telecomauth": {"telecomauth": priceForm.telecomauth_telecomauth }
             };
let content  = JSON.stringify(json); ***JavaScript         。***
    5:精度の制御
    バックエンドデータの精度に対する要求は、フロントエンドで制御されます.すなわち、検証時に制御されます.
  • :パーズFloat(x x)は文字列xxを解析して浮動小数点を返します.最初のxはnumber
    • でなければなりません.
  • :x.toFixed(2)数字を文字列に変換し、結果の小数点以下に指定桁の数字がある
    • プロジェクトの既存バージョンに関するいくつかの疑惑
    1.1ユーザ管理プレート
    改ページスタイル:最初の更新で全ページを表示できませんでした.バックエンドデータの戻り誤差があります.
    NodeJS子プロセス:exec、fork、spawn