大学三年级第三学期小组实训项目的前端。项目包括Vue源码以及docker部署相关文件。
本仓库是识花宝典系统的后端。
识花宝典是武汉大学学生自主研发的专业花朵识别信息数据库,收录了102种常见现生生物物种。此网站包括植物的权威名称、分类地位、形态特征、分布、功用、理论知识等内容,每一种植物均配有多张彩色照片。
本网站支持以图搜图和文字搜索功能。我们使用先进的机器学习(Mechine Learning)方法训练我们的深度卷积神经网络。根据测试,对于超过80%的情况,我们都可以给出正确的结果。
识花宝典可供植物学、农林、医药、海洋、生态、检验检疫等科研人员、教师和学生查询和学习,也可供普通大众全面学习**植物科学知识使用。
./
├── docker-compose.yaml
├── Dockerfile
├── nginx/
│ └── default.conf
├── README.md
└── web/
├── babel.config.js
├── docker-compose.yaml
├── Dockerfile
├── jsconfig.json
├── package.json
├── package-lock.json
├── public/
├── README.md
├── src/
│ ├── apis/
│ ├── App.vue
│ ├── assets/
│ ├── components/
│ ├── main.js
│ └── views/
└── vue.config.js
nginx文件夹存放nginx的Docker部署相关配置,web界面的Vue源码以及配置在web文件夹下存放。
本项目是基于 Nodejs v18.16.0 和 Vue 3.2 版本的 web 前端应用,使用前请确保 Nodejs 版本符合项目要求。
运行以下命令对项目进行 clone:
git clone https://git.gaokeyun.cn/Mloser/GiantIsopod-Front.git
Nodejs 官网:https://nodejs.org
项目部署是基于 docker 和 docker-compose 进行,若有部署需求,请先安装 docker 以及 docker-compose,确保能正常运行。
docker 官网:https://www.docker.com
- 进入到 web 目录下,运行
npm install
- 此时,web 文件夹下开始下载依赖文件到node_modules文件夹;
- 项目运行:
npm run serve
- 在确保项目已经能按照上步骤运行的条件下,进入到 web 目录下,运行命令:
npm run build
- 此时,web 文件夹下存在项目的构建文件夹 dist ;
- 在项目的根目录下运行命令来构建docker镜像:
docker-compose build
- 在项目根目录下运行命令来构建docker容器并启动容器:
docker-compose up
除下载源码部署外,还可从 docker hub 下载镜像并构建容器运行:
docker pull mloser/giantisopod_front:v1.0.1
docker run -d -p 8080:80 -t mloser/giantisopod_front:v1.0.1
其中,8080端口可自行修改为主机空闲端口,截止到 README 文档完成时,最新镜像版本为 v1.0.1,最新版本可移步 docker 仓库进行查看。
docker 仓库地址:https://hub.docker.com/repository/docker/mloser/giantisopod_front/general