用用ReactJS和和Python的的Flask框架编写留言板的代码示例框架编写留言板的代码示例
近期要在生产环境上使用react，所以，自己学习了一下，写了一个简单的留言板小程序。完整的代码可以到这里下载：
message-board
Use
前端使用React，然后还有Bootstrap和jQuery，React负责前端展现，jQuery主要是向服务器发送ajax请求。
后端使用Flask和MongoDB，为前端提供数据。这里主要关注前端，对于后端不做过多说明。
使用webpack，对js文件进行打包。
About React
React是facebook开发一个用于前段交互的Javascript库。
刚刚开始使用，有这么几个特点：
1. 组件化开发。React提倡无状态的组件，便于重用。
2. VirtualDOM。React的性能比较高，得益于虚拟DOM。它不会每次都去直接操作DOM，因为操作DOM的代价是很大的，所
以，它在内存中维护了虚拟DOM，通过计算虚拟DOM和浏览器上的DOM的变更进行操作。
3. 专注于View。React不是MVC框架，它只是一个专注于View的库，所以，它也可以和很多其他框架或者库一起使用。
4. 提供完成的生命周期。
Message Board
这个留言板小应用，主要有这样几个功能：
1.添加留言，一个表单：用户名和内容
2.列表展示，显示所有留言
3.简单的分页
Code
使用React，就要对应用进行组件的切分，尽量保持组件的无状态。
App
从宏观上组织整个应用，切分三个大组件：
1. MessageForm，添加留言表单。
2. MessageList，留言列表
3. Pager，留言的分页控制
当然，组件还可以继续划分。
子组件的数据都会回调到MessageBoard中，在这里统一控制。
MessageBoard.js
var React = require("react");
var MessageList = require("./MessageList");
var MessageForm = require("./MessageForm");
var Pager = require("./Pager");
var MessageBoard = React.createClass({
getInitialState : function(){
return {
messages: [],
page:0,
pages:0
}
},
submitMessage : function (author, content) {
$.ajax({
type:'post',
url:'/message',
data:{author:author,content:content}
}).done(function (data) {
console.log(data);
this.listMessage(1);
}.bind(this));
},
listMessage : function(page){
console.log("listMessages page:"+page)
$.ajax({
type:'get',
评论0
最新资源