vue element admin 二次开发_Vue + Flask 实战开发系列（六）

本文将介绍如何使用 Vue 和 Flask 搭建一个具有登录、注册、权限控制等基础功能的后台管理系统。

首先，我们需要准备以下环境：

1. Python3.x
2. Flask
3. Flask-RESTful
4. Flask-JWT-Extended
5. Vue.js
6. Vue Router
7. Element UI

接下来，我们开始搭建后台管理系统。

1. 安装 Flask 和相关扩展

使用 Python3.x 版本安装 Flask 和相关扩展，可以使用 pip 工具，执行以下命令：

pip install flask Flask-RESTful Flask-JWT-Extended

2. 创建 Flask 应用

在项目根目录创建一个 app.py 文件，编写以下代码：

from flask import Flask, jsonify
from flask_restful import Api
from flask_jwt_extended import JWTManager

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'jwt-secret-string'
api = Api(app)
jwt = JWTManager(app)

@app.route('/ping')
def ping():
    return jsonify({'message': 'pong'})

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

上面的代码创建了一个 Flask 应用，并注册了一个 `/ping` 路由，用于测试应用是否正常运行。

3. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目，执行以下命令：

vue create vue-admin

安装 Element UI 和 Vue Router，执行以下命令：

cd vue-admin
npm install element-ui vue-router --save

4. 配置 Vue Router

打开 src/router/index.js 文件，编写以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

export default router

上面的代码定义了两个路由，一个是首页路由 `/`，一个是登录页路由 `/login`。

5. 创建登录页

在 src/views 目录下创建 Login.vue 文件，编写以下代码：

<template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('submit', this.form)
        } else {
          console.log('validate failed')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  width: 400px;
  margin: 0 auto;
  padding-top: 100px;
}
</style>

上面的代码创建了一个登录表单，用于用户登录，表单提交时会调用 handleSubmit 方法。

6. 实现登录功能

打开 src/views/Login.vue 文件，修改 handleSubmit 方法，使用 axios 发送登录请求，如下：

handleSubmit() {
  this.$refs.form.validate(valid => {
    if (valid) {
      axios.post('/api/auth/login', this.form)
        .then(({ data }) => {
          console.log('login success', data)
          localStorage.setItem('jwt', data.access_token)
          this.$router.push('/')
        })
        .catch(err => console.error(err))
    } else {
      console.log('validate failed')
      return false
    }
  })
}

上面的代码使用 axios 发送登录请求，将登录成功后返回的 access_token 存储在 localStorage 中，并跳转到首页。

7. 添加路由守卫

打开 src/router/index.js 文件，添加路由守卫，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const jwt = localStorage.getItem('jwt')
    if (!jwt) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

上面的代码添加了路由守卫，如果用户未登录，访问需要认证的路由时会自动跳转到登录页。

8. 实现 Flask API

在 app.py 文件中添加以下代码：

from flask_restful import Resource, reqparse
from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity

parser = reqparse.RequestParser()
parser.add_argument('username', type=str, required=True, help='Username required')
parser.add_argument('password', type=str, required=True, help='Password required')

class Auth(Resource):
    def post(self):
        args = parser.parse_args()
        username = args['username']
        password = args['password']
        if username == 'admin' and password == 'admin':
            access_token = create_access_token(identity=username)
            return {'access_token': access_token}, 200
        else:
            return {'message': 'Invalid credentials'}, 401

class User(Resource):
    @jwt_required
    def get(self):
        current_user = get_jwt_identity()
        return {'username': current_user}, 200

api.add_resource(Auth, '/api/auth/login')
api.add_resource(User, '/api/user')

上面的代码实现了两个 API 接口，一个是登录接口 `/api/auth/login`，一个是获取当前用户接口 `/api/user`，这两个接口都需要认证才能访问。

9. 实现 Element UI 布局

打开 src/App.vue 文件，编写以下代码：

<template>
  <div class="app">
    <el-container style="height: 100%;">
      <el-header style="height: 60px; line-height: 60px;">
        <el-row>
          <el-col :span="12">
            <h1 style="color: #fff; margin-left: 20px;">后台管理系统</h1>
          </el-col>
          <el-col :span="12">
            <div style="float: right; margin-right: 20px;">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-user"></i> {{ username }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside style="width: 200px;">
          <el-menu default-active="1" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>菜单1</span>
              </template>
              <el-menu-item index="/menu1/page1">页面1</el-menu-item>
              <el-menu-item index="/menu1/page2">页面2</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>菜单2</span>
              </template>
              <el-menu-item index="/menu2/page1">页面1</el-menu-item>
              <el-menu-item index="/menu2/page2">页面2</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      isCollapse: false
    }
  },
  mounted() {
    axios.get('/api/user')
      .then(({ data }) => {
        console.log('get user', data)
        this.username = data.username
      })
      .catch(err => console.error(err))
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('jwt')
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.app {
  height: 100%;
}
</style>

上面的代码使用 Element UI 实现了后台管理系统的布局，包括头部、侧边栏和主体区域。

10. 完成

至此，我们已经完成了一个基于 Vue 和 Flask 的后台管理系统的开发，具有登录、注册、权限控制等基础功能。后续可以根据项目需求进行功能扩展和优化。