jQuery,React和Node.js

结合jQuery的AJAX和React的fetch方法以对运行Node.js的服务器进行RESTful调用

集成jQuery和React

将jQuery与React应用程序集成时,可以在jQuery组件和React组件之间共享网络。 本文中显示的示例使用jQuery的AJAX方法将POST请求发送到服务器。 然后,响应由React组件呈现,在该组件中,它向API发出DELETE请求,以从数据库中删除项目。

本文是jQuery到React的扩展,它解决了类似的情况,但只有一个客户端。

要求

要在本地计算机上运行此示例,您将需要以下内容。 您还应该熟悉在计算机上设置本地服务器的过程。

  • Node.js
  • 表达
  • 反应
  • Webpack 2.0

单击此处转到GitHub存储库以获取此代码。

jQuery React Node.js应用

jQuery React Node.js应用程序从用户那里获取CSS颜色,然后将POST请求发送到RESTful api,然后将该颜色添加到数据库中。 然后,React呈现一个表,该表在的行中显示颜色名称,并设置背景色以匹配该行中的颜色。 在该行的右侧,有一个删除按钮,该按钮将DELETE请求发送到RESTful api,从数据库中删除颜色。 一次只能显示五种颜色。

jQuery的

jQuery代码使用两种方法。 $(’#button’)。click方法和postColor方法。

$(’#button’)。click

jQuery中的第一个方法是.click方法,该方法调用postColor方法。 postColor方法进行AJAX调用。

 从'./style.css'导入样式; 
从'react'导入React;
从'react-dom'导入ReactDOM;
从'./react/table'导入表;
//有关checkColor的信息,请参见github仓库
从'./helpers/color-list'导入{checkColor}
  $('#button')。click(function(event){ 
event.preventDefault();
var colors = $ .find('。td-color')
if(colors.length> 4){
警报(“您已达到最大颜色量”)
var colors = []
返回
}
让颜色= $('#color')。val()
var checked = checkColor(color.trim())
如果(!选中){
alert('请输入有效的CSS颜色。')
返回
}
  // **** 
// postColor进行AJAX调用
// ****
postColor(颜色)
  $('#color')。val('') 
})

postColor

jQuery中的第二种方法postColor进行AJAX调用。 在.done方法中,首先删除React组件(如果有的话),然后使用AJAX调用的结果进行呈现。

  var postColor = function(color){ 
var ajax = $ .ajax('/ colors',{
输入:“ POST”,
dataType:'json',
数据:JSON.stringify({
颜色:颜色
}),
contentType:“ application / json”
});
ajax.done(function(result){
ReactDOM.unmountComponentAtNode(
document.getElementById('root')

ReactDOM.render(
<表
颜色= {结果}
/>,
document.getElementById('root')

});
}

反应

React组件由三个组件组成: TableRowsRow

单击删除按钮后,它将调用_onDelete方法,该方法使用访从数据库中删除颜色。 使用访存时,必须手动处理状态码500。 如果删除成功,则将调用removeColor方法,并使用setState重新渲染具有剩余颜色的组件。

  “使用严格”; 
 从'react'导入React; 
从'./rows'导入行;
 类表扩展了React.Component { 
构造函数(道具){
超级(道具)
this._onDelete = this._onDelete.bind(this)
this.state = {
颜色:[]
}
}
componentDidMount(){
this.setState({
颜色:this.props.colors
})
}
_removeColor(colorId){
var colors = this.state.colors
for(颜色各不相同){
if(colorId == colors [i] .id){
colors.splice(i,1)
}
}
this.setState({
颜色:颜色
})
}
_onDelete(colorId){
fetch('/ colors /'+ colorId,{
方法:“删除”
})
.then((res)=> {
//抓取时为500
//必须手动处理
if(!res.ok){
抛出错误(res.statusText)
}
返回资源
})
.then(()=> {
this._removeColor(colorId)
返回
})
.catch((err)=> {
console.log(err)
})
}
render(){
返回(

反应组件


<行
颜色= {this.state.colors}
onDelete = {this._onDelete}
/>




}
}
 导出默认表 

行数

  “使用严格” 
 从'react'导入React; 
从'./row'导入Row;
  Rows扩展了React.Component { 
render(){
让行= this.props.colors.map((颜色,索引)=> {
返回<行
键= {索引}
color = {color.color}
onDelete = {this.props.onDelete}
colorId = {color.id}
/>
})
返回(
{rows}

}
}
 导出默认行 

组件在下面。 该行的背景色由style属性设置。 样式属性采用类似下面的对象。

  “使用严格”; 
 从'react'导入React; 
  Row类扩展了React.Component { 
render(){
返回(

<td
className ='td-color'
样式= {{backgroundColor:this.props.color}}
>
{this.props.color}

<td
className ='表格数据td-点击'
onClick = {()=>
this.props.onDelete(this.props.colorId)
}
>
删除



}
}
 导出默认行 

Node.js

该节点使用server.js作为入口点。 就本示例而言,数据库是一个空数组,名称为colors 。 另外,只有两个HTTP操作,即POST和DELETE。 此配置不适用于生产环境。

server.js

jQuery组件正在使用端点/ colors来发布新颜色。 React组件使用端点/ colors /:id删除颜色。 它从参数/:id中获取ID

  var express = require('express'); 
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static('public'));
  var id = 1; 
var colors = []
函数addColor(color){
id ++
const newColor = {
ID:ID,
颜色:颜色
}
colors.push(newColor)
}
函数removeColor(id){
for(颜色中的var i){
if(id == colors [i] .id){
colors.splice(i,1)
返回
}
}
}
  app.post('/ colors',(req,res)=> { 
addColor(要求.body.color)
res.status(201).json(颜色)
})
  app.delete('/ colors /:id',(req,res)=> { 
removeColor(req.params.id)
res.status(200).end()
})
  app.listen(process.env.PORT || 8080); 

本地运行

要运行此示例,请遵循存储库上README.me上的说明。

结论

集成jQuery和React的网络方法可以集成为使用同一数据库。 本文提供的示例只是多种方式之一。 谢谢阅读。