登录然后可以退出登录回到登录页面

登录页面

style{

body{

    background-color: aquamarine;

}

.login{

    width: 350px;

    height: 400px;

    border: 2px solid rebeccapurple;

    margin: 100px auto;

}

.login h3{

    line-height: 35px;

    text-align: center;

    font-size: 17px;

    font-weight: bold;

}

.login p {

    margin: 20px;

}

input[type = password]{

    margin-left: 16px;

}

.login-btn{

    margin-left: 69px;

}

}

 <div class=”login”>

        <h3>校友相亲登录页</h3>

        <p>

            登录名：

            <input type=”text”>

        </p>

        <p>

            密码：

            <input type=”password”>

        </p>

        <p>

            <button class=”login-btn” onclick=”login()”>登录</button>

        </p>

    </div>

<script src=”./jquery-1.12.4.js”></script>

    <script>

        /* 发送用户名和密码给后台，后台拿到数据，去数据库验证，存在返回成功，不存在返回不存在该用户 */

        /* 点击登录调取后台接口 */

        function login() {

            if (!$( input[type=text] ).val().trim() || !$( input[type=password] ).val().trim()) {

                alert( 用户名或者密码不能为空 )

                return

            }

            // $.ajax({

            //     url:”http://timemeetyou.com:8889/api/private/v1/login”,

            //     method:”post”,/* 由于登录要加密，所以用post */

            //     data:{

            //         username:$( input[type=text] ).val(),

            //         password:$( input[type=password] ).val()

            //     },

            //     success:function(res){

            //         if(res.meta.status!=200){

            //             alert(res.meta.msg)

            //             return;

            //         }

            //     }

            // })

            /* post简写  */

            let url = “http://timemeetyou.com:8889/api/private/v1/login”;

            $.post(url, {

                username: $( input[type=text] ).val(),

                password: $( input[type=password] ).val()

            }, function (res) {

                if (res.meta.status != 200) {

                    alert(res.meta.msg)

                    return;

                }

                alert(res.meta.msg)

                window.localStorage.setItem( token ,res.data.token)

                window.location.href = orderPage.html

            })

        }

    </script>

退出登录

<button onclick=”loginOut()”>退出登录</button>

    <table border=”1″>

        <tr>

            <th>订单ID</th>

            <th>用户ID</th>

            <th>订单编号</th>

            <th>订单价格</th>

            <th>是否付款</th>

            <th>发票抬头</th>

            <th>创建时间</th>

            <th>更新时间</th>

        </tr>

    </table>

<script src=”./jquery-1.12.4.js”></script>

    <script>

        /* 用常量来表明一个基础路径 */

        const baseUrl = http://timemeetyou.com:8889/api/private/v1/ ;

        getOrderList();

        function getOrderList(){

        $.ajax({

            url: `${baseUrl}orders`,

            method: get ,

            data: {

                pagenum: 1,/* 必传参数 表明当前是第一页 */

                pagesize: 10,/* 必传参数 表明一页显示10条 */

            },

            /* headers代表请求头 */

            headers: {

                // Authorization:window.localStorage.setItem( token )

                Authorization:localStorage.token

            },

            success: function (res) {

                console.log(res.data.goods);

                res.data.goods.forEach(function (item) {

                    console.log(item)

                    $( table ).append(

                        `

                        <tr>

                            <td>${item.order_id}</td>

                            <td>${item.user_id}</td>

                            <td>${item.order_number}</td>

                            <td>${item.order_price}</td>

                            <td>${item.order_pay}</td>

                            <td>${item.order_fapiao_title}</td>

                            <td>${rq(item.create_time)}</td>

                            <td>${rq(item.update_time)}</td>

                        </tr>

                        `

                    )

                });

            }

        })

    }

       function rq(hm){

           console.log(hm)

           let d = new Date(hm);

           let rqStr = d.getFullYear()+ – +(d.getMonth()+1)+ – +d.getDate();

           return rqStr

       }

       /* 清除本地缓存 退出登录 */

       function loginOut(){

           /* 清除缓存跳转登录页 */

           window.localStorage.removeItem( token );

           window.location.href=”login.html”

       }

    </script>