React.js留言板(Mock.js模仿数据交互)
2017-04-04 16:23
281 查看
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
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)
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 ( <form role="form" ref="form"> <div className="form-group m-bottom-10 clearfix"> <div className="col-xs-4"> <input className="form-control" type="text" name="name" ref="name" placeholder="请输入标题" required/> </div> </div> <div className="form-group m-bottom-10 clearfix"> <div className="col-xs-12"> <textarea className="form-control" name="content" ref="content" placeholder="请输入内容" required></textarea> </div> </div> <div className="form-group m-bottom-10 clearfix"> <button className="btn btn-default btn-sm pull-right" onClick={this.onReset}>重置</button> <button className="btn btn-default btn-sm pull-right" onClick={this.onSubmit}>提交</button> </div> </form> ) } }) // 留言板显示模块 var MessageList = React.createClass({ render: function(){ // 根据获取到的留言信息,每条消息对应一个li标签进行显示 var message = this.props.data.map(function(item,idx){ return ( <li className="list-group-item" key={idx}> <h4> {item.name} </h4> <p> {item.content} </p> </li> ) }); return( <ul className="list-group" id="message-container"> {message} </ul> ); } }); // 留言板提示消息模块 var MessageAlert = React.createClass({ render: function(){ switch (this.props.alert){ case 'info': return ( <div className="alert alert-info"> <strong>提示!</strong>由于后台数据是假数据,假数据设置了当数据条目超过50条时,数据内容自动初始化为最初的三条。 </div> ); case 'success': return ( <div className="alert alert-success"> <strong>通知!</strong>提交成功。 </div> ); case 'warning': return ( <div className="alert alert-warning"> <strong>警告!</strong>标题和内容不能为空。 </div> ); default: return null; } } }); // 留言板总体模块 var MessagePanel = React.createClass({ getInitialState: function(){ // 初始化data为空 return { data: [], alert: '' bd51 } }, 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 ( <div> <div className="col-xs-2"> </div> <div className="col-xs-8"> <MessageForm submit={this.submit} /> <MessageList data={this.state.data} /> <MessageAlert alert={this.state.alert}/> </div> <div className="col-xs-2"> <span className="icon-top" onClick={this.gotoTop}></span> </div> </div> ); } }); ReactDOM.render(<MessagePanel />, 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)
相关文章推荐
- 模仿百度三维地图的js数据分享
- 模仿百度三维地图的js数据分享
- js前台与后台数据交互
- django 后台与前端js数据交互对ajax封装
- 模仿angularjs写了一个简单的HTML模版和js数据填充的示例
- js与php之间使用json格式进行数据交互
- WebView与js的数据交互
- js前台与后台数据交互-后台调前台(后台调用、注册客户端脚本)
- js前台与后台数据交互-前台调后台
- (js 父子页面数据的交互以及父子页面的侦听)(客户端通用消息门户框架)
- .net网站与Winform窗体的数据交互(JS调用Winform后台方法实现)
- 自己总结AS3.0与JS(HTML页面)的数据传送交互
- js模版引擎(基于html模版和json数据的javascript交互)(第二讲)完结篇
- js前台与后台数据交互-后台调前台(后台调用、注册客户端脚本)
- JS调用后台方法进行数据交互
- 模仿百度三维地图的js数据
- js模版引擎(基于html模版和json数据的javascript交互)(第一讲)
- Asp.net Webservice返回Datetime格式数据与前端JS的交互问题
- Mock.js 与 fiddler 前端模拟数据与拦截请求
- ashx 文件 与js文件数据交互