add fetch

lduoduo · May 10, 2017 · 0b3ef8a · 0b3ef8a
1 parent 59e2477
commit 0b3ef8a
Show file tree

Hide file tree

Showing 23 changed files with 156 additions and 153 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ yarn start || npm start
 - [x] 样式：Less
 - [x] 动画：Animate.css
 - [ ] 框架：Reflux
-- [ ] 与后台通信：Fetch
+- [x] 与后台通信：Fetch
 - [ ] 日期处理：Moment
 - [ ] 假数据模拟：MockJS
 - [ ] 使用ts重构
@@ -30,7 +30,9 @@ yarn start || npm start
 
 ### 自定义组件的使用方式
 SearchBar组件
-```javascript
+
+Table组件
+<!--```javascript
 <SearchBar
   onSubmit={this.onSearch}
   fields={[{
@@ -66,4 +68,4 @@ SearchBar组件
     }
   }}
   />
-  ```
+  ```-->
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
-  "main.css": "static/css/main.34388edf.css",
-  "main.css.map": "static/css/main.34388edf.css.map",
-  "main.js": "static/js/main.5f0217e2.js",
-  "main.js.map": "static/js/main.5f0217e2.js.map",
+  "main.css": "static/css/main.95495221.css",
+  "main.css.map": "static/css/main.95495221.css.map",
+  "main.js": "static/js/main.dc3c8bf4.js",
+  "main.js.map": "static/js/main.dc3c8bf4.js.map",
   "static/media/face.png": "static/media/face.a0e6c687.png"
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/react-antd-demo/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><title>React App</title><link href="/react-antd-demo/static/css/main.34388edf.css" rel="stylesheet"></head><body><div id="root" style="height:100%"></div><script type="text/javascript" src="/react-antd-demo/static/js/main.5f0217e2.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/react-antd-demo/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><title>React App</title><link href="/react-antd-demo/static/css/main.95495221.css" rel="stylesheet"></head><body><div id="root" style="height:100%"></div><script type="text/javascript" src="/react-antd-demo/static/js/main.dc3c8bf4.js"></script></body></html>
diff --git a/build/static/css/main.34388edf.css b/build/static/css/main.34388edf.css
diff --git a/build/static/css/main.34388edf.css.map b/build/static/css/main.34388edf.css.map
diff --git a/build/static/css/main.95495221.css b/build/static/css/main.95495221.css
diff --git a/build/static/css/main.95495221.css.map b/build/static/css/main.95495221.css.map
diff --git a/build/static/js/main.5f0217e2.js b/build/static/js/main.5f0217e2.js
diff --git a/build/static/js/main.dc3c8bf4.js b/build/static/js/main.dc3c8bf4.js
diff --git a/build/static/js/main.5f0217e2.js.map → build/static/js/main.dc3c8bf4.js.map b/build/static/js/main.5f0217e2.js.map → build/static/js/main.dc3c8bf4.js.map
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -82,6 +82,7 @@ module.exports = {
       images: path.resolve(__dirname, '..') + '/src/common/images',
       pages: path.resolve(__dirname, '..') + '/src/common/pages',
       utils: path.resolve(__dirname, '..') + '/src/common/utils',
+      data: path.resolve(__dirname, '..') + '/src/server/data',
     }
   },
 

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -90,6 +90,7 @@ module.exports = {
       images: path.resolve(__dirname, '..') + '/src/common/images',
       pages: path.resolve(__dirname, '..') + '/src/common/pages',
       utils: path.resolve(__dirname, '..') + '/src/common/utils',
+      data: path.resolve(__dirname, '..') + '/src/server/data',
     }
   },
 

diff --git a/package.json b/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "antd": "^2.9.3",
+    "antd": "2.10.0",
+    "fetch-jsonp": "^1.0.6",
     "less": "^2.7.2",
-    "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
@@ -28,6 +28,7 @@
     "css-loader": "0.26.1",
     "detect-port": "1.1.0",
     "dotenv": "2.0.0",
+    "es6-promise": "^4.1.0",
     "eslint": "3.16.1",
     "eslint-config-react-app": "^0.6.2",
     "eslint-loader": "1.6.0",
@@ -44,6 +45,7 @@
     "jest": "18.1.0",
     "json-loader": "0.5.4",
     "less-loader": "^4.0.3",
+    "lodash": "^4.17.4",
     "object-assign": "4.1.1",
     "postcss-loader": "1.2.2",
     "promise": "7.1.1",
@@ -53,7 +55,7 @@
     "webpack": "1.14.0",
     "webpack-dev-server": "1.16.2",
     "webpack-manifest-plugin": "1.1.0",
