第二章-面向公众的前后端

框架配置

前端基础框架	Vue3(typescript+SFC+组合式API)
前端样式框架	Element-plus+Bootstrap5+ECharts
后端响应框架	Flask

简介 | Vue.jsvuejs

vue3

https://element-plus.gitee.io/zh-CN/element-plus.gitee.io

element-plus

Bootstrap v5 中文文档getbootstrap

bootstrap5

Vue-ECharts: Vue.js component for Apache ECharts.

vue echarts

Welcome to Flask — Flask Documentation (2.3.x)

flask

文件描述

/src下有以下文件夹和文件

• App.vue

• assets

• components

• main.ts：vue配置文件

• router

• views

App.vue

vue框架构建Web项目运行入口文件。

assets

存放图片等资源文件夹。存放vue文件

components

组件文件夹。拥有以下文件

Index_search.vue

主页搜索组件

Species_list.vue

物种名录组件

Protected_species_list.vue

保护物种名录组件

National_park_species_list.vue

国家公园物种名录组件

show_data.vue

数据展示组件

search.py

后端响应程序

router

index.ts路由配置文件

views

视图文件夹。包括以下文件

index.vue

网站主页视图

show_data.vue

数据展示视图

主体关系如下图，更多细节请查看源码，已打注释。

Docker容器运行

1. docker start [containerid]启动容器

2. docker exec [containerid] bash /root/start.sh让容器启动前后端服务

3. docker exec [containerid] bash /root/end.sh让容器停止前后端服务

4. docker stop [containerid]停止容器