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