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

 更新时间:2022年07月14日 11:24:24   作者:Python之简  
这篇文章主要介绍了Flask-Vue前后端分离的全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

最近学习了一下前后端分离技术,前端用的是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/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版本其他的应该都是最新的版本。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • Python中赋值的含义及说明

    Python中赋值的含义及说明

    这篇文章主要介绍了Python中赋值的含义及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • 使用SQLAlchemy操作数据库表过程解析

    使用SQLAlchemy操作数据库表过程解析

    这篇文章主要介绍了使用SQLAlchemy操作数据库表过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • Python实现GIF图倒放

    Python实现GIF图倒放

    这篇文章主要介绍了Python如何实现GIF图倒放,文中讲解非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 在keras里面实现计算f1-score的代码

    在keras里面实现计算f1-score的代码

    这篇文章主要介绍了在keras里面实现计算f1-score的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-06-06
  • python 读取修改pcap包的例子

    python 读取修改pcap包的例子

    今天小编就为大家分享一篇python 读取修改pcap包的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-07-07
  • Python自动发送邮件的方法实例总结

    Python自动发送邮件的方法实例总结

    这篇文章主要介绍了Python自动发送邮件的方法,结合实例形式总结分析了Python使用smtplib和email模块发送邮件的相关使用技巧与操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 关于Python网络爬虫requests库的介绍

    关于Python网络爬虫requests库的介绍

    这篇文章主要介绍了关于Python网络爬虫requests库,而很多时候这些数据存储在网页中,手动下载需要花费的时间太长,这时候我们就需要网络爬虫帮助我们自动爬取这些数据,需要的朋友可以参考下
    2023-04-04
  • 如何利用Python解析超大的json数据(GB级别)

    如何利用Python解析超大的json数据(GB级别)

    果不想从头开始创建数据格式来存储数据,JSON是一个不错的选择,下面这篇文章主要给大家介绍了关于如何利用Python解析超大的json数据(GB级别)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vscode 与pycharm 配置 autopep8自动格式化代码

    vscode 与pycharm 配置 autopep8自动格式化代码

    autopep8是一个可以将Python代码自动排版为PEP8风格第三方包,使用它可以轻松地排版出格式优美整齐的代码,这里就为大家分享一下具体的方法
    2023-09-09
  • python统计函数被调用次数的实现

    python统计函数被调用次数的实现

    本文主要介绍了python如何统计函数被调用次数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02

最新评论

?


http://www.vxiaotou.com