devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

十分钟使用VUE和Flask快速搭建前后端分离项目_vue flask

作者：2023面试高手 | 2024-02-07 17:14:55

赞

踩

vue flask

基于项目搭建个人笔记本放在树莓派上吧!

项目代码已上传至GITEE

前后端分离

技术栈:

后端 :

1.flask

2.sqlalchemy

3.sqlite

前端 :

  1. VUE
  2. AXIOS
  3. ELEMENTUI

介绍

使用el-table模拟文件Tree系统，使用懒加载来增强体验，编辑器选用为mavon-editor，预览使用markdown-it，在后端使用正则表达式解析markdown toc目录增强浏览体验，编辑期间前端定时器会简单的定时缓存数据到后端
演示地址
因为css和js没有走cdn会很慢
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总体分为两部分: flask搭建的后端接口以及VUE的前端界面

前端代码后台基于GITHUB大佬的vue-element-admin,在这里使用了大佬的简单模板并进行修改,模板代码源于vue-admin-template。

项目准备

基于vue-cli进行构建，电脑需安装npm环境

在vue-admin-template(文中以VAT来简称)中clone代码, 根据markdown中文文档步骤构建环境并启动

准备一个最小的flask应用，若未使用过flask请于链接了解，文档中会有完整代码

1.开始吧!和Flask交互起来

以npm run dev模式启动VAT框架，框架启动后可以发现输入任意密码既可以登录进后台中，是因为后台框架使用的是./mock文件中的数据进行后端模拟；

进入后发现框架已经做好了侧边栏，面包屑，以及基于AXIOS的token验证机制，只需要简单的修改既可以与后端进行交互起来

简单的调整
1.1 需要更改后端接口地址

更改文件 ./.env.development

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api' # 更改为后端接口地址
VUE_APP_BASE_API = 'http://localhost:5000' # FLASK端口5000

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

删除模板中的mock数据的引用

更改文件./src/main.js 对如下部分进行注释 并自己选择是否使用中文版本的 element-ui

根据注释说明修改

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

重启前端服务，直到登录时显示network Error

1.2 阅览VAT框架中与后端交互的request模块

解析 @utils/requests.js

上半部分是对axios请求做了一个基本的配置，请求路径为 env.development中的 VUE_APP_BASE_API，超时时间为5s

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

  • 1
  • 2
  • 3
  • 4
  • 5

中间部分为配置axios的请求头，对请求(request)进行预处理，携带token进行验证

service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

后面部分为axios的返回数据(response)拦截器

如下代码可知 VAT框架模板预留了几个 response status code 英文注释比较清晰明了

response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
1.3 根据需求进行request请求代码的更改
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // vuex 携带token验证
      Object.assign(config.headers, { Authorization: 'Bearer ' + getToken() })
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data

    // flask all return 200
    if (res.code !== 200) {
      Message({
        message: 'requests error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // flask因为使用了一些模块(flask_httpauth) token验证失败只返回401
    if (error.response) {
      switch (error.response.status) {
        case 401:
          MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
            confirmButtonText: 'Re-Login',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          })
          break
        case 400:
          Message({
            message: error.response.data.data.message,
            type: 'error',
            duration: 3 * 1000
          })
          break
        case 422:
          Message({
            message: error.response.data.data.message,
            type: 'error',
            duration: 3 * 1000
          })
          break
      }
    }
    return Promise.reject(error)
  }
)

export default service


  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
1.4 搭建一个最小的Flask应用进行与VAT框架的交互

在python环境中pip install flask，编写如下脚本代码启动一个后端服务

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello Flask!'

if __name__ == '__main__':
    app.run()

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

运行 在浏览器中输入 127.0.0.1:5000 浏览器中打印出 ‘Hello Flask!’ 服务启动成功!

1.5 登录接口的解析

登录接口需要post数据 获取token存在浏览器本地中，与后端的每个接口都需要携带token进行验证

  1. @\src\utils\auth.js: 浏览器Cookie对token的处理

  2. @\src\store\getters.js: 本地储存用户信息的全局字典

  3. @\src\store\modules\user.js: 与用户登录的请求和处理基本都在这里

根据user.js的代码可在flask设计出登录接口返回的数据格式

import { login, logout, getInfo } from '@/api/user'

  • 1

login: 无需携带token

  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

返回数据

{
    "token":"Bearer x",
}

  • 1
  • 2
  • 3

info: 携带token

getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        if (!data) {
          return reject('Verification failed, please Login again.')
        }
        const { name, avatar } = data
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

返回数据

{
    "name":"admin",
    "avatar":".png"
}

  • 1
  • 2
  • 3
  • 4

logout: 清除token并退出

无数据返回

1.6 登录接口的实现

接口位置 @\src\api\user.js, 修改为如下

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/auth/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/auth/info',
    method: 'get'
    // params: { token }  # 获取到token后会自己携带token进行请求
  })
}

export function logout() {
  return request({
    url: '/auth/logout',
    method: 'post'
  })
}


  • 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

登录组件位置 @\src\views\login\index.vue， 可以看到post form如下

loginForm: {
    username: 'admin',
    password: '111111'
},

  • 1
  • 2
  • 3
  • 4

修改flask的接口来兼容VAT吧! 复制如下代码到最小的flask应用中重新启动测试

