首页 > 其他分享> > OHIF Viewer 开发笔记（一）：添加启动页面

OHIF Viewer 开发笔记（一）：添加启动页面

2020-06-17 10:41:59 作者：互联网

OHIF Viewer 开发笔记（一）：添加登录页面

项目组件概览
修改思路&实现
简化的修改过程

项目组件概览

在添加启动页面之前，需要对项目的框架结构有一个大致的了解。使用 React 官方提供的 React Developer Tools 可以在浏览器的调试窗口中看到StudyList页面的Component Tree：
左侧显示的是组件树，右侧还可以看到组件的props属性。
图中左侧显示的是组件树，右侧显示组件的props属性。
上图的组件树中，App组件是项目的顶层组件，它的render方法返回的内容如下：

	<Provider store={store}>
        <AppProvider config={this._appConfig}>
          <I18nextProvider i18n={i18n}>
            <Router basename={routerBasename}>
              <WhiteLabelingContext.Provider value={whiteLabeling}>
                <SnackbarProvider service={UINotificationService}>
                  <DialogProvider service={UIDialogService}>
                    <ModalProvider modal={OHIFModal} service={UIModalService}>
                      <OHIFStandaloneViewer />
                    </ModalProvider>
                  </DialogProvider>
                </SnackbarProvider>
              </WhiteLabelingContext.Provider>
            </Router>
          </I18nextProvider>
        </AppProvider>
      </Provider>

组件嵌套最内层的OHIFStandaloneViewer组件是非常重要的组件，它使用react-router 提供的路由（Route）功能根据当前url返回对应的页面（组件）。

	const routes = RoutesUtil.getRoutes(appConfig);

    const currentPath = this.props.location.pathname;
    const noMatchingRoutes = !routes.find(r =>
      matchPath(currentPath, {
        path: r.path,
        exact: true,
      })
    );
    console.log(routes);
	return (
      <>
        <NProgress isAnimating={this.state.isLoading}>
          {({ isFinished, progress, animationDuration }) => (
            <Container
              isFinished={isFinished}
              animationDuration={animationDuration}
            >
              <Bar progress={progress} animationDuration={animationDuration} />
            </Container>
          )}
        </NProgress>
        <Route exact path="/silent-refresh.html" onEnter={RoutesUtil.reload} />
        <Route exact path="/logout-redirect.html" onEnter={RoutesUtil.reload} />
        {!noMatchingRoutes &&
          routes.map(({ path, Component }) => (
            <Route key={path} exact path={path}>
              {({ match }) => (
                <CSSTransition
                  in={match !== null}
                  timeout={300}
                  classNames="fade"
                  unmountOnExit
                  onEnter={() => {
                    this.setState({
                      isLoading: true,
                    });
                  }}
                  onEntered={() => {
                    this.setState({
                      isLoading: false,
                    });
                  }}
                >
                  {match === null ? (
                    <></>
                  ) : (
                      <Component match={match} location={this.props.location} />
                    )}
                </CSSTransition>
              )}
            </Route>
          ))}
        {noMatchingRoutes && <NotFound />}
      </>
    );

上述代码使用routes.map()方法将Route path和组件映射对应起来，我们使用console.log()方法查看routes的值：
在这里插入图片描述
routes数组中存储了5个元素，对应6个路径。其中根路径"/“和”/studylist"对应的都是studylist页面；"/local"页面功能为Drag and Drop DICOM files here to load them in the Viewer，Or click to Load files or Load folders from dialog。

修改思路&实现

React项目默认会从localhost:3000启动，也就是根目录"/"。为了添加启动或登录页面，必须首先渲染一个我们自己定义的Home组件，然后在Home组件中设置链接跳转到studylist页面。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';

export default function Home(props) {
  return (
    <Router>
      <Switch>
        <Route exact path="/studylist">
          <App {...props} />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/">
          <Welcome />
        </Route>
      </Switch>
    </Router>
  );
}

function About() {
  return (
    <div>
      <h2 color="blue">About</h2>
    </div>
  );
}

