使用flask设计网站,用于展示已经完成的前端应用
架构如下,将所有的小应用放入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>