vue+node全栈移动商城【10】注册页面传值到node中间件

快来打我* 2022-03-16 14:16 89阅读 0赞

> 上一节咱们已经实现了注册页面的基本结构，在这一节，咱们把注册页面的值，传入到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数据库，并把数据存入其中。