一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

欢迎访问我的个人网站：http://www.neroht.com/

刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的结合了一点简单的node.js以及mongoDB的使用，拿出来分享，抛砖引玉

• React + Node.js + MongoDB实时聊天WebApp (react_recruiment_webapp)
• React移动端省市县级联选择器 (react_cascader)
• vue.js + node.js + MongoDB 商城(vue_shop)
• vue.js + node.js + MongoDB 上传图片组件(vue_uploader)
• Vue.js饿了么商家模块(ele)

React + Node.js + MongoDB实时聊天WebApp (react_recruiment_webapp)

技术：React16，React-Router4，Redux，Node.js，MongoDB，Antd-Mobile

项目分为用户列表、消息列表、个人中心、登录注册四个模块；后台为Node.js，数据库为MongoDB，配合前端的react技术栈实现前后端联调。用户分为求职者和雇主两个角色。用户注册可选角色，注册成功后需要完善信息（求职者：头像，期望职位，个人简介；雇主：头像、招聘职位、公司名、薪资范围、职位描述）。信息完善后求职者跳转到boss列表页，boss跳转到求职者列表页。并且可以点击对方与其聊天。如果有未读消息，则在底部导航的消息列表上显示未读消息数量。点击未读消息，未读消息数量相应减少。重点练习Redux的运用，存储用户信息、用户列表信息、聊天信息、未读消息数量。利用thunk中间件实现axios异步请求，Socket.io实现两个用户角色实时通信。

项目代码

功能：

• 用户注册登录、退出登录
• 注册完成后完善用户信息
• 根据不同角色跳转到相应页面
• 用户聊天功能

注册登录、退出登录：

聊天功能：

总结

在某网上看到了这个教程，狠了心买了一套。钱确实没白花，之前自己写过一个react上线项目，但是全凭自己摸索出来的，代码目录的组织方式以及redux的状态如何存储都是自己定的。写这个项目时候把用jsx写代码的方式重新认识了一遍，而且，view层和redux的状态层划分的很清晰，需要派发action和获取store状态的组件只需要外层包一个connect，然后要做出动作，触发函数dispatch出去就好。当时理解redux很是费劲，大神们为了把问题简单化，设计了很多架构，但是这些架构越来越复杂，需要一定的学习曲线，不过用的时候，真的是特别的方便。

---

React移动端省市县级联选择器 (react_cascader)

技术：react，react-addons-css-transition-group，Node.js，MongoDB

React级联选择器插件。之前工作中遇到了需要用级联选择器的地方，当时时间紧，只好找了一个不太好用的插件，现在有时间自己实现了一个。加载数据方式为异步获取，后端数据为扁平化结构，通过pid来关联上下级。用node.js简单写了下后台。react-cascader-font-end为组件前端，react-cascader-server为后台。

效果：

数据结构：

API	说明	类型
cascaderShow	是否显示级联选择器	Boolean
data	接收的省市县数据	Array
getData	动态获取数据的函数	Function
onCancel	点击模态层取消的函数	Function
onOk	选择完毕的回调函数	Function

在组件中的使用说明

---

vue.js + node.js + MongoDB 商城(vue_shop)

技术：Vue2.5.2, Vue-Router, Vuex, Node.js, Express, MongoDB, WebPack

前端页面使用vue构建，不再mock数据，后端服务器由Node.js的Express框架搭建，数据库为MongoDB，网络请求为axios,利用vuex实现登录退出功能，关于商品、购物车、地址的修改都是与后台关联的。

项目代码
功能：

• 登录退出
• 商品列表（分页请求，并可以加入购物车）
• 购物车（商品数量的加减，商品的删除，多选全选反选价格联动）
• 地址模块（设置默认地址，删除）、订单生成（生成订单号，收货人信息，并插入数据库）

截图：

总结

这也是某网上的教程，做这个项目的原因很简单，就是自己想写一些需要后台配合的插件时，很不方便，因为自己只会前端的那些东西，所以决定也写一下后台，多了解一点。这算是node.js+MongoDB的初体验吧，node.js不会有语法障碍，MongoDB又是以json格式存储数据的。所以学的时候很顺畅。目前还未深入了解node.js的一些概念。写的node.js的时候真的体会到了异步的繁琐，也明白了promise，async,await这些异步解决方案存在的意义。vuex也用了一下，临时学了一下，要更多的练习。往后会写更多的前后台联通的项目。

---

vue.js + node.js + MongoDB 上传图片组件(vue_uploader)

技术：Vue2.5.2, Node.js, Express, MongoDB, WebPack

Vue搭建页面，form绑定一个不可见的iframe实现无刷新提交表单，图片选择完毕后，递归调用axios将所选图片依次post到后台，实现单图和多图的上传功能，并实现图片预览、进度条、检测图片大小是否超出限制（前端检测）。
后台利用formidable解析表单数据，重命名后将图片名称，id，大小,路径存到MongoDB数据库。每次接收并存储完成，给前台返回最新上传的图片。删除分组会连同组内的所有图片一起删除。

项目代码

功能：

• 图片上传
• 上传进度条
• 分组上传，分组查询
• 新建分组，删除分组
• 删除图片
• 选择图片

效果：

总结

这其实是领导下达的一个小任务，但是任务中没有提到要实现这么多的功能。这是在完成任务的前提下又扩展了一下，加上了分组上传，分组查询，新建分组，删除分组的功能，方便自己以后用。本来还想加上分页查询的功能的，分页的前端和后台已经写好并且测试成功了，但是突然想到涉及上传时候传到那哪一页的问题。。。但是现在，时隔一年后再次回想这块的业务，感觉是自己钻牛角尖了。写代码之前自己一点定要有全面的思考，不然会留下很多坑。后台上传功能基本上是查资料学来的，全部的功能自己一个人写了好几天。算是对自己上次用node.js+MongoDB写vue后台的一个强化，项目文章在这里。

---

Vue.js饿了么商家模块(ele)

技术：vue2，vue-resource，vue-router，better-scroll，stylus

纯前端练习，三个业务模块：商品，评论，商家。通过vue-resource请求mock数据，引入better-scroll实现页面内所有滚动效果，动画效果通过transition组件实现。flex进行页面布局。

项目代码
功能：

• 点击分类目录滚动到相应商品模块
• 购物车数量及商品变化实时计算价格
• 评论筛选（全部、推荐、吐槽、有无内容）
• localStorage实现收藏商家功能
• 评价星级根据数据动态变化

效果：

总结

这是入职之前就在写的一个小的练习项目，网上找的教程，当时只实现了商品业务模块，就去上班了。后来一直没动，前些日子才把后续的完善。这项目虽然简单，也只是个纯前端的练习项目，但是只写了商品业务模块后还是对我入职后开发公司的react项目提供了巨大帮助，webpack配置、项目目录的组织方式，写代码的规范，前期的数据mock。写完了，也算有一点小的成就感。