function Welcome() {
  return (
    <div>
      <h2 color="blue" align="center">
        欢迎来到直结肠癌诊断一体化平台！
      </h2>
      <ul>
        <li>
          <Link to="/studylist">Studylist</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

上述代码使用react-router 提供的路由功能实现了页面间的跳转。Home组件并不是真正的“首页”，它的功能只是根据当前URL渲染不同的组件。当URL为"/"时，渲染自定义的Welcome组件，Welcome组件包含两个链接（Link将在渲染时被替换成a标签）。

之后，我们需要在OHIFStandaloneViewer的路由表中将“/”和Home组件对应，"/studylist"和原StudylistRouting组件对应。
我们找到获取routes的RoutesUtil.getRoutes()方法，其中定义的默认route为：

const ROUTES_DEF = {
  default: {
    viewer: {
      path: '/viewer/:studyInstanceUIDs',
      component: ViewerRouting,
    },
    standaloneViewer: {
      path: '/viewer',
      component: StandaloneRouting,
    },
    list: {
      path: ['/studylist', '/'],
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },
    local: {
      path: '/local',
      component: ViewerLocalFileData,
    },
    IHEInvokeImageDisplay: {
      path: '/IHEInvokeImageDisplay',
      component: IHEInvokeImageDisplay
    },
  }

将list对象替换为：

	// list: {
    //   path: ['/studylist', '/'],
    //   component: StudyListRouting,
    //   condition: appConfig => {
    //     return appConfig.showStudyList;
    //   },
    // },
    home: {
      path: '/',
      component: Home,
    },
    list: {
      path: '/studylist',
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },

即可在OHIFStandaloneViewer组件中实现路由，url为"/“时导向Home组件，url为”/studylist"时导向StudyingRouting组件。
此时重启项目，首先会进入Home组件渲染的页面，点击Studylist链接就进入了Studylist页面。
在这里插入图片描述
但如果进入study viewer页面，页面左上角的“Study List”链接会返回到"/"，需要把它修改为“/studylist”。使用React Development Tools定位到该链接由Header组件渲染，它的LinkPath prop由Viewer组件提供。

找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件，将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。（原有代码被注释掉）

linkPath={
   // appContext.appConfig.showStudyList ? '/' : undefined
   appContext.appConfig.showStudyList ? '/studylist' : undefined
   }

这样我们就将一个简单的页面添加到了OHIF Viewer的最前面，可以实现用户登录的功能。

简化的修改过程

在Viewers\platform\viewer\src目录（App.js和OHIFStandaloneViewer.js的同级目录）下添加Home.js文件（为简化只粘贴必要代码）：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';

export default function Home(props) {
  return (
    <Router>
      <Switch>
        <Route exact path="/studylist">
          <App {...props} />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/">
          <Welcome />
        </Route>
      </Switch>
    </Router>
  );
}

function About() {
  return (
    <div>
      <h2 color="blue">About</h2>
    </div>
  );
}

function Welcome() {
  return (
    <div>
      <h2 color="blue">
        欢迎来到直结肠癌诊断一体化平台！
      </h2>
      <ul>
        <li>
          <Link to="/studylist">Studylist</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

找到Viewers\platform\viewer\src\routes\RoutesUtil.js文件，在顶部引入Home组件：

import Home from '../Home.js';

将ROUTES_DEF常量修改为：

	// list: {
    //   path: ['/studylist', '/'],
    //   component: StudyListRouting,
    //   condition: appConfig => {
    //     return appConfig.showStudyList;
    //   },
    // },
    home: {
      path: '/',
      component: Home,
    },
    list: {
      path: '/studylist',
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },

注释中为原有代码，未注释部分为新添加的部分。

找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件，将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。（原有代码被注释掉）

linkPath={
   // appContext.appConfig.showStudyList ? '/' : undefined
   appContext.appConfig.showStudyList ? '/studylist' : undefined
   }

标签：return,Viewer,appConfig,OHIF,Home,组件,path,studylist,页面
来源： https://blog.csdn.net/Qinyimin001/article/details/106629760