Flask-Vue前后端分离的全过程讲解

wwuc

最近学习了一下前后端分离技术，前端用的是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是全局安装的。

1. npm ls -g --depth 0     查找npm全局安装的包

复制代码

2、构建Python虚拟环境

防止依赖的混乱，首先创建虚拟环境。

1. Mac:code hubo$ mkdir flask-vue-crud
   
2. Mac:code hubo$ cd flask-vue-crud/
   
3. Mac:flask-vue-crud$ python -m venv venv
   
4. Mac:flask-vue-crud$ source venv/bin/activate
   
5. (venv) Mac:flask-vue-crud hubo$ ls
   
6. 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 扩展帮我们做到的。实际环境中只配置来自前端应用所在的域的请求。

1. (venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors

复制代码

然后在根目录下创建app.py文件：

1. from flask import Flask, jsonify
   
2. from flask_cors import CORS
   
3. app = Flask(__name__)
   
4. CORS(app)
   
5. @app.route('/', methods=['GET'])
   
6. def ping_pong():
   
7.     return jsonify('Hello World!')     #（jsonify返回一个json格式的数据）
   
8. if __name__ == '__main__':
   
9.     app.run()

复制代码

然后执行：

1. (venv) Mac:flask-vue-crud hubo$ python app.py

复制代码

打开浏览器，输入http://localhost:5000/ping，会看到输出

1. Hello World！

复制代码

目前Flask环境已经配置好，而且已经创建了一个Flask小Demo。

4、Vue Setup

Vue CLI：官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
首先全局安装vue Cli：npm install -g(全局安装)，npm下载的国外的依赖，可以使用淘宝的cnpm。
下载淘宝的cnpm

1. npm install -g cnpm --registry=https://registry.npm.taobao.org

复制代码

使用npm或cnom下载vue cli

1. (venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli

复制代码

检察安装乐成

1. Mac:~ hubo$ vue -V
   
2. 2.9.6

复制代码

接下来通过webpack初始化一个新的Vue项目client：

1. Mac:flask-vue-crud hubo$ vue init webpack client
   
2. 
   
3. ? Project name client
   
4. ? Project description A Vue.js project
   
5. ? Author hubo <1290259791@qq.com>
   
6. ? Vue build standalone
   
7. ? Install vue-router? Yes
   
8. ? Use ESLint to lint your code? Yes
   
9. ? Pick an ESLint preset Airbnb
   
10. ? Set up unit tests No
    
11. ? Setup e2e tests with Nightwatch? No
    
12. ? Should we run `npm install` for you after the project has been created? (recom
    
13. mended) npm

复制代码

主要写代码的位置：/flask-vue-crud/client/src/，目录结构如下所示：

1. .
   
2. ├── App.vue
   
3. ├── assets
   
4. │   └── logo.png
   
5. ├── components
   
6. │   ├── HelloWorld.vue
   
7. │   └── Ping.vue
   
8. ├── main.js
   
9. └── router
   
10.     └── index.js

复制代码

各个目录的意思：
名字作用main.jsapp 的入口，它会加载和初始化 Vue 和根组件App.vue根组件 - 其他组件的入口assets静态文件如图片和字体等都放在这里componentsUI 组件放在这里routerURL 同组件的映射关系在这里定义client/src/components/HelloWord.vue是自动生成的单文件组件，有三部分组成：

• 1. template

  复制代码
  : 组件的 HTML 内容
  
• 1. script

  复制代码
  : 组件的逻辑代码（Javascript）
  
• 1. style

  复制代码
  : 组件的样式（CSS）
  

运行该步伐：

1. (venv) Mac:flask-vue-crud hubo$ cd client/
   
2. (venv) Mac:client hubo$ ls
   
3. README.md                index.html                package.json
   
4. build                        node_modules                src
   
5. config                        package-lock.json        static
   
6. (venv) Mac:client hubo$ npm run dev     启动dev

复制代码

访问http://localhost:8080 能看到前端页面

5、添加一个新组件

创建client/src/components/Ping.vue:

1. <template>
   
2.   <div>
   
3.     <p>{{ msg }}</p>
   
4.   </div>
   
5. </template>
   
6. <script>
   
7. export default {
   
8.   name: 'Ping',
   
9.   data() {
   
10.     return {
    
11.       msg: 'Hello!',
    
12.     };
    
13.   },
    
14. };
    
15. </script>

复制代码

更新client/src/router/index.js，映射/ping到Ping组件：

1. import Vue from 'vue';
   
2. import Router from 'vue-router';
   
3. import HelloWorld from '@/components/HelloWorld';
   
4. import Ping from '@/components/Ping';
   
5. 
   
6. Vue.use(Router);
   
7. 
   
8. export default new Router({
   
9.   routes: [
   
10.     {
    
11.       path: '/',
    
12.       name: 'HelloWorld',
    
13.       component: HelloWorld,
    
14.     },
    
15.     {
    
16.       path: '/ping',
    
17.       name: 'Ping',
    
18.       component: Ping,
    
19.     },
    
20.   ],
    
21.   mode: 'history',
    
22. });

复制代码

上面的mode: 'history’是为了让 URL 酿成http://localhost：8080/ping的形式。如果，不加该设置，默认的 URL 为http://localhost:8080/#/ping的形式。
访问http://localhost:8080/ping 能看到Hello!

6、连接前后段

通过axios发送AJAX请求，安装axios：

1. (venv) Mac:client hubo$ cnpm install axios --save
   
2. ✔ Installed 1 packages
   
3. ✔ Linked 4 latest versions
   
4. ✔ Run 0 scripts
   
5. ✔ All packages installed (5 packages installed from npm registry, used 1s, speed 12.01kB/s, json 5(12.96kB), tarball 0B)

复制代码

更新Ping.vue组件，代码如下。

1. <template>
   
2.   <div class="container">
   
3.     <button type="button" class="btn btn-primary">{{ msg }}</button>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. import axios from 'axios';
   
9. 
   
10. export default {
    
11.   name: 'Ping',
    
12.   data() {
    
13.     return {
    
14.       msg: 'Hello World!',
    
15.     };
    
16.   },
    
17.   methods: {
    
18.     getMessage() {
    
19.       const path = 'http://localhost:5000/ping';
    
20.       axios.get(path)
    
21.         .then((res) => {
    
22.           this.msg = res.data;
    
23.         })
    
24.         .catch((error) => {
    
25.           // eslint-disable-next-line
    
26.           console.error(error);
    
27.         });
    
28.     },
    
29.   },
    
30.   created() {
    
31.     this.getMessage();
    
32.   },
    
33. };
    
34. </script>

复制代码

启动后端 Flask 应用，访问http://localhost:8080/ping，会看到页面会出现后端返回的数据。
将后段的数据改为：{1:‘a’,2:‘b’,3:‘c’}
启动Flask：

1. (venv) Mac:flask-vue-crud hubo$ python app.py
   
2. * Serving Flask app "app" (lazy loading)
   
3. * Environment: production
   
4.    WARNING: Do not use the development server in a production environment.
   
5.    Use a production WSGI server instead.
   
6. * Debug mode: on
   
7. * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
   
8. * Restarting with stat
   
9. * Debugger is active!
   
10. * Debugger PIN: 239-628-485

复制代码

启动dec：

1. (venv) Mac:client hubo$ npm run dev

复制代码

7、引入CSS框架bootstrap

引入 CSS 框架 bootstrap，通过如下命令安装bootstrap：使用的是cnpm
下面的cnpm都是局部安装。

1. (venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save
   
2. ✔ Installed 1 packages
   
3. ✔ Linked 0 latest versions
   
4. ✔ Run 0 scripts
   
5. peerDependencies WARNING bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none was installed
   
6. peerDependencies WARNING bootstrap@4.0.0 requires a peer of popper.js@^1.12.9 but none was installed
   
7. ✔ All packages installed (1 packages installed from npm registry, used 770ms, speed 6.85kB/s, json 1(5.27kB), tarball 0B)

复制代码

我这里缺少两个依赖，继续下载依赖

1. (venv) Mac:client hubo$ cnpm install jquery@1.9.1 --save
   
2. ✔ Installed 1 packages
   
3. ✔ Linked 0 latest versions
   
4. ✔ Run 0 scripts
   
5. ✔ All packages installed (1 packages installed from npm registry, used 1s, speed 335.44kB/s, json 1(5.19kB), tarball 482.88kB)
   
6. (venv) Mac:client hubo$ cnpm install popper.js --save
   
7. ✔ Installed 1 packages
   
8. ✔ Linked 0 latest versions
   
9. ✔ Run 0 scripts
   
10. ✔ All packages installed (1 packages installed from npm registry, used 543ms, speed 16.56kB/s, json 1(8.99kB), tarball 0B)

复制代码

再次下载bootstrap：

1. (venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save
   
2. ✔ Installed 1 packages
   
3. ✔ Linked 0 latest versions
   
4. ✔ Run 0 scripts
   
5. ✔ All packages installed (used 647ms, speed 41.65kB/s, json 1(26.95kB), tarball 0B)

复制代码

在 app 的入口文件client/src/main.js中导入 bootstrap：

1. import 'bootstrap/dist/css/bootstrap.css';
   
2. import Vue from 'vue';
   
3. import App from './App';
   
4. import router from './router';
   
5. Vue.config.productionTip = false;
   
6. /* eslint-disable no-new */
   
7. new Vue({
   
8.   el: '#app',
   
9.   router,
   
10.   components: { App },
    
11.   template: '<App/>',
    
12. });

复制代码

去掉根组件client/src/App.vue中多余的样式：

1. <style>
   
2. #app {
   
3.   margin-top: 60px;
   
4. }
   
5. </style>

复制代码

在Ping.vue组件中增加样式：

1. <template>
   
2.   <div class="container">
   
3.     <button type="button" class="btn btn-primary">{{ msg }}</button>
   
4.   </div>
   
5. </template>

复制代码

再次访问http://localhost:8080/ping检察效果。

8、遇到的问题

1. Newline required at end of file but not found

复制代码

这种错误处置惩罚方法：
我的错误是在33行后面添加一个空白行就可以了。
bootstrap最新版的好像和vue不兼容，使用的是4.0.0版本。
有遇到其他的问题，可以留言板讨论，目前除了bootstrap是4.0版本其他的应该都是最新的版本。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持趣UU。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！