自定义一个复杂的React Table表格组件-06

前面基本了解了组件的基本用法，在本节会实现一个更高级的例子。另外需要注意本节代码是采用V15版本的createClass()、React.DOM和JSX实现的，有时间的同学可以改成类实现的方式。

html的世界中最复杂的UI控制就是表格了，原因是table它依赖本地环境来创建，不同的系统不同的浏览器对table的实现并不一样，也导致有些功能换了个浏览器不就好用了。

完成后的需要如下：
在这里插入图片描述

基本实现

表头tr实现

表格的结构是 table–> thead --> tr --> td 共4级。

      var Excel = React.createClass({
        // displayName: 'Excel',
        render: function() {
          return (
            React.DOM.table(null,
              React.DOM.thead(null,
                React.DOM.tr(null,
                  this.props.headers.map(function(title, idx) { //map是个工具方法，用于list数据的循环
                    return React.DOM.th({key: idx}, title);
                  })
                )
              )
            )
          );
        }
      });

组件调用，下面的data数据暂时未用。

      var headers = [
        "Book", "Author", "Language", "Published", "Sales"
      ];
      
      var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"], 
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"], 
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"], 
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"], 
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"], 
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"], 
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
      ];

      ReactDOM.render(
        React.createElement(Excel, {
          headers: headers,
          initialData: data,
        }),
        document.getElementById("app")
      );

在这里插入图片描述

美化表格，添加CSS样式

这个和普通的html写法一样，因为最后所有的元素全会渲染成html代码，比如定义如下样式，然后通过
<link rel="stylesheet" type="text/css" href="table.css"> 引入即可。

td {
  border-top: 1px solid black;
  cursor: cell;
  padding: 5px;
}

th {
  cursor: pointer;
  padding: 5px;
}

table {
  border: 1px solid black;
  margin: 20px;
}

表格td实现

这里实现也比较简单，还是用map循环

    <script>
      var Excel = React.createClass({
        displayName: 'Excel',
        //数据验证
        propTypes: {
          headers: React.PropTypes.arrayOf(
            React.PropTypes.string
          ),
          initialData: React.PropTypes.arrayOf(
            React.PropTypes.arrayOf(
              React.PropTypes.any
            )
          ),
        },

        //绑定state数据，注意表格头数据是死的，所以不添加到state中
        getInitialState() {
          return {data: this.props.initialData};
        },
        
        render: function() {
          return (
            //沉浸表格头
            React.DOM.table(null,
              React.DOM.thead(null,
                React.DOM.tr(null,
                  this.props.headers.map(function(title, idx) {
                    return React.DOM.th({key: idx}, title);
                  })
                )
              ),
              
              //渲染表格内容，根据数据结构循环即可
              React.DOM.tbody(null,
                this.state.data.map(function(row, idx) {
                  return (
                    React.DOM.tr({key: idx},
                      row.map(function(cell, idx) {
                        return React.DOM.td({key: idx}, cell);
                      })
                    )
                  );
                })
              )
            )
          );
        }
      });
      
      var headers = [
        "Book", "Author", "Language", "Published", "Sales"
      ];
      
      var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], 
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"], 
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"], 
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"], 
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"], 
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"], 
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
      ];
      
      ReactDOM.render(
        React.createElement(Excel, {
          headers: headers,
          initialData: data,
        }),
        document.getElementById("app")
      );
    </script>

在这里插入图片描述

表格排序

实现的效果是点击表格头，就会按列内容进行排序。核心代码如下：

修改表格头，添加排序事件

