Flask Vue前后端分离实例分析

这篇文章主要讲解了“flask Vue前后端分离实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Flask Vue前后端分离实例分析”吧！

vue官网：开源的 Javascript 框架，vue是一套构建用户界面的渐进式框架，Vue采用自底向上的增量开发设计。vue是轻量级的，有很多独立的功能和库。

vue.js满足当前WEBapp项目的开发需求，MVVM框架诞生，而Vue.js便是这样一种js框架。两大核心：数据驱动和组件化。

Flask：用Python实现，是一个web框架，属于微框架。

1、主要依赖版本

• python : V3.6.4

• Vue: V2.9.6

• Vue-CLI: V2.9.6

• node: v10.6.0

• npm: V6.1.0

• Flask: V1.0.2

• Flask-Cors: V3.0.6

• bootstrap: V4.0.0（最新版4.1.2不兼容）

以下项目的创建都是在Python虚拟环境和npm局部安装的，只有Vue-CLI是全局安装的。

npm ls -g --depth 0     查找npm全局安装的包

2、构建Python虚拟环境

防止依赖的混乱，首先创建虚拟环境。

Mac:code hubo$ mkdir flask-vue-crudMac:code hubo$ cd flask-vue-crud/Mac:flask-vue-crud$ python -m venv venvMac:flask-vue-crud$ source venv/bin/activate(venv) Mac:flask-vue-crud hubo$ lsvenv

第一行创建flask-vue-crud文件夹，第三行创建python虚拟环境python3.3版本可以通过venv模块，python2版本可以使用virtualenv模块。

第四行激活虚拟环境。

• windows：source venv/Scripts/activate.bat

• linux：source venv/bin/activate

3、创建Flask项目

首先安装Flask和Flask-CORS扩展。

Flask—CORS：

如果使用不同的协议，或者请求来自于其他的 IP 地址或域名或端口，就需要用到 Cross Origin Resource Sharing （CORS），这正是 Flask-CORS 扩展帮我们做到的。实际环境中只配置来自前端应用所在的域的请求。

(venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors

然后在根目录下创建app.py文件：

from flask import Flask, JSONifyfrom flask_cors import CORSapp = Flask(__name__)CORS(app)@app.route('/', methods=['GET'])def ping_pong():    return jsonify('Hello World!')     #（jsonify返回一个json格式的数据）if __name__ == '__main__':    app.run()

然后执行：

(venv) Mac:flask-vue-crud hubo$ python app.py

打开浏览器，输入Http://localhost:5000/ping，会看到输出

Hello World！

目前Flask环境已经配置好，并且已经创建了一个Flask小Demo。

4、Vue Setup

Vue CLI：官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

首先全局安装vue Cli：npm install -g(全局安装)，npm下载的国外的依赖，可以使用淘宝的cnpm。

下载淘宝的cnpm

npm install -g cnpm --reGIStry=https://registry.npm.taobao.org

使用npm或cnom下载vue cli

(venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli

查看安装成功

Mac:~ hubo$ vue -V2.9.6

接下来通过webpack初始化一个新的Vue项目client：

Mac:flask-vue-crud hubo$ vue init webpack client? Project name client? Project description A Vue.js project? Author hubo <1290259791@qq.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Airbnb? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) npm

主要写代码的位置：/flask-vue-crud/client/src/，目录结构如下所示：

.├── App.vue├── assets│   └── loGo.png├── components│   ├── HelloWorld.vue│   └── Ping.vue├── main.js└── router    └── index.js

各个目录的意思：

client/src/components/HelloWord.vue是自动生成的单文件组件，有三部分组成：

• template: 组件的 html 内容

• script: 组件的逻辑代码（javascript）

• style: 组件的样式（CSS）

运行该程序：

(venv) Mac:flask-vue-crud hubo$ cd client/(venv) Mac:client hubo$ lsREADME.mdindex.htmlpackage.jsonbuildnode_modulessrcconfigpackage-lock.jsonstatic(venv) Mac:client hubo$ npm run dev     启动dev

访问http://localhost:8080 能看到前端页面

5、添加一个新组件

创建client/src/components/Ping.vue:

<template>  <div>    <p>{{ msg }}</p>  </div></template><script>export default {  name: 'Ping',  data() {    return {      msg: 'Hello!',    };  },};</script>

更新client/src/router/index.js，映射/ping到Ping组件：

import Vue from 'vue';import Router from 'vue-router';import HelloWorld from '@/components/HelloWorld';import Ping from '@/components/Ping';Vue.use(Router);export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld,    },    {      path: '/ping',      name: 'Ping',      component: Ping,    },  ],  mode: 'history',});

