React入門(增刪改查)

本文轉載自查看原文 2020-10-15 15:39 1826 React

話不多說,直接上代碼,有哪些細節不會的問題可以直接問我,我會盡我所能回答

添加頁面:

@{
    ViewData["Title"] = "Add";
}

<h1>添加頁面</h1>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <script src="~/layui-v2.5.6/layui/layui.js"></script>
    <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div id="cun"></div>
    <script type="text/babel">
        //type="text/babel"
        class CrudComponent extends React.Component{
        constructor(props){
        super(props)
        this.state={
        list:[]
        }
        }



        addUser(){
        
            const insertUser = "http://localhost:58646/api/Qx/AddLog?username=" + this.username.value 
        fetch(insertUser,{method:"post"})
        .then(response=>response.json())
        .then(data=>{
        console.log(data)
        if (data>0) {
        alert("添加成功");
        window.location.href = "http://localhost:62817/Ajax/Index";
        }
        })

        
        }


        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">
                            <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>

Add.cshtml

顯示頁面:

@{
    ViewData["Title"] = "Index";
}

<h2>自己敲的ajax</h2>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 實例</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    
    <div id="example"></div>
    
    <script type="text/babel">
        //type="text/babel"
        class UserGist extends React.Component {
        constructor(props) {
        super(props);
        //在state設置兩個屬性，以便后續通過state對象來對其進行修改
        this.state = {List:[]};
        //綁定掛載事件
        this.componentDidMount = this.componentDidMount.bind(this);
        }

        componentDidMount() {
        //接下來操作state時上下文對象發生改變，此處拿到操作句柄
        var that = this;
        //ajax請求
        this.serverRequest = $.ajax({
        url: this.props.source,
        type:"GET",
        dataType:'json',
        success: function (result) {
        console.log(result);

        var lastGist = result;
        //此處的上下文發生改變，this的指針指向發生了變化，通過上述定義的that來操作
        that.setState({
        List: result,
        })
        }
        })
        }
        DelUser(index) {

        const insertUser = "http://localhost:58646/api/Qx/DelLog?id=" +index
        fetch(insertUser, { method: "post" }
        )
        .then(response => response.json())
        .then(data => {
        console.log(data)
        this.setState({
        List: this.state.List
        })
        if (data > 0) {
        alert("刪除成功");
        window.location.href = "http://localhost:62817/Ajax/Index";
        }



        })
        }

        //卸載React組件時，把多余請求關閉，以免影響其他框架或組件的操作
        componentWillUnmount() {
        this.serverRequest.abort();
        }





        //添加按鈕跳轉事件
        AddReact() {
        window.location.href = "http://localhost:62817/Ajax/Add";
        }

        //修改按鈕點擊跳轉事件
        UptUser(id){
        window.location.href = "http://localhost:62817/Ajax/Upt?id="+id;
        }

        //查詢按鈕點擊事件
        CxReact()
        {
        const insertUser = "http://localhost:58646/api/Qx/CxLog?name=" +this.name.value
        fetch(insertUser, { method: "post" }
        )
        .then(response => response.json())
        .then(data => {
        console.log(data)
        this.setState({
        List: data
        })
        //if (data > 0) {
        //    window.location.href = "http://localhost:62817/Ajax/Index";
        //}



        })
        }

        render() {
        return (
        <div>
            <button onClick={this.AddReact.bind(this)}>
                添加
            </button>
            操作人名稱是:
            <input type="text" id="name" name="name" ref={name => this.name = name} />
            <button onClick={this.CxReact.bind(this)}>
                查詢
            </button>
            <table className="table table-bordered">
                <thead>
                    <tr>
                        <td>主鍵Id</td>
                        <td>操作人</td>
                        <td>操作狀態</td>
                        <td>操作時間</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    {

                    this.state.List.map((item,index) => {
                    return (

                    <tr key={index}>
                        <td>{item.lId}</td>
                        <td>{item.userName}</td>
                        <td>{item.state}</td>
                        <td>{item.time}</td>
                        <td><button onClick={this.DelUser.bind(this,item.lId)}>刪除</button><button onClick={this.UptUser.bind(this,item.lId)}>修改</button></td>
                    </tr>

                    )
                    }
                    )

                    }
                </tbody>
            </table>

            @*{this.state.date[0].userName} 用戶最新的 Gist 共享地址：
            <a href={this.state.lastGistUrl} rel="nofollow">{this.state.lastGistUrl}</a>*@
        </div>
        );
        }
        }

        ReactDOM.render(
        <UserGist source="http://localhost:58646/api/Qx/LogShow" />,
        document.getElementById('example')
        );
    </script>

</body>
</html>

Index.cshtml

修改頁面:

@{
    ViewData["Title"] = "Upt";
}

<h1>修改頁面</h1>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <script src="~/layui-v2.5.6/layui/layui.js"></script>
    <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div id="cun"></div>
    <script type="text/babel">
        //type="text/babel"
        class CrudComponent extends React.Component{
        constructor(props){
        super(props)
        this.state={
        list:[]
        }
        }

        //反填
        componentDidMount() {
        //接下來操作state時上下文對象發生改變，此處拿到操作句柄
        var that = this;
        //ajax請求
        this.serverRequest = $.ajax({
        url: this.props.source+"?id="+@ViewBag.userid,
        type:"post",
        dataType:'json',
        success: function (result) {
        console.log(result);
        var lastGist = result;
        $("#username").val(result.userName);
        //此處的上下文發生改變，this的指針指向發生了變化，通過上述定義的that來操作
        that.setState({
        list: result,
        })
        }
        })
        }


        UptUser(){

        const insertUser = "http://localhost:58646/api/Qx/XgLog?username=" + this.username.value+"&LId="+@ViewBag.userid
        fetch(insertUser,{method:"post"})
        .then(response=>response.json())
        .then(data=>{
        console.log(data)
        if (data>0) {
        alert("修改成功");
        window.location.href = "http://localhost:62817/Ajax/Index";
        }
        })


        }


        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">
                            <button id="btn2" className="layui-btn" onClick={this.UptUser.bind(this)}>
                                <i className="layui-icon">&#xe608;</i>修改
                            </button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        )
        }
        }
        ReactDOM.render(
        <CrudComponent source="http://localhost:58646/api/Qx/FtLog" />,document.getElementById("cun"))
    </script>
