摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。
欢迎访问我的个人网站：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-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 |
在组件中的使用说明
技术：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也用了一下，临时学了一下，要更多的练习。往后会写更多的前后台联通的项目。
技术：Vue2.5.2, Node.js, Express, MongoDB, WebPack
Vue搭建页面，form绑定一个不可见的iframe实现无刷新提交表单，图片选择完毕后，递归调用axios将所选图片依次post到后台，实现单图和多图的上传功能，并实现图片预览、进度条、检测图片大小是否超出限制（前端检测）。
后台利用formidable解析表单数据，重命名后将图片名称，id，大小,路径存到MongoDB数据库。每次接收并存储完成，给前台返回最新上传的图片。删除分组会连同组内的所有图片一起删除。
项目代码
功能：
图片上传
上传进度条
分组上传，分组查询
新建分组，删除分组
删除图片
选择图片
效果：
总结这其实是领导下达的一个小任务，但是任务中没有提到要实现这么多的功能。这是在完成任务的前提下又扩展了一下，加上了分组上传，分组查询，新建分组，删除分组的功能，方便自己以后用。本来还想加上分页查询的功能的，分页的前端和后台已经写好并且测试成功了，但是突然想到涉及上传时候传到那哪一页的问题。。。但是现在，时隔一年后再次回想这块的业务，感觉是自己钻牛角尖了。写代码之前自己一点定要有全面的思考，不然会留下很多坑。后台上传功能基本上是查资料学来的，全部的功能自己一个人写了好几天。算是对自己上次用node.js+MongoDB写vue后台的一个强化，项目文章在这里。
技术：vue2，vue-resource，vue-router，better-scroll，stylus
纯前端练习，三个业务模块：商品，评论，商家。通过vue-resource请求mock数据，引入better-scroll实现页面内所有滚动效果，动画效果通过transition组件实现。flex进行页面布局。
项目代码
功能：
点击分类目录滚动到相应商品模块
购物车数量及商品变化实时计算价格
评论筛选（全部、推荐、吐槽、有无内容）
localStorage实现收藏商家功能
评价星级根据数据动态变化
效果：
总结这是入职之前就在写的一个小的练习项目，网上找的教程，当时只实现了商品业务模块，就去上班了。后来一直没动，前些日子才把后续的完善。这项目虽然简单，也只是个纯前端的练习项目，但是只写了商品业务模块后还是对我入职后开发公司的react项目提供了巨大帮助，webpack配置、项目目录的组织方式，写代码的规范，前期的数据mock。写完了，也算有一点小的成就感。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/19189.html
摘要：前言此项目是用于构建博客网站的，由三部分组成，包含前台展示管理后台和后端。体验地址网站主页网站首页管理后台计划这次是一个完整的全栈式开发，只要部署了这三个项目的代码，是完全可以搭建好博客网站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此项目是用于构建博客网站的，由三部分组成，包含前台展示、管理...
摘要：异步最佳实践避免回调地狱前端掘金本文涵盖了处理异步操作的一些工具和技术和异步函数。 Nodejs 连接各种数据库集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 编写 Node.js Rest API 的 10 个最佳实践 - 前端 - 掘金全文共 6953 字，读完需 8 分钟，速读需 2 分钟。翻译自...
摘要：没有耐心阅读的同学，可以直接前往学习全栈最后一公里。我下面会罗列一些，我自己录制过的一些项目，或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文，阅读需谨慎，长约 7000 字，通读需 5 分钟 大家好，我是 Scott，本文通过提供给大家学习的方法，...
摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...
阅读 3107·2021-10-12 10:11
阅读 1818·2021-08-16 10:59
阅读 2829·2019-08-30 15:55
阅读 1202·2019-08-30 14:19
阅读 2008·2019-08-29 17:03
阅读 2439·2019-08-29 16:28
阅读 3192·2019-08-26 13:47
阅读 2860·2019-08-26 13:36
