🍳
Between code and words
  • About
    • About Me
    • About Book
  • 技术专辑
    • 大数据BigData
      • Ambari
        • 搭建虚拟机集群以及安装Ambari
          • self
            • 构建b
            • 构建m
            • 构建s
            • 构建集群
          • Windows
            • +VMware从头完全部署
            • +Docker从已有镜像简易部署
          • Linux
            • +Docker从头完全部署
            • +Docker从已有镜像简易部署
      • CDH
      • Maven
        • 一个简单的项目
        • GitHub远程maven私人仓库
      • Hadoop
        • HDFS介绍
        • MapReduce介绍
        • YARN介绍
        • HDFS常用命令
      • Hive
        • Hive简介及核心概念
        • Hive CLI和Beeline命令行的基本使用
        • ambari安装Hive
        • Hive常用DDL操作
        • Hive常用DML操作
        • Hive常用DCL操作
        • Hive分区表和分桶表
        • Hive 视图和索引
        • Hive数据查询详解
        • 进阶-优化
        • 进阶-函数
        • 进阶-Brickhouse UDF
        • 进阶-接入Python
      • 帮助
        • 常用端口
        • 常用命令
        • QA
    • 项目Program
      • 大数据项目实践
        • 1 亿条淘宝用户行为数据分析
          • 1. 部署环境
          • 2. 数据集下载
          • 3. 数据处理和表优化
          • 4.数据分析
          • 5.可视化
      • Web实践-Qhubl
        • 第一章-概
        • 第二章-面向公众的前后端
        • 部署指导
      • GNN
        • 1. 环境配置
        • 2. 节点分类
          • 数据集
            • Cora.py
          • 模型
            • GCN.py
            • GAT.py
          • Utils
            • draw.py
            • TTV.py
      • 美亚柏科
    • Linux
      • Linux
        • 常见
        • 代理
        • 科学计算
          • MPAS7
        • WSL
          • WSL数据迁移
          • 安装Docker Engine
        • 脚本
        • QA
      • Git
        • QA
      • VMware
        • 虚拟机代理
        • 双向复制粘贴
        • 磁盘扩容
        • QA
      • Docker
        • WSL安装Docker Engine
        • 优雅的上代理
        • 优雅地给容器新添端口
        • QA
      • MySQL
        • 重置初始密码
        • 免输密码登录
        • 低密码策略脚本
        • DeBug
    • Java
      • 语言特性
        • 多线程
        • AQS
        • JVMG1
      • 框架
        • SpringBoot
          • 注解
          • 配置
          • YAML
  • Self
    • 电脑应用
    • 奖项存档
    • 日语笔记
      • 入门五十音
      • 入门音调声调
    • 读书笔记
      • 《贫穷的本质》
        • 前言
        • 第一章 再好好想想
        • 第二章 饥饿人口已达到10亿？
Powered by GitBook
On this page
  • 框架配置
  • 文件描述
  • Docker容器运行
  1. 技术专辑
  2. 项目Program
  3. Web实践-Qhubl

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

Previous第一章-概Next部署指导

Last updated 2 years ago

框架配置

前端基础框架

Vue3(typescript+SFC+组合式API)

前端样式框架

Element-plus+Bootstrap5+ECharts

后端响应框架

Flask

文件描述

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

  • App.vue

  • assets

  • components

  • main.ts：vue配置文件

  • router

  • views

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

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

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

index.ts路由配置文件

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

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

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]停止容器

Index_search.vue

主页搜索组件

Species_list.vue

物种名录组件

Protected_species_list.vue

保护物种名录组件

National_park_species_list.vue

国家公园物种名录组件

show_data.vue

数据展示组件

search.py

后端响应程序

index.vue

网站主页视图

show_data.vue

数据展示视图

简介 | Vue.jsvuejs
vue3
Logo
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
Logo
Welcome to Flask — Flask Documentation (2.3.x)
flask
Drawing
Logo
Logo