上面的mode: 'history’是为了让 URL 变成http://localhost：8080/ping的形式。如果，不加该设置，默认的 URL 为http://localhost:8080/#/ping的形式。

访问http://localhost:8080/ping 能看到Hello!

6、连接前后段

通过axiOS发送ajax请求，安装axios：

(venv) Mac:client hubo$ cnpm install axios --save✔ Installed 1 packages✔ Linked 4 latest versions✔ Run 0 scripts✔ All packages installed (5 packages installed from npm registry, used 1s, speed 12.01kB/s, json 5(12.96kB), tarball 0B)

更新Ping.vue组件，代码如下。

<template>  <div class="container">    <button type="button" class="btn btn-primary">{{ msg }}</button>  </div></template><script>import axios from 'axios';export default {  name: 'Ping',  data() {    return {      msg: 'Hello World!',    };  },  methods: {    getMessage() {      const path = 'http://localhost:5000/ping';      axios.get(path)        .then((res) => {          this.msg = res.data;        })        .catch((error) => {          // eslint-disable-next-line          console.error(error);        });    },  },  created() {    this.getMessage();  },};</script>

启动后端 Flask 应用，访问http://localhost:8080/ping，会看到页面会呈现后端返回的数据。

将后段的数据改为：{1:‘a’,2:‘b’,3:‘c’}

启动Flask：

(venv) Mac:flask-vue-crud hubo$ python app.py  * Serving Flask app "app" (lazy loading) * Environment: production   WARNING: Do not use the development server in a production environment.   Use a production WSGI server instead. * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 239-628-485

启动dec：

(venv) Mac:client hubo$ npm run dev

7、引入CSS框架bootstrap

引入 CSS 框架 bootstrap，通过如下命令安装bootstrap：使用的是cnpm

下面的cnpm都是局部安装。

(venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save✔ Installed 1 packages✔ Linked 0 latest versions✔ Run 0 scriptspeerDependencies WARNING bootstrap@4.0.0 requires a peer of Jquery@1.9.1 - 3 but none was installedpeerDependencies WARNING bootstrap@4.0.0 requires a peer of popper.js@^1.12.9 but none was installed✔ All packages installed (1 packages installed from npm registry, used 770ms, speed 6.85kB/s, json 1(5.27kB), tarball 0B)

我这里缺少两个依赖，继续下载依赖

(venv) Mac:client hubo$ cnpm install jquery@1.9.1 --save✔ Installed 1 packages✔ Linked 0 latest versions✔ Run 0 scripts✔ All packages installed (1 packages installed from npm registry, used 1s, speed 335.44kB/s, json 1(5.19kB), tarball 482.88kB)(venv) Mac:client hubo$ cnpm install popper.js --save✔ Installed 1 packages✔ Linked 0 latest versions✔ Run 0 scripts✔ All packages installed (1 packages installed from npm registry, used 543ms, speed 16.56kB/s, json 1(8.99kB), tarball 0B)

再次下载bootstrap：

(venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save✔ Installed 1 packages✔ Linked 0 latest versions✔ Run 0 scripts✔ All packages installed (used 647ms, speed 41.65kB/s, json 1(26.95kB), tarball 0B)

在 app 的入口文件client/src/main.js中导入 bootstrap：

import 'bootstrap/dist/css/bootstrap.css';import Vue from 'vue';import App from './App';import router from './router';Vue.config.productionTip = false;new Vue({  el: '#app',  router,  components: { App },  template: '<App/>',});

去掉根组件client/src/App.vue中多余的样式：

<style>#app {  margin-top: 60px;}</style>

在Ping.vue组件中增加样式：

<template>  <div class="container">    <button type="button" class="btn btn-primary">{{ msg }}</button>  </div></template>

再次访问http://localhost:8080/ping查看效果。

8、遇到的问题

Newline required at end of file but not found

这种错误处理方法：

我的错误是在33行后面添加一个空白行就可以了。

bootstrap最新版的好像和vue不兼容，使用的是4.0.0版本。

有遇到其他的问题，可以留言板讨论，目前除了bootstrap是4.0版本其他的应该都是最新的版本。

感谢各位的阅读，以上就是“Flask Vue前后端分离实例分析”的内容了，经过本文的学习后，相信大家对Flask Vue前后端分离实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！