flask vue axios 前后端分离,vue和flask交互
本文主要介绍了砂箱前端分离的全过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
00-10101，主要依托版本2，搭建Python虚拟环境3，创建Flask项目4，Vue Setup5，增加一个新组件6，连接前后两节7，介绍CSS框架bootstrap8，以及遇到的问题。最近学了前端分离技术，前端用Vue，后端用Flask。
vue官网:开源的Javascript 框架, vue是一套用于构建用户界面的渐进式框架，Vue采用自底向上的增量开发设计。Vue来自轻量级，有很多独立的函数和库。
Vue.js满足了当前webapp项目的开发需求，MVVM框架诞生,和Vue.js就是这样一个js框架。两大核心:数据驱动和组件化。
Flask：用Python实现，是一个web框架，属于微帧。
目录
python 3360v 3 . 6 . 4 vue 3360v 2 . 9 . 6 vue-CLI 3360v 2 . 9 . 6 node 3360v 10 . 6 . 0 NPM 3360v 6 . 1 . 0 flask 3360v 1 . 0 . 2 flask-CORS 3360v 3 . 0 . 6 Bootstrap 3360v 4 . 0 . 0(最新版本4 .1.2不兼容)以下项目的创建都是本地安装在Python虚拟环境和npm中，只有Vue-CLI是全局安装的。
Npls-g-depth0查找npm全局安装的软件包
1、主要依赖版本
为了防止依赖的困惑，首先要创造一个虚拟的环境。
Mac:code代码胡博$ mkdir flask-vue-crud
Mac:code代码胡博$ 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胡博$ ls
带有
第一行创建flask-vue-crud文件夹，第三行创建python虚拟环境。Python 3.3版可以使用venv模块，Python 2版可以使用virtualenv模块。
第四行激活虚拟环境。
Windows:源venv/Scripts/activate.batLinux:源venv/bin/activate
2、构建Python虚拟环境
首先，安装Flask和Flask-CORS扩展。
Flask—CORS：
如果使用不同的协议，或者请求来自其他IP地址或域名或端口，我们需要使用跨源资源共享(CORS)，这就是Flask-CORS扩展帮助我们做的事情。在实际环境中，只配置来自前端应用所在域的请求。
(venv)MAC :烧瓶-vue-crud胡博$ pip安装烧瓶-Cors
然后在根目录中创建app.py文件：
从烧瓶导入烧瓶，jsonify
从cors进口
app=Flask(__name__)
CORS(app)
@app.route(/，methods=[GET])
def乒乓():
返回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
各个目录的意思：
名字作用main.jsapp 的入口，它会加载和初始化 Vue 和根组件App.vue根组件 - 其他组件的入口assets静态文件如图片和字体等都放在这里componentsUI 组件放在这里routerURL 同组件的映射关系在这里定义
client/src/components/HelloWord.vue是自动生成的单文件组件，有三部分组成：
template: 组件的 HTML 内容script: 组件的逻辑代码（Javascript）style: 组件的样式（CSS）
运行该程序：
(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：
(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 scripts peerDependencies WARNING bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none was installed peerDependencies 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; /* eslint-disable no-new */ 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版本其他的应该都是最新的版本。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持盛行IT软件开发工作室。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。