前端模块总共分为二个模块
1.药物推荐模块
2.序列分析模块
两个模块都适用React框架统一开发，运用mobx的全局参数共享技术处理后端传入的实时数据，另外，因为两个模块的开发时间与重构时间不一样，因此两个模块的开发周期不同所以在UI方面可能没有办法做到完全统一。
项目介绍：
生物信息学作为生命科学和自然科学的一门重大前沿学科，总是离不开对生物序列的分析，以了解大量生物数据的具体含义。在测序技术还没有发展起来，数据量很小的时候，手工处理数据的方式可以满足当时的需要。但在生物序列大规模扩展的今天，很明显落后的人工处理方式远远落后于计算机处理数据，而机器学习、深度学习、自然语言处理等技术的蓬勃发展使得处理生物序列的新方法。
但这也对生物工作者提出了更高的要求，他们想要高效快速地提取生物序列背后的信息，他们必须学习编程作为数据分析的工具。因此，需要开发一个可以接收生物序列分析并可以自动化序列分析、预测和相关可视化的可用平台或工具包。
然而，受多种因素的限制，传统的基于机器学习的方法不够准确，无法处理不平衡的数据集。生物序列分析以及与自然语言处理相关的深度学习算法也被广泛引入生物序列分析，例如 Bidirectional Encoder Representations from Transformers (BERT) 模型，它应用了 Transformer，一种基于注意力的架构，已经达到了状态- 在大多数自然语言处理任务中表现最佳。有一些研究表明 BERT 模型可以在生物序列分析中表现良好。
最后，我们开发了一个基于 BERT 模型的 Web 服务器。与当前可用的工具相比，我们的服务器主要优势有：我们的服务器是第一个基于 BERT 的用于序列二分类分析的网络平台，并提供分析结果的下载和可视化。此外，该服务器可以处理不平衡的数据集， 服务器可以为下一步进行表征和可视化工作。 与其他基于机器学习的平台不同，我们服务器的工作流程可以看作是一个黑匣子。我们提供端到端服务，用户上传他的序列并获得结果，无需设置特定的机器学习方法参数。我们的深度学习模型具有良好的迁移能力，可以让我们在其他后续任务上快速升级。
react构架方面：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import stores from './stores/stores';
import 'antd/dist/antd.css';
import Home from './pages/home';
import About from './pages/about/about';
import JobHome from './pages/job-home/jobHome';
import Result from './pages/result/result';
import ServerHome from './pages/server-home/serverHome';
import ServerPage from './pages/server-page/serverPage';
import ResultMail from './pages/result/resultMail/resultMail';
ReactDOM.render(
<Provider store={stores}>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/jobHome" component={JobHome} />
<Route exact path="/result" component={Result} />
<Route exact path="/serverHome" component={ServerHome} />
<Route exact path="/serverPage" component={ServerPage} />
<Route exact path="/resultMail" component={ResultMail} />
</Switch>
</Router>
</Provider>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
其中Route注册了需要跳转页面的路由，使用了mobx-react进行全局的状态管理。
mobx-react全局状态管理的代码编写为：
//分仓库代码：
import { observable, action, makeAutoObservable } from 'mobx';
import { FAILURE, REQUEST, SUCCESS, UNSET } from '../../constants/status';
class server {
constructor() {
makeAutoObservable(this);
}
@observable homeStatus=1
@observable status = UNSET;
@action request = () => {
this.status = REQUEST;
};
@action request_success = () => {
this.status = SUCCESS;
};
@action request_fail = () => {
this.status = FAILURE;
};
@action changeHomeStatue=(sum)=>{
this.homeStatus=sum
}
}
export default server;
//仓库集合代码：
import jobList from './jobList/jobList';
import result from './result/result';
import server from './server/server';
const jobLists = new jobList();
const results = new result();
const servers = new server();
const stores = {
jobLists,
results,
servers,
};
/// 默认导出接口
export default stores;
在页面构建方面react的使用：
import { Timeline } from 'antd';
import { inject, observer } from 'mobx-react';
import { useEffect } from 'react';
import "./tutorial.css"
import tutor_1 from '../../constants/img/tutor_1.jpg'
import tutor_2 from '../../constants/img/tutor_2.jpg'
import tutor_3 from '../../constants/img/tutor_3.jpg'
import tutor_4 from '../../constants/img/tutor_4.jpg'
import tutor_5 from '../../constants/img/tutor_5.jpg'
function Tutorial(store) {
useEffect(() => {
}, []);
return <div className="tutorial-body">
<div className="tutorial-connect-text_title">The tutorial for web server of DeepBIO:</div>
<div className="tutorial-connect-text_timeline">
<Timeline>
<Timeline.Item>
<div>
Step1: Move the cursor to the server button, two drop-down boxes will appear automatically, you can see “Train” and “Prediction” options as shown in Figure 1, click the module you want to use.
</div>
<div className="graph-tutor"><img src={tutor_1}/></div></Timeline.Item>
<Timeline.Item><div className="graph-tutor">
<div>
Step2: As Figure 2 illustrates, you can see three options, including DNA, RNA, and Protein. Click on the corresponding button according to the data type.
</div>
<img src={tutor_2}/></div></Timeline.Item>
<Timeline.Item>
<div>
Step3: Figure 3, 4, 5 illustrate what you need to upload or select for one analysis task, including five sections: “Input dataset”, “Advance options”, “Selecting deep learning models”, “Input your E-Mail”, and “Submit”. Finally, you can click the submit button to complete the task submission.
</div>
<div className="graph-tutor"><img src={tutor_3}/></div></Timeline.Item>
<Timeline.Item><div className="graph-tutor"><img src={tutor_4}/></div></Timeline.Item>
<Timeline.Item><div className="graph-tutor"><img src={tutor_5}/></div></Timeline.Item>
<Timeline.Item>
<div>
Step4: When the job is completed we will send an email for you, and you can see the result in the joblist page as shown in Figure 6.
</div>
</Timeline.Item>
</Timeline>,
</div>
</div>;
}
export default inject('store')(observer(Tutorial));
使用函数组件，在函数传入的参数内，使用mobx中的仓库内容，并且进行全句话管理。
函数式组件的大体构成由，函数式声明，函数内部的方法，与组件返回值组成，对应的每一步的操作都有相应的，函数组件的创建方式就是定义一个函数，这个函数 return React组件。因此，返回一个 React 元素的函数就是组件。在 ES6 语法中，函数有两种定义方式，普通函数和箭头函数，因此，函数组件的方式也是两种。
函数组件没有 state，React v16.8.0 推出了 Hooks API，提供了 React.useState API解决了此问题。
函数组件的 state 数据的设置和获取是提供了一个接口 React.useState(初始值)，用于设置 state 的初始值，对 state 进行初始化。函数里面的参数为初始值，函数返回一个数组，数组的第一个是读数据方式，第二个是写数据方式。读数据变量命名为 xx 时，写数据方式一般命名为 setXX。setN 是一个异步函数，不会立马执行。和 setState 不同的是，setState 是等一会后会改变 state ，而 setN 是永远不会改变 n，而是产生新的 n。
函数组件同样地没有生命周期，但是 React Hooks API 提供了 React.useEffect 来解决此问题。
React.useEffect(fn, []) 第一个参数是在特定时机到的时候执行的回调函数，第二个参数是指明什么时机。
其中各类的配置：
react：
1.需要先配置nodejs与npm管理。
2.然后用脚本安装react脚手架
3.运行初始的react脚手架，然后进行对应的react语法学习
4.药物推荐系统的ui框架使用阿里的antd，并在react里面安装对应依赖
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
