diff --git a/client/Application.js b/client/Application.js index 69203cc4..f473b73d 100644 --- a/client/Application.js +++ b/client/Application.js @@ -6,7 +6,7 @@ import { Home, ProjectGroups, Interface, News, AddInterface } from './containers import User from './containers/User/User.js'; import Header from './components/Header/Header'; import Footer from './components/Footer/Footer'; -import Breadcrumb from './components/Breadcrumb/Breadcrumb'; +// import Breadcrumb from './components/Breadcrumb/Breadcrumb'; import Loading from './components/Loading/Loading'; import { checkLoginState } from './actions/login'; import { requireAuthentication } from './components/AuthenticatedComponent'; @@ -50,7 +50,7 @@ export default class App extends Component {
- + {/* */} diff --git a/client/components/Breadcrumb/Breadcrumb.js b/client/components/Breadcrumb/Breadcrumb.js index 527032f6..5f440031 100644 --- a/client/components/Breadcrumb/Breadcrumb.js +++ b/client/components/Breadcrumb/Breadcrumb.js @@ -1,36 +1,116 @@ import './Breadcrumb.scss'; import { withRouter, Link } from 'react-router-dom'; import { Breadcrumb } from 'antd'; -// import { withRouter } from 'react-router'; +import axios from 'axios'; +import PropTypes from 'prop-types' import React, { Component } from 'react'; -// const breadcrumbNameMap = { -// '/group': '分组', -// '/apps/1': 'Application1', -// '/apps/2': 'Application2', -// '/apps/1/detail': 'Detail', -// '/apps/2/detail': 'Detail' -// }; + @withRouter export default class BreadcrumbNavigation extends Component { constructor(props) { super(props); + this.state = { + // breadcrumb: [{name:'首页', path: '/'}], + hash: '', + breadcrumb: [] + } + } + static propTypes = { + location: PropTypes.object + } + + getBreadcrumb = (pathSnippets) => { + console.log(pathSnippets); + // 重置 state 中的 breadcrumb，防止重复渲染 + this.setState({ + breadcrumb: [] + }); + if (/project|group|add-interface/.test(pathSnippets[0])) { + let type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0], + id = pathSnippets[pathSnippets.length-1]; + if (!pathSnippets.includes('edit')) { + type = 'project'; + } + const params = { type, id }; + axios.get('/user/nav', {params: params}).then( (res) => { + const data = res.data.data; + // 依次填入group/projec/interface + if (data.group_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.group_name, + path: '/group/' + data.group_id + }]) + }); + } + if (data.project_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.project_name, + path: '/project/' + data.project_id + }]) + }); + } + if (data.interface_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.interface_name, + path: '/add-interface/' + data.interface_id + }]) + }); + } + }); + } else if (pathSnippets[0] == 'user') { + this.setState({ + breadcrumb: [{ + name: '个人中心', + path: '/' + pathSnippets.join('/') + }] + }); + } else { + console.log(2); + } + } + componentDidMount() { + console.log(location.hash); + const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); + this.getBreadcrumb(pathSnippets); + this.setState({ + hash: location.hash.split('#')[1] + }) + } + componentWillReceiveProps(nextProps) { + // this.setState({ + // hash: nextProps.location.pathname + // }) + const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); + // console.log(nextProps.location.pathname, this.props.location.pathname); + if (nextProps.location.pathname !== this.props.location.pathname) { + // console.log('in'); + this.getBreadcrumb(pathSnippets); + this.setState({ + hash: nextProps.location.pathname + }) + } } render () { - // 获取接口路径并分割 + // console.log(this.state.hash); const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); - const extraBreadcrumbItems = pathSnippets.map((_, index) => { - const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; + // 获取接口路径并分割 + // console.log(this.state); + const extraBreadcrumbItems = this.state.breadcrumb.map((item) => { + // const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; return ( - - - {url} + + + {item.name} ); }); const breadcrumbItems = [( - Home + 首页 )].concat(extraBreadcrumbItems); if (pathSnippets.length) { diff --git a/client/containers/AddInterface/InterfaceTest/InterfaceTest.js b/client/containers/AddInterface/InterfaceTest/InterfaceTest.js index 9c7f6938..43664fe7 100644 --- a/client/containers/AddInterface/InterfaceTest/InterfaceTest.js +++ b/client/containers/AddInterface/InterfaceTest/InterfaceTest.js @@ -140,8 +140,8 @@ export default class InterfaceTest extends Component { crossRequest({ url: href, method, - headers, - data: params, + headers: this.getHeadersObj(headers), + data: this.arrToObj(params), success: (res) => { try { res = JSON.parse(res) @@ -266,6 +266,15 @@ export default class InterfaceTest extends Component { return dom.getAttribute('key') === 'yapi'; } + arrToObj(arr) { + const obj = {}; + arr.forEach(item => { + if (item.key) { + obj[item.key] = item.value || ''; + } + }) + return obj; + } getQueryObj(query) { const queryObj = {}; query.forEach(item => { @@ -275,6 +284,15 @@ export default class InterfaceTest extends Component { }) return queryObj; } + getHeadersObj(headers) { + const headersObj = {}; + headers.forEach(item => { + if (item.name && item.value) { + headersObj[item.name] = item.value; + } + }) + return headersObj; + } render () { @@ -350,7 +368,7 @@ export default class InterfaceTest extends Component { ) }) } - +
@@ -365,16 +383,18 @@ export default class InterfaceTest extends Component { ) }) } - +
- +
+ +
{ method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&