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数据库，并把数据存入其中。

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

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

vue+node全栈移动商城【4】-创建get、send接口，接收数据更新视图
上一节里咱们已经实现了第一个接口,并在请求接口时收到了返回的{a:123},那么接下来,咱们就实现一个简单的get.set接口,并通过返回的数据来更新页面视图. 这是我们要实现的页面视图,代码如下, ...
vue+node全栈移动商城【6】-node接口配置文件
接上一节,咱们现在已经有了二个接口,分别是, app.get('/node_a' 和 app.get('/node_a' 以后还会有更多的接口,那么有必要在一个单独的地方来统一管理所有的接口. 在sr ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（4.1-4.10）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(4.1-4.10) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://git ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.6-3.10）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.6-3.10) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://git ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.13-3.15）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（2.10-2.12）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gitee.com/blaunic ...
学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1-2.5）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gitee.com/blaunic ...

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

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

最新文章

热门文章