mariree · mariree · May 13, 2020 · May 13, 2020 · May 13, 2020 · Sep 22, 2020
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_BASE_URL='http://localhost:3000'
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+REACT_APP_BASE_URL='/api'
diff --git a/README.md b/README.md
@@ -1,6 +1,12 @@
 ## 项目说明
 基于antd组件库的后台管理系统。项目包含很多antd常见组件的用法，包含react常用路由、传参等react基础知识，适合react新手学习。
 
+## 注意事项
+nodeServer文件夹下是用node搭建的本地服务代码，在此目录下执行 npm i 下载好依赖， 再执行 npm run dev 启动本地服务，注意保证端口号是3000。
+启动node服务后，再回到根目录，使用npm start 启动项目。若无法启动，请先执行npm i下载依赖，正常启动后，此时会提示3000端口被占用，选择愿意使用其他端口号启动。
+在素材页，表格数据由接口提供，但是请求的接口端口号不一致会有跨域报错。推荐在谷歌扩展商店找到 Access-Control-Allow-Credentials: true 该插件，可以允许跨域访问借口。 如果谷歌浏览器安装插件后依然无法请求成功，请在Microsoft edge 浏览器安装此插件后访问。或者技术更好的同学自行配置ngx解决跨域问题。
+
+第一次尝试使用node封装后台接口，主要使用了express。没有连接数据库，数据存储在一个json静态文件中。
 
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/nodeServe/index.js b/nodeServe/index.js
@@ -1,6 +1,6 @@
 const fs = require('fs');
 const api = require('./http')
-const express = require('express')
+// const express = require('express')
 // const bodyParser = require('body-parser');
 // var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
@@ -57,4 +57,13 @@ api.post('/deleteData', (req, res) => {
         })
     })
 })
+
+// 
+api.post('/editData', (req, res) => {
+    res.status(200)
+    res.json({
+        dataStatus:'000000',
+        dataMsg: 'success'
+    })
+})
 api.listen(3000)
diff --git a/nodeServe/public/material.json b/nodeServe/public/material.json
@@ -1 +1 @@
-{"data":[{"type":"video","key":"002","id":"002","name":"002123.mp4","size":"1.6M","sharpness":"1920*1080","duration":"30s","author":"liu","upTime":"2020-04-08","folder":"文件夹1","organ":"机构一","status":"0"},{"name":"这是新的素材！","type":"video","size":"1.6M","sharpness":"1366*768","duration":"10s","author":"liu","upTime":"2020-05-12","folder":"文件夹1","organ":"机构SIO","status":"0","key":"1589272027240","id":"1589272027240"},{"name":"全新的素材2332！","type":"vidio","size":"算得上是2","sharpness":"1223*258","duration":"30s","author":"liu","upTime":"2020-5-8","folder":"files1","organ":"机构SOE","status":"0","id":"1589351576645","key":"1589351576645"}]}
+{"data":[{"type":"video","key":"002","id":"002","name":"002123.mp4","size":"1.6M","sharpness":"1920*1080","duration":"30s","author":"liu","upTime":"2020-04-08","folder":"文件夹1","organ":"机构一","status":"0"},{"name":"这是新的素材！","type":"video","size":"1.6M","sharpness":"1366*768","duration":"10s","author":"liu","upTime":"2020-05-12","folder":"文件夹1","organ":"机构SIO","status":"0","key":"1589272027240","id":"1589272027240"},{"name":"全新的素材2332！","type":"vidio","size":"算得上是2","sharpness":"1223*258","duration":"30s","author":"liu","upTime":"2020-5-8","folder":"files1","organ":"机构SOE","status":"0","id":"1589351576645","key":"1589351576645"},{"name":"新的素材12212","type":"新的类型","size":"35.6G","sharpness":"11*12","duration":"","author":"","upTime":"","folder":"","organ":"","status":"0","id":"1600759345719","key":"1600759345719"}]}
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "yarn": "^1.22.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=9000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/public/map/china.json b/public/map/china.json
diff --git a/src/App.css b/src/App.css
@@ -480,4 +480,20 @@ span._opeBtn {
 .layoutSide {
     width: 50px;
     height: 100%;
+}
+/* map */
+.EMap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    border: 1px solid var(--grayBorder);
+    height: 800px
+}
+.map-contain {
+    flex: auto;
+}
+.map-data {
+    width: 150px;
+    flex: none;
+    border-left: 1px solid var(--grayBorder);
 }
