脚本之家，脚本语言编程技术及教程分享平台！
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|

服务器之家 - 脚本之家 - Python - Flask-Vue前后端分离的全过程讲解

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

2022-07-14 14:00Python之简 Python

这篇文章主要介绍了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是全局安装的。

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

2、构建Python虚拟环境

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

?
1
2
3
4
5
6
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 扩展帮我们做到的。实际环境中只配置来自前端应用所在的域的请求。

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

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

?
1
2
3
4
5
6
7
8
9
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()

然后执行：

?
1
(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

?
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
2
Mac:~ hubo$ vue -V
2.9.6

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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/，目录结构如下所示：

?
1
2
3
4
5
6
7
8
9
10
.
├── 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）

运行该程序：

?
1
2
3
4
5
6
(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:

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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：

?
1
2
3
4
5
(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组件，代码如下。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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：

?
1
2
3
4
5
6
7
8
9
10
(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：

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

7、引入CSS框架bootstrap

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

下面的cnpm都是局部安装。

?
1
2
3
4
5
6
7
(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)

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

?
1
2
3
4
5
6
7
8
9
10
(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：

?
1
2
3
4
5
(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：

?
1
2
3
4
5
6
7
8
9
10
11
12
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中多余的样式：

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

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

?
1
2
3
4
5
<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版本其他的应该都是最新的版本。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/qq_1290259791/article/details/81174383

  • vue
  • Flask
  • 分离
  • 前后端

    • 延伸 · 阅读

    精彩推荐
    • Pythonnumpy.ndarray 交换多维数组(矩阵)的行/列方法

      numpy.ndarray 交换多维数组(矩阵)的行/列方法

      今天小编就为大家分享一篇numpy.ndarray 交换多维数组(矩阵)的行/列方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      Inside_Zhang12482021-03-25
    • PythonPython简单生成随机数的方法示例

      Python简单生成随机数的方法示例

      这篇文章主要介绍了Python简单生成随机数的方法,结合实例形式分析了Python基于random模块生成随机数的相关操作技巧,需要的朋友可以参考下...

      开心果汁11882021-01-26
    • PythonPython获取邮件地址的方法

      Python获取邮件地址的方法

      这篇文章主要介绍了Python获取邮件地址的方法,通过自定义函数分析提取字符串中邮件地址的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

      Sephiroth7982020-07-22
    • Pythonpandas 对series和dataframe进行排序的实例

      pandas 对series和dataframe进行排序的实例

      今天小编就为大家分享一篇pandas 对series和dataframe进行排序的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      乱世流星018092021-03-03
    • Python浅谈Python从全局与局部变量到装饰器的相关知识

      浅谈Python从全局与局部变量到装饰器的相关知识

      今天给大家带来的是关于Python的相关知识,文章围绕着Python从全局与局部变量到装饰器的相关知识展开,文中有非常详细的介绍及代码示例,需要的朋友可以参...

      Jeff10689682021-12-06
    • Pythonpython实现csdn全部博文下载并转PDF

      python实现csdn全部博文下载并转PDF

      我们学习编程，在学习的时候，会有想把有用的知识点保存下来，我们可以把知识点的内容爬下来转变成pdf格式，方便我们拿手机可以闲时翻看，是很方便...

      武亮宇8122021-12-01
    • Pythonpython顺序执行多个py文件的方法

      python顺序执行多个py文件的方法

      今天小编大家分享一篇python顺序执行多个py文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      liusarazhang9372021-07-26
    • Pythonpython生成word合同的实例方法

      python生成word合同的实例方法

      在本篇内容里小编给大家分享的是一篇关于python生成word合同的实例方法相关内容，有需要的朋友们可以学习下。...

      十一11792021-08-24
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2048 　 6006 　 contextlib 　 SLOTS 　 MELIAE 　 FEEDPARSER 　 暂存 　 持久性管理 　 pickle模块 　 THREADING 　 reduce 　 nignx 　 装饰器 　 函数式编程 　 兔子毒药 　 监控文件 　 流量监控 　 Web框架 　 跳过异常 　 PIL库 　 高斯模糊 　 wxPython 　 import 　 自定义模块 　 Python开发 　 元类 　 metaclass 　 魔术方法 　 DNSPod 　 动态解析域名 　
    © 2019-2022 脚本之家 | 服务器之家(www.tuohang.net)旗下站点 版权所有关于我们联系我们版权申明网站地图