-    "whatwg-fetch": "2.0.2"
+    "whatwg-fetch": "^2.0.3"
   },
   "scripts": {
     "start": "node scripts/start.js",

diff --git a/src/common/components/table/index.js b/src/common/components/table/index.js
@@ -39,7 +39,7 @@ export default class Table extends React.Component {
       width: 50,
       fixed: this.props.rowIndexFixed,
     }];
-    // eslint-disable-next-line no-restricted-syntax
+
     for (const header of headers) {
       this.columns.push({
         ...header,
@@ -141,7 +141,7 @@ export default class Table extends React.Component {
         <AntTable
           rowSelection={this.props.rowSelection}
           scroll={this.props.scroll}
-          dataSource={this.props.data.map((row, i) => ({ ...row, key: i + 1 }))}
+          dataSource={this.props.data.map((row, i) => ({ ...row, rowIndex: i + 1, key: i + 1 }))}
           columns={this.columns}
           rowClassName={this.props.getRowClassName}
           loading={this.props.loading}
@@ -155,6 +155,7 @@ export default class Table extends React.Component {
             },
           } : false}
           footer={this.props.footer}
+          scroll={ {x: this.props.x, y: this.props.y } }
         />
       </div>
     );

diff --git a/src/common/container/bottom.js b/src/common/container/bottom.js
@@ -30,7 +30,7 @@ export default class Bottom extends React.Component {
         return (
             <Footer className="bottom animated bounceInLeft">
                 <div className="text">
-                    <div className="copyright">Copyright © 牧云云</div>
+                    <div className="copyright">Copyright © Muyy</div>
                     <div>您已在小窝里逗留了 <span className="time">{this.state.timer}</span> 秒</div>
                 </div>
             </Footer>

diff --git a/src/common/container/content.js b/src/common/container/content.js
@@ -4,7 +4,7 @@ import { Layout } from 'antd'
 import './content.less'
 import follow from 'pages/follow'
 import Tools from 'pages/tools'
-import Advertising from 'pages/advertising'
+import Music from 'pages/music'
 
 const { Content } = Layout
 
@@ -14,7 +14,7 @@ export default class Contents extends React.Component {
       <Content className="content">
         <Route path="/follow" component={follow} />
         <Route path="/tools" component={Tools} />
-        <Route path="/advertising" component={Advertising} />
+        <Route path="/music" component={Music} />
       </Content>
     );
   }

diff --git a/src/common/container/index.js b/src/common/container/index.js
@@ -52,7 +52,7 @@ export default class Container extends React.Component {
             <Menu.Item><Link to="/follow"><Icon type="home" /><span className="nav-text">欢迎页</span></Link></Menu.Item>
             <SubMenu key="sub2" title={<span><Icon type="bars" /><span>导航一</span></span>}>
               <Menu.Item key="5"><Link to="/tools">小应用</Link></Menu.Item>
-              <Menu.Item key="6"><Link to="/advertising">广告系列</Link></Menu.Item>
+              <Menu.Item key="6"><Link to="/music">音乐系列</Link></Menu.Item>
             </SubMenu>
             <SubMenu key="sub4" title={<span><Icon type="apple-o" /><span>导航二</span></span>}>
               <Menu.Item key="9"><Link to="/test">Test</Link></Menu.Item>

diff --git a/...n/pages/advertising/components/header.jsx → src/common/pages/music/components/header.jsx b/...n/pages/advertising/components/header.jsx → src/common/pages/music/components/header.jsx
diff --git a/...on/pages/advertising/components/popup.jsx → src/common/pages/music/components/popup.jsx b/...on/pages/advertising/components/popup.jsx → src/common/pages/music/components/popup.jsx
diff --git a/src/common/pages/advertising/index.js → src/common/pages/music/index.js b/src/common/pages/advertising/index.js → src/common/pages/music/index.js
@@ -3,19 +3,18 @@ import { Icon,Tooltip,Button,message } from 'antd'
 import { Link } from 'react-router'
 import SearchBar from 'components/searchbar'
 import Table from 'components/table'
-// 引入标准Fetch及IE兼容依赖
-// import 'whatwg-fetch'
-// import 'es6-promise/dist/es6-promise.min.js'
-// import 'fetch-ie8/fetch.js'
-
+import 'whatwg-fetch'
+import fetchJsonp from 'fetch-jsonp'
 import './index.less'
 
-export default class Advertising extends React.Component {
+require('es6-promise').polyfill();
+
+export default class Music extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             tData:[],
-            loading: false
+            loading: true,
         }
     }
 
@@ -30,16 +29,30 @@ export default class Advertising extends React.Component {
     // }
 
     // 获取表格数据
-    // fetchTableData = () => {
-    //     fetch('../data/tableData.json')
-    //         .then((res) => { console.log(res.status);return res.json(); })
-    //         .then((data) => { this.setState({loading:false});this.setState({tData:data.rowData}); })
-    //         .catch((e) => { console.log(e.message);});
-    // }
+    fetchTableData = (typeId) => {
+        fetchJsonp(`http://tingapi.ting.baidu.com/v1/restserver/ting?xml&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=${typeId}&size=200&offset=0`, {method: 'GET'})
+            .then((res) => { return res.json(); })
+            .then((data) => {
+                const songArray = []
+                const songList = data.song_list
+                for ( let i = 0; i < data.song_list.length; i++ ) {
+                    songArray.push({
+                        title: data.song_list[i].title,
+                        author: data.song_list[i].author,
+                        country: data.song_list[i].country,
+                        language: data.song_list[i].language,
+                        publishtime: data.song_list[i].publishtime,
+                    })
+                }
+                this.setState({tData: songArray});
+                this.setState({loading:false});
+            })
+            .catch((e) => { console.log(e.message);});
+    }
 
     // 组件渲染后获取外界数据(GET)
     componentDidMount() {
-        // this.fetchTableData()
+        this.fetchTableData('2')
     }
 
     onSearch = () => {
@@ -71,64 +84,33 @@ export default class Advertising extends React.Component {
         const { config } = this.props
         return [
             {
-                dataIndex: 'seriesName',
-                title: '系列名称',
-                render: (text, record) => {
-                // const name = window.__data.cityList.find(l => l.cityId === record.cityId) &&
-                //     window.__data.cityList.find(l => l.cityId === record.cityId).cityName
-                // return <span>{name}</span>
-                }
+                dataIndex: 'title',
+                title: '音乐名',
+                // render: (text, record) => {
+                // }
             },
             {
-                dataIndex: 'putonStatus',
-                title: '投放状态',
-                render: (text, record) => {
-                    // const payType = config.PAY_TYPE.find(l => l.value === record.payType) &&
-                    // config.PAY_TYPE.find(l => l.value === record.payType).mean
-                    // return <span>{payType}</span>
-                }
-            }, {
-                dataIndex: 'exposureURL',
-                title: '曝光URL',
-                render: (text, record) => {
-                }
-            }, {
-                dataIndex: 'putonLimit',
-                title: '投放限额',
-                render: (text, record) => {
-                }
-            }, {
-                dataIndex: 'averagePrice',
-                title: '点击均价',
-                render: (text, record) => {
-                }
-            }
-        ]
-    }
-
-    tableData =
-        [
+                dataIndex: 'author',
+                title: '歌手',
+            },
             {
-                seriesName: 'a',
-                putonStatus: 'b',
-                exposureURL: 'c',
-                putonLimit: 'd',
-                averagePrice: 'e',
+                dataIndex: 'country',
+                title: '发行国家',
             }, {
-                seriesName: 'a',
-                putonStatus: 'b',
-                exposureURL: 'c',
-                putonLimit: 'd',
-                averagePrice: 'e',
+                dataIndex: 'language',
+                title: '语言',
+            }, {
+                dataIndex: 'publishtime',
+                title: '发行时间',
             },
         ]
+    }
 
     tableAction = (actionKey, item) => {
         const that = this
         if (actionKey === 'edit') {
             this.setState({
                 item: item,
-                modalShowEdit: true
             })
         } else if (actionKey === 'delete') {
             confirm({
@@ -156,8 +138,9 @@ export default class Advertising extends React.Component {
                         <Table
                             onCtrlClick={ this.tableAction }
                             pagination={ true }
+                            pageSize={10}
                             header={ this.tableHeader() }
-                            data={ this.tableData }
+                            data={ this.state.tData }
                             loading={ this.state.loading }
                             action={row => [{
                                 key: 'edit',
@@ -170,6 +153,7 @@ export default class Advertising extends React.Component {
                                 color: 'red',
                                 icon: 'delete'
                             }]}
+                            y={385}
                         />
                     </div>
                 </div>

diff --git a/src/common/pages/advertising/index.less → src/common/pages/music/index.less b/src/common/pages/advertising/index.less → src/common/pages/music/index.less
diff --git a/src/common/routes.js b/src/common/routes.js
@@ -13,7 +13,7 @@ const routes = (
     <div>
       <Route path="/" component={Container} />
       <Route path="/login" component={Login} />
-      {/*<Redirect from='*' to='/login' />*/}
+      <Redirect from='*' to='/login' />
     </div>
   </HashRouter>
 )
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/react-antd-demo/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><title>React App</title><link href="/react-antd-demo/static/css/main.34388edf.css" rel="stylesheet"></head><body><div id="root" style="height:100%"></div><script type="text/javascript" src="/react-antd-demo/static/js/main.5f0217e2.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/react-antd-demo/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><title>React App</title><link href="/react-antd-demo/static/css/main.95495221.css" rel="stylesheet"></head><body><div id="root" style="height:100%"></div><script type="text/javascript" src="/react-antd-demo/static/js/main.dc3c8bf4.js"></script></body></html>