diff --git a/src/componets/LayoutContent.js b/src/componets/LayoutContent.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+class LayoutContent extends React.Component {
+    constructor(props) {
+        super(props)
+        console.log(this.props)
+    }
+
+    render() {
+        return (
+            <div></div>
+        )
+    }
+}
+
+export default LayoutContent
diff --git a/src/componets/LayoutInfo.js b/src/componets/LayoutInfo.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Form, Row, Col, InputNumber, Checkbox } from 'antd';
+
+class LayoutInfo extends React.Component {
+    constructor(props) {
+        super(props)
+        console.log(props)
+    }
+
+    render() {
+        return (
+            <div className="layoutInfo">
+                {
+                    // this.props.currentItemData.id&&
+                    // <Form className="form_pane">
+                    //     <h3 className="divider"><span>位置和大小</span></h3>
+                    //     <Row gutter={10}>
+                    //         <Col span={12}>
+                    //             <FormItem label="X"><InputNumber precision={0} disabled={!editable || isTemp} size="small" value={x} onChange={(value) => this.onChange({ x: value })} /></FormItem>
+                    //         </Col>
+                    //         <Col span={12}>
+                    //             <FormItem label="Y"><InputNumber precision={0} disabled={!editable || isTemp} size="small" value={y} onChange={(value) => this.onChange({ y: value })} /></FormItem>
+                    //         </Col>
+                    //         {
+                    //             (type !== 'Time' && type !== 'Dater' && weatherStyle!=='0') &&
+                    //             <Fragment>
+                    //                 <Col span={12}>
+                    //                     <FormItem label="W"><InputNumber precision={0} disabled={isRoot || (!isRoot && !editable) || !resizeAble} size="small" min={0} value={w} onChange={(value) => this.onChange({ w: value })} /></FormItem>
+                    //                 </Col>
+                    //                 <Col span={12}>
+                    //                     <FormItem label="H"><InputNumber precision={0} disabled={isRoot || (!isRoot && !editable) || !resizeAble || autoHeight} size="small" min={0} value={h} onChange={(value) => this.onChange({ h: value })} /></FormItem>
+                    //                 </Col>
+                    //                 <Col span={12}>
+                    //                     <FormItem label="等比"><Checkbox disabled={!editable || isTemp} checked={equalRatio} onChange={(e) => this.onSet({ equalRatio: e.target.checked })} /></FormItem>
+                    //                 </Col>
+                    //             </Fragment>
+                    //         }
+                    //         <Col span={12}>
+                    //             <FormItem label="层级"><InputNumber precision={0} disabled={isRoot || (!isRoot && !editable)} size="small" min={0} value={zIndex} onChange={(value) => this.onChange({ zIndex: value })} /></FormItem>
+                    //         </Col>
+                    //         <Col span={12}>
+                    //             <FormItem label="锁定"><Checkbox disabled={disabled || isTemp} checked={!editable} onChange={(e) => this.onSet({ editable: !e.target.checked })} /></FormItem>
+                    //         </Col>
+                    //     </Row>
+                    // </Form>
+                }
+            </div>
+        )
+    }
+}
+
+export default LayoutInfo
diff --git a/src/componets/LayoutSide.js b/src/componets/LayoutSide.js
@@ -7,8 +7,12 @@ class LayoutSide extends React.Component {
         console.log(this.props)
     }
 
