vue+node全棧移動商城【10】註冊頁面傳值到node中間件

上一節咱們已經實現了註冊頁面的基本結構，在這一節，咱們把註冊頁面的值，傳入到nodeJs的中間件中，爲接下來的保存用戶註冊信息做好準備。

---

我們已經在vant的組件輸入框上，以v-model的方式雙向綁定了四個屬性，

這四個屬性都對應的定義在data裏，

我們在註冊按鈕是添加一個事件，registerFn

當點擊註冊按鈕時，觸發下面的方法，

意思是這樣，第1步，每次先把屬性值置空；第2步，以對象字面量的形式，保存填寫信息；第3步，各種檢查 、判斷 然後第4步，執行 this.postRegisterObj( _registerObj );

再接下來，向register_post接口提交信息

到這裏，vue頁面部分的工作就結束了。

現在咱們轉向src根目錄的APIList.config.js文件，在其中定義接口：

const port = 5678;
const BASEURL = 'http://localhost:' + port;

const API_LIST = {
    // 查詢條件
    node_a : BASEURL + '/node_a',
    // 查詢結果
    node_b : BASEURL + '/node_b',
    // 提交註冊信息
    register_post :  BASEURL + '/register_post'
}

module.exports = API_LIST

以_post結尾，意思是說，這是以post的方式來提交

---

然後再打開之前咱們創建的nodeJs中間件文件，api_dev.js，在其中新建接口如下：

// 用戶註冊信息
app.post('/register_post', function(req, res){
    let _allData = '';

    req.on('data', function(_d){
        _allData+= _d;
    });

    req.on('end',function(){
        console.log( _allData );
    });
});

---

如果你能在控制檯中 node api_dev.js，得到用戶提交的信息，那麼說明你已經成功的從vue視圖界面，把數據傳遞到了nodeJs中間件裏。
在下一節中，咱們就將展示，如何在nodeJs中連接mongoDB數據庫，並把數據存入其中。

---

更快觀看 更多教程內容，請掃下方二維碼直接入前端項目學習羣，讓你組團學習，更有進步，