Django5+Vue3:OA系统前后端分离项目实战-前端登录功能实现(10)

Django5+Vue3系列文章

前言

本节开始，全文仅对会员开放。

若点赞和收藏数量超过100，全文将免费开放。

 此项目采用 Django 框架的 5.0.7 版本进行开发。

Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。

OA 系统系列文章将持续更新，直至项目的 Docker 部署阶段。

专栏链接:  ~快捷传送门: 留个赞再走呗😭! ~

个人博客: ~所有文章尽在简客免费阅读~

文章目录

目录

Django5+Vue3系列文章

前言

文章目录

一.定义reactive响应式对象

二.v-model双向绑定input标签

三.submit登录按钮添加点击事件

四.定义onSubmit函数

1.正则表达式验证邮箱和密码

2.axios发送post请求

(1)安装axios，代码如下（示例）：

(2)import导入axios，代码如下（示例）：

(3)post方法实现

总结

---

本节涉及到的文件，提供免费下载：

~前端文件传送门login.vue：点个赞再走呗😭~

~后端文件传送门views.py：点个赞再走呗😭~

一.定义reactive响应式对象

打开login.vue，导入reactive响应式对象，创建form表单

代码如下（示例）：

<script setup name="login">
import { reactive } from "vue"

let form = reactive({
    email: "",
    password: ""
})
</script>

二.v-model双向绑定input标签

login.vue内找到email邮箱和password密码的input标签，随后添加v-model双向绑定

<input class="input100" type="text" name="email" placeholder="邮箱&