</body>
</html>

Upt.cshtml

后端接口:

//添加
        [HttpPost]
        public int AddLog(Log m)
        {
            //LogHelper log = new LogHelper();
            //Log model = new Log();
            string sql = $"insert into Log values('{m.UserName}',2,1,'{DateTime.Now }')";
            return dbhelper.ExecuteNonQuery(sql);
        }
        //刪除
        [HttpPost]
        public int DelLog(int id)
        {
            //LogHelper log = new LogHelper();
            //Log model = new Log();
            string sql = $"delete from Log where LId={id}";
            return dbhelper.ExecuteNonQuery(sql);
        }
        //日志顯示的方法
        [HttpGet]
        public List<Log> LogShow()
        {
            return db.Log.ToList();
        }
        //反填
        [HttpPost]
        public Log FtLog(int id)
        {
            string sql = $"select * from Log where LId={id}";
            return dbhelper.GetToList<Log>(sql)[0];
        }
        //修改
        [HttpPost]
        public int XgLog(Log model)
        {
            string sql = $"Update Log set UserName='{model.UserName}' where LId={model.LId}";
            return dbhelper.ExecuteNonQuery(sql);
        }
        //查詢日志
        [HttpPost]
        public List<Log> CxLog(string name)
        {
            string sql = $"select * from Log ";
            if (name!="")
            {
                sql += $"where UserName  like '%{name}%'";
            }
            else
            {
                sql += "where 1=1";
            }
            
            return dbhelper.GetToList<Log>(sql);
        }

Qx.cs

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React_TODOList 數據增刪改查 React-Antd Pro增刪改查 Mybatis入門案例之增刪改查 koa2入門（3）mongoose 增刪改查 elasticsearch索引的增刪改查入門 SQL增刪改查 bootstrap之增刪改查增刪改查(curd) solr的增刪改查 JpaRepository 增刪改查