本文将介绍如何使用
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 文件，编写以下代码：
```python
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 文件，编写以下代码：
```
javascript
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 文件，编写以下代码：
```html
<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 发送登录请求，如下：
```
javascript
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 文件，添加路由守卫，如下：
```
javascript
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 文件中添加以下代码：
```python
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 文件，编写以下代码：
```html
<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 的后台管理系统的开发，具有登录、注册、权限控制等基础功能。后续可以根据项目需求进行功能扩展和优化。
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
