Flask-Vue前后端分离的全过程讲解
最近学习了一下前后端分离技术，前端用的是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打开浏览器，输入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/class="lazy" data-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/class="lazy" data-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 class="lazy" data-src
config package-lock.json static
(venv) Mac:client hubo$ npm run dev 启动dev访问http://localhost:8080 能看到前端页面
5、添加一个新组件
创建client/class="lazy" data-src/components/Ping.vue:
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'Ping',
data() {
return {
msg: 'Hello!',
};
},
};
</script>更新client/class="lazy" data-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 dev7、引入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/class="lazy" data-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;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});去掉根组件client/class="lazy" data-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版本其他的应该都是最新的版本。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
