使用Vue.js和Flask来构建一个单页的App的示例

下面我会详细讲解使用Vue.js和Flask来构建一个单页App的示例，包含两个示例说明。

示例1：使用Vue.js和Flask来搭建前后端分离的Todo应用

前端Vue.js

1. 使用Vue CLI创建项目

vue create todo-vue

1. 安装axios

npm install axios

1. 编写Todo.vue组件

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText" placeholder="Add a todo">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todos: [],
      newTodoText: '',
    };
  },
  methods: {
    async addTodo() {
      if (!this.newTodoText) return;
      const response = await axios.post('/api/todo', { text: this.newTodoText });
      this.todos.push(response.data);
      this.newTodoText = '';
    },
  },
  async mounted() {
    const response = await axios.get('/api/todo');
    this.todos = response.data;
  },
};
</script>

后端Flask

1. 创建项目

mkdir todo-flask
cd todo-flask

1. 创建虚拟环境并激活

python3 -m venv venv
source venv/bin/activate

1. 安装Flask和Flask-CORS

pip install Flask Flask-CORS

1. 创建Flask应用文件app.py

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

todos = []

@app.route('/api/todo', methods=['GET'])
def get_todos():
    return jsonify(todos)

@app.route('/api/todo', methods=['POST'])
def add_todo():
    request_data = request.get_json()
    new_todo = {'id': len(todos) + 1, 'text': request_data['text']}
    todos.append(new_todo)
    return jsonify(new_todo)

if __name__ == '__main__':
    app.run(debug=True)

1. 运行Flask应用

export FLASK_APP=app.py # Windows为 set FLASK_APP=app.py
flask run

将前后端连接起来

1. 修改前端Vue.js中的axios请求地址

axios.defaults.baseURL = 'http://127.0.0.1:5000'; // Flask应用运行地址

1. 运行前端Vue.js

npm run serve

1. 打开浏览器，访问http://localhost:8080 就可以看到Todo应用了。

示例2：使用Vue.js和Flask来进行用户登陆认证

前端Vue.js

1. 使用Vue CLI创建项目

vue create login-vue

1. 安装axios和vue-router

npm install axios vue-router

1. 编写Login.vue组件

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username">
      <input type="password" v-model="password" placeholder="Password">
      <button>Login</button>
    </form>
    <br>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
    };
  },
  methods: {
    async login() {
      const data = { username: this.username, password: this.password };
      try {
        const response = await axios.post('/api/login', data);
        this.$store.commit('setToken', response.data.token);
        this.$router.push({ name: 'Home' });
      } catch (error) {
        this.errorMessage = 'Login failed, please try again!';
        console.error(error);
      }
    },
  },
  computed: mapState([
    'token',
  ]),
};
</script>

1. 编写Home.vue组件

<template>
  <div>
    <h1>Home</h1>
    <div>{{ errorMessage }}</div>
    <div v-if="!token">Please Login to access your account!</div>
    <div v-if="token">Welcome to your account!</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: mapState([
    'token',
  ]),
  data() {
    return {
      errorMessage: '',
    };
  },
  async mounted() {
    if (this.token) {
      try {
        const response = await axios.get('/api/user', {
          headers: {
            Authorization: `Bearer ${this.token}`,
          },
        });
        console.log(response.data);
      } catch (error) {
        this.errorMessage = 'Request user information failed!';
        console.error(error);
      }
    }
  },
};
</script>

后端Flask

1. 安装Flask、Flask-CORS和Flask-JWT-Extended

pip install Flask Flask-CORS Flask-JWT-Extended

1. 创建Flask应用文件app.py

from flask import Flask, jsonify, request
from flask_jwt_extended import create_access_token, JWTManager, jwt_required, get_jwt_identity
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
app.config['JWT_SECRET_KEY'] = 'jwt-secret-string' # 自行修改
jwt = JWTManager(app)

users = {
    'demo': {'password': 'password'},
}

@app.route('/api/login', methods=['POST'])
def login():
    username = request.json.get('username', None)
    password = request.json.get('password', None)
    if not username or not password:
        return jsonify({"msg": "Missing username or password"}), 400
    user = users.get(username, None)
    if not user or user['password'] != password:
        return jsonify({"msg": "Invalid username or password"}), 401

    access_token = create_access_token(identity=username)
    return jsonify(access_token=access_token)

@app.route('/api/user', methods=['GET'])
@jwt_required
def get_user():
    current_user = get_jwt_identity()
    user = {'username': current_user}
    return jsonify(user)

if __name__ == '__main__':
    app.run(debug=True)

将前后端连接起来

1. 修改前端Vue.js中的axios请求地址

axios.defaults.baseURL = 'http://127.0.0.1:5000'; // Flask应用运行地址

1. 修改/src/store/index.js文件，添加token状态和其对应的mutations

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
  },
});

1. 修改/src/main.js文件，添加vue-router

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';

Vue.config.productionTip = false;
Vue.use(VueRouter);

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', name: 'Home', component: Home },
  { path: '/login', name: 'Login', component: Login },
];

const router = new VueRouter({
  routes,
});

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app');

1. 运行前端Vue.js

npm run serve

1. 运行后端Flask

export FLASK_APP=app.py # Windows为 set FLASK_APP=app.py
flask run

1. 打开浏览器，访问http://localhost:8080 就可以看到用户登陆认证的应用了。

至此，我们就成功地使用Vue.js和Flask来构建了一个单页App和一个用户登陆认证的应用。