flask 前端应用展示

使用flask设计网站，用于展示已经完成的前端应用

http://www.ahaoboy.cn:2222/#/

架构如下，将所有的小应用放入apps文件夹下，外层调用getItems 接口获取apps文件夹下的所有目录

返回数组格式，包括name和url

    [
        {
            name:""，
            url:"",
        },
        {
            name:""，
            url:"",
        },

    ]

效果如下，这样可以在一个端口下，部署多个前端应用

url是对应的应用路径，在打包应用时，静态资源路径设置为./，这样可以直接打开而不是使用服务器

web.py

from flask import Flask, jsonify, request, send_file, make_response
import json
from random import sample
from flask_cors import CORS
from functools import reduce
# 使flask 可以将文件用gzip返回
from flask_compress import Compress
import os

app = Flask(__name__)
Compress(app)
CORS(app)


@app.route('/', methods=['post', 'get'])
def index():
    return send_file('./static/index.html')


'''
    返回条目的名称和url
    [
        {
            name:""，
            url:"",
        }
    ]
'''


@app.route('/getItems', methods=['post', 'get'])
def getItems():
    items = [
        {'name': name, 'url': '/static/apps/' + name + '/index.html'}
        for name in os.listdir('./static/apps')
    ]
    return jsonify(items)


app.run(port=2222, debug='disable', host='0.0.0.0', threaded=True)

前端的vue文件

获取json对象后，将数组渲染为条目

app.vue

<template>
  <div class="main">
    <h1>前端案例展示</h1>
    <div class="items">
      <Alert v-for="i,index in items" :key="index">
        <a :href="i.url" target="_blank">
          <h3>
            {{index+1}}, {{i.name}}
          </h3>
        </a>
      </Alert>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  let host = 'http://www.ahaoboy.cn:2222'
  // let host = 'http://localhost:2222'

  export default {
    name: 'App',
    data() {
      return {
        items: [],
      }
    },
    async mounted() {
      this.items = await  axios.get(host + '/getItems').then(resp => resp.data, err => err)
    }
  }
</script>

<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .items {
    display: flex;
    flex-direction: column;
    margin: 20px;
  }
</style>