js定义变量 页面使用_使用 Vue.js 和 Flask 实现全栈单页面应用

本文分享自众成翻译，介绍了一个将热门前端技术 Vue.js 与流行 Python 后端框架 Flask 结合的简单示例。推荐有兴趣采用类似技术栈的同学看看。

译者：枫林

链接：http://www.zcfy.cc/article/4491

原文：https://codeburst.io/full-stack-single-page-application-with-vue-js-and-flask-b1e036315532

在本教程中，我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。

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

我想要一个跟上面方案有点不同的例子。如果我要一个用 Vue.js(使用单页面组件，在 vue-router开启 HTML5 history 模式，还有使用其他一些非常棒的特性)框架的单页面和 Flask 做后台服务的应用？应该能按下面的要求工作：

• Flask运行的服务可以访问 index.html首页和 Vue.js 应用

• 在前端开发环境，使用 Webpack 和它提供的很多非常棒的功能

• 可以从前端的单页面应用访问 Flask 的 API 接口

• 以 Node.js 服务运行的前端开发环境同样也可以访问 API 接口

这看起来很有趣，不是吗？那就让我们开始吧。

你可以在github上查看所有的源代码：

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

客户端

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

$ npm install -g vue-cli

客户端和后端代码将会放到不同的文件夹下，初始化前端部分执行如下操作：

$ mkdir flaskvue

$ cd flaskvue

$ vue init webpack frontend

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

• Vue build — Runtime only (Vue 构建的版本 - 运行时)

• Install vue-router? — Yes (安装 vue-router？ - 是)

• Use ESLint to lint your code? — Yes (使用 ESLint 校验你的代码？ - 是)

• Pick an ESLint preset — Standard (选择 ESList 的预置版本 - 标准)

• Setup unit tests with Karma + Mocha? — No (使用 Karma + Mocha 设置单元测试？ - 否)

• Setup e2e tests with Nightwatch? — No (使用 Nightwatch 设置端到端测试？ - 否)

下一步：

$ cd frontend

$ npm install

# after installation

$ npm run dev

现在你可以开始设置 Vue.js 应用了。让我们先来添加些页面吧。

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

// Home.vue

Home page

和

// About.vue

About

我们将在本地验证它们(通过地址栏访问)。现在我们要改变 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'

})

现在如果输入 localhost:8080和localhost:8080/about你应该看到相应的页面。

在我们构建生成项目静态资源前还需要修改它们的输出路径。在 frontend/config/index.js找到下面的两行

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

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

然后成改如下内容

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

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

所以， 包含 html/css/js 静态资源包的 /dist文件夹和/frontend在同一级目录下。现在你可以运行$ npm run build去构建项目了

后端

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

$ mkdir backend

$ cd backend

$ virtualenv -p python3 venv

开启虚拟环境执行(mac系统)：

$ source venv/bin/activate

在 Windows 上开启请看这里 docs。

在虚拟环境中安装 Flask 如下：

(venv) pip install Flask

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

(venv) cd ..

(venv) touch run.py

然后添加以下代码到这个文件：

from flask import Flask, render_template

app = Flask(__name__,

static_folder = "./dist/static