def returnVueDataModel(message, code, **kwargs):
    kwargs['message'] = message
    kwargs['code'] = code
    return {"data": kwargs, 'code': 200}

@app.route('/auth/login', methods=['POST'])
def login():
    params = request.get_json()
    if 'username' not in params or 'password' not in params:
        return jsonify(returnVueDataModel('miss arguments', 400)), 400
    if params['username'] == 'admin' and params['password'] == '111111':
        return jsonify(returnVueDataModel('login success', 200, token='x'))
    return jsonify(returnVueDataModel('no existing user', 400)), 400

@app.route('/auth/info', methods=['GET'])
def info():
    token = request.headers.get('Authorization')
    if 'Bearer' not in token:
        return my_json(returnVueDataModel('please login!', 400)), 400
    return jsonify(returnVueDataModel('token verify pass', 200, name='Admin', avatar=""))

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
1.7 粗暴的解决跨域问题
Access to XMLHttpRequest at 'http://localhost:5000/auth/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:5000/auth/login:1 Failed to load resource: net::ERR_FAILED
:9528/#/login?redirect=%2Fdashboard:1 Access to XMLHttpRequest at 'http://localhost:5000/auth/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 1
  • 2
  • 3

服务启动并登录后 会出现如上问题，需要配置flask的跨域请求 使用 flask_cors

Api文档地址

pip install flask_cors

from flask import Flask, request, jsonify

app = Flask(__name__)
from flask_cors import *  # 导入模块

CORS(app, supports_credentials=True, origins=['http://localhost:9528'])


def returnVueDataModel(message, code, **kwargs):
    kwargs['message'] = message
    kwargs['code'] = code
    return {"data": kwargs, 'code': 200}


@app.route('/', methods=['GET'])
def hello_world():
    return 'Hello Flask!'


@app.route('/auth/login', methods=['POST'])
def login():
    params = request.get_json()
    if 'username' not in params or 'password' not in params:
        return jsonify(returnVueDataModel('miss arguments', 400)), 400
    if params['username'] == 'admin' and params['password'] == '111111':
        return jsonify(returnVueDataModel('login success', 200, token='x'))
    return jsonify(returnVueDataModel('no existing user', 400)), 400


@app.route('/auth/info', methods=['GET'])
def info():
    token = request.headers.get('Authorization')
    if 'Bearer' not in token:
        return my_json(returnVueDataModel('please login!', 400)), 400
    return jsonify(returnVueDataModel('token verify pass', 200, name='Admin', avatar=""))


if __name__ == '__main__':
    app.run()


  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
Success

短短十多分钟 完成了一个前后端分离的小项目，那么根据这个框架，可以搭建起来任意一个喜欢的后台管理系统，本次我们搭建一个小型的Blog，当然这个Blog因为也是闲着无聊写的，所以可能会有bug哟，比如markdown的Toc目录因为我使用的正则解析的，可能你们写法跟我不一样就无法解析出正常的目录啦

2. 后端的搭建

2.1 项目的启动

项目地址

clone到本地，在pycharm或喜欢的编辑器中打开，pycharm会自动创建虚拟环境以及pip 环境包

进入虚拟环境，输入如下命令，搭建sqlalchemy数据库环境

flask db init
flask db migrate
flask db upgrade

  • 1
  • 2
  • 3

搭建完成后，在虚拟环境下输入>>flask shell 进入flask shell环境fake数据(noteapp\faker.py)，如下为flask shell中包含的对象

def register_shell_context(app):
    """Register shell context objects."""

    def shell_context():
        """Shell context objects."""
        return {"db": db, "User": models.User, "Fold": models.Fold, "Blog": models.Blog,
                "fake": faker.faker, "wafer": models.Wafer}

    app.shell_context_processor(shell_context)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

输入命令如下

>>> fake
<class 'noteapp.faker.faker'>
>>> fake().do()
--- 等待完成 若有报错缺少faker模块请pip安装
>>> User.query.all()
[<User('David Richardson')>, <User('Leonard Roberts')>, <User('Samuel Scott')>, <User('Eduardo Jones')>, <User('Shirley Johns')>]
--- 生成的用户列表 密码均为123456
>>> eixt()

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

回到虚拟环境 输入flask run启动服务

2.2 项目目录解析

目录结构

├── README.md            项目介绍
├── autoapp.py           程序入口
├── requirements.txt     项目依赖
├── migrations           flask db init 生成的数据库管理 若非必要请在git ignore
├── tests             	 一些单元测试及一些个人测试文件
├── noteapp              源码目录 
│  ├── models            持久化数据表模型
│  ├── upload            文件上传目录
│  ├── util              公共函数方法
│  ├── views             主要蓝图和业务代码
│  ├── app.py            程序初始化入口
│  ├── commands.py       创建虚拟环境下flask自定义命令
│  └── database.py       CURD
│  └── dev.db            持久化sqlite 
│  └── extensions.py     引入的库
│  └── faker.py          虚拟数据
│  └── settings.py       程序配置
└── 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3. 前端的搭建

3.1 项目的启动

项目地址

clone到本地，在vscode或喜欢的编辑器中打开，根据markdown文档搭建项目，npm run dev 运行

启动成功后浏览器会跳到文章开头的界面中，操作中会需要登录，请使用前面flask shell查到的用户密码登录
Tree中使用elementUi的table懒加载和根据懒加载更新某行数据的方式来模拟文件夹系统

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/66535?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号