[增删改查] 使用 React 做后台管理 CRUD 界面和交互

编程语言 2018-05-15 12:26:51 阅读次数: 6

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">&#xe602;</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">&#xe642;</i>修改
                                            </button>
                                        </td>
                                        <td>
                                            <button className="layui-btn layui-btn-danger" onClick={this.deleteUserById.bind(this,user.id,user.userName)}>
                                                <i className="layui-icon">&#xe640;</i>删除
                                            </button>
                                        </td>
                                    </tr>)
                            }
                            </tbody>
                        </table>

                        <button className="layui-btn layui-btn-warm" onClick={this.addUser.bind(this)}>
                            <i className="layui-icon">&#xe654;</i> 添加
                        </button>

                    </div>
                )
            }
        }
        ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
    </script>
</body>
</html>
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">&#xe608;</i>添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            )
        }
    }
    ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
</script>
</body>
</html>
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">&#xe642;</i>修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            )
        }
    }
    ReactDOM.render(<CrudComponent/>,document.getElementById("cun"))
</script>
</body>
</html>

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算法，以最小代价渲染、更新页面

猜你喜欢

转载自blog.csdn.net/larger5/article/details/80300968
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022