1、前言
最流行的 JS 库，应用范围广：
web、安卓、IOS、浏览器端、服务器端等
React 笔者很早就接触了，
出于情怀，先选择国产的 Vue，后来感到有点鸡肋。
或许是作为主要使用Java的后端开发人员，对React的面向组件的开发逻辑，感到轻车熟路
React 好比后端开发语言 Java（严谨完整）、Vue 好比后端开发语言 Python（力求简洁）
或许是出自强迫症，一向严谨的秉性，对那些莫名的简洁，感到些许不安
做项目最基本的技能来了，CRUD
UI：layui，国产，简单，还自带简单过渡
JS交互：React
后台：SpringBoot:https://github.com/larger5/CRUDspringboot.git
2、演示
2.1、主页
2.2、删除
2.3、新增
2.4、修改
2.5、查询
3、CRUD代码
3.1、主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<!-- React的核心库 -->
<script src="js/react.development.js"></script>
<!-- 提供操作DOM的react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 解析JSX语法代码转为纯JS语法代码的库 -->
<script src="js/babel.min.js"></script>
<!-- 发送 ajax 请求-->
<script src="js/fetch.js"></script>
<!-- LayUI CSS 样式 -->
<link type="text/css" rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="cun"></div>
<script type="text/babel">
class CrudComponent extends React.Component{
constructor(props){
super(props)
this.state={
users:[]
}
}
componentDidMount () {// 在此方法中启动定时器/绑定监听/发送ajax请求
const getAllUsersUrl="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/getAllUsers"
fetch(getAllUsersUrl,{method:"GET"})
.then(response=>response.json())
.then(data=>{
console.log(data)
this.setState({
users:data
})
})
}
getUserByUserName(){
const getUserByUserName="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/getUserByUserName/"+this.text1.value
fetch(getUserByUserName,{method:"GET"})
.then(response=>response.json())
.then(data=>{
console.log(data)
this.setState({
users:data
})
})
}
deleteUserById(id,userName){
if(window.confirm("确定要删除 "+userName+" 吗？")){
const getUserById="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/deleteUserById/"+id
fetch(getUserById,{method:"DELETE"})
.then(response=>response.json())
.then(data=>{
console.log(data)
this.setState({
users:data
})
})
}
}
addUser(){
window.location.href="http://localhost:63342/ReacTest/pageTest/10.CRUD.add.html?_ijt=ti5s31h50tdkekgf4ivl57dd48"
}
updateUser(id){
window.location.href="http://localhost:63342/ReacTest/pageTest/10.CRUD.update.html?_ijt=ot6mkr486r7iothtqcfcbmvo44#"+id
}
render(){
return (
<div>
<div className="layui-row layui-col-space2">
<div className="layui-col-md1">
<input type="text" id="query" name="q" required lay-verify="required" placeholder="用户名" className="layui-input" ref={text1=>this.text1=text1} />
</div>
<div className="layui-col-md1">
<button id="btn2" onClick={this.getUserByUserName.bind(this)} className="layui-btn">
<i className="layui-icon"></i>搜索
</button>
</div>
</div>
<table className="layui-table">
<thead>
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>修改</th>
<th>删除</th>
</tr>
</thead>
<tbody>
{
this.state.users.map(
(user, index) =>
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.userName}</td>
<td>{user.password}</td>
<td>
<button className="layui-btn layui-btn-normal" onClick={this.updateUser.bind(this,user.id)}>
<i className="layui-icon"></i>修改
</button>
</td>
<td>
<button className="layui-btn layui-btn-danger" onClick={this.deleteUserById.bind(this,user.id,user.userName)}>
<i className="layui-icon"></i>删除
</button>
</td>
</tr>)
}
</tbody>
</table>
<button className="layui-btn layui-btn-warm" onClick={this.addUser.bind(this)}>
<i className="layui-icon"></i> 添加
</button>
</div>
)
}
}
ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
3.2、增加页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<!-- React的核心库 -->
<script src="js/react.development.js"></script>
<!-- 提供操作DOM的react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 解析JSX语法代码转为纯JS语法代码的库 -->
<script src="js/babel.min.js"></script>
<!-- 发送 ajax 请求-->
<script src="js/fetch.js"></script>
<!-- LayUI CSS 样式 -->
<link type="text/css" rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="cun"></div>
<script type="text/babel">
class CrudComponent extends React.Component{
constructor(props){
super(props)
this.state={
users:[]
}
}
addUser(){
const insertUser="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/insertUser/"+this.userName.value+"/"+this.password.value
fetch(insertUser,{method:"POST"})
.then(response=>response.json())
.then(data=>{
console.log(data)
})
alert("添加成功")
window.location.href="http://localhost:63342/ReacTest/pageTest/10.CRUD.html?_ijt=qgmiem8qco2usprrmlul78r7vu"
}
render(){
return (
<div>
<fieldset className="layui-elem-field">
<legend>Add User</legend>
<div className="layui-field-box">
<div className="layui-row layui-col-space2">
<div className="layui-col-md1">
<input type="text" id="userName" name="userName" required lay-verify="required" placeholder="用户名" className="layui-input" ref={userName=>this.userName=userName} />
</div>
<hr className="layui-bg-green" />
<div className="layui-col-md1">
<input type="text" id="password" name="password" required lay-verify="required" placeholder="密码" className="layui-input" ref={password=>this.password=password} />
</div>
<hr className="layui-bg-green" />
<div className="layui-col-md1">
<button id="btn2" className="layui-btn" onClick={this.addUser.bind(this)}>
<i className="layui-icon"></i>添加
</button>
</div>
</div>
</div>
</fieldset>
</div>
)
}
}
ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
3.3、修改页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<!-- React的核心库 -->
<script src="js/react.development.js"></script>
<!-- 提供操作DOM的react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 解析JSX语法代码转为纯JS语法代码的库 -->
<script src="js/babel.min.js"></script>
<!-- 发送 ajax 请求-->
<script src="js/fetch.js"></script>
<!-- LayUI CSS 样式 -->
<link type="text/css" rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="cun"></div>
<script type="text/babel">
class CrudComponent extends React.Component{
constructor(props){
super(props)
}
componentDidMount () {
var userId = location.hash;
const getUserByUserId="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/getUserByUserId/"+userId.substring(1)
fetch(getUserByUserId,{method:"GET"})
.then(response=>response.json())
.then(data=>{
console.log(data[0])
this.id.value=data[0].id
this.userName.value=data[0].userName
this.password.value=data[0].password
})
}
updateUser(){
const getUserByUserId="http://120.79.197.130/crudTest-0.0.1-SNAPSHOT/user/updateUser/"+this.id.value+"/"+this.userName.value+"/"+this.password.value
fetch(getUserByUserId,{method:"PUT"})
.then(response=>response.json())
.then(data=>{
console.log(data)
})
alert("修改成功")
window.location.href="http://localhost:63342/ReacTest/pageTest/10.CRUD.html?_ijt=gdi6jpm674miigqtmehhe26j0u"
}
render(){
return (
<div>
<fieldset className="layui-elem-field">
<legend>Update User</legend>
<div className="layui-field-box">
<div className="layui-row layui-col-space2">
<div className="layui-col-md1">
<input type="text" id="id" name="id" required lay-verify="required" placeholder="id" className="layui-input" ref={id=>this.id=id} disabled="true" />
</div>
<hr className="layui-bg-green" />
<div className="layui-col-md1">
<input type="text" id="userName" name="userName" required lay-verify="required" placeholder="用户名" className="layui-input" ref={userName=>this.userName=userName} />
</div>
<hr className="layui-bg-green" />
<div className="layui-col-md1">
<input type="text" id="password" name="password" required lay-verify="required" placeholder="密码" className="layui-input" ref={password=>this.password=password} />
</div>
<hr className="layui-bg-green" />
<div className="layui-col-md1">
<button id="btn2" className="layui-btn" onClick={this.updateUser.bind(this)}>
<i className="layui-icon"></i>修改
</button>
</div>
</div>
</div>
</fieldset>
</div>
)
}
}
ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
4、最后
4.1、JS基础
回调函数：你没有调用，它自己调用
在HTML里边，一个{}表示里边写JS代码，两个即{{}}表示里边为JS对象
4.2、React 工程化
npm install -g create-react-app
create-react-app react-app
cd react-app
npm start
4.3、几种常见的Ajax请求：
① $.ajax
② jsonp
③ axios
④ fetch
⑤ vue-resource（基于Vue）
4.4、React编程思想：
面向组件编程，使用虚拟DOM、diff算法，以最小代价渲染、更新页面
原文发布时间为：2018年05月13日
原文作者：larger5
本文来源CSDN如需转载请联系原作者