Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

  • 原创
  • Madman
  • /
  • 2018-11-01 21:38
  • /
  • 0
  • 155 次阅读

flask vuejs 全栈开发-min.png

Synopsis: 使用 Vue.js 官方工具 Vue-cli 初始化前端项目,打包器是 webpack。安装 axios,使用它去调用后端Flask提供的API,但会失败,因为端口不同是跨域访问,后端要安装 Flask-Cors 包。最后,将 Bootstrap 4 引入到前端项目中,方便后续快速开发

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.2 ,欢迎star

创建 dev 开发分支:

$ git checkout -b dev

1. 配置 Vue.js

请确保有 Vue.js 基础,阅读官方文档:

1.1 安装 Node.js

请前往 官方网站 下载并安装 LTS 版本

安装好后,由于 npm 命令使用的国外镜像,在国内下载依赖包时很慢,这里换成 淘宝 NPM 镜像

打开 cmd

Microsoft Windows [版本 10.0.14393]
(c) 2016 Microsoft Corporation。保留所有权利。

C:\Users\wangy>npm install -g cnpm --registry=https://registry.npm.taobao.org

之后,用 cnpm 来代替 npm 命令

1.2 Vue-cli

C:\Users\wangy>cnpm install -g vue-cli
C:\Users\wangy>vue -V
2.9.6

1.3 初始化前端项目

C:\Users\wangy>D:

D:\>cd python-code\flask-vuejs-madblog

D:\python-code\flask-vuejs-madblog>vue init webpack front-end

? Project name front-end
? Project description A Vue.js project
? Author WY-Acer <wangy8961@163.com>
? Vue build (Use arrow keys)
? 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) no

   vue-cli · Generated "front-end".

# Project initialization finished!
# ========================

To get started:

  cd front-end
  npm install (or if using yarn: yarn)
  npm run dev

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

使用 cnpm 命令安装依赖:

D:\python-code\flask-vuejs-madblog\front-end>cnpm install

启动:

D:\python-code\flask-vuejs-madblog\front-end>npm run dev

打开浏览器 http://localhost:8080

2. 组件 Ping.vue

删除 front-end/src/components/HelloWorld.vue,并创建新组件 front-end/src/components/Ping.vue

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

<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello, This is Ping.vue component'
    }
  }
}
</script>

更新路由 front-end/src/router/index.js

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
    }
  ]
})

代码结构如下:

再次访问浏览器 http://localhost:8080

3. 使用 axios 与API交互

axios 使用文档: https://github.com/axios/axios

cmd 中按 Ctrl + c 停止 Vue,再用 cnpm 命令安装 axios

D:\python-code\flask-vuejs-madblog\front-end>cnpm install axios --save

依赖关系写在 front-end/package.json 中,其中 dependencies 可以看到我们刚安装的 axios 被添加进来了

启动 Vue

D:\python-code\flask-vuejs-madblog\front-end>npm run dev

更新组件 front-end/src/components/Ping.vue<script>...</script>

<script>
import axios from 'axios'

export default {
  name: 'Ping',
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    getMessage () {
      const path = 'http://localhost:5000/api/ping'
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        })
    }
  },
  created () {
    this.getMessage()
  }
}
</script>

访问浏览器 http://localhost:8080, 发现没有获取到后端API接口的数据 Pong!

前端是启动在8080端口,后端是启动在5000端口,属于跨域访问,解决办法是后端要先安装 Flask-Cors

4. Flask-Cors

停止 Flask,安装 Flask-Cors 包:

(venv) D:\python-code\flask-vuejs-madblog\back-end>pip install flask-Cors
(venv) D:\python-code\flask-vuejs-madblog\back-end>pip freeze > requirements.txt

然后,修改 backend/app/__init__.py

from flask import Flask
from flask_cors import CORS
from config import Config


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

    # enable CORS
    CORS(app)

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

    return app

启动 Flask

(venv) D:\python-code\flask-vuejs-madblog\back-end>flask run

此时,再刷新 http://localhost:8080 页面,你应该可以看到 Pong!

5. 引入 Bootstrap 4

使用 cnpm 命令安装:

D:\python-code\flask-vuejs-madblog\front-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.14.3 but none was installed
√ All packages installed (1 packages installed from npm registry, used 621ms(network 615ms), speed 8.77kB/s, json 1(5.4kB), tarball 0B)

警告信息说 Bootstrap 4 部分功能依赖 jQuerypopper.js,我们暂时用不到,不管它

修改 frontend/src/main.js,引入 Bootstrap 样式:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// Import Bootstrap css files
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改 frontend/src/components/src/components/Ping.vue,创建 Bootstrap 风格的按钮:

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

访问浏览器 http://localhost:8080,你应该可以看到 Bootstrap 风格的按钮 Pong!

6. 提交代码

$ git add .
$ git commit -m "2. Vue.js通过axios访问Flask RESTful API"
$ git checkout master
$ git merge dev
$ git branch -d dev

将本地 master 分支代码上传到 Github 代码仓库中的 master 分支:

$ git push -u origin master

打上标签 tag并上传:

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

代码已上传到 https://github.com/wangy8961/flask-vuejs-madblog/tree/v0.2 ,欢迎star

未经允许不得转载: LIFE & SHARE - 王颜公子 » Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API

分享

作者

作者头像

Madman

如果博文内容有误或其它任何问题,欢迎留言评论,我会尽快回复; 或者通过QQ、微信等联系我

0 条评论

暂时还没有评论.

发表评论前请先登录