用ReactJS和Python的Flask框架编写留言板的代码示例
作者:defshine 发布时间:2021-09-29 07:33:14
近期要在生产环境上使用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',
url:'/messages',
data:{page:page}
}).done(function (resp) {
if(resp.status == "success"){
var pager = resp.pager;
console.log(pager);
this.setState({
messages:pager.messages,
page:pager.page,
pages:pager.pages
});
}
}.bind(this));
},
componentDidMount : function(){
this.listMessage(1);
},
render : function(){
var pager_props = {
page : this.state.page,
pages : this.state.pages,
listMessage : this.listMessage
};
return(
<div>
<MessageForm submitMessage={this.submitMessage}/>
<MessageList messages = {this.state.messages}/>
<Pager {...pager_props}/>
</div>
)
}
});
module.exports = MessageBoard;
MessageForm
一个简单的表单,保存留言。用户提交后,数据会传给父组件。
MessageForm.js
var React = require("react");
var MessageForm = React.createClass({
handleSubmit : function (e) {
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var content = this.refs.content.getDOMNode().value.trim();
this.props.submitMessage(author,content);
this.refs.author.getDOMNode().value = "";
this.refs.content.getDOMNode().value = ""
},
render : function(){
return(
<div className="well">
<h4>Leave a Message:</h4>
<div role="form">
<div className="form-group">
<input ref="author" className="form-control" placeholder="Name"/>
<textarea ref="content" className="form-control" rows="3" placeholder="Leave your message here"></textarea>
</div>
<a className="btn btn-primary" onClick={this.handleSubmit}>Submit</a>
</div>
</div>
)
}
});
module.exports = MessageForm;
MessageList
留言的列表展示,在写列表之前,把每条留言写成一个组件
Message.js
var React = require("react");
var Message = React.createClass({
render : function(){
var msg = this.props.message;
return(
<div>
<h3>{msg.author}
<small>{msg.time.toLocaleString()}</small>
</h3>
<p>{msg.content}</p>
</div>
)
}
});
module.exports = Message;
然后,再写列表.
数据从父组件通过props传递进来
MessageList.js
var React = require("react");
var Message = require("./Message");
var MessageList = React.createClass({
render : function () {
var messages = this.props.messages.map(function(item){
return <Message message={item}/>
});
console.log(messages);
return(
<div>
{messages}
</div>
)
}
});
module.exports = MessageList;
Pager
这是一个简单的分页,会显示当前页和总页数,还有上一页和下一页功能。
Pager.js
var React = require("react/addons");
var Pager = React.createClass({
getDefaultProps : function(){
return{
page:0,
pages:0
}
},
clickHandler: function(e){
e.preventDefault();
console.log(e.target.dataset.page);
console.log(e.target.dataset.page.value);
this.props.listMessage(e.target.dataset.page);
},
render : function(){
var cx = React.addons.classSet;
var preClass = cx({
'previous':true,
'disabled':this.props.page == 1
});
var nextClass = cx({
'next':true,
'disabled':this.props.page == this.props.pages
});
return(
<ul className="pager">
<li className={preClass} onClick={this.clickHandler}>
<a href="#" data-page={this.props.page-1}>←Prev</a>
</li>
<li>
<span>{this.props.page}/{this.props.pages}</span>
</li>
<li className={nextClass} onClick={this.clickHandler}>
<a href="#" data-page={this.props.page+1}>Next→</a>
</li>
</ul>
)
}
});
module.exports = Pager;
Summary
一个简单的小程序只能简单的感受一下React,这个库的思路和当前流行的库和框架相比,还是比较新颖的,值得学习~
猜你喜欢
- 1、pyqtgraph库数据可视化效果还不错,特别是窗体程序中图像交互性较好;安装也很方便,用 pip 安装。2、在Python中新建一个
- 有的时候需要对python程序内存占用进行监控,这个时候可以用到psutil库,Anaconda中是自带的,如果import出错,可以用pi
- 1. 对于数组array乘就是对应位置的元素相乘:X1 = np.array([[1,2], [3, 4]])X2 = X1print X2
- os.system()和os.popen()概述大家搞python与操作系统交互时,必须掌握的两个方法就是os.system()和os.po
- python的异常,以及用try复合语句处理异常。运行代码时有时会出现各种各样的错误,致使解析器中断执行,并提示xxxxxxErorr的提示
- 本文研究的主要是python实现Decorator模式,具体介绍如下。一般来说,装饰器是一个函数,接受一个函数(或者类)作为参数,返回值也是
- 本文为大家分享了pygame游戏之旅的第6篇,供大家参考,具体内容如下定义一个障碍模型函数:def things(thingx, thing
- openpyxl打开的文件是否需要关闭如果是只读或者只写的模式下,是需要再调用close()方法关闭workbook,正常的情况下是不需要调
- 使用Windows的wmic命令,获取可执行文件的运行状况、文件路径、PID,如果可执行文件挂掉,就重启并邮件告警
- [sql] --1.将每个老师的工资更新为原来的工资+奖金 --定义两个变量,用来存储ttid与reward declare @tid in
- Python 使用 selenium 进行自动化测试 或者协助日常工作,内容如下所示:1、基础准备需要准备 Python 环境需要安装 se
- PHP registerXPathNamespace() 函数实例为下一个 XPath 查询创建命名空间上下文:<?php $xml=
- Python自定义函数在Python编程中,可以使用已经定义好的函数,也可以自定义函数实现某些特殊的功能。自定义函数的语法在Python中,
- 前言三种场景:多个同字段的excel文件合并成一个excel多个不同字段的excel文件拼接成一个excel一个excel的多个sheet合
- 前言最近在python里面用json读取json文件,可是老是不成功,特此记录一下。预备知识:def load(fp, cls=None,
- 概要在列表,元组,实例,类,字典和函数中存在循环引用问题。有 __del__ 方法的实例会以健全的方式被处理。给新类型添加GC支持是很容易的
- 工厂方法(Factory Method)模式又称为虚拟构造器(Virtual Constructor)模式或者多态工厂(Polymorphi
- 本文主要介绍了Opencv图片生成视频,分享给大家,具体如下:生成视频import random as rdimport cv2 as cv
- 本文通过实例代码介绍了如何在jscript和vbscript中使用操作FileSystemObject(fso)对象模式来编程.
- 在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值、重复值等异常情况