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

2023-12-30 05:20:40

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </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>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135266539
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！