前言

相信接触过Django或者Flask的同学，对Django-Admin或者Flask-Admin或多或少都会有所了解。他们可以通过简单的配置，就可以搭建一个小型的后台管理系统。这种方式属于前后端不分离的架构，在现在前后端分离盛行的今天，可能就已经不是很合适了。本文这里使用Flask+Vue前后端分离的方式，去搭建一个后台管理系统。

什么是前后端分离

前后端分离是一种新的开发模式，当然称其为新的架构模式也不为过。说得通俗一点就是，我们在后端的项目里面看不到HTML页面。在开发过程中，后端工程只需要提供接口，然后由前端工程负责页面的呈现。在这里前端有自己的技术栈，比如Vue、Webpack、Npm等。

搭建后端工程

基础环境说明

• Python3.6+
• Flask2.0.2

• Git 2.34.0
• IDEA2021

• PostMan

接口文档

用户登录接口

请求URL：

• BASE_URL/user/login

请求方式：

• POST

参数：

参数名	必选	类型	说明
userName	是	string	用户名
password	是	string	密码

请求样例

{
  "userName": "admin",
  "password": "123456"
}

返回示例

  {
    "code": 0,
    "data": {
      "id": "1",
      "token": "666666"
    }
  }

返回参数说明

参数名	类型	说明
token	String	访问token

获取当前用户信息接口

请求URL：

• BASE_URL/user/info

请求方式：

• POST

参数：

无

返回示例

  {
    "code": 0,
    "data": {
      "id": "1",
      "userName": "admin",
      "realName": "张三",
      "userType": 1
    }
  }

返回参数说明

参数名	类型	说明
id	Long	用户ID
userName	String	用户名
realName	String	姓名
userType	Integer	用户类型

创建项目名称

mkdir -p flaskcg && cd flaskcg

创建虚拟环境

因为使用IDEA创建的虚拟环境，有那么一些小概率会出现问题，这里就使用命令行先手工创建了，同时也间接的熟悉使用该命令。

# 创建虚拟环境
python -m venv ./venv
# 激活虚拟环境
source venv/Scripts/activate
# 退出虚拟环境
deactivate

IDEA导入项目

找开或导入项目

可以进入项目目录，然后右键使用IDEA打开，也可以先打开IDEA，然后再导入项目。

配置虚拟环境

File->Project Structure

Project->New->Python SDK

Existing environment（已经存在的环境）

Apply->OK

安装Flask

打开命令行终端

IDEA左下角Terminal

打开成功后，可以看到(venv)，也侧面说明导入项目，使用虚拟环境成功。

安装Flask

# 安装最新版本
pip3 install flask
# 指定安装版本
pip3 install flask==2.0.2

生成依赖文件

建议每安装完一个依赖，要顺手生成或更新依赖文件，这样别人拿到源代码也方便安装使用。

pip3 freeze > requirements.txt

除了Flask依赖，还有其他相关的依赖。

创建第一个Flask应用

新建app.py文件

from flask import Flask, jsonify, request

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  # 禁止中文转义


@app.route("/user/login", methods=["POST"])
def user_login():
    """
    用户登录
    :return:
    """
    data = request.get_json()
    userName = data.get("userName")
    password = data.get("password")
    if userName == "admin" and password == "123456":
        return jsonify({
            "code": 0,
            "data": {
                "token": "666666"
            }
        })
    else:
        return jsonify({
            "code": 99999999,
            "msg": "用户名或密码错误"
        })


@app.route("/user/info", methods=["GET", "POST"])
def user_info():
    """
    获取当前用户信息
    :return:
    """
    token = request.headers.get("token")
    if token == "666666":
        return jsonify({
            "code": 0,
            "data": {
                "id": "1",
                "userName": "admin",
                "realName": "张三",
                "userType": 1
            }
        })
    return jsonify({
        "code": 99990403,
        "msg": "token不存在或已过期"
    })


if __name__ == '__main__':
    app.run(host="0.0.0.0")

配置app.py

第一次运行，要配置一下FLASK_ENV=development，这样配置后，修改代码，不需要重启服务

运行app.py启动服务

使用PostMan接口测试工具测试接口

测试登录接口-用户名或密码错误时

测试登录接口-用户名或密码成功时

\

测试获取当前用户信息接口-token不存在时

测试获取当前用户信息接口-token存在且正确时

一些说明

这里为了演示前后端分离的开发模式，后端接口只简单地写了用户登录接口和获取当前用户信息接口，方便后面前端调用测试。

搭建前端工程

基础环境说明

• NodeJS-v14.6.0
• npm6.14.6

• Vue-Cli4.5.13
• Vue3

• Element-Plus
• Git 2.34.0

• VSCode

基础环境请自行安装。

安装Vue-Cli

如果电脑上已经安装，该步骤可省略。

npm install -g @vue/cli

创建项目

这里使用Vue项目管理器创建项目，执行如下命令：

vue ui

浏览器会自动打开http://localhost:8000

选择要工程所有父目录，点击在此创建新项目

输入项目文件夹->选择包管理器->下一步

\

点手动->下一步

除了打红叉的两个，其他右边都要勾选

根据图片选择->创建项目

可以先不预设

项目创建中，该过程比较缓慢，请耐心等待……

创建项目成功，可以终止管理工具

使用VSCode打开项目

进入项目，右键菜单打开项目，当然，也可以先打开VSCode再导入。

启动前端项目

打开终端

终端，打开终端

执行如下命令启动

npm run serve

浏览器打开链接

安装ElementPlus库

打开新的终端

npm install element-plus --save

修改src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

修改src/views/Home.vue

<template>
  <div class="home">
    <el-button type="primary">我是按钮</el-button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
};
</script>

浏览器查看效果

安装Axios请求库

终端执行安装命令

npm install axios --save

新增配置文件vue.config.js

module.exports = {
  devServer: {
    // 设置代理
    proxy: {
      "/api": {
        target: "http://localhost:5000", // 访问数据的计算机域名
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理,
        pathRewrite: { // 重写代理规则，/api开头，代理到/
          '^/api': '/'
          // 例：/api/user/login代理到
          // http://localhost:5000/user/login
        }
      }
    }
  }
};

重启前端服务

修改vue.config.js后，需要重启前端服务

Ctrl+C关闭

npm run serve

修改src/views/Home.vue

<template>
  <div class="home">
    <el-button type="primary">我是按钮</el-button>
    <div>用户名：{{ user.userName }}</div>
    <div>姓名：{{ user.realName }}</div>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      user: {},
    };
  },
  created() {
    axios
      .post(
        "/api/user/info",
        {},
        {
          headers: {
            token: "666666",
          },
        }
      )
      .then((res) => {
        if (res.data.code === 0) {
          this.user = res.data.data;
        }
      });
  },
};
</script>

浏览器查看

小结

本文简单体验了一次前后端分离的开发模式，涉及到的内容略多，整体如下：

• 搭建Flask后端工程
• 编写两个简单接口
• 搭建前端工程
• 前端工程调用后端接口

两个工程相互独立，可能对于Flask开发的小伙伴，面对一堆新的前端技术栈是比较吃力的，但是还是希望您能耐心走完整个流程。

一些资料

Flask2.0.2中文文档

Vue3中文官网

ElementPlus

Axios

作者录制的一些前端视频

源代码

后端工程

前端工程