项目实训–生物信息深度学习平台 个人总结2

发表评论 / 项目实训 / 作者：

2021SC@SDUSC

项目框架搭建

经过前期对项目的讨论，在综合组内同学各自所掌握的技术栈后，组内决定使用前后端的BS架构，前端使用React框架+Material UI组件库搭建一个面向国内外用户的网页，后端使用SpringBoot框架搭建微服务类型的Java Web应用程序，同时配合Python编写的机器学习、深度学习相关部件完成项目。
由于我个人对前端技术掌握相对更完整、成熟，也有过先前编写较大型Web应用的经历，我和组内蒋一同学一起负责项目的前端部分。下面我介绍我们如何从无到有使用脚手架搭建一个采用npm进行包管理的前端React应用。

安装nodejs环境

  1. 在运行Windows或macOS的电脑上安装nodejs环境，需要去nodejs官网上下载安装包，Windows上为.msi（推荐）或.zip格式，macOS上为.pkg（推荐）或.tar.gz格式，下载后点击运行，按照步骤执行即可
  2. 在运行Ubuntu等Linux操作系统的服务器上安装nodejs环境，可以使用自带的包管理器（pkg、apt&apt-get等等）进行安装

    可以参考 Ubuntu环境下安装nodejs和npm

    安装完成后在终端内执行

    node -v
npm -v

    检查安装情况
    安装完成后可以执行

    npm config set registry https://registry.npm.taobao.org/

    将npm的默认镜像源改为国内的淘宝镜像，加速每次npm install操作

    安装React脚手架程序

    保证上文安装的nodejs和npm包管理器版本满足Node>=14.0 && npm>=5.6的版本要求
    在终端执行

    # AppName在本项目里为DeepBIOFrontEnd，意为生物深度学习的前端界面
npx create-react-app AppName
cd AppName
npm start

    npx调用创建React App的相关程序，创建了一个React的App，进入此目录，使用npm编译包，最后搭建了一个运行在开发环境的React Web应用程序
    当然，yarn也可以替代npm，成为项目的包管理器。
    可以参考官方文档 创建新的 React 应用

npm引入项目相关依赖（ES Module）

  1. 引入Material UI组件库
    参考文档 安装 MUI

    # 在DeepBIOFrontEnd目录下
npm install @mui/material @emotion/react @emotion/styled
  2. 引入Axios
    Axios是一个著名的发送Ajax请求的模块，我们使用Axios进行与服务器的异步通讯

    npm install axios
  3. 引入mobx 
    npm install mobx
npm install mobx-react
  4. 引入qs
    由于axios的特性，在执行axios.post方法发送数据时，axios会自动执行数据对象的JSON序列化，最后发送的是JSON字符串而不是原本的数据，后端难以处理此类数据。
    我们需要先行使用qs包对数据对象进行包装，避免使用axios的序列化，让后端可以按照正常的方式收到POST请求的数据

    npm install qs

    至此，本项目可能用到的全部前端ES Module都已引入，调用时只需要在文件里添加import语句即可快速使用模块化的js代码

项目的初期构建到此结束

发表评论