React入门(增删改查)

忽然大雨 發表於 2020-10-15 15:39:00

话不多说,直接上代码,有哪些细节不会的问题可以直接问我,我会尽我所能回答
添加页面:
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_dbe0925a-3dda-40dd-91fa-ce2dfd80c139" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_dbe0925a-3dda-40dd-91fa-ce2dfd80c139" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_dbe0925a-3dda-40dd-91fa-ce2dfd80c139" class="cnblogs_code_hide">
<pre>@{
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)}>
 "layui-icon">&#xe608;添加
 </button>
 </div>
 </div>
 </div>
 </fieldset>
 </div>
 )
 }
 }
 ReactDOM.render(
 <CrudComponent />,document.getElementById("cun"))
</script>
</body>
</html></pre>
</div>
Add.cshtml</div>
显示页面:
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_198ad55f-020a-48bd-a14d-53460c62c913" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_198ad55f-020a-48bd-a14d-53460c62c913" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_198ad55f-020a-48bd-a14d-53460c62c913" class="cnblogs_code_hide">
<pre>@{
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></pre>
</div>
Index.cshtml</div>
修改页面:
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_e8ed56d2-f25c-4f4c-9437-4aec79b46b90" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_e8ed56d2-f25c-4f4c-9437-4aec79b46b90" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_e8ed56d2-f25c-4f4c-9437-4aec79b46b90" class="cnblogs_code_hide">
<pre>@{
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)}>
 "layui-icon">&#xe608;修改
 </button>
 </div>
 </div>
 </div>
 </fieldset>
 </div>
 )
 }
 }
 ReactDOM.render(
 <CrudComponent source="http://localhost:58646/api/Qx/FtLog" />,document.getElementById("cun"))
</script>
</body>
</html></pre>
</div>
Upt.cshtml</div>
后端接口:
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_9ad836bf-04e4-4788-9937-b297a3ff2474" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_9ad836bf-04e4-4788-9937-b297a3ff2474" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_9ad836bf-04e4-4788-9937-b297a3ff2474" class="cnblogs_code_hide">
<pre>//添加

 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);
 }
 //删除

 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);
 }
 //日志显示的方法

 public List<Log> LogShow()
 {
 return db.Log.ToList();
 }
 //反填

 public Log FtLog(int id)
 {
 string sql = $"select * from Log where LId={id}";
 return dbhelper.GetToList<Log>(sql)[0];
 }
 //修改

 public int XgLog(Log model)
 {
 string sql = $"Update Log set UserName='{model.UserName}' where LId={model.LId}";
 return dbhelper.ExecuteNonQuery(sql);
 }
 //查询日志

 public List<Log> CxLog(string name)
 {
 string sql = $"select * from Log ";
 if (name!="")
 {
 sql += $"where UserNamelike '%{name}%'";
 }
 else
 {
 sql += "where 1=1";
 }

 return dbhelper.GetToList<Log>(sql);
 }</pre>
</div>
Qx.cs</div>
 

</div>
<div id="MySignature" role="contentinfo">
越是无知的人越是觉得自己无所不知(之前的自己)

越是学习的人越是觉得自己会的太少了(现在的自己)

共勉 
来源：https://www.cnblogs.com/rookiewang/p/13820934.html

頁: [1]

琼殿技术论坛's Archiver

React入门(增删改查)