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

刚学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。写完了，也算有一点小的成就感。