请选择 进入手机版 | 继续访问电脑版
查看: 199|回复: 0

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

[复制链接]

2198

主题

0

回帖

7027

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7027
发表于 2022-10-9 01:10:57 来自手机 | 显示全部楼层 |阅读模式
最近学习了一下前后端分离技术,前端用的是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. ? Project name client
  3. ? Project description A Vue.js project
  4. ? Author hubo <1290259791@qq.com>
  5. ? Vue build standalone
  6. ? Install vue-router? Yes
  7. ? Use ESLint to lint your code? Yes
  8. ? Pick an ESLint preset Airbnb
  9. ? Set up unit tests No
  10. ? Setup e2e tests with Nightwatch? No
  11. ? Should we run `npm install` for you after the project has been created? (recom
  12. 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. Vue.use(Router);

  6. export default new Router({
  7.   routes: [
  8.     {
  9.       path: '/',
  10.       name: 'HelloWorld',
  11.       component: HelloWorld,
  12.     },
  13.     {
  14.       path: '/ping',
  15.       name: 'Ping',
  16.       component: Ping,
  17.     },
  18.   ],
  19.   mode: 'history',
  20. });
复制代码
上面的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. <script>
  7. import axios from 'axios';

  8. export default {
  9.   name: 'Ping',
  10.   data() {
  11.     return {
  12.       msg: 'Hello World!',
  13.     };
  14.   },
  15.   methods: {
  16.     getMessage() {
  17.       const path = 'http://localhost:5000/ping';
  18.       axios.get(path)
  19.         .then((res) => {
  20.           this.msg = res.data;
  21.         })
  22.         .catch((error) => {
  23.           // eslint-disable-next-line
  24.           console.error(error);
  25.         });
  26.     },
  27.   },
  28.   created() {
  29.     this.getMessage();
  30.   },
  31. };
  32. </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。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏作者
  • 0
  • 0
  • 0
  • 0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表