zdppy+vue3+onlyoffice文档管理系统实战 20240831上课笔记 继续完善登录功能

本文主要是介绍zdppy+vue3+onlyoffice文档管理系统实战 20240831上课笔记 继续完善登录功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

遗留的问题

• 1、整合验证码的接口
• 2、渲染验证码
• 3、实现验证码校验的功能
• 4、验证码校验通过之后，再校验登录功能

验证码框架怎么使用

安装：

pip install zdppy_captcha

使用示例：

import zdppy_api as api
import zdppy_captcha
import zdppy_cachecache = zdppy_cache.Cache("tmp/.captcha_cache")
app = api.Api(routes=[*zdppy_captcha.zdppy_api.captcha(api, cache),]
)if __name__ == '__main__':import zdppy_uvicornzdppy_uvicorn.run(app, host="0.0.0.0", port=8888)

最核心的代码：

app = api.Api(routes=[*zdppy_captcha.zdppy_api.captcha(api, cache),]
)

当前项目依赖

zdppy-amauth
zdppy-amcrud
zdppy-cache
zdppy-captcha==0.1.4
zdppy-env
zdppy-jwt
zdppy-log
zdppy-mauth
zdppy-mcrud
zdppy-mysql
zdppy-password
zdppy-rand
zdppy-req
zdppy-uvicorn
zdppy_api
zdppy_snowflake

将接口整合到项目中

routes/captcha.py

import zdppy_captcha
import zdppy_api as api
from zdppy_cache import Cachecache = Cache("./tmp/.captcha")def get_captcha_routes():"""获取验证码相关的路由"""return zdppy_captcha.zdppy_api.captcha(api, cache)

routes/init.py

import zdppy_amauth as amauthfrom .file import get_file_routes
from .doc import get_doc_routes
from .captcha import get_captcha_routesdef get_routes(db):"""初始化路由"""routes = []routes.extend(get_file_routes(db))  # 文件相关的路由routes.extend(get_doc_routes())  # 文档相关的路由routes.extend(amauth.routers.get_all_routers(db))  # 权限相关的路由routes.extend(get_captcha_routes())  # 验证码相关的路由return routes

渲染验证码

当前的登录界面

获取验证码信息

login/api.js

import axios from "axios";export default {getCaptcha: () => {axios({method: "get",url: `http://127.0.0.1:18888/zdppy_captcha`,}).then(resp => {console.log("获取验证码成功", resp.data)})}
}

index.vue

onMounted(() => {api.getCaptcha()
})

优化获取验证码图片的方法

api.js

import axios from "axios";export default {// 获取验证码图片信息getCaptcha: async () => {let key = ""let img = ""await axios({method: "get",url: `http://127.0.0.1:18888/zdppy_captcha`,}).then(resp => {if (resp.data && resp.data.data && resp.data.status && resp.data.code === 10000) {key = resp.data.data.keyimg = resp.data.data.img}})return {key, img}}
}

index.vue

const captchaKey = ref() // 验证码的key
const captchaImg = ref() // 验证码图片const formState = reactive({username: '',password: '',captcha: '',
});// 点击登录
const onFinish = data => {console.log('Success:', data);axios({method: "post",url: `/api/auth/user/login`,data: {username: data.username,password: data.password,}}).then(resp => {console.log("登录成功", resp.data)})};onMounted(async () => {const captcha = await api.getCaptcha()console.log("验证码信息：", captcha)
})

渲染验证码图片

获取地址：

onMounted(async () => {const captcha = await api.getCaptcha()console.log("验证码信息：", captcha)captchaKey.value = captcha.keycaptchaImg.value = captcha.img
})

渲染图片：

<img :src=" 'data:image/png;base64,' + captchaImg"style="width: 100%; height: 50px; margin-top: 10px">

成功渲染验证码。

要实现的

• 1、点击切换验证码
• 2、1分钟后自动切换验证码

这篇关于zdppy+vue3+onlyoffice文档管理系统实战 20240831上课笔记 继续完善登录功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---