React.DOM.table(null,
  React.DOM.thead({onClick: this._sort}, //添加这行代码
    React.DOM.tr(null,
      this.props.headers.map(function(title, idx) {
        return React.DOM.th({key: idx}, title);
      })
    )
  ),

实现排序事件

_sort: function(e) {
  var column = e.target.cellIndex; //得到当前列
  var data = this.state.data.slice(); //得到表格数据副本
  data.sort(function(a, b) {
    return a[column] > b[column] ? 1 : -1; //实现数据排序算法
  });
  this.setState({ //保存数据，重新渲染
    data: data,
  });
},

添加排序视觉响应

其就是给点击的列添加一个图标啥的，比如通过state来拓展：

//添加全局状态
getInitialState: function() {
  return {
    data: this.props.initialData,
    sortby: null,
    descending: false,
  };
},

//重设排序规则
_sort: function(e) {
  var column = e.target.cellIndex;
  var data = this.state.data.slice();
  var descending = this.state.sortby === column && !this.state.descending;
  data.sort(function(a, b) {
    return descending 
      ? (a[column] < b[column] ? 1 : -1)
      : (a[column] > b[column] ? 1 : -1);
  });
  this.setState({
    data: data,
    sortby: column,
    descending: descending,
  });
},

//沉浸时添加图标
render: function() {
  return (
    React.DOM.table(null,
      React.DOM.thead({onClick: this._sort},
        React.DOM.tr(null,
          this.props.headers.map(function(title, idx) {
            if (this.state.sortby === idx) {
              title += this.state.descending ? ' \u2191' : ' \u2193'
            }
            return React.DOM.th({key: idx}, title);
          }, this)
        )
      ),
    )
  );
}

编辑表格

这个功能实现起来也非常简单，总的来说是就是：1、给单元格加点击事件，确定当前单元格；2、在当前位置添加text控件；3、回传新数据给state；4、删除text控件；

添加点击事件

  getInitialState: function() {
      return {
        data: this.props.initialData,
        sortby: null,
        descending: false,
        edit: null, // [row index, cell index]
      };
  },
  
  React.DOM.tbody({onDoubleClick: this._showEditor}, //点击事件
    this.state.data.map(function(row, rowidx) {
      return (
        React.DOM.tr({key: rowidx},
          row.map(function(cell, idx) {
            var content = cell;
            var edit = this.state.edit;
            
            //因为是先设计了state，所以会自动重新render，这里会把当前位置添加一个input控件，用form来包裹，借助回车触发保存事件
            if (edit && edit.row === rowidx && edit.cell === idx) {
                //添加保存事件
                content = React.DOM.form({onSubmit: this._save},
                React.DOM.input({
                  type: 'text',
                  defaultValue: cell,
                })
              );
            }

            return React.DOM.td({
              key: idx,
              'data-row': rowidx,
            }, content);
          }, this)
        )
      );
    }, this)
  )

在这里插入图片描述

实现点击事件

_showEditor: function(e) {
  this.setState({edit: { //edit为一个自定义属性，需要在 getInitialState()方法中先注册
    row: parseInt(e.target.dataset.row, 10), //行索引坐标
    cell: e.target.cellIndex, //列索引坐标
  }});
},

添加保存事件

_save: function(e) {
  e.preventDefault();
  var input = e.target.firstChild; //取得输入框引用
  var data = this.state.data.slice();
  data[this.state.edit.row][this.state.edit.cell] = input.value; //改值
  this.setState({ //重设数据，再render()
    edit: null,
    data: data,
  });
},

表格搜索

在这里插入图片描述

添加搜索开关

getInitialState: function() {
  return {
    data: this.props.initialData,
    sortby: null,
    descending: false,
    edit: null, // [row index, cell index],
    search: false, //搜索开关
  };
},

因功能代码比较多，所以把原render方法，简单重构一下

render: function() {
  return (
    React.DOM.div(null,
      this._renderToolbar(), //搜索工具栏
      this._renderTable() //原表格实现，搜索框可放在这里实现
    )
  );
}

//声明搜索开关事件
_renderToolbar: function() {
  return React.DOM.button(
    {
      onClick: this._toggleSearch,
      className: 'toolbar',
    },
    'search'
  );
},

//实现开关事件，因为事先把search设置成了一个state数据，所以此值的改变会自动调用render()方法
_preSearchData: null,
_toggleSearch: function() {
  if (this.state.search) {
    this.setState({
      data: this._preSearchData, //在搜索前先复制一份之前的数据防止数据丢失
      search: false,
    });
    this._preSearchData = null;
  } else {
    this._preSearchData = this.state.data;
    this.setState({
      search: true,
    });
  }
},

添加搜索输入框

_renderSearch: function() {
  if (!this.state.search) {
    return null;
  }
  return (
    React.DOM.tr({onChange: this._search}, //搜索事件声明
      this.props.headers.map(function(_ignore, idx) {
        return React.DOM.td({key: idx},
          React.DOM.input({
            type: 'text',
            'data-idx': idx,
          })
        );
      })
    )
  );
},

然后在组件render()方法中添加，即多添加一个返回元素，即在this._renderTable()中添加以下代码。

this._renderSearch(),

实现搜索功能

注意，上述的搜索功能是放在了tr上面来实现的，这样的好处是方便表格定位

_search: function(e) {
  var needle = e.target.value.toLowerCase();
  if (!needle) { //当搜索字符删除时，渲染前一份数据
    this.setState({data: this._preSearchData});
    return;
  }
  //否则过滤当前数据
  var idx = e.target.dataset.idx;
  var searchdata = this._preSearchData.filter(function(row) {
    return row[idx].toString().toLowerCase().indexOf(needle) > -1;
  });
  this.setState({data: searchdata});
},

数据下载

可下载为json或csv数据，统一做到工具栏中，这里用a标签的原因是html5的新功能，如果链接为一文件则下载文件。

_renderToolbar: function() {
  return  React.DOM.div({className: 'toolbar'},
    React.DOM.button({ //搜索按钮
      onClick: this._toggleSearch,
    }, 'Search'),
    React.DOM.a({ //下载按钮
      onClick: this._download.bind(this, 'json'),
      href: 'data.json',
    }, 'Export JSON'),
    React.DOM.a({ //下载按钮
      onClick: this._download.bind(this, 'csv'),
      href: 'data.csv',
    }, 'Export CSV')
  );
}

功能实现

_download: function(format, ev) {
  //组织数据
  var contents = format === 'json'
    ? JSON.stringify(this.state.data)
    : this.state.data.reduce(function(result, row) {
        return result
          + row.reduce(function(rowresult, cell, idx) {
              return rowresult 
                + '"' 
                + cell.replace(/"/g, '""')
                + '"'
                + (idx < row.length - 1 ? ',' : '');
            }, '')
          + "\n";
      }, '');

  
  //数据封装
  var blob = new Blob([contents], {type: 'text/' + format});
  
  //重设<a>标签的属性实现下载
  var URL = window.URL || window.webkitURL;
  ev.target.href = URL.createObjectURL(blob);
  ev.target.download = 'data.' + format;
},

在这里插入图片描述

下载完整代码

Table.js

<!DOCTYPE html>
<html>
  <head>
    <title>Table</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="03.00.table.css">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script src="babel/browser.js"></script>
    <script type="text/babel">
      var Excel = React.createClass({
        displayName: 'Excel',
        
        propTypes: {
          headers: React.PropTypes.arrayOf(
            React.PropTypes.string
          ),
          initialData: React.PropTypes.arrayOf(
            React.PropTypes.arrayOf(
              React.PropTypes.string
            )
          ),
        },

        getInitialState: function() {
          return {
            data: this.props.initialData,
            sortby: null,
            descending: false,
            edit: null, // [row index, cell index],
            search: false,
          };
        },
        
        _sort: function(e) {
          var column = e.target.cellIndex;
          var data = this.state.data.slice();
          var descending = this.state.sortby === column && !this.state.descending;
          data.sort(function(a, b) {
            return descending 
              ? (a[column] < b[column] ? 1 : -1)
              : (a[column] > b[column] ? 1 : -1);
          });
          this.setState({
            data: data,
            sortby: column,
            descending: descending,
          });
        },
        
        _showEditor: function(e) {
          this.setState({edit: {
            row: parseInt(e.target.dataset.row, 10),
            cell: e.target.cellIndex,
          }});
        },
        
        _save: function(e) {
          e.preventDefault();
          var input = e.target.firstChild;
          var data = this.state.data.slice();
          data[this.state.edit.row][this.state.edit.cell] = input.value;
          this.setState({
            edit: null,
            data: data,
          });
        },
        
        _preSearchData: null,
        
        _toggleSearch: function() {
          if (this.state.search) {
            this.setState({
              data: this._preSearchData,
              search: false,
            });
            this._preSearchData = null;
          } else {
            this._preSearchData = this.state.data;
            this.setState({
              search: true,
            });
          }
        },
        
        _search: function(e) {
          var needle = e.target.value.toLowerCase();
          if (!needle) {
            this.setState({data: this._preSearchData});
            return;
          }
          var idx = e.target.dataset.idx;
          var searchdata = this._preSearchData.filter(function(row) {
            return row[idx].toString().toLowerCase().indexOf(needle) > -1;
          });
          this.setState({data: searchdata});
        },
        
        _download: function(format, ev) {
          var contents = format === 'json'
            ? JSON.stringify(this.state.data)
            : this.state.data.reduce(function(result, row) {
                return result
                  + row.reduce(function(rowresult, cell, idx) {
                      return rowresult 
                        + '"' 
                        + cell.replace(/"/g, '""')
                        + '"'
                        + (idx < row.length - 1 ? ',' : '');
                    }, '')
                  + "\n";
              }, '');

          var URL = window.URL || window.webkitURL;
          var blob = new Blob([contents], {type: 'text/' + format});
          ev.target.href = URL.createObjectURL(blob);
          ev.target.download = 'data.' + format;
        },
        
        render: function() {
          return (
            <div>
              {this._renderToolbar()}
              {this._renderTable()}
            </div>
          );
        },
        
        _renderToolbar: function() {
          return (
            <div className="toolbar">
              <button onClick={this._toggleSearch}>Search</button>
              <a onClick={this._download.bind(this, 'json')} 
                href="data.json">Export JSON</a>
              <a onClick={this._download.bind(this, 'csv')} 
                href="data.csv">Export CSV</a>
            </div>
          );
        },
        
        _renderSearch: function() {
          if (!this.state.search) {
            return null;
          }
          return (
            <tr onChange={this._search}>
              {this.props.headers.map(function(_ignore, idx) {
                return <td key={idx}><input type="text" data-idx={idx}/></td>;
              })}
            </tr>
          );
        },
        
        _renderTable: function() {
          return (
            <table>
              <thead onClick={this._sort}>
                <tr>{
                  this.props.headers.map(function(title, idx) {
                    if (this.state.sortby === idx) {
                      title += this.state.descending ? ' \u2191' : ' \u2193';
                    }
                    return <th key={idx}>{title}</th>;
                  }, this)
                }</tr>
              </thead>
              <tbody onDoubleClick={this._showEditor}>
                {this._renderSearch()}
                {this.state.data.map(function(row, rowidx) {
                  return (
                    <tr key={rowidx}>{
                      row.map(function(cell, idx) {
                        var content = cell;
                        var edit = this.state.edit;
                        if (edit && edit.row === rowidx && edit.cell === idx) {
                          content = (
                            <form onSubmit={this._save}>
                              <input type="text" defaultValue={cell} />
                            </form>
                          );
                        }
                        return <td key={idx} data-row={rowidx}>{content}</td>;
                      }, this)}
                    </tr>
                  );
                }, this)}
              </tbody>
            </table>
          );
        }
      });
      
      var headers = [
        "Book", "Author", "Language", "Published", "Sales"
      ];
      
      var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], 
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"], 
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"], 
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"], 
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"], 
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"], 
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
      ];
      
      var Ex = ReactDOM.render(
        React.createElement(Excel, {
          headers: headers,
          initialData: data
        }),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

table.css

html {
  background: white;
  font: 16px Arial;
}

input {
  font: 16px Arial;
}

td {
  border-top: 1px solid black;
  cursor: cell;
  padding: 5px;
}

th {
  cursor: pointer;
  padding: 5px;
}

table {
  border: 1px solid black;
  margin: 20px;
}

.toolbar {
  margin-left: 20px;
}

.toolbar a, .toolbar button { /* thanks css3buttongenerator.com! */
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px;
  box-shadow: 0px 1px 3px #666666;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 0;
  margin-right: 5px;
}

.toolbar a:hover, .toolbar button:hover {
  background: #3cb0fd;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/644144.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Java进阶学习笔记18——接口的注意事项

Java进阶学习笔记18——接口的注意事项

接口的多继承&#xff1a; 一个接口可以同时继承多个接口。 package cn.ensource.d11_interface_attention;public class Test {public static void main(String[] args) {// 目标&#xff1a;理解接口的多继承} }// 接口是多继承的 interface A{void test1(); } interface B{…
阅读更多...
【排序算法】——归并排序（递归与非递归）含动图

【排序算法】——归并排序（递归与非递归）含动图

制作不易&#xff0c;三连支持一下吧&#xff01;&#xff01;&#xff01; 文章目录 前言一.归并排序递归方法实现二.归并排序非递归方法实现 前言 这篇博客我们将介绍归并排序的原理和实现过程。 一、归并排序递归方法实现 基本思想&#xff1a; 归并排序&#xff08;MERGE-…
阅读更多...
Tina-Linux -- 3. LVGL测试

Tina-Linux -- 3. LVGL测试

参考韦东山 – Tina_Linux_图形系统_开发指南 Tina-linux lvgl 配置 环境配置 进入Tina-SDK根目录 source build/envsetup.sh lunch XXX平台名称 make menuconfigLVGL Gui --->Littlevgl --->< > lv_demo<*> lv_examples &#xff08;lvgl官方demo&#…
阅读更多...
LabVIEW虚拟测试实验室开发

LabVIEW虚拟测试实验室开发

LabVIEW虚拟测试实验室开发 在当代的科技和工业进步中&#xff0c;测试与测量扮演着至关重要的角色。随着技术的发展&#xff0c;测试系统也变得日益复杂和成本昂贵&#xff0c;同时对测试结果的准确性和测试过程的效率要求越来越高。开发了一种基于LabVIEW的虚拟测试实验室的…
阅读更多...
操作符详解（上）（新手向）

操作符详解（上）（新手向）

操作符详解&#xff08;上&#xff09; 一&#xff0c;算术操作符&#xff08;双目操作符&#xff09;1:‘’,‘-’,‘*’2&#xff1a;‘/’&#xff0c;‘%’ 一&#xff0c;单目操作符1:‘’,‘-’2&#xff1a;‘!’3&#xff1a;‘&’4&#xff1a;‘*’5&#xff1a;…
阅读更多...
02：PostgreSQL用户和权限

02：PostgreSQL用户和权限

环境&#xff1a; 操作系统&#xff1a;CentOS 7.9 64bitPostgreSQL 版本&#xff1a;16.x 或 15.x安装用户&#xff1a;postgres软件安装目标路径&#xff1a;/usr/pgsql-<version>数据库数据目录&#xff1a;/pgdata 目录 用户和角色 创建用户或角色 权限管理 查看权…
阅读更多...
初识Spring Boot

初识Spring Boot

初识Spring Boot SpringBoot是建立在Spring框架之上的一个项目,它的目标是简化Spring应用程序的初始搭建以及开发过程。 对比Spring Spring Boot作为Spring框架的一个模块&#xff0c;旨在简化Spring应用程序的初始搭建和开发过程&#xff0c;以下是Spring Boot相对于传统Spri…
阅读更多...
【前端笔记】Vue项目报错Error: Cannot find module ‘webpack/lib/RuleSet‘

【前端笔记】Vue项目报错Error: Cannot find module ‘webpack/lib/RuleSet‘

网上搜了下发现原因不止一种&#xff0c;这里仅记录本人遇到的原因和解决办法&#xff0c;仅供参考 原因&#xff1a;因为某种原因导致本地package.json中vue/cli与全局vue/cli版本不同导致冲突。再次提示&#xff0c;这是本人遇到的&#xff0c;可能和大家有所不同&#xff0c…
阅读更多...
【Elasticsearch】Centos7安装Elasticsearch、kibana、IK分词

【Elasticsearch】Centos7安装Elasticsearch、kibana、IK分词

目录 本文安装包下载地址注意安装elasticsearch1.上传文件2.解压elasticsearch-6.3.1.tar.gz3.开启远程连接权限4.修改其他配置[root用户操作]5.重启虚拟机6.启动es7.外部访问 安装kibana-61.解压2.配置3.启动kibana4.访问5.在开发工具中做数据的增删改查操作 安装IK分词1.wind…
阅读更多...
BUUCTF---web---[BJDCTF2020]ZJCTF，不过如此

BUUCTF---web---[BJDCTF2020]ZJCTF，不过如此

1、点开连接&#xff0c;页面出现了提示 传入一个参数text&#xff0c;里面的内容要包括I have a dream。 构造&#xff1a;?/textI have a dream。发现页面没有显示。这里推测可能得使用伪协议 在文件包含那一行&#xff0c;我们看到了next.php的提示&#xff0c;我们尝试读取…
阅读更多...
cs与msf权限传递，以及mimikatz抓取win2012明文密码

cs与msf权限传递，以及mimikatz抓取win2012明文密码

目录 解释参数 foreign http foreign https cs与msf权限传递 Cobalt Strike会话传递到Metasploit Framework Cobalt strike上的操作 ​编辑​编辑​编辑 Metasploit Framework上的操作 传递会话 Metasploit Framework会话传递到Cobalt Strike Cobalt strike上的操作…
阅读更多...
rk3568_atomic

rk3568_atomic

文章目录 前言一、atomic是什么？二、原子操作API函数1.atomic原子操作2.原子位操作API三、atomic驱动实验总结前言 本文记录的是正点原子rk3568开发板的atomic实验 一、atomic是什么？ 不同的线程在进行读写的过程中，可能会冲突乱入，导致会有预想不到的结果。所以为了让数…
阅读更多...
如何进行异地多地兼容组网设置？

如何进行异地多地兼容组网设置？

跨地区工作、远程办公和异地合作已成为常态。由于网络限制和安全性要求&#xff0c;远程连接仍然是一个具有挑战性的问题。为了解决这一难题&#xff0c;各行各业都在寻找一种能在异地多地兼容的组网设置方案。本文将着重介绍基于【天联】的组网解决方案&#xff0c;探讨其操作…
阅读更多...
Unity | 框架MVC

Unity | 框架MVC

目录 一、MVC介绍 二、搭建UI界面 三、代码实现 1.Model层 2.View层 3.Controller层 四、MVC框架测试 五、知识补充 一、MVC介绍 model&#xff1a;数据层。界面展示的数据&#xff08;需要进行初始化、更新、保存、事件通知等操作&#xff09;&#xff0c;单例模式&am…
阅读更多...
flutter 实现旋转星球

flutter 实现旋转星球

先看效果 planet_widget.dart import dart:math; import package:flutter/material.dart; import package:vector_math/vector_math_64.dart show Vector3; import package:flutter/gestures.dart; import package:flutter/physics.dart;class PlanetWidget extends StatefulW…
阅读更多...
内网穿透--Spp-特殊协议-上线

内网穿透--Spp-特殊协议-上线

免责声明:本文仅做技术交流与学习... 目录 spp项目: 一图通解: 1-下载spp 2-服务端执行命令 3-客户端执行命令 4-服务端cs监听&生马 spp项目: GitHub - esrrhs/spp: A simple and powerful proxy 支持的协议&#xff1a;tcp、udp、udp、icmp、http、kcp、quic 支持的…
阅读更多...
什么是健康信息卡

什么是健康信息卡

健康档案信息卡是交由居民本人保管的个人健康信息卡片。 其内容包括&#xff1a;居民个人主要基本信息、健康档案编码、患有的重要疾病、过敏史以及紧急情况下的联系人及联系方式&#xff0c;还有所属基层医疗机构的责任医生、护士及联系电话等。它主要用于居民在复诊、转诊或接…
阅读更多...
HTML+CSS 玻璃按钮

HTML+CSS 玻璃按钮

效果演示 Code <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>玻璃按钮</title><li…
阅读更多...
Distributed Transactions Mit 6.824

Distributed Transactions Mit 6.824

Topic1&#xff1a;distributed transactions concurrency control atomic commit 传统计划&#xff1a;事务 程序员标记代码序列的开始/结束作为事务。 事务示例 x 和 y 是银行余额——数据库表中的记录。x 和 y 位于不同的服务器上&#xff08;可能在不同的银行&#x…
阅读更多...
【Linux网络】端口及UDP协议

【Linux网络】端口及UDP协议

文章目录 1.再看四层2.端口号2.1引入linux端口号和进程pid的区别端口号是如何生成的传输层有了pid还设置端口号端口号划分 2.2问题2.3netstat 3.UDP协议3.0每学一个协议 都要讨论一下问题3.1UDP协议3.2谈udp/tcp实际上是在讨论什么&#xff1f; 1.再看四层 2.端口号 端口号(Po…
阅读更多...
最新文章

Copyright @ 2022~2023