vue element admin 二次开发_Vue + Flask 实战开发系列(六)

时间: 2023-11-27 10:51:04 浏览: 38
本文将介绍如何使用 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 的后台管理系统的开发,具有登录、注册、权限控制等基础功能。后续可以根据项目需求进行功能扩展和优化。

相关推荐

最新推荐

详解vue-template-admin三级路由无法缓存的解决方案

而用到三级路由的时候,拿到name只能时第三级路由的name,二级路由组件的名字会丢失,keep-alive就不会进行缓存。 知道原因之后,第一个想法就是把二级路由的name也加上去就好了。要实现这个也很简单,只需要获取到...

Vue+Flask实现简单的登录验证跳转的示例代码

本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue+element开发手册.docx

此文档是当前项目中用到的web前端开发的标准规范,主要介绍vue+elementui项目的架构、目录结构和开发规范。仅供参考

vue中使用百度脑图kityminder-core二次开发的实现

主要介绍了vue中使用百度脑图kityminder-core二次开发的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue+element tabs选项卡分页效果

本文实例为大家分享了vue+element tabs选项卡分页效果的具体代码,供大家参考,具体内容如下 文件目录: 功能展示: 路由配置: { path: '/account', component: ()=&gt; import('../components/home/home.vue'),...

面 向 对 象 课 程 设 计(很详细)

本次面向对象课程设计项目是由西安工业大学信息与计算科学051002班级的三名成员常丽雪、董园园和刘梦共同完成的。项目的题目是设计一个ATM银行系统,旨在通过该系统实现用户的金融交易功能。在接下来的一个星期里,我们团队共同致力于问题描述、业务建模、需求分析、系统设计等各个方面的工作。 首先,我们对项目进行了问题描述,明确了项目的背景、目的和主要功能。我们了解到ATM银行系统是一种自动提款机,用户可以通过该系统实现查询余额、取款、存款和转账等功能。在此基础上,我们进行了业务建模,绘制了系统的用例图和活动图,明确了系统与用户之间的交互流程和功能流程,为后续设计奠定了基础。 其次,我们进行了需求分析,对系统的功能性和非功能性需求进行了详细的梳理和分析。我们明确了系统的基本功能模块包括用户认证、账户管理、交易记录等,同时也考虑到了系统的性能、安全性和可靠性等方面的需求。通过需求分析,我们确立了项目的主要目标和设计方向,为系统的后续开发工作奠定了基础。 接着,我们进行了系统的分析工作,对系统进行了功能分解、结构分析和行为分析。我们对系统的各个模块进行了详细的设计,明确了模块之间的关联和交互关系,保证系统的整体性和稳定性。通过系统分析,我们为系统的设计和实现提供了详细的思路和指导,确保系统的功能和性能达到用户的需求和期望。 最后,我们进行了系统的设计工作,绘制了系统的体系结构图、类图和时序图等,明确了系统的整体架构和各个模块的具体实现方式。我们根据需求分析和系统分析的结果,结合面向对象设计的原则和方法,设计出了一个高效、稳定和灵活的ATM银行系统。通过系统设计,我们为系统的后续开发和调试提供了具体的设计方案和指导。 综上所述,通过本次面向对象课程设计项目,我们不仅学习到了面向对象设计的理论知识和实践技能,也掌握了团队合作和系统开发的经验。通过不懈努力和合作,我们成功完成了ATM银行系统的设计工作,为系统的后续开发和实现奠定了坚实的基础。希望通过这次设计项目的实践,我们能够更好地理解和应用面向对象设计的方法和思想,为未来的学习和工作打下坚实的基础。

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

Python标签编码错误对程序造成的影响

# 1. Python标签编码错误的介绍 #### 1.1 Python编码问题的概述 编码问题在Python开发中是一个常见而又棘手的难题。首先,我们需了解什么是编码问题,即数据在不同编码方式下出现混乱或乱码的情况。Python中对编码有着复杂的定义和处理方式。因为Python 3默认采用Unicode编码,但在实际应用中仍会遇到编码错误的情况。 #### 1.2 常见的Python编码错误 Python编码错误主要包括解析错误、UnicodeDecodeError错误和UnicodeEncodeError错误。解析错误通常是因为源代码文件的编码格式与Python解释器期望的格式不一致。

那我该怎么获取端口呢,需不需要付费之类

获取端口的方法取决于你选择的部署方式。以下是一些常见的部署选项: 1. 本地部署:如果你想在本地环境中运行 HackChat,你可以选择一个未被占用的端口号。常用的端口号范围是 1024 到 65535。确保你选择的端口没有被其他应用程序使用。 2. 云平台:如果你选择使用云平台(如 AWS、Azure、Google Cloud 等)部署 HackChat,你需要查看该云平台的文档以了解如何分配和获取端口。通常,云平台会根据你的配置为你分配一个端口号。这可能需要一些费用,具体取决于你选择的服务和计划。 3. 共享主机:如果你选择使用共享主机(如 Heroku、Netlify 等)部署 H

复杂可编程逻辑器件ppt课件.ppt

可编程逻辑器件(PLD)是一种由用户根据自己要求来构造逻辑功能的数字集成电路。与传统的具有固定逻辑功能的74系列数字电路不同,PLD本身并没有确定的逻辑功能,而是可以由用户利用计算机辅助设计,例如通过原理图或硬件描述语言(HDL)来表示设计思想。通过编译和仿真,生成相应的目标文件,再通过编程器或下载电缆将设计文件配置到目标器件中,这样可编程器件(PLD)就可以作为满足用户需求的专用集成电路使用。 在PLD的基本结构中,包括与门阵列(AND-OR array)、或门阵列(OR array)、可编程互连线路(interconnect resources)和输入/输出结构。与门阵列和或门阵列是PLD的核心部分,用于实现逻辑功能的组合,并配合互连线路连接各个部件。PLD的输入/输出结构用于与外部设备进行通信,完成数据输入和输出的功能。 除了PLD,还有复杂可编程器件(CPLD)、现场可编程门阵列(FPGA)和系统可编程逻辑器件(ispPAC)等不同类型的可编程逻辑器件。这些器件在逻辑功能实现、资源密度、时钟分配等方面有所不同,可以根据具体应用需求选择合适的器件类型。 对于可编程逻辑器件的设计流程,一般包括需求分析、设计规划、逻辑设计、综合与优化、布局布线、仿真验证和最终生成目标文件等步骤。设计师需要根据具体的需求和功能要求,使用适当的工具和方法完成各个阶段的设计工作,最终实现满足用户要求的可编程逻辑器件设计。 通过学习可编程逻辑器件的分类、特点、基本结构、工作原理和设计流程,可以更深入地了解数字集成电路的设计和实现原理,提高工程师的设计能力和应用水平。可编程逻辑器件的灵活性和可重复编程能力,使其在电子产品的设计与开发中具有重要的作用,不仅可以加快产品研发的速度,还可以降低成本和提高可维护性。 总的来说,可编程逻辑器件是一种灵活可定制的数字集成电路,可以根据用户需求实现不同的逻辑功能。通过适当的设计流程和工具支持,可以高效地完成器件的设计和验证工作,从而实现更加智能、功能更强大的电子产品。深入了解和掌握可编程逻辑器件的原理和应用,对于提升工程师的技术水平和创新能力具有重要意义。