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

发布时间:2019-05-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue+node全栈移动商城【10】注册页面传值到node中间件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
上一节咱们已经实现了注册页面的基本结构,在这一节,咱们把注册页面的值,传入到nodeJs的中间件中,为接下来的保存用户注册信息做好准备。

我们已经在vant的组件输入框上,以v-model的方式双向绑定了四个属性,

这四个属性都对应的定义在data里,

我们在注册按钮是添加一个事件,registerFn

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

当点击注册按钮时,触发下面的方法,

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


意思是这样,第1步,每次先把属性值置空;第2步,以对象字面量的形式,保存填写信息;第3步,各种检查 、判断 然后第4步,执行 this.postRegisterObj( _registerObj );

再接下来,向register_post接口提交信息

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


到这里,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数据库,并把数据存入其中。


更快观看 更多教程内容,请扫下方二维码直接入前端项目学习群,让你组团学习,更有进步,

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue+node全栈移动商城【10】注册页面传值到node中间件全部内容,希望文章能够帮你解决vue+node全栈移动商城【10】注册页面传值到node中间件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue