Flask 和 Vue.js 开发及整合部署实例

1flask-vue-app
2└── backend
3    └── app.py

 1from flask import Flask, jsonify
 2from flask_cors import CORS
 3
 4DEBUG = True
 5
 6app = Flask(__name__)
 7app.config.from_object(__name__)
 8
 9CORS(app, resources={r'/*': {'origins': '*'}})
10
11
12@app.route('/api/ping', methods=['GET'])
13def ping_pong():
14    return jsonify('pong!')
15
16
17@app.route('/')
18def index():
19    return app.send_static_file('index.html')
20
21
22@app.route('/<path:fallback>')
23def fallback(fallback):       # Vue Router 的 mode 为 'hash' 时可移除该方法
24    if fallback.startswith('css/') or fallback.startswith('js/')\
25            or fallback.startswith('img/') or fallback == 'favicon.ico':
26        return app.send_static_file(fallback)
27    else:
28        return app.send_static_file('index.html')
29
30
31if __name__ == '__main__':
32    app.run()

 1flask-vue-app
 2├── backend
 3│   └── app.py
 4└── frontend
 5    ├── README.md
 6    ├── babel.config.js
 7    ├── package-lock.json
 8    ├── package.json
 9    ├── public
10    │   ├── favicon.ico
11    │   └── index.html
12    └── src
13        ├── App.vue
14        ├── assets
15        │   └── logo.png
16        ├── components
17        │   └── HelloWorld.vue
18        ├── main.js
19        ├── router
20        │   └── index.js
21        └── views
22            ├── About.vue
23            └── Home.vue

 1<template>
 2  <div>
 3    <p>{{ msg }}</p>
 4  </div>
 5</template><br/><br/>
 6<script>
 7export default {
 8  name: 'Ping',
 9  data() {
10    return {
11      msg: 'Hello!',
12    };
13  },
14};
15</script>

 1import Vue from 'vue';
 2import VueRouter from 'vue-router';
 3import Home from '../views/Home.vue';
 4import Ping from '../components/Ping.vue';
 5
 6Vue.use(VueRouter);
 7
 8const routes = [
 9  {
10    path: '/',
11    name: 'Home',
12    component: Home,
13  },
14  {
15    path: '/about',
16    name: 'About',
17    // route level code-splitting
18    // this generates a separate chunk (about.[hash].js) for this route
19    // which is lazy-loaded when the route is visited.
20    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
21  },
22  {
23    path: '/ping',   # 用来调用 Flask 的 "/api/ping" API
24    name: 'Ping',
25    component: Ping,
26  },
27  {
28    path: '/ping_xyz', # 这个用来测试，非 Flask 中定义的路由，可被 Vue 进行处理
29    name: 'Ping',
30    component: Ping,
31  },
32];
33
34const router = new VueRouter({
35  mode: 'history',
36  base: process.env.BASE_URL,
37  routes,
38});
39
40export default router;

1<template>
2  <div id="app">
3    <router-view/>
4  </div>
5</template>

 1<script>
 2import axios from 'axios';
 3
 4export default {
 5  name: 'Ping',
 6  data() {
 7    return {
 8      msg: '',
 9    };
10  },
11  methods: {
12    getMessage() {
13      const path = 'http://localhost:5000/ping';
14      axios.get(path)
15        .then((res) => {
16          this.msg = res.data;
17        })
18        .catch((error) => {
19          // eslint-disable-next-line
20          console.error(error);
21        });
22    },
23  },
24  created() {
25    this.getMessage();
26  },
27};
28</script>

 1flask-vue-app
 2├── backend
 3│   └── app.py
 4├── frontend
 5│   ├── README.md
 6│   ├── babel.config.js
 7│   ├── dist
 8│   │   ├── css
 9│   │   │   └── app.ee9fa358.css
10│   │   ├── favicon.ico
11│   │   ├── img
12│   │   │   └── logo.82b9c7a5.png
13│   │   ├── index.html
14│   │   └── js
15│   │       ├── about.838e43ea.js
16│   │       ├── about.838e43ea.js.map
17│   │       ├── app.38688cdc.js
18│   │       ├── app.38688cdc.js.map
19│   │       ├── chunk-vendors.6ddee4a6.js
20│   │       └── chunk-vendors.6ddee4a6.js.map
21│   ├── package-lock.json
22│   ├── package.json
23│   ├── public
24│   │   ├── favicon.ico
25│   │   └── index.html
26│   └── src
27│       ├── App.vue
28│       ├── assets
29│       │   └── logo.png
30│       ├── components
31│       │   ├── HelloWorld.vue
32│       │   └── Ping.vue
33│       ├── main.js
34│       ├── router
35│       │   └── index.js
36│       └── views
37│           ├── About.vue
38│           └── Home.vue
39└── requirements.txt

1const router = new VueRouter({
2  // mode: 'history',   或改为 mode: 'hash', 默认为 'hash'
3  base: process.env.BASE_URL,
4  routes,
5});