最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接:
我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到。
我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉。
今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql + es6/7 实现一个聊天功能。(可以点击下载:https://github.com/zhangKunUserGit/myChart)
它包括:(头像是随便弄得,没有什么功能和意义)
(1)登录/注册

(2)聊天

特色:
1.支持检查用户名重复和密码错误;
2.支持多处登录聊天,其中一处退出不影响其他设备(不同浏览器)登录情况
3.点击鼠标右键,可以操作自己的聊天信息(现在只做了删除功能);
4.可以上下伸缩信息框和输入框;
5.聊天信息支持分批加载;
6.在输入框上 按Shift+Enter换行,Enter发送信息;
7.加载时,导航下面有流行的loading 动画效果;
由于精力和时间问题,它是不完美的,它的不足:
1.暂时不支持一键复制和编辑;
2.没有私聊和房间(群)的功能;
3.没有添加好友功能;
4.暂时没写响应式;
5.没有头像上传和截图功能;
6.忘记密码和编辑自己的信息功能;
8.没有单元测试;
9.。。。。。。
看样子功能还有很多没做啊。我有时间一定补上,如何你有时间也可以帮我补补。由于没有经过专业测试人员测试,所以可能有bugs,希望大家运行后,有问题及时反馈,我会及时修改,谢谢大家。
最后附上我的mysql 表 ,我总共创建了两个表,一个叫users,存用户的信息;另一个是chartContent, 存聊天信息;列名如下:
users表:

chartContent表:

最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)的更多相关文章
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React躬行记(13)——React Router
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端 ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
随机推荐
- css颜色代码对照
FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A ...
- 学习smart gwt 的一些好的网站
最近在学smart gwt,这个框架和我们比较熟悉的SSH实现思路上有点不一样,因为技术是外国的,所以好多东西都是英文的,正因为是英文的,我们学到的东西才是最多最好的,好了,网站如下: gwt api ...
- STM32GPIO口8种模式细致分析(类比51单片机)
关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式 上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...
- webix .datatable 表格分页
grid表格返回参数大都是 以下这种格式(参数名可能不一样) { data:[{...},{...} ...], count:39 } webix的参数格式为 { data:[{...},{...}, ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- 老李秘技:loadrunner11是否还支持dblib协议?
老李秘技:loadrunner11是否还支持dblib协议? Loadrunner11不再支持Sybase CTLIB 和 DBLIB协议 在loadrunner安装文件中找到*. LRP文件,位 ...
- 实用开发之-oracle表回滚到一个指定时间的操作语句
在开发或客户使用过程中,难免会出现误操作或脏数据,那么怎么迅速处理这个问题呢? 1.备份还原就用了,太麻烦. 就是使用ORACLE的备份功能,然后在还原,还原的时候新建一个库,然后使用dblink进行 ...
- Entity Framework Code First在Oracle下的伪实现
为什么要说是伪实现,因为还做不到类似MsSql中那样完全的功能.Oralce中的数据库还是要我们自己手动去创建的.这里,我们舍掉了Model First中的EDMX文件,自己在代码里面写模型与映射关系 ...
- Jackson序列化实例
参考文章 Jackson使用ContextualSerializer在序列化时获取字段注解的属性 使用BeanSerializerModifier定制jackson的自定义序列化(null值的处理) ...
- HashMap源码详解(JDK7版本)
一.内部属性 内部属性源码: //内部数组的默认初始容量,作为hashmap的初始容量,是2的4次方,2的n次方的作用是减少hash冲突 static final int DEFAULT_INITIA ...