最近学习了一下前后端分离技术，前端用的是vue，后段用的是flask。
vue官网：开源的 javascript 框架，vue是一套构建用户界面的渐进式框架，vue采用自底向上的增量开发设计。vue是轻量级的，有很多独立的功能和库。
vue.js满足当前webapp项目的开发需求，mvvm框架诞生，而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是全局安装的。
npm ls -g --depth 0 查找npm全局安装的包
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
打开浏览器，输入https://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.js | app 的入口，它会加载和初始化 vue 和根组件 |
| app.vue | 根组件 – 其他组件的入口 |
| assets | 静态文件如图片和字体等都放在这里 |
| components | ui 组件放在这里 |
| router | url 同组件的映射关系在这里定义 |
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
访问https://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 变成https://localhost：8080/ping的形式。如果，不加该设置，默认的 url 为https://localhost:8080/#/ping的形式。
访问https://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 = 'https://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 应用，访问https://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 https://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>
再次访问https://localhost:8080/ping查看效果。
8、遇到的问题
newline required at end of file but not found
这种错误处理方法：
我的错误是在33行后面添加一个空白行就可以了。
bootstrap最新版的好像和vue不兼容，使用的是4.0.0版本。
有遇到其他的问题，可以留言板讨论，目前除了bootstrap是4.0版本其他的应该都是最新的版本。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持<计算机技术网(www.ctvol.com)!!>。
需要了解更多python教程分享Flask-Vue前后端分离的全过程讲解，都可以关注python教程分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/pythontutorial/1235104.html