React.js留言板（Mock.js模仿数据交互）



React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript 框架都不满意，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

先说明下，本项目是在初学React.js之后实现的简单留言板的新增和展示（Mock.js实现伪数据交互），功能比较简单，不过相对也更适合React初学者查看。此篇文档用来说明项目的想法思路以及某些关键代码的展示，可以分为项目说明，项目思路，代码展示三个部分，项目效果：

一、项目说明：

本项目已经在gitHub上共享，地址https://github.com/liu942626/MessageBoard，注释量比较大，放心阅读；另外附上写留言板时参考的网上的另外一个项目，关键js代码只有100行，本次要说的项目也是在这个项目上拓展而来的也把地址附上，同时谢谢这位上传项目的前辈，地址https://github.com/David-Guo/message-board。

效果查看：下载下来后想要查看的话，直接浏览器打开dist/html/index.html即可查看并进行新增等操作，无需开启服务；

主要代码：src/js/index.js下是实现留言板的js文件代码，200行带注释，dist下的index.js经过了压缩，要查看的话请转到src下；

学习前提：项目依托于node.js，查看可以直接打开，修改的还想看到效果的话需要node.js辅助压缩拷贝文件；

项目修改代码并且查看效果（仅限你想在git下来的此项目里修改）：

首先下载安装nodejs，然后git clone项目；

根据项目中的package.json使用npm下载安装需要的依赖包；

在src下修改代码，不修改文件路径的话，不用修改gulpfile.js。

目录结构说明：

src/js/index.js 关键代码，自己写的js事件实现都在这个里面了；

src/asserts 依赖的公共js和css文件（jQuery、Bootstrap和Mock）；

src/css/index.css 自己写的页面css效果，主要是提示消息冬天显示隐藏的CSS3动画效果；

src/html/index.html html页面。

修改后在控制台项目文件路径下运行gulp即可自动压缩和拷贝src文件到dist中去，浏览器打开dist/html/index.html即可查看页面。

二、项目思路：

模块化设计：

React.js可以将虚拟DOM封装为模块，方便维护和复用，本项目前端可以分为四个部分：

表单MessageForm，用于留言板新增留言；

列表MessageList，用于留言展示；

提示MessageAlert，用于新增留言提交时显示提交成功/失败消息；

总模块Message，将其他模块整合，发送ajax请求更新State值以刷新界面。

后端数据才有Mock.js是阿里做的伪数据js文件，页面引用此文件后能够拦截页面网后台发送的ajax请求，同时提供了Mock对象；

Mock.mock()方法可以拦截指定请求并返回自定义的json数据，所以实现了无需后台的数据交互；

拦截url需要用户自己定义，可以参照src/js/mock.value.js，里面写了拦截/get和/post两个url的方法。

三、项目代码：

这里粘贴部分代码（index.js,index.css,mock.value.js），有兴趣的可以下载下来看下：

关键代码index.js

var React = require('react');
var ReactDOM = require('react-dom');

// 留言板表单模块
var MessageForm = React.createClass({
    onSubmit: function(e){ // 点击提交按钮，获取输入框内容，调用提交函数发送请求
        e.preventDefault();
        var that = this, // 缓存this指针指向
        name = encodeURIComponent(that.refs.name.value.trim()), // 获取名称输入框数据
        content = encodeURIComponent(that.refs.content.value.trim());
        that.props.submit(name,content); // 调用submit处理
        // 提交完成，清空输入框
        that.refs.name.value = '';
        that.refs.content.value = '';
    },
    onReset: function(e){ // 输入框返回初始状态，及内容为空（重置按钮调用）
        e.preventDefault();
        this.refs.form.reset();
    },
    render: function(){
        return (
            

                

                    

                        
                    
                
                

                    

                        
                    
                
                

                    重置
                    提交
                
            
            )
    }
})

// 留言板显示模块
var MessageList = React.createClass({
    render: function(){
        // 根据获取到的留言信息，每条消息对应一个li标签进行显示
        var message = this.props.data.map(function(item,idx){
            return (
                

                
 {item.name} 
                
 {item.content} 
                
            )
        });
        return(
            

            {message}
            
        );
    }
});

// 留言板提示消息模块
var MessageAlert = React.createClass({
    render: function(){
        switch (this.props.alert){
            case 'info':
                return (
                    

                        提示！由于后台数据是假数据，假数据设置了当数据条目超过50条时，数据内容自动初始化为最初的三条。
                    
                );
            case 'success':
                return (
                    

                        通知！提交成功。
                    
                );
            case 'warning':
                return (
                    

                        警告！标题和内容不能为空。
                    
                );
            default: 
                return null;
        }
    }
});

