Vue 之Flask实现全栈单页面应用-LingLab

Vue 之Flask实现全栈单页面应用

639 阅读 2020-08-19 09:17:02 上传

以下文章来源于西语语言学工作坊

1 Vue 之Flask实现全栈单页面应用

如果你只是想使用 Vue.js 库和 Flask 模板基本上是没什么问题的。但...好吧，其实还是有一个比较显而易见的问题：跟 Vue.js 一样，Jinji（模板引擎）也是使用双大括号来渲染页面，但已经有一个很好的解决方案在这里了。

Flask运行的服务可以访问 index.html 首页和 Vue.js 应用
在前端开发环境，使用 Webpack 和它提供的很多非常棒的功能
可以从前端的单页面应用访问 Flask 的 API 接口
以 Node.js 服务运行的前端开发环境同样也可以访问 API 接口

https://github.com/oleg-agapov/flask-vue-spa

我用 vue-cli 命令行工具搭建起 Vue.js 的基础框架。如果你还没有安装，可以运行：

$ npm install -g vue-cli

以下是我通过安装向导的项目设置：

下一步：

$ cd frontend
$ npm install
# after installation
$ npm run dev

添加 Home.vue 和 About.vue 到 frontend/src/components 文件夹。像如下简单添加些内容：

// Home.vue<template>  <div>    <p>Home pagep>  div>template>

我们将在本地验证它们（通过地址栏访问）。现在我们要改变 frontend/src/router/index.js 文件去一个个渲染我们的新组件：

import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
  { path: '/', component: 'Home' },
  { path: '/about', component: 'About' }
]
const routes = routerOptions.map(route => {
  return {
    ...route,
    component: () => import(`@/components/${route.component}.vue`)
  }
})
Vue.use(Router)
export default new Router({
  routes,
  mode: 'history'
})

然后成改如下内容

index: path.resolve(__dirname, '../../dist/index.html'),assetsRoot: path.resolve(__dirname, '../../dist'),

Flask 后端，我将使用 3.6 版本的 python。在根目录 /flaskvue 文件夹下为后端代码和初始化虚拟环境创建新的子目录：

$ mkdir backend$ cd backend$ virtualenv -p python3 venv

在 Windows 上开启请看这里 docs。

现在让我们开始写 Flask 服务器端代码。在根目录下创建 run.py 文件：

(venv) cd ..(venv) touch run.py

上面的代码和 Flask 入门教程 “Hello world” 上的代码稍有不同。最主要的不同点在于我们详细指明了前端的静态和模板文件夹输出到 /dist 文件夹。然后在根目录下运行 Flask 服务。

(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

与此同时如果你试图访问 /about 页面将会出现一个错误。Flask 会抛出一个找不到请求地址的错误。实际上是因为在 vue-router 用了 HTML5 的 history 模式, 所以我们需要配置我们的后台服务去重定向所有的路由都跳转到 index.html 上。这在 Flask 上可以很简单做到。做如下修改：

@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
    return render_template("index.html")

添加 404 页面

在 frontend/src/router/index.js 增加一行：

const routerOptions = [
  { path: '/', component: 'Home' },
  { path: '/about', component: 'About' },
  { path: '*', component: 'NotFound' }
]

现在通过 npm run dev 重新启动前台服务然后随意输入网址像 localhost:8080/gljhewrgoh。你应该看到 “Not Found” 两个单词。

我的 Vue.js/Flask 教程的最后一个例子将在后端创建一个 API 接口然后通过前端来调用它。我将创建一个随机返回数字1到100的简单端口。

from flask import Flask, render_template, jsonify
from random import *
app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")
@app.route('/api/random')
def random_number():
    response = {
        'randomNumber': randint(1, 100)
    }
    return jsonify(response)
@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
    return render_template("index.html")

你可以通过地址：localhost:5000/api/random 来测试这个路由。

在这一步，我将在客户端模拟随机数的生成。所以，组件的工作过程如下：

现在，在首页上你将看到由前端生成的随机数。让我们继续来连接后端。

再次打开 Home.uve，修改

表情

图片

附件

热门资讯

北京大学CCL语料库语系、语族、语支——世界语言万花筒【前沿】R语言元分析专题第七章：亚组分析【前沿】交叉滞后中介模型Mplus的应用语言学的主要分支【网上课堂】雨课堂+腾讯会议操作攻略揭开句法学之谜：主谓框架－成分分析法的由... R语言元分析专题：计算效应量的大小 2020年最新语言学SSCI期刊影响因子排名... R语言元分析专题第五章：森林图

推荐工具