详细讲解Flask-Vue前后端分离的过程

　　写这篇文章的主要目的是，给大家详细的进行介绍关于Flask-Vue前后端分离的过程，详细介绍一下相关代码的使用规范，以及一些相关实例，希望可以给大家带来一定的帮助。

　　最近学习了一下前后端分离技术，前端用的是Vue，后段用的是Flask。

　　vue官方网站：开源框架用的是Javascript框架，vue是前端前进式的框架，具备可视化功能，Vue采用自底向上的增量开发设计。vue是轻量化的框架设计，用起来简单快速，并且比较的轻便。

　　vue.js满足当前移动和PCweb项目的开发需求，框架油然而生，而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是全局安装的。

　　2、构建Python虚拟环境

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

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

　　第一行创建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, jsonify
from flask_cors import CORS
app = 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 -V
2.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? (recom
mended) npm

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

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

　　各个目录的意思：

template：组件的 HTML 内容
script: 组件的逻辑代码（Javascript）
style: 组件的样式（CSS）

　　名字作用

　　main.js app的入口，它会加载和初始化Vue和根组件

　　App.vue根组件-其他组件的入口

　　assets静态文件如图片和字体等都放在这里

　　components UI组件放在这里

　　router URL同组件的映射关系在这里定义

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

　　运行该程序：

(venv) Mac:flask-vue-crud hubo$ cd client/
(venv) Mac:client hubo$ ls
README.md index.html package.json
build node_modules src
config package-lock.json static
(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：

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',
});

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

<template>
  <div>
    <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() {

• 上一篇：在云服务器上基于docker安装jenkins的实现步骤
• 下一篇：Tik Tok的网络怎么搭建？今天带大家来了解一下！