4. 后台登录功能开发

最新推荐文章于 2023-05-16 12:05:09 发布

m0_59791830

最新推荐文章于 2023-05-16 12:05:09 发布

阅读量271

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_59791830/article/details/128362429

版权

4. 后台登录功能开发

一、需求分析
（一）页面原型展示

找到项目资源 - 产品原型 > 瑞吉外卖后台（管理端）- 登录.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>
</el-form-item>
</el-form>
</div>
</div>
</div>


<script src="../../plugins/vue/vue.js"></script>

<script src="../../plugins/element-ui/index.js"></script>

<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/login.js"></script>

<script>
new Vue({
el: '#login-app',
data() {
return {
loginForm:{
username: 'admin',
password: '123456'
},
loading: false
}
},
computed: {
loginRules() {
const validateUsername = (rule, value, callback) => {
if (value.length < 1 ) {
callback(new Error('请输入用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码必须在6位以上'))
} else {
callback()
}
}
return {
'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
}
}
},
created() {
},
methods: {
async handleLogin() {
this.$refs.loginForm.validate(async (valid) => {
if (valid) {
this.loading = true
let res = await loginApi(this.loginForm)
if (String(res.code) === '1') {
localStorage.setItem('userInfo',JSON.stringify(res.data))
window.location.href= '/backend/index.html'
} else {
this.$message.error(res.msg)
this.loading = false
}
}
})
}
}
})
</script>
</body>
</html>

Vue对象通过el属性绑定了id属性为login-app的div元素
Vue对象通过data()方法绑定JSON数据loginForm，通过computed绑定校验规则loginRules
Vue对象通过methods绑定对登录表单数据进行处理的异步方法handleLogin
在前端处理函数里，有后端处理函数返回的结果，保存在res变量里，里面有三个数据：res.code、res.data、res.msg，这就要求后端处理函数返回JSON数据必须要包含这三项内容。

（二）登录页面展示

页面位置：项目/resources/backend/page/login/login.html
为什么Vue对象里要绑定这个用户登录数据呢？
因为员工表employee里有一条数据：admin与123456（MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e）
单击【登录】按钮，首先进行校验，如果校验通过，按钮标题就会变成登录中……，如果校验失败，按钮标题就依然是登录

（三）查看登录请求信息

按F12键进入浏览器的调试模式
说明单击登录按钮通过客户端校验之后，请求的URL：http://localhost:8080/employee/login
后面我们会在雇员控制器里编写相应的处理函数login()

@RestController // 交给Spring容器管理
@RequestMapping("/employee")
public class EmployeeController {

@PostMapping("/login")
public R<Employee> login(HttpRequest request, @RequestBody Employee employee) {
return null;
}
}