2021SC@SDUSC
项目框架搭建
经过前期对项目的讨论,在综合组内同学各自所掌握的技术栈后,组内决定使用前后端的BS架构,前端使用React框架+Material UI组件库搭建一个面向国内外用户的网页,后端使用SpringBoot框架搭建微服务类型的Java Web应用程序,同时配合Python编写的机器学习、深度学习相关部件完成项目。
由于我个人对前端技术掌握相对更完整、成熟,也有过先前编写较大型Web应用的经历,我和组内蒋一同学一起负责项目的前端部分。下面我介绍我们如何从无到有使用脚手架搭建一个采用npm进行包管理的前端React应用。
安装nodejs环境
- 在运行Windows或macOS的电脑上安装nodejs环境,需要去nodejs官网上下载安装包,Windows上为
.msi
(推荐)或.zip
格式,macOS上为.pkg
(推荐)或.tar.gz
格式,下载后点击运行,按照步骤执行即可 - 在运行Ubuntu等Linux操作系统的服务器上安装nodejs环境,可以使用自带的包管理器(pkg、apt&apt-get等等)进行安装
安装完成后在终端内执行
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)
- 引入Material UI组件库
参考文档 安装 MUI# 在DeepBIOFrontEnd目录下 npm install @mui/material @emotion/react @emotion/styled
- 引入
Axios
Axios
是一个著名的发送Ajax请求的模块,我们使用Axios进行与服务器的异步通讯npm install axios
- 引入mobx
npm install mobx npm install mobx-react
- 引入qs
由于axios的特性,在执行axios.post
方法发送数据时,axios会自动执行数据对象的JSON序列化,最后发送的是JSON字符串而不是原本的数据,后端难以处理此类数据。
我们需要先行使用qs包对数据对象进行包装,避免使用axios的序列化,让后端可以按照正常的方式收到POST请求的数据npm install qs
至此,本项目可能用到的全部前端ES Module都已引入,调用时只需要在文件里添加
import
语句即可快速使用模块化的js代码
项目的初期构建到此结束