ノード+ MySQLの+ベースフレーム構造のVUEの前端と後端とを分離

その他 2019-09-01 20:01:29 訪問数: null

いくつかの単語の男は、直接に、言いました

1.明示により、ノードをインストールします。ノードのプロジェクトを生成します。リンク構築し  http://www.expressjs.com.cn/starter/generator.htmlを。

2フロントVUEプロジェクトをインストールします。

3.構成しVUEクロスドメインの問題、インデックスのconfigファイル内VUEを見つけます。設定proxyTable

 

 

 

 

 

 

4インストールVUEのaxiosは、ajajx組み込みます。

コードに直接5

ノード

VARエクスプレス=は（「表現」が必要）。
VaRのルータ= express.Router（）;
VaRの mysqlの必要=（ 'mysqlの' ）;
VaRのモデルは=（ '../ SQL / sqk'を必要）。
VaRの $ sqlを=（ '../ SQL / sqllist'を必要）。

VAR CONN = mysql.createConnection（models.mysql）。
conn.connect（）; 

router.get（ '/'、関数（REQ、RES、次）{ 
  res.render（ 'インデックス'、{タイトル： 'エクスプレス' }）; 
}）; 
// 注册 
router.get（ '/登録' 機能（REQ、
    VaRの addsql = [req.query.account、req.query.password、req.query.name]; 
    conn.query（SQL、addsql、関数（ERR、結果）{
         IF （ERR）{ 
            にconsole.log（ERR）。
            res.end（ "登録に失敗しました" ）
        } 他の IF （結果）{ 
            res.end（ "正常に登録" ）; 
        } 
        はconsole.log（結果）; 
    }）
}）; 
// サイン 
router.get（「/ログイン」、関数（REQ、RES）{
     VARloginSqlは= '+ req.query.account + "とパスワード= '" + req.query.password + "'" "ここでアカウント=ユーザーからアカウント、パスワードを選択して"' ; 
    conn.query（loginSql、関数（ERR、結果）{
         場合（ERR）{ 
            にconsole.log（ERR）; 
            リターン
        } 
        場合（結果== '' ）{ 
            res.end（ "登录失败" ）
        } 他{ 
            コンソール。ログ（ "OK" ）; 
            res.end（ "登入成功了" ）; 
        } 
    }）
}）。





module.exportsは =ルータ。

mysqlの

// データベース接続の設定; 
module.exportsは= { 
    MySQLの：{ 
        ホスト： 'localhost'の、
        ユーザー： 'ルート' 、
        パスワード： 'AAAAA' 、
        ポート： '3306' 、
        データベース： 'AAAAA' 
    } 
};

SQL文

// SQL语句
するvar sqlAllは= { 
    ユーザー：{ 
        // 注册 
        追加： '（？？？、）ユーザー（アカウント、パスワード、名前）。INSERT INTO VALUES' 
    } 
}; 
module.exportsは = sqlAll。

 リンクと導入のSQL SQL

オープンノードサービスを開始します。

 

 

 

VUE遠位部分

<テンプレート> 
  の<divクラス= "cl_middle"> 
    <DIV CLASS = "cl_middle-すべて"> 
      クラス= "CUR == 0" cl_colorを：<DIV CLASS = "cl_register" @ = "CUR = 0" V-バインドをクリックします？ '：' ' ">注册</ div> 
      <divのクラス=" cl_login」@クリック= "CUR = 1" V-バインド：クラス= "CUR == 1 'cl_color'：？ ''">登入</ DIV > 
    </ div> 

    <divのクラス= "cl_tab_list"> 
      <！ -注册- > 
        <divのクラス= "cl_list cl_register_list" V-ショー= "CUR == 0"> 
        <DIV CLASS = "cl_input"> <入力Vモデル= "アカウント"クラス= "cl_input_text"タイプ= "请输入= "text"のプレースホルダ帐号、あなたは「/> </ div>のサインインログインするアカウントができ
        cl_input」>名前の<divクラス=入力「<入力Vモデル=」パスワード「クラス=」cl_input_text「タイプ=」テキスト「プレースホルダを=」 記号がないかもしれないとき「塗りつぶし/> </ div>
        <DIV CLASS = "cl_input"> <入力Vモデル= "名前"クラス= "cl_input_text"タイプ= "パスワード"プレースホルダ= "请输入密码" /> </ div> 
        <divのクラス= "cl_input"> <入力タイプ= "ボタン" @ = /> </ div>の"注册" =クラス= "cl_input_btn cl_register_btn"の値を"登録"をクリックします
      。</ div> 

      <！ -登陆- > 
      <divのクラスは= "cl_list cl_login_list" V-ショー= "CUR == 1"> 
        <DIV CLASS = "cl_input"> <入力V-モデル= "アカウント"クラス= "cl_input_text"タイプ= "テキスト"プレースホルダ= "请输入账号" /> </ div> 
        < divクラス= "cl_input"> <入力V-モデル= "パスワード"クラス= "cl_input_text"タイプ= "パスワード"プレースホルダ= "请输入密码" /> </ div> 
        <divのクラス= "cl_input">の<input type = "ボタン" @クリック=クラス= "cl_input_btnのcl_login_btn"を"ログイン"値= "登入" /> </ div> 
      </ div> 
    </ div> 
    の<input type = "ボタン"値= "BTN" @クリック= "gitの"> 


  </ div> 

</テンプレート> 

