博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[增删改查] 使用 React 做后台管理 CRUD 界面和 RESTful 交互
阅读量:6995 次
发布时间:2019-06-27

本文共 1836 字,大约阅读时间需要 6 分钟。

1、前言

最流行的 JS 库,应用范围广: 

web、安卓、IOS、浏览器端、服务器端等

React 笔者很早就接触了, 

出于情怀,先选择国产的 Vue,后来感到有点鸡肋。 
或许是作为主要使用Java的后端开发人员,对React的面向组件的开发逻辑,感到轻车熟路

React 好比后端开发语言 Java(严谨完整)、Vue 好比后端开发语言 Python(力求简洁) 

或许是出自强迫症,一向严谨的秉性,对那些莫名的简洁,感到些许不安

做项目最基本的技能来了,CRUD 

UI:layui,国产,简单,还自带简单过渡 
JS交互:React 
后台:SpringBoot:

2、演示

2.1、主页

这里写图片描述

2.2、删除

这里写图片描述

2.3、新增

这里写图片描述

2.4、修改

这里写图片描述

2.5、查询

这里写图片描述

3、CRUD代码

3.1、主页

    
ITAEM
  • 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、增加页

    
ITAEM
  • 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、修改页

    
ITAEM
  • 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如需转载请联系原作者

你可能感兴趣的文章
UsingModelicaBuildingLibrary
查看>>
php_codesninffer phpcs用法学习使用:
查看>>
Python多线程threading进阶笔记
查看>>
使用 Kotlin 开发 Android 应用 | 8 个最优秀的 Android Studio 插件 Kotlin Android 素材...
查看>>
Java 面向对象 之 enum 枚举类型
查看>>
一张图看懂阿里云网络产品【十四】IPv6转换服务
查看>>
Android应用开发—Android 消息处理机制:Handler&Message
查看>>
数字货币量化实践线上分享
查看>>
Android应用开发-onNewIntent()
查看>>
推进你的计算机网络事业:10个技巧
查看>>
Android APP 性能优化的一些思考
查看>>
HyperLedger Fabric交易流程(6.3)
查看>>
JavaScript MVC 学习笔记(四)类的使用(下)
查看>>
java写的Http服务器下载工具
查看>>
Java中不同包下类与类之间的访问
查看>>
Seafile 发布 SeafileDocs 1.2,面向研发团队的文档管理
查看>>
php开源项目大全
查看>>
[20180607]函数与标量子查询8.txt
查看>>
阿里云服务器亚太东南1、亚太东南2、亚太东南 3、 5是哪个城市
查看>>
谈一下我们是如何开展code review的
查看>>