立体贺卡,四川旅游,植物大战僵尸全明星-塔娜奶油-全新配方,蛋糕、烘焙制作技艺分享

频道:新闻世界 日期: 浏览:289

本文共享自众成翻译,介绍了一个将抢手前端技能 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 的根底结构。假如你还没有装置,能够运转:

  1. $ npm install -g vue-cli

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

  1. $ mkdir flaskvue

  2. $ cd flaskvue

  3. $ 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 设置端到端测验? - 否)

下一步:

  1. $ cd frontend

  2. $ npm install

  1. # after installation

  2. $ npm run dev

现在你能够开端设置 Vue.js 运用了。让我们先来增加些页面吧。

增加 Home.vueAbout.vuefrontend/src/components文件夹。像如下简略增加些内容:

  1. // Home.vue

  2. Home page

热门
最新
推荐
标签