の<script> 
    のエクスポートデフォルト{ 
        名： "登録" 、
        データ（）{ 
            リターン{ 
                CUR： 0 、
                アカウント： '' 、
                パスワード： '' 、
                名前： '' 
            } 
        }、
        メソッド：{ 
            // 注册 
            登録：関数（）{
                 VARのアカウント= この名=。アカウント;
                VaRのパスワード= このみましょう。パスワード。
                VAR この.nameの。

                この。$ http.get（ '/ API /登録' 、{ 
                    のparams：{ 
                      アカウント：アカウント、
                      パスワード：パスワード、
                      名前：名
                    } 
                }、{}）。その後、（（レスポンス） => { 
                    にconsole.log（レスポンス） ; 
                }）
            } 

            // 登录 
            ログイン：関数（）{
                 VARのアカウント=この.account;
                VaRのパスワード= このみましょう。パスワード。

                この。$ http.get（ '/ API /ログイン' 、{ 
                    のparams：{ 
                        アカウント：アカウント、
                        パスワード：パスワード、
                    } 
                }、{}）、その後（（応答）。 => { 
                    にconsole.log（レスポンス）; 
                }）
            } 、

            gitの：関数（）{
                 // 发送取得请求
                この。。$ http.post（ '/ API /リスト'）、その後（機能（RES）{ 
                    はconsole.log（RES）; 
                }、関数（）{ 
                    はconsole.log（ '请求失败处理' ） ; 
                }）;
            } 
        }、
        {）（搭載
        } 
    }
 </ script>の

<スコープスタイル> 
  .cl_middle { 
    幅：300ピクセル。
    分 - 高さ：100pxに。
    国境：1pxの固体#dedede; 
    位置：絶対; 
    左： 50％; 
    トップ： 50％; 
    変換：（翻訳 -50％、-50％ ）。
    国境 - 半径：8px; 
  } 

  .cl_middle -高さ：35px;すべての{
    幅： 100％; 
    高さ：35px; 
    ライン - 
  .cl_register：前{
    オーバーフロー：隠されました; 
  } 

  .cl_register { 
    幅： 50％ 。
    テキスト - 揃える：センター;
    フロート：左; 
    カーソル：ポインタ; 
    赤色; 
    位置：相対; 
  } 

  .cl_login { 
    幅： 50％ 。
    テキスト - 揃える：センター;
    フロート：右; 
    カーソル：ポインタ; 
    色：mediumspringgreen。
    位置：相対; 
  } 

    内容：「」。
    幅：30px; 
    高さ：2ピクセル。
    背景：赤;
    位置：絶対; 
    左： 50％; 
    下：2ピクセル。
    変換：（翻訳 -50％、100％ ）。
    表示：なし; 
  } 
  .cl_register：{後に
    内容： "" 。
    幅：1ピクセル。
    高さ：20ピクセル; 
    位置：絶対; 
    右： 0％ 。
    トップ： 50％; 
    変換：（翻訳 -50％、-50％ ）。
    背景：RGBA（ 0,0,0,0.6 ）。
  } 
  .cl_login：前{ 
    内容： "" 。
    幅：30px; 
    高さ：2ピクセル。
    背景：mediumspringgreen。
    位置：絶対; 
    左： 50％; 
    下：2ピクセル。
    変換：（翻訳 -50％、100％ ）。
    表示：なし; 
  } 
  .cl_color.cl_login：前{ 
    表示：ブロック; 

  } 
  .cl_color.cl_register：前{ 
    表示：ブロック; 
  } 
  .cl_color：n番目 -child（2 ）{ 
    色：mediumspringgreen。
  } 
  .cl_tab_list { 
    ボーダー - トップ：1ピクセル固体#dedede。
    背景：RGBA（ 0,0,0,0.02 ）。
  } 
    幅：

  .cl_register_list { 100％ 。
    分 - 高さ：100pxに。
  } 

  .cl_login_list { 
    幅： 100％ 。
    分 - 高さ：100pxに。
  } 
  .cl_input { 
    幅： 96％ 。
    高さ：32PX; 
    マージン：12ピクセルオート; 
    国境：1pxの固体#dedede; 
    国境 - 半径：4PX。
  } 

  .cl_input_text { 
    幅： 100％ 。
    高さ：32PX; 
    国境：なし; 
    外観：なし。
    概要：なし。
    概要：媒体と、
    パディング： 0 12ピクセル; 
    ボックス-sizing：BORDER- ボックスを。
    カーソル：ポインタ; 
    国境 - 半径：4PX。
  } 

  .cl_input_btn { 
    幅： 100％ 。
    国境：なし; 
    高さ：32PX; 
    概要：なし。
    概要：媒体と、
    カーソル：ポインタ; 
    国境 - 半径：4PX。
  } 
  .cl_register_btn { 
    背景：赤。
    色：#FFFFFF; 
  } 

  .cl_login_btn { 
    背景：mediumspringgreen。
    色：#FFFFFF; 
  }
 </スタイル>

 

データベーステーブルのフィールドを追加します。

IDの増分。accounアカウント。passpasswパスワード。名前名

 

スタートVUEサービス   

より良いを構築する前に、プロセスの終了後に

 

おすすめ

転載: www.cnblogs.com/chen527/p/11442588.html
おすすめ
ランキング
OpenCV.Scharr梯度
Baiduのウェブサイトの共有プラグインを追加します。
マスターキーの顧客の過去の使用状況を確認
Python データ分析 - pandas ライブラリを使ってみる
需求分析 序章
Linuxの一般的なコマンドのレコード番号
VARの違い、3つのconstをしましょう
ワイドアイスIオフ
ゼロ計数期間にXOR（クロス）
matlab/python を使用して二重閾値法のエンドポイント検出を実行する
アーカイブ
もっと
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

コードワールド

© 2018 codetd.com