+
+    componentWillReceiveProps(nextProps) {
+        console.log(nextProps)
+    }
     render() {
-        const {sideList} = this.props
+        const {sideList=[]} = this.props
         return (
             <div className="layoutSide">
                 {
@@ -24,7 +28,7 @@ class LayoutSide extends React.Component {
     }
 }
 
-LayoutSide.propTypes = {
-    sideList: PropTypes.array.isRequired
-  }
+// LayoutSide.propTypes = {
+//     sideList: PropTypes.array.isRequired
+//   }
 export default LayoutSide
diff --git a/src/componets/Material.js b/src/componets/Material.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import axios from 'axios';
+import axios from '../http';
 import { Input, Row, Col , Popover, Button, Radio ,Modal, message } from 'antd';
 import { ProfileOutlined, MenuOutlined, FolderAddOutlined, UnorderedListOutlined, AppstoreOutlined} from '@ant-design/icons';
 // import { fileData } from '../json/material'
@@ -53,11 +53,12 @@ export default class Material extends React.Component {
         this.addMatrial = this.addMatrial.bind(this)
         this.changeAddPopInfo = this.changeAddPopInfo.bind(this)
         this.addPopFun = this.addPopFun.bind(this)
+        this.cancelAddPopFun = this.cancelAddPopFun.bind(this)
     }
 
     initTableData () {
         let _this = this
-        axios.get('http://localhost:3000/getTest1', {
+        axios.get('/getTest1', {
         }).then(function (res) {
             if(res.data.dataStatus === '000000'){
                 console.log(res)
@@ -105,7 +106,7 @@ export default class Material extends React.Component {
         this.setState({
             addPopVisible: false
         })
-        axios.post('http://localhost:3000/addData', {...info, "status": "0"}).then(function (res) {
+        axios.post('/addData', {...info, "status": "0"}).then(function (res) {
             if(res.data.dataStatus === '000000'){
                 message.success('新增成功')
                 _this.initTableData()
@@ -114,6 +115,24 @@ export default class Material extends React.Component {
             console.log(error);
         })
     }
+
+    cancelAddPopFun() {
+        this.setState({
+            addPopVisible: false,
+            addMaterialInfo: {
+                "name": '',
+                "type": "",
+                "size": "",
+                "sharpness": "",
+                "duration": "",
+                "author": "",
+                "upTime": "",
+                "folder": "",
+                "organ": "",
+                "status": "0"
+            }
+        })
+    }
     render () {
         const {sidePart,currentFocus, chosedFile, addPopVisible} = this.state
         const filesEdit = ()=> {

diff --git a/src/http.js b/src/http.js
@@ -0,0 +1,81 @@
+import axios from "axios";
+
+let base = process.env.REACT_APP_BASE_URL;
+console.log('base',base)
+
+// 请求前拦截
+axios.interceptors.request.use(
+  config => {
+    return config;
+  },
+  err => {
+    console.log("请求超时");
+    return Promise.reject(err);
+  }
+);
+
+// 返回后拦截
+axios.interceptors.response.use(
+  data => {
+    return data;
+  },
+  err => {
+    if (err.response.status === 504 || err.response.status === 404) {
+      console.log("服务器被吃了⊙﹏⊙∥");
+    } else if (err.response.status === 401) {
+      console.log("登录信息失效⊙﹏⊙∥");
+    } else if (err.response.status === 500) {
+      console.log("服务器开小差了⊙﹏⊙∥");
+    }
+    return Promise.reject(err);
+  }
+);
+
+// @RequestBody请求
+const post = (url, params) => {
+    console.log('post触发',base)
+  return axios({
+    method: "post",
+    url: `${base}${url}`,
+    data: params,
+    headers: {
+      "Content-Type": "application/json",
+      charset: "utf-8"
+    }
+  });
+};
+
+// @RequsetParam请求
+const postRequestParam = (url, params) => {
+  return axios({
+    method: "post",
+    url: `${base}${url}`,
+    data: params,
+    transformRequest: [
+      function(data) {
+        let ret = "";
+        for (let it in data) {
+          ret +=
+            encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
+        }
+        return ret;
+      }
+    ],
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    }
+  });
+};
+
+const get = url => {
+    console.log('get触发',base)
+  return axios({
+    method: "get",
+    url: `${base}${url}`
+  });
+};
+
+const multiple = function(requsetArray, callback) {
+  axios.all(requsetArray).then(axios.spread(callback));
+};
+export default { get, post, postRequestParam, multiple }
diff --git a/src/pages/Complex.js b/src/pages/Complex.js
@@ -1,7 +1,7 @@
-import React, {Component} from 'react'
-import {createStore} from 'redux';
-import {Provider, connect} from 'react-redux';
-import axios from 'axios';
+import React, { Component } from 'react'
+import { createStore } from 'redux';
+import { Provider, connect } from 'react-redux';
+import axios from '../http';
 // import { ProfileOutlined, MenuOutlined, FolderAddOutlined, UnorderedListOutlined, AppstoreOutlined} from '@ant-design/icons';
 import LayoutSide from '../componets/LayoutSide'
 
@@ -18,8 +18,15 @@ class Increase extends Component {
     render() {
         return (
             <>
-                <p onClick={()=>{this.props.increase(this.props.number)}}>increase: {this.props.number}</p>
+                <p onClick={() => { this.props.increase(this.props.number) }}>increase: {this.props.number}</p>
                 <span onClick={this.test}>点我发请求</span>
+                <div>
+                    <p>标题</p>
+                    <ul>
+                        <li>1</li>
+                    </ul>
+                </div>
+                <span onClick={this.test}>点我发请求1111</span>
             </>
         )
     }
@@ -31,7 +38,7 @@ class Increase extends Component {
         // }).catch(function (error) {
         //     console.log(error);
         // });
-        axios.post('http://localhost:3000/editData', {
+        axios.post('/editData', {
             params: {}
         }).then(function (response) {
             console.log(response)
@@ -54,7 +61,7 @@ class Increase extends Component {
 
 
 
-function couterUp(state = {number: 100}, action) {
+function couterUp(state = { number: 100 }, action) {
     switch (action.type) {
         case 'up':
             return {
@@ -87,9 +94,9 @@ let Content = connect(
     mapDispatchToProps
 )(Increase);
 
-let LayoutSideWrap = connect(state=> ({
-        sideList:state.sideList
-    }))(LayoutSide)
+let LayoutSideWrap = connect(state => ({
+    sideList: state.sideList
+}))(LayoutSide)
 
 export default class Complex extends Component {
     constructor(props) {
@@ -102,7 +109,7 @@ export default class Complex extends Component {
                 {/* <LayoutSideWrap /> */}
                 <Content />
             </div>
-            
+
         </Provider>
     }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"data":[{"type":"video","key":"002","id":"002","name":"002123.mp4","size":"1.6M","sharpness":"19201080","duration":"30s","author":"liu","upTime":"2020-04-08","folder":"文件夹1","organ":"机构一","status":"0"},{"name":"这是新的素材！","type":"video","size":"1.6M","sharpness":"1366768","duration":"10s","author":"liu","upTime":"2020-05-12","folder":"文件夹1","organ":"机构SIO","status":"0","key":"1589272027240","id":"1589272027240"},{"name":"全新的素材2332！","type":"vidio","size":"算得上是2","sharpness":"1223*258","duration":"30s","author":"liu","upTime":"2020-5-8","folder":"files1","organ":"机构SOE","status":"0","id":"1589351576645","key":"1589351576645"}]}
		{"data":[{"type":"video","key":"002","id":"002","name":"002123.mp4","size":"1.6M","sharpness":"19201080","duration":"30s","author":"liu","upTime":"2020-04-08","folder":"文件夹1","organ":"机构一","status":"0"},{"name":"这是新的素材！","type":"video","size":"1.6M","sharpness":"1366768","duration":"10s","author":"liu","upTime":"2020-05-12","folder":"文件夹1","organ":"机构SIO","status":"0","key":"1589272027240","id":"1589272027240"},{"name":"全新的素材2332！","type":"vidio","size":"算得上是2","sharpness":"1223258","duration":"30s","author":"liu","upTime":"2020-5-8","folder":"files1","organ":"机构SOE","status":"0","id":"1589351576645","key":"1589351576645"},{"name":"新的素材12212","type":"新的类型","size":"35.6G","sharpness":"1112","duration":"","author":"","upTime":"","folder":"","organ":"","status":"0","id":"1600759345719","key":"1600759345719"}]}