【flask + vue 前后端分离博客】使用 axios 访问接口（二）

创建 dev 分支：

$ git checkout -b dev

本章主要是初始化前端项目，并打通前后端接口。

1. 配置 Vue.js

1.1 安装 vue-cli 脚手架

node 安装省略，切换 npm 安装镜像为淘宝镜像（速度更快）：

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

安装 vue-cli：

F:My Projectsflask-vuejs-madblog>cnpm install -g vue-cli
F:My Projectsflask-vuejs-madblog>vue -V       // 查看版本
2.9.6

1.2 初始化前端项目

// 切换到项目目录中
cd flask-vuejs-madblog

// 使用 vue-js 初始化前端项目，项目名称为 front-end
F:My Projectsflask-vuejs-madblog>vue init webpack front-end

? Project name front-end
? Project description A Vue.js project
? Author hubery_jun <jun12xx3@outlook.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? 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

   vue-cli · Generated "front-end".


# Installing project dependencies ...
# ========================
# Project initialization finished!
# ========================

To get started:

  cd front-end
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

安装依赖：

F:My Projectsflask-vuejs-madblog>cd front-end

F:My Projectsflask-vuejs-madblogfront-end>cnpm install

启动项目：

F:My Projectsflask-vuejs-madblogfront-end>npm run dev

访问：http://localhost:8080 看是否正常

2. 使用 axios 与后端进行交互

安装 axios 用于前端向后端 flask 接口发送请求：

cnpm install axios --save

2.1 CORS 解决跨域问题

前后端两个独立的程序运行在不同的端口，要想相互交互，必须要解决跨域问题，后端程序需要安装：

pip install flask-Cors
pip freeze > requirements.txt

back-end/app/__init__.py 新增：

from config import Config
from flask_cors import CORS


def create_app(config_class=Config):
    app = Flask(__name__)
    app.config.from_object(config_class)

    # 跨域
    CORS(app)

    # 注册蓝图 blueprint
    from app.api import bp as api_bp
    app.register_blueprint(api_bp, url_prefix="/api")

    return app

2.2 前后端交互

删除 front-end/src/components/HelloWorld.vue，再新建一个 front-end/src/components/Ping.vue，内容如下：

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Ping",
    data() {
      return {
        msg: ""
      }
    },
    // 生命周期函数，加载页面时会先执行这个函数，从而调用 getMessage() 方法
    created() {
      this.getMessage();
    },
    methods: {
      getMessage() {
        // 使用 axios 向 flask 发送请求
        const url = "http://127.0.0.1:5000/api/ping";
        axios.get(url)
          .then((res) => {
            this.msg = res.data;
          })
          .catch((error) => {
            console.log(error);
          })
      }

    }
  }
</script>

<style scoped>

</style>

修改路由文件 back-end/src/router/index.js，因为我们删除了 HelloWorld.vue，创建了 Ping.vue，但是路由还是 HelloWorld 的：

import Vue from 'vue'
import Router from 'vue-router'
import Ping from '@/components/Ping'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Ping',
      component: Ping
    }
  ]
})

运行前端项目：npm run dev，访问：http://localhost:8080/#/

2.3 安装 Bootstrap4

Bootstrap4 主要用来添加一些新的样式，先安装：

F:My Projectsflask-vuejs-madblogfront-end>cnpm install bootstrap --save
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
peerDependencies WARNING bootstrap@* requires a peer of jquery@1.9.1 - 3 but none was installed
peerDependencies WARNING bootstrap@* requires a peer of popper.js@^1.16.1 but none was installed
√ All packages installed (1 packages installed from npm registry, used 4s(network 4s), speed 239.27kB/s, json 1(8.22kB), tarball 883.29kB)

首先在 src/main.js 中导入 Bootstrap 的样式：

import router from './router'

// 导入 Bootstrap4 样式
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false
...

引入之后，就可以在组建中使用了，Ping.vue：

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

最后的样式是这样子的：

3. 提交代码

合并分支并推送到远程

$ git add .
$ git commit -m '2. 初始化前端项目，打通前后端接口'
$ git checkout master
$ git merge dev
$ git branch -d dev

$ git push -u origin master

打标签

$ git tag v0.2
$ git push origin v0.2