import React, { Component } from 'react';
import '../assets/css/App.css';
import '../assets/css/Myone.css';
import 'element-theme-default';

import { Button,Table } from 'element-react';


class Myone extends Component {

    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    type: 'selection'
                },
                {
                    label: "ID",
                    prop: "uid",
                    width: 160
                },
                {
                    label: "姓名",
                    prop: "nickname",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "日期",
                    prop: "times",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button>
                    }
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <Button type="text" size="small" onClick={this.selectRow.bind(this, row.uid)}>查看</Button>
                    }
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <Button type="text" size="small" onClick={this.updateRow.bind(this, row.uid)}>修改</Button>
                    }
                }
            ],
            data: [],
            list:[],
            username:[],
            password:[],
            phone:[]
        }
    }
    deleteRow(index) {
        const { data } = this.state;
        data.splice(index, 1);
        this.setState({
            data: [...data]
        })
    }

    createRow(){
        fetch(' http://fxc.glbuys.com/api/admin/users/add?token=79cee06eb8a4e0b489',{
            method: 'post',
            mode:'cors',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:"cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then(res=>{
            return res.json();
        }).then(json=>{
            console.log(json);
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    selectRow(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/details?uid='+uid+'&token=79cee06eb8a4e0b489',{
            method:'get'
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({list:json.data},()=>{
                    console.log(this.state.list.nickname)
                })
            }
        })
    }

    updateRow(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/details?uid='+uid+'&token=79cee06eb8a4e0b489',{
            method:'get'
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setState({
                    name:json.data.nickname,
                    phone:json.data.cellphone,
                    uid:json.data.uid
                })

            }
        })
    }
    updatealt(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/mod?token=79cee06eb8a4e0b489',{
            method:'post',
            mode:'cors',
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:"uid="+uid+"&cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    componentDidMount() {
        fetch('http://fxc.glbuys.com/api/admin/users/lists?page=1&token=79cee06eb8a4e0b489', {
            method: 'get'
        }).then((res) => {
            return res.json();
        }).then((json) => {
            if(json.code==200){
                this.setState({data:json.data},()=>{
                    // console.log(this.state.data)
                })
            }
        })

    }



  render() {
    return (
      <div className="Myone">


          <Table

              columns={this.state.columns}
              data={this.state.data}
              border={true}
              height={250}
              onSelectChange={(selection) => { console.log(selection) }}
              onSelectAll={(selection) => { console.log(selection) }}
          />
            <from>
                昵称:<input type="text" defaultValue={this.state.name} onChange={e=>{this.setState({username:e.target.value})}}/><br/>
                密码:<input type="password" onChange={e=>{this.setState({password:e.target.value})}}/><br/>
                手机号:<input type="text" defaultValue={this.state.phone} onChange={e=>{this.setState({phone:e.target.value})}}/><br/>
                <button type="button" onClick={this.createRow.bind(this)}>注册</button>
                <button type="button" onClick={this.updatealt.bind(this,this.state.uid)}>修改</button>
            </from>




      </div>
    );
  }
}
export default Myone;

表格

表格由 <table> 标签来定义。

每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由
<td> 标签定义)。

字母 td 指表格数据(table data),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如,要画出如下表格:

图片 1

 

分析: 1.分析行,每行是一个tr标签

    2.从第一行开始,看每行有几个单元格,几个单元格就是几个td标签

    3.如果是占用空间为1行1列,省略行数,直接为<td></td>。

上图的代码如下

 

 1     <body>
 2         <table width="400" height="400" border="2">
 3             <!-- 第1行 -->
 4             <tr>
 5                 <td colspan="4" bgcolor="aqua"></td>
 6             </tr>
 7             <!-- 第2行 -->
 8             <tr>
 9                 <td rowspan="4" bgcolor="antiquewhite"></td>
10                 <td colspan="3" bgcolor="antiquewhite"></td>
11             </tr>
12             <!-- 第3行 -->
13             <tr>
14                 <td rowspan="3" bgcolor="aquamarine"></td>
15                 <td colspan="2" bgcolor="aquamarine"></td>
16             </tr>
17             <!-- 第4行 -->
18             <tr>
19                 <td rowspan="2" bgcolor="bisque"></td>
20                 <td bgcolor="bisque"></td>
21             </tr>
22             <!-- 第5行 -->
23             <tr>
24                 <td></td>
25             </tr>
26         </table>
27     </body>

 

 

 2018-07-30

 

(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加。

 

  • 绘画canvas元素;

  • 用于媒介回放的video和audio元素;

  • 本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除;

  • 语意化更好的内容元素,比如article、footer、header、nav、section;

  • 表单控件,calendar、date、time、email、url、search;

  • 新的技术webworker,websockt和Geolocation。

(2)CSS3新特性:

  • 实现圆角(border-radius),阴影(box-shadow),边框图片(border-image);
  • 对文字加特效(text-shadow),强制文本换行(word-wrap),线性渐变(linear-gradient);
  • 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
  • 增加了更多的CSS选择器、多背景、rgba();
  • 唯一引入的伪元素是::selection ;
  • 实现媒体查询(@media),多栏布局(flex)。

(3)移除的元素

  • 纯表现的元素:basefont,big,center,font,s,strike,tt,u;
  • 对可用性产生负面影响的元素:frame,frameset,noframes;

(4)HTML5新标签的浏览器兼容问题是浏览器不能识别HTML5新标签而不能使用,解决办法有两种:

  •  方法1:实现标签被识别

发表评论

电子邮件地址不会被公开。 必填项已用*标注