4. 后台登录功能开发

最新推荐文章于 2024-08-04 22:27:58 发布

Cy1imple

最新推荐文章于 2024-08-04 22:27:58 发布

阅读量252

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Cy1imple/article/details/128342478

版权

本文介绍了使用Vue.js开发后台登录功能的过程。首先，展示了登录页面原型，包括两个输入框和JSON格式的AJAX请求。接着，详细讲解了Vue对象的数据绑定、验证规则和登录处理方法，以及如何查看登录请求信息。在代码开发部分，讨论了创建雇员实体类、映射器接口和服务。最后，进行了功能测试，包括修改登录超时配置、设置断点，并测试了成功的登录场景。

摘要由CSDN通过智能技术生成

一、需求分析

（一）页面原型展示

找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.html

点开登录.html页面

登录页面有两个文本框需要用户输入用户名和密码，客户端要进行非空校验，单击【登录】按钮之后，表单数据以JSON格式通过AJAX请求方式发送到后台，后台控制器要编写相应的处理函数，对提交的数据进行业务处理，然后将处理结果返回给前端。
不妨看一看login.html页面代码
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瑞吉外卖管理端</title>
<link rel="shortcut icon" href="../../favicon.ico">

<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
<link rel="stylesheet" href="../../styles/common.css">
<link rel="stylesheet" href="../../styles/login.css">
<link rel="stylesheet" href="../../styles/icon/iconfont.css" />
<style>
.body{
min-width: 1366px;
}
</style>
</head>

<body>
<div class="login" id="login-app">
<div class="login-box">
<img src="../../images/login/login-l.png" alt="">
<div class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
<div class="login-form-title">
<img src="../../images/login/logo.png" style="width:139px;height:42px;" alt="" />
</div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
prefix-icon="iconfont icon-user" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20"
@keyup.enter.native="handleLogin" />
</el-form-item>
<el-form-item style="width:100%;">
<el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin">
<span v-if="!loading">登录</span>
<span v-else>登录中...</span>
</el-button>
<