浅写前后端分离搭建一个服务器实现登录功能

前端网页--客户端

结构层--html代码

 <div class="login">

        <form action="">
            <div class="input">
                <div class="label">账号：</div>
                <div>
                    <input type="text" name="username" id="username" placeholder="请输入账号">
                    <div class="tip H"></div>
                </div>
            </div>
            <div class="input">
                <div class="label">密码：</div>
                <div>
                    <input type="password" name="passwd" id="passwd" placeholder="请输入密码">
                    <div class="tip H"></div>
                </div>
            </div>
            <div class="btn"> 登录 </div>
        </form>
    </div>

    <script src="./js/login.js" type="module"></script>

表现层--sass生成css代码

@import './module/variable';    /** 为后面的模块提供变量*/
@import './module/common';      /** 公用基础样式*/
@import './module/login';       /** 登录页面的样式*/
@import './module/nav';         /** 导航样式*/

公共基础样式

*{
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}
body{
    font-family: Roboto,-apple-system,Nimbus Roman No9 L,PingFang SC,Hiragino Sans GB,Noto Sans SC,Microsoft Yahei,WenQuanYi Micro Hei,ST Heiti,EuclidCircularA,sans-serif;
    -webkit-font-smoothing: antialiased;
}
a {
    color: #202020;
}
a:active, a:hover, a:link, a:visited {
    text-decoration: none;
}


input{
    width: 200px;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
    border: 1px solid #ededed;
    outline: none;
}

.btn{
    width: 200px;
    margin: auto;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: rgb(12, 238, 99);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    margin-top: 20px;

}
.H{
    color:red;
    background-color: #0f0;
}

登录页面样式

.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    >form{
        width: 300px;
        height: 200px;

        >.input{
            display: flex;
            margin-bottom: 12px;
            align-items: center;
        }
    }
    .label{
        font-size: 16px;
        font-weight: 500;
    }
}

行为层--js代码

封装函数--获取选择器

class jQuery {
    /** 构造函数：在实例化的时候会自动执行 */
    constructor(selector) {
        if (typeof selector != 'string') {
            console.error(new Error('selector is  invaild...'));
            return new Error('selector is  invaild...');
        }
        this.node = document.querySelector(selector);
    }

    click(eventFn, capture = false) {
        if(typeof eventFn != 'function'){