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

89542767 发布于2022-09-09 10:41 / 874人阅读

　　写这篇文章的主要目的是，给大家详细的进行介绍关于Flask-Vue前后端分离的过程，详细介绍一下相关代码的使用规范，以及一些相关实例，希望可以给大家带来一定的帮助。

　　最近学习了一下前后端分离技术，前端用的是Vue，后段用的是Flask。

　　vue官方网站：开源框架用的是Javascript框架，vue是前端前进式的框架，具备可视化功能，Vue采用自底向上的增量开发设计。vue是轻量化的框架设计，用起来简单快速，并且比较的轻便。

　　vue.js满足当前移动和PCweb项目的开发需求，框架油然而生，而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是全局安装的。

　　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

　　各个目录的意思：

template：组件的 HTML 内容
script: 组件的逻辑代码（Javascript）
style: 组件的样式（CSS）

　　名字作用

　　main.js app的入口，它会加载和初始化Vue和根组件

　　App.vue根组件-其他组件的入口

　　assets静态文件如图片和字体等都放在这里

　　components UI组件放在这里

　　router URL同组件的映射关系在这里定义

　　client/src/components/HelloWord.vue是自动生成的单文件组件，有三部分组成：

　　运行该程序：

(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：

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

<template>
  <div>
    <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() {

私有云服务器托管前后端分离前后端分离开发 js前后端分离框架前后端不分离 jsp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127611.html

计算机毕业设计大学英语阅读大赛管理系统【ssm+vue前后端分离】代码讲解安装调试

摘要：作者计算机编程吉哥简介专业从事程序开发，微信小程序开发，定制化项目源码代码讲解文档撰写制作。做自己喜欢的事，生活就是快乐的。 ?作者：计算机编程-吉哥 ?简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐...

hss01248 2021-11-24 09:39 评论0 收藏0
系统的讲解 - SSO单点登录

摘要：概念英文全称，单点登录。登录如上述流程图一致。系统和系统使用认证登录。退出上图，表示的是从某一个系统退出的流程图。与的关系如果企业有多个管理系统，现由原来的每个系统都有一个登录，调整为统一登录认证。概念 SSO 英文全称 Single Sign On，单点登录。在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统。比如：淘宝网（www.taobao.com），天猫网...

Kylin_Mountain 2019-07-01 12:46 评论0 收藏0
webpack工程化集成React技术栈（一）

项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

tianhang 2019-08-22 14:47 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

余学文 2019-08-22 11:14 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

Anleb 2019-08-05 12:36 评论0 收藏0