使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互

1、前言最流行的 JS 库，应用范围广：web、安卓、IOS、浏览器端、服务器端等React 笔者很早就接触了，出于情怀，先选择国产的 Vue，后来感到有点鸡肋。或许是作为主要使用Java的后端开发人员，对React的面向组件的开发逻辑，感到轻车熟路React 好比后端开发语言 Java（严谨完整）、Vue 好比后端开发语言 Python（力求简洁）或许是出自强迫症，一...

IT小村

8815人浏览 · 2018-05-13 17:31:28

IT小村 · 2018-05-13 17:31:28 发布

1、前言

React——最流行的 JS 库，应用范围广：
web、安卓、IOS、浏览器端、服务器端等

React 笔者很早就接触了，
出于情怀，先选择国产的 Vue，简单好使。

[增删改查] 使用 Vue2.x + LayUI 做后台管理 CRUD 界面和 REST 交互

或许是作为主要使用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 工程化

安装 React 命令

npm install -g create-react-app

创建 React 工程

create-react-app react-app

开启 React 工程

cd react-app
npm start

4.3、几种常见的Ajax请求：

① $.ajax（ jQuery 里边的）
② jsonp
③ axios
④ fetch
⑤ vue-resource（基于 Vue 的）

4.4、React编程思想：

面向组件编程，使用虚拟DOM、diff算法，以最小代价渲染、更新页面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^