// 留言板总体模块
var MessagePanel = React.createClass({
    getInitialState: function(){ // 初始化data为空
        return {
            data: [],
            alert: ''
        }
    },
    submit: function(name,content){ // 提交数据，将表单中的数据ajax提交
        var that = this; // 缓存this指针指向
        that.setState({
            alert: ''
        });
        if($.isEmptyObject(name) || $.isEmptyObject(content)){
            window.setTimeout(function(){ // 设计延迟，否则此处的setState会和前面的融合处理，导致多次空点击时无法弹出
                that.setState({ // 提示内容不能为空
                 alert: 'warning'
            });
            },100)
        }else{
            $.ajax({
                type: 'post',
                url: '/post',
                contentType: 'application/json; charset=utf-8',
                data:{name: name, content: content},
                dataType: 'json'
            }).done(function(resp){
                if('success' === resp.status){ // 提交成功
                    that.listContent(); // 更新留言板列表
                    that.scrollBottom(); // 页面滚动到底部
                    that.setState({ // 提示内容不能为空
                         alert: 'success'
                    });
                }else{
                    that.setState({ // 提示内容不能为空
                         alert: 'info'
                    });
                }
            }.bind(that));
        }
    },
    scrollBottom: (function gotoBottom(){ // 添加留言成功后页面滚动到最下方进行查看
        var speeding = 1.1, stime = 10,
        top = document.documentElement.scrollTop || document.body.scrollTop || 1; // 多浏览器兼容获取页面Y轴滚动偏移位置,若位置为0，赋值为1
        window.scrollTo(0, Math.ceil(top * speeding)); // 页面向下滚动滚动
        var topnew = document.documentElement.scrollTop || document.body.scrollTop; // 获取向下滚动后的Y轴偏移位置
        if(topnew > top) {
            // 循环timeout是动态滚动效果
            window.setTimeout(gotoBottom, stime);
        }
    }),
    listContent: function(){ // 获取留言列表
        var that = this;
        $.ajax({
            type: 'get',
            url: '/get',
            dataType: 'json'
        }).done(function(resp){
            if('success' === resp.status){ // 获取留言成功，将留言赋值到模块的state值中
                that.setState({
                    data:resp.data
                })
            }
        }.bind(that));
    },
    componentDidMount: function(){ // 初始化加载界面获取列表
        this.listContent();
    },
    gotoTop: (function gotoTop(){ // 函数名是为了递归调用（鉴于严格模式下无法使用calllee）
        var speeding = 1.1, stime = 10;
        var top = document.documentElement.scrollTop || document.body.scrollTop; // 多浏览器兼容获取页面Y轴滚动偏移位置
        window.scrollTo(0, Math.floor(top / speeding)); // 页面向上滚动
        if(top > 0) {
            // 循环timeout是动态滚动效果
            window.setTimeout(gotoTop, stime);
        }
    }),
    render: function(){
        return (
            

                

                
                

                    
                    
                    
                
                

                    
                
            
        );
    }
});
ReactDOM.render(, document.getElementById("message-panel"));

index.css代码

/* 用于控制标签之间的上下边距 */
.m-bottom-10 {
    margin-bottom: 10px;
}
/* textarea大小固定 */
textarea {
    resize:none;
}
.btn {
    margin-right: 5px;
}
/* 返回顶部图片样式 */
.icon-top {
    position: fixed;
    right: 20px;
    bottom: 10px;
    background: transparent url("../css/img/top.png") no-repeat scroll 0px 0px;
    display: inline-block;
    width: 38px;
    height: 65px;
    cursor: pointer;
    vertical-align: middle;
}
/* 返回顶部鼠标经过图片样式 */
.icon-top:hover {
    background: transparent url("../css/img/top.png") no-repeat scroll 0px -65px;
}
/* 提示消息效果 */
.alert {
    position: fixed;
    top:-50px;
    left:25%;
    width:50%;
    animation: alertheight 3s;
    -moz-animation: alertheight 3s; /* Firefox */
    -webkit-animation: alertheight 3s; /* Safari and Chrome */
    -o-animation: alertheight 3s; /* Opera */
}
@keyframes alertheight
{
0%   {top: -50px;}
50%  {top: 20px;}
100% {top: -50px;}
}
@-moz-keyframes alertheight /* Firefox */
{
0%   {top: -50px;}
50%  {top: 20px;}
100% {top: -50px;}
}
@-webkit-keyframes alertheight /* Safari and Chrome */
{
0%   {top: -50px;}
50%  {top: 20px;}
100% {top: -50px;}
}
@-o-keyframes alertheight /* Opera */
{
0%   {top: -50px;}
50%  {top: 20px;}
100% {top: -50px;}
}

mock.value.js代码

(function($){
    // 假数据
    var initRes = [
        {name: '这是第一条留言', content: '这是第一条留言的内容'},
        {name: '这是第二条留言', content: '这是第二条留言的内容'},
        {name: '这是第一条留言', content: '这是第一条留言的内容'}
    ],resArr = $.extend([],initRes);
    Mock.mock(/\/get/,function(options){ // 拦截获取留言列表请求，返回列表信息
        return {status: 'success', data: resArr};
    }).mock(/\/post/,function(options){ // 拦截新增留言请求
        var arr = options.body.split('&'),obj = {};
        arr.map(function(item){
            var items = item.split('=');
            obj[items[0]] = decodeURIComponent(decodeURIComponent(items[1]));
        })
        resArr.push(obj); // 将留言加载到假数据中
        if(resArr.length < 50){ //如果假数据不超过50条，返回成功，否则返回false，同时初始化假数据
            return {status: 'success'};
        }else{
            resArr = $.extend([],initRes);
            return {status: 'false'};
        }
    })
})(jQuery)