フロントとリアエンドを分離

1.1バックエンド

SSM + Mavenのマルチモジュール

闊歩する文書は、説明（コードをコピーし、生成することができます）

郵便配達のテスト

リクエストPUT /取得/ポスト/パッチ/削除

JSON

1.2フロントエンド

Nodejs：フロントエンドサービス

NPM：管理JS ライブラリの依存関係

WebPACKの：静的リソースのパッケージ

vuejs：MVVM（モデルビュービューモデル-way結合）モデル開発のJS ライブラリ

ElementUI：遠位のUI フレーム

　　vuecli：VUE 開発足場、素早く構築することができVUE プロジェクト、含まれていWebPACKのパッケージ化された構成を、サーバーホットスタート

CRUDの2バックエンド

（1）mapper.xml中写選択、挿入、更新、削除

< マッパー名前空間= "cn.itsource.crm.mapper.DepartmentMapper" > 
    < 選択のid = "findAllの" resultTypeと= "部署" > 
        t_departmentから選択* 
    </ 選択> 
    < 選択のid = "findOne" のParameterType = "長い" resultTypeと= "カテゴリー" > 
        ID =＃{ID} t_department SELECT * FROM 
    </ 選択> 
    < インサートID "保存" = のParameterType = "部署" >
        t_departmentへの挿入（名）の値（＃{名前}）
    </ 挿入> 
    < 更新ID = "更新" のParameterType = "カテゴリー" > 
        更新t_departmentセット名=＃{名前}ここで、ID =＃{ID} 
    </ 更新> 
    < 削除ID = "削除" のParameterType = "長いです" > 
        ID =＃{ID} t_departmentから削除
    </ 削除> 
</ マッパー>

（2）対応する制御方法CRUDに書き込ま

3フロントエンドインタフェース処理

（1）の構成xxx.vueページ

（2）ルーティングを設定します

（3）main.jsはaxiosを導入しました

コメント（4）アナログデータ

（5）この内部xxx.vueの内容を変更します

4フロントアクセスバックエンド

どのような状況の下で4.1クロスドメインがあります

（1）同じドメイン、異なるポート=「クロスドメインのローカルホストである：8080 - >ローカルホスト：80

（2）ドメイン名=「クロスドメインの一部とは異なる192.168.0.1 - > 192.168.0.2

（3）は、2人の異なるドメイン名=「クロスドメインの一部miaosha.jd.com - > qianggou.jd.com

4.2クロスドメインの問題

ブラウザ（同一生成元ポリシー）AJAX要求のためのアクセスが異なるドメイン名、または異なるポートであれば、問題のドメイン交差します。

元ポリシー：だけ同じプロトコル、同じ名前、同じポートを許可

クロスドメインの問題を解決する方法4.3

（1）JSONP - 早いです

アクセスリソースへの動的に構築タグ、タグの<script>

欠陥：get要求/サービスのサポートを必要と

nginxの（展開）（2） - クロスドメインの問題を解決するため> - >リバースプロキシ機構

同様に、ブローカー、バックへの要求へのアクセスを訪れ、自分自身に、そして結果は当時、フロントに転送し、nginxの行く舞台裏へのアクセスをしましょう。

短所：デプロイサービスなので、コンフィギュレーション

（3）CORSメカニズム：クロスオリジンリソースの共有「（クロスオリジンリソース共有）」

クロスドメインの問題解決するには：ブラウザの相同戦略（同じプロトコル、同じ名前、同じポート）、そうでない場合は、原点を、クロスドメインの問題があり、

ますブラウザのAjaxリクエストがわずかに異なる治療の選択肢である2つのカテゴリに分かれています。シンプルな要求、特別なリクエスト

　　単純な要求、一度送信され、実行バックグラウンドサービスは、アクセスを必要とします

　　特別なリクエストは、サーバがプリフライトフロントデスクで見つかったプリフライトを実行し、実際のリクエストを送信する必要があり、二回の要求が満たされる最初の時間を送った、要求の必要性実サーバが可能に

注釈ボタンを設定するために使用することができます。@CrossOrigin

注：春版のみ4.2.5後のサポート注釈に必要とされます

CRUDのフロントエンドを完了するために5

（1）リストショー（マウントしてください）

/部署の一覧を取得
 （）{getDepartments
     この .listLoading = trueに;
     // NProgress.start（）を、
    この .. $ Http.patch（ "/部署/リスト"）、その後（（RES）=> {
         // this.total res.data.total =; 
        この .departments = res.data;
         この .listLoading = falseに; 
    }）; 
}

マウントコード：

（）{搭載
     この.getDepartments（）。
}

（2）新

//は、新しいインタフェースを表示
handleAdd（）{
     この .addFormVisible = trueにし、
     この .addForm = { 
        名： '' 
    }; 
}、
// 追加
addSubmit（）{
     この $ refs.addForm.validate（（有効）=。 > {
         IF （有効）{
             この $確認（ '確かにそれを提出するには？'、 'プロンプト'、{}）その後、（（）=> .. {
                 // ロード
                この .addLoadingを= trueに;
                 //はこのthis.addFormをコピーしますオブジェクト{名=パラ： 'XXX'} 
                Object.assignパラ=（{}せ、この.addForm）;
                 この http.put $ =>（ "/部門"、パラ）.then（（RES）。{
                     この .addLoading = falseに、
                     この$メッセージ（{。
                        メッセージ： '成功を送信' 、
                        種類：「成功' 
                    }）; 
                    // リセット確認し
                    、これを参照文献$。[' addForm " ] .resetFields（）;
                     // 追加するクローズダイアログボックス
                    この .addFormVisible = falseにし、
                     この.getDepartments（）; 
                }）; 
            }）;
        } 
    }）。
}

（3）編集上の変更

// 表示編集インタフェース
handleEdit（インデックス、行）{
     この .editFormVisible = trueに、
     この .editForm = Object.assign（{}、行）; 
} 
// 編集
editSubmit（）{
     この $ Refs.editForm.validate（。 （有効）=> {
         IF {（有効）
             この。$確認（ '？確かにそれを提出する'、 'プロンプト'、{}）その後、（（）=>。{
                 この .editLoading = trueに;
                 // NProgress.start（ ）; 
                Object.assignパラ=（{}、聞かせてこの; .editForm）
                 この。$ http.post（ "/部門"、パラ）.then（（RES）=> {
                     この .editLoading = 偽;
                     // NProgress.done（）; 
                    この$メッセージ（{。
                        メッセージ： '提交成功' 、
                        タイプ： '成功' 
                    }）; 
                    この $参考文献[ 'のEditForm' ] .resetFields（）;
                     この .editFormVisible = 偽;
                     この.getDepartments（）; 
                }）; 
            }）; 
        } 
    }）。
}

（4）削除

// 削除
handleDel（インデックス、行）{
     これは（「レコード、それの削除を確認するために、「ヒント」」？$を確認してください。、{ 
        タイプ：「警告」
    }）その後、（（）。 => {
         この .listLoadingは= trueに。
         この $ HTTP ... 削除（ "/部署/" + row.id）.then（（RES）=> {
             この .listLoading = 偽;
             この$メッセージ（{。
                メッセージ： 'が正常に削除された' 、
                タイプの： '成功' 
            }）; 
            この.getDepartments（）; 
        }）;
    }）。キャッチ（（）=> { 

    }）。
}

CRUDは、前端と後端（クロスドメインの問題が）説明する分離しました