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

posted @ 2020-10-15 15:39 rookiexwang 阅读(2488) 评论(0) 编辑收藏举报

刷新页面返回顶部

rookie.

探讨努力,而非完美

React入门(增删改查)

公告