js利用AXUI框架搭建登录，注册，且完成登录和注册服务器请求

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="apple-touch-fullscreen" content="yes"/>

<meta name="format-detection" content="email=no" />

<meta name="wap-font-scale" content="no" />

<meta name="viewport" content="user-scalable=no, width=device-width" />

<meta content="telephone=no" name="format-detection" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>登录卡片-AXUI前端框架|斧子框架，面向设计的自主国产前端框架</title>

<meta name="description" content="，AXUI前端框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。AXUI前端框架原则是能用css写的不用js；能用js写的不用插件；能用插件的不重复引用插件。核心文件只有ax.css和ax.js，加载速度飞快。">

<meta name="keywords" content=",前端框架,UI,CSS3,HTML5,原生JS,面向设计,前端工程师">

<link href="../css/ax.css" rel="stylesheet" type="text/css" >

<link href="../css/ax-response.css" rel="stylesheet" type="text/css" >

<link href="../css/main.css" rel="stylesheet" type="text/css">

</head>

<body class="ax-align-origin">

<div class="login ax-shadow-cloud ax-radius-md">

<div class="ax-row ax-radius-md ax-split">

<div class="ax-col ax-col-14 ax-radius-left ax-radius-md cover"></div>

<div class="ax-col ax-col-10">

<div class="core">

<div class="ax-break"></div>

<div class="ax-tab" axTab>

<ul class="ax-lamp-group" header>

<li>登录账号</li>

<li>注册新用户</li>

</ul>

<ul body>

<li>

<form>

<div class="ax-break"></div>

<div class="ax-break ax-hide-tel"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input"><span class="ax-pos-left" style="width: 2.4rem;"><i class="ax-iconfont ax-icon-me-f"></i></span><input name="username" placeholder="输入登录名称" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input"><span class="ax-pos-left" style="width:2.4rem;"><i class="ax-iconfont ax-icon-lock-f"></i></span>

<input name="password" placeholder="输入密码" type="password"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input">

<div class="ax-row">

<div class="ax-flex-block">

<span class="ax-pos-left" style="width:2.4rem;"><i class="ax-iconfont ax-icon-shield-f"></i></span>

<input name="username" placeholder="输入验证码..." value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>

</div>

<a href="###" class="ax-form-img"><img src="https://www.axui.cn/v1.0/examples/images/yanzhengma.jpg"></a>

</div>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input">

<div class="ax-row">

<div class="ax-flex-block">

<label class="ax-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><u></u><i>记住密码</i></label>

</div>

<a href="###" class="ax-form-txt ax-color-ignore">忘记了密码？</a>

</div>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-flex-block">

<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">登录</button></div>

</div>

</div>

</div>

<div class="ax-break"></div>

<div class="ax-break ax-hide-tel"></div>

<div class="ax-break ax-hide-tel"></div>

</form>

</li>

<li>

<form>

<div class="ax-break"></div>

<div class="ax-break ax-hide-tel"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input"><span class="ax-pos-left" style="width: 2.4rem;"><i class="ax-iconfont ax-icon-me-f"></i></span><input name="username" placeholder="输入名称" type="text" class="username"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input"><span class="ax-pos-left" style="width:2.4rem;"><i class="ax-iconfont ax-icon-lock-f"></i></span>

<input name="password" placeholder="输入密码" type="password" class="password"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input"><span class="ax-pos-left" style="width:2.4rem;"><i class="ax-iconfont ax-icon-lock-f"></i></span>

<input name="password" placeholder="再次输入密码" type="password" class="rpassword"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-form-con">

<div class="ax-form-input">

<div class="ax-row">

<div class="ax-flex-block">

<label class="ax-checkbox"><input name="free-agree" value="0" checked="" type="checkbox"><u></u><i>注册成功后立即登录</i></label>

</div>

<a href="###" class="ax-form-txt ax-color-primary">有账号？立即登录</a>

</div>

</div>

</div>

</div>

</div>

<div class="ax-break-md"></div>

<div class="ax-form-group">

<div class="ax-flex-row">

<div class="ax-flex-block">

<div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full" id="ax-full">注册</button></div>

</div>

</div>

</div>

<div class="ax-break"></div>

<div class="ax-break ax-hide-tel"></div>

<div class="ax-break ax-hide-tel"></div>

</form>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

<!--正文结束-->

<div class="footer">

&#xa9; 2023 <a href="https://www.axui.cn/" target="_self">Axui.cn</a> <a href="https://baike.baidu.com/item/MIT许可证" target="_blank" rel="nofollow">MIT license</a> <script type="text/javascript" src="https://js.users.51.la/21359227.js" ></script>

</div>

<script src='../js/ax.min.js' type="text/javascript"></script>

<script src="../code/js/axios.min.js"></script>

<script>

class Tab{

constructor(){

this.username=document.querySelector('.username')

this.password=document.querySelector('.password')

this.rpassword=document.querySelector('.rpassword')

this.full=document.querySelector('#ax-full')

this.fulls=document.querySelector('.ax-full')

console.log(this.full)

console.log(this.fulls)

this.init()

}

init(){

this.checked()

}

async register(){

const { data } = await axios.post('http://localhost:8888/users/register', {

username: this.username.value,

password: this.password.value,

rpassword: this.rpassword.value,

nickname: this.username.value

}, {

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

console.log(data)

}

async login(){

const { data } = await axios.post('http://localhost:8888/users/login', {

username: this.username.value,

password: this.password.value,

}, {

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

console.log(data)

}

checked(){

this.full.οnclick=()=>{

this.register()

}

this.fulls.οnclick=()=>{

this.login()

}

}

}

new Tab()

</script>

</body>

</html>