用户登录+插件使用(基础)

<!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>

<!-- 引入bootstrap.css -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

<!-- 公共 -->

<style>

html,

body {

background-color: #EDF0F5;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.container {

width: 520px;

height: 540px;

background-color: #fff;

padding: 60px;

box-sizing: border-box;

}

.container h3 {

font-weight: 900;

}

</style>

<!-- 表单容器和内容 -->

<style>

.form_wrap {

color: #8B929D !important;

}

.form-text {

color: #8B929D !important;

}

</style>

<!-- 提示框样式 -->

<style>

.alert {

transition: .5s;

opacity: 0;

}

.alert.show {

opacity: 1;

}

</style>

</head>

<body>

<div class="container">

<h3>欢迎-登录</h3>

<!-- 登录结果-提示框 -->

<div class="alert alert-success" role="alert">

提示消息

</div>

<!-- 表单 -->

<div class="form_wrap">

<form class="login-form">

<div class="mb-3">

<label for="username" class="form-label">账号名</label>

<input type="text" class="form-control username" name="username">

</div>

<div class="mb-3">

<label for="password" class="form-label">密码</label>

<input type="password" class="form-control password" name="password">

</div>

<button type="button" class="btn btn-primary btn-login"> 登 录 </button>

</form>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- 3.1 引入插件 -->

<script src="./lib/form-serialize.js"></script>

<script>

// 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信

// 目标2:使用提示框,反馈提示消息

// 目标3:使用form-serialize插件,收集用户名和密码

// 2.1 获取提示框

const myAlert = document.querySelector('.alert')

/**2.2 封装提示框函数,重复调用,满足提示需求

* 功能:

* 1. 显示提示框

* 2. 不同提示文字msg,和成功绿色失败红色isSuccess(true成功,false失败)

* 3. 过2秒后,让提示框自动消失

*/

function alertFn(msg, isSuccess) {

// 1> 显示提示框

myAlert.classList.add('show')

// 2> 实现细节

myAlert.innerText = msg

const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'

myAlert.classList.add(bgStyle)

// 3> 过2秒隐藏

setTimeout(() => {

myAlert.classList.remove('show')

// 提示:避免类名冲突,重置背景色

myAlert.classList.remove(bgStyle)

}, 2000)

}

// 1.1 登录-点击事件

document.querySelector('.btn-login').addEventListener('click', () => {

// 3.2 使用serialize函数,收集登录表单里用户名和密码

const form = document.querySelector('.login-form')

const data = serialize(form, { hash: true, empty: true })

console.log(data)

// {username: 'itheima007', password: '7654321'}

const { username, password } = data

// 1.2 获取用户名和密码

// const username = document.querySelector('.username').value

// const password = document.querySelector('.password').value

console.log(username, password)

// 1.3 判断长度

if (username.length < 8) {

alertFn('用户名必须大于等于8位', false)

console.log('用户名必须大于等于8位')

return // 阻止代码继续执行

}

if (password.length < 6) {

alertFn('密码必须大于等于6位', false)

console.log('密码必须大于等于6位')

return // 阻止代码继续执行

}

// 1.4 基于axios提交用户名和密码

// console.log('提交数据到服务器')

axios({

url: 'http://hmajax.itheima.net/api/login',

method: 'POST',

data: {

username,

password

}

}).then(result => {

alertFn(result.data.message, true)

console.log(result)

console.log(result.data.message)

}).catch(error => {

alertFn(error.response.data.message, false)

console.log(error)

console.log(error.response.data.message)

})

})

</script>

</body>

</html>

相关推荐
就改了2 天前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_2 天前
Ajax 入门
前端·javascript·ajax
Beginner x_u13 天前
[AJAX 实战] 图书管理系统下 编辑图书
前端·javascript·ajax·bootstrap
Beginner x_u13 天前
【AJAX 实战】图书管理系统上 渲染图书列表+新增图书+删除图书
前端·ajax·bootstrap
好青崧13 天前
ajax中get和post的区别
前端·ajax
赵得C13 天前
AJAX拦截器失效排查指南:当你的beforeSend有效但error/complete沉默时
前端·ajax·okhttp
qq_4639448613 天前
【Spark征服之路-3.2-Spark-SQL核心编程(一)】
sql·ajax·spark
这是个栗子14 天前
黑马头条-数据管理平台
前端·javascript·ajax
BUG收容所所长15 天前
深入理解 AJAX,从 XMLHttpRequest 到现代 Fetch API
前端·javascript·ajax
vx Biye_Design15 天前
SSM学生社团管理系统-计算机毕业设计源码75136
spring boot·sql·mysql·ajax·bootstrap·mybatis