Flask(flask_restful.Api)+vue(webpack)+axios实现简单的前后端分离

最新推荐文章于 2024-09-24 11:05:57 发布

Yvettre

最新推荐文章于 2024-09-24 11:05:57 发布

阅读量7.3k

点赞数 2

分类专栏：后台前端 python 文章标签： flask vue axios restful

本文链接：https://blog.csdn.net/Yvettre/article/details/82705305

版权

本文介绍了如何使用Flask和flask_restful构建简单的后端，并结合Vue.js和axios进行异步通信，实现前后端分离。在前端，通过部署webpack脚手架，使用axios进行API调用。在后端，利用virtualenv创建环境，安装flask相关库，构建RESTful API。文章还包含测试前后端通信的步骤和调试工具推荐。

摘要由CSDN通过智能技术生成

前端部分

1. 部署webpack脚手架

首先按照此博文的步骤在win10本地部署好vuejs的webpack脚手架

2. 安装并使用axios进行异步通信

搜了一些介绍，现在vue2.0以上官方都是建议使用axios与后台进行异步通信获取数据，vue-resource.js似乎是不维护了；另一方面本来打算自己在vuejs框架内实现原生态的AJAX的，但由于对框架原理的不理解受到了很大的障碍，最终决定使用axios

安装axios
```
npm install axios --save
```
axios的github戳这里，提供了三种安装方式，我选择了npm安装。安装完毕之后在webpackProject/node_modules/下会多一个名叫axios的文件夹

引入全局变量

在webpackProject/src/main.js中增加以下内容：

import axios from 'axios'

Vue.prototype.$http = axios.create({
  baseURL: "http://127.0.0.1:5000",
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'}
});

在组件中使用$http变量

例如在组件webpackProject/src/App.vue中使用：增加一个按钮用于触发请求，即当点击点我按钮时，触发catchData方法，发起GET http://127.0.0.1:5000/api/index的请求，并在接收到响应之后将响应报文和响应数据打印到控制台，最后将响应数据添加到当前组件的数据成员items中去，用于页面渲染

注1：当然可以在src/components下的组件使用，只要在main.js中引入了$http，那么在任何组件中进行异步通信获取数据的用法都如下一样
```
<template>
  <div id="app">
    <img src="./assets/logo.png"><
```