欢迎访问我的个人网站：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）反应+节点。js+MongoDB实时聊天WebApp(react_recruiment_webapp)技术：React16,React-Router4,Redux,Node.js,MongoDB,Antd-Mobile项目分为四个模块：用户列表，消息列表，个人中心，登录注册;背景是节点。js，数据库为MongoDB，采用前端react技术栈实现前后端联调。用户分为两个角色，求职者和雇主。用户可以注册一个可选角色。注册成功后，需要填写信息（求职者：头像、期望职位、个人简介；雇主：头像、职位、公司名称、薪资范围、职位描述）。信息填写完成后，求职者跳转到老板列表页，老板跳转到求职者列表页。你可以点击对方与他们聊天。如果有未读消息，未读消息数会显示在底部导航的消息列表中。点击一条未读消息，未读消息数会相应减少。重点练习Redux的应用，存储用户信息、用户列表信息、聊天信息、未读消息数。使用thunk中间件实现axios异步请求，使用Socket.io实现两个用户角色之间的实时通信。项目代码功能：用户注册，登录，注销，注册完成后填写用户信息，根据不同角色跳转到相应页面用户聊天功能注册登录，注销：聊天功能：总结在某网站看到这个教程，和我买了它残忍的设置。钱确实没有白花。之前写过一个react在线项目，不过都是自己摸索出来的。代码目录的组织方式，redux的状态如何存放，都是我自己定的。在写这个项目的时候，我重新认识了用jsx写代码的方式。而且redux的view层和state层划分的很清楚。需要dispatchaction和获取storestate的组件只需要在外层包裹一个connect，然后做一个action，触发函数dispatch出去就行了。那时候看懂redux是非常困难的。为了简化问题，大师们设计了很多架构，但是这些架构变得越来越复杂，需要一定的学习曲线，但是用起来真的很方便。React移动省市县级联选择器（react_cascader）技术：react、react-addons-css-transition-group、Node.js、MongoDBReact级联选择器插件。在之前的工作中，遇到了需要级联选择器的地方。当时时间紧，只好找个不太好用的插件。现在我有时间自己实现一个。数据加载方式为异步获取，后端数据为扁平化结构，上下层通过pid关联。我简单的用node.js写了后台。react-cascader-font-end是组件的前端，react-cascader-server是后台。作用：数据结构：API描述类型cascaderShow是否显示级联选择器接收到的省市县数据BooleandataArraygetData动态获取数据的函数组件中使用vue.js+node.js+MongoDB商城(vue_shop)技术：Vue2.5.2,Vue-Router,Vuex,Node.js,Express,MongoDB,WebPack前端页面用vue搭建，不再mock数据，后端服务器由Node.js提供支持。搭建js的express框架，数据库为MongoDB，网络请求为axios，使用vuex实现登录退出功能。商品、购物车、地址的修改都与后台关联。项目代码功能：登录退出商品列表（分页请求，并可加入购物车）、购物车（商品数量加减、商品删除、多选全选和反选价格联动）、地址模块（设置默认地址，删除），orderGenerate（生成订单号，收货人信息，插入数据库）screenshot:综上所述，这也是网上的一个教程。这个项目的原因很简单。当你要写一些需要后台配合的插件的时候就很不方便，因为我只知道前端的那些东西，所以决定把后端也写一下，多学学。这是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、WebPackVue构建页面，在表单上绑定一个不可见的iframe，实现提交表单不刷新，并选择图片最后，递归调用axios将选中的图片一张一张的post到后台，实现单张图片和多张图片的上传功能，并实现图片预览，进度条，查看图片大小是否超过限制（前端检测）。后台使用formidable解析表单数据，将重命名后的图片名称、id、大小、路径保存到MongoDB数据库中。每次接收存储完成，将最新上传的图片返回给前台。删除一个组会同时删除该组中的所有图片。项目代码功能：图片上传上传进度条群组上传，群组查询新建群组，删除群组删除图片选择图片效果：总结这其实是领导布置的一个小任务，但是任务中并没有提到这么多要实现的功能.这是在完成任务前提下的扩展，增加了群上传、群查询、新建群、删除群的功能，方便以后使用。本来我也想加入分页查询的功能。分页的前端和后端都写好了，测试成功了，但是上传的时候突然想到上传哪个页面的问题。..但是现在，时隔一年再回头看这门生意，感觉自己是在钻牛角尖。写代码之前一定要有全面的思考，否则会留下很多坑。后台上传功能基本是看资料学的，所有功能都是自己写了好几天。也算是对上次用node.js+MongoDB写的vue后端的增强。项目文章在这里。Vue.js为饿了么商家模块（ele）技术：vue2、vue-resource、vue-router、better-scroll、stylus纯前端实践，三大业务模块：product、comment、merchant。通过vue-resource请求mock数据，引入better-scroll实现页面所有的滚动效果，通过transition组件实现动画效果。flex用于页面布局。项目代码功能：点击类目滚动到对应的商品模块，购物车数量和商品变化，实时计算价格，评论筛选（全部，推荐，投诉，是否有内容）localStorage实现功能收集商户，根据数据动态变化评价星级，总结一下，这是我入职前在写的一个小实践项目。我在网上找到了一个教程。当时只实现了商品业务模块就上班了。直到这时才有所动静，直到几天前，后续才完善起来。这个项目虽然简单，只是一个纯前端实践项目，但是在我只写了商品业务模块之后，对我入职后开发公司的react项目，webpack配置，project还是提供了很大的帮助目录组织，代码编写规范，之前的数据mock。写完之后，也算是小有成就感了。
