bootstrap + jQuery 后台管理练习 与跨域

昨夜风清
129 阅读1分钟

登录页

<link rel="stylesheet" href="./bootstrap.min.css">

<body>
    <h1 style="text-align:center;margin:30px 0;">kw47的小卖铺</h1>
    <form class="form-horizontal" style="margin:0 auto;width: 50%;">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="pwd" placeholder="请输入的密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" id="loginBtn">Sign in</button>
            </div>
        </div>
    </form>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('#loginBtn').click(function(e){
            /* 阻止bootstrap表单默认事件 */
            e.preventDefault();
            $.post('http://timemeetyou.com:8889/api/private/v1/login',{
                username:$('#user').val(),
                password:$('#pwd').val()
            },function(res){
                console.log(res);
                localStorage.token=res.data.token;
                localStorage.username=res.data.username;
                alert(res.meta.msg)
                setTimeout(function(){
                    location.href = './home.html'
                },300)
            })
        })
    </script>
</body>

home页

<link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        *{margin: 0;padding: 0;}
        .main{
            display: flex;
            overflow-y: hidden;
        }
        aside{
            width: 200px;
            /* 100vh 占满可视区的高度 */
            height: 100vh;
            background:#000;
            opacity: .9;
        }
        .titleSty{
            padding: 16px 15px;
            font-size: 24px;
            color:#fff;
        }
    </style>
 
 <body>
    <div class="main">
        <aside>
            <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
                <li role="presentation" ><a href="#" class="titleSty">小卖铺</a></li>
                <li role="presentation" id="shopList"><a href="#">商品列表</a></li>
                <li role="presentation" id="addGoods"><a href="#">添加商品</a></li>
            </ul>
        </aside>
        <section style="width: calc(100vw - 200px);">
            <nav class="navbar navbar-inverse" style="margin-bottom: 0px;">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">kw47的小卖铺</a>
                    </div>
        
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
                        <ul class="nav navbar-nav" style="float:right;">
                            <li ><a href="#" id="username">用户A</a></li>
                            <li class="active"><a href="#" id="loginOut">退出登录</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active" id="pageTitle">商品列表</li>
            </ol>
            <!-- 使用iframe来嵌套html页面 -->
            <iframe src="./shopPage.html" id="frameID" frameborder="0" width="100%" style="height: calc(100% - 108px);"></iframe>
        </section>
        
    </div>
    
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $('#username').html(localStorage.username);
            $('#loginOut').click(function(){
                localStorage.removeItem('token')
                localStorage.removeItem('username')
                setTimeout(function(){
                    location.href="./login.html"
                },300)
            })
            $('#shopList').click(function(){
                $('#frameID').attr('src','./shopPage.html')
                $('#pageTitle').html('商品列表')
                $(this).addClass('active').siblings().removeClass('active')
            })
            $('#addGoods').click(function(){
                $('#frameID').attr('src','./addGoods.html')
                $('#pageTitle').html('添加商品')
                $(this).addClass('active').siblings().removeClass('active')
            })
        })
    </script>
</body>

商品列表页

<link rel="stylesheet" href="./bootstrap.min.css">

<body>
    <form class="form-inline" style="margin:0 0 10px 10px;">
        <div class="form-group">
            <label for="keywords">搜索关键字</label>
            <input type="text" class="form-control" id="keywords" placeholder="输入关键字">
        </div>
        <button type="button" class="btn btn-info" id="search" onclick="searchInfo()">搜索</button>
    </form>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品重量</th>
                    <th>商品状态</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        init();
        function init(val){
            let params = {
                pagenum:1,
                pagesize:10
            }
            if(val){
                params.query = val
            }else{
                delete params.query
            }
            $.ajax({
                url:"http://timemeetyou.com:8889/api/private/v1/goods",
                headers:{
                    Authorization:localStorage.token
                },
                data:params,
                success:function(res){
                    let str = '';
                    let goods = res.data.goods;
                    for(var i in goods){
                        str+=`
                        <tr>
                            <th scope="row">${parseInt(i)+1}</th>
                            <td>${goods[i].goods_name}</td>
                            <td>${goods[i].goods_price}</td>
                            <td>${goods[i].goods_number}</td>
                            <td>${goods[i].goods_weight}</td>
                            <td>${goods[i].goods_state}</td>
                        </tr>
                        `
                    }
                    $('tbody').html(str)
                }
            })
        }
        
        function searchInfo(){
            init( $('#keywords').val() );
        }
    </script>
</body>

添加商品页

<link rel="stylesheet" href="./bootstrap.min.css">

<body>
    <form style="padding: 10px;">
        <div class="form-group">
          <label for="goods_name">商品名称</label>
          <input type="text" class="form-control" id="goods_name" placeholder="输入商品名称">
        </div>
        <div class="form-group">
            <label for="goods_cat">分类列表</label>
            <input type="text" class="form-control" id="goods_cat" placeholder="输入分类列表">
        </div>
        <div class="form-group">
            <label for="goods_price">商品价格</label>
            <input type="text" class="form-control" id="goods_price" placeholder="输入商品价格">
        </div>
        <div class="form-group">
            <label for="goods_number">商品数量</label>
            <input type="text" class="form-control" id="goods_number" placeholder="输入商品数量">
        </div><div class="form-group">
            <label for="goods_weight">商品重量</label>
            <input type="text" class="form-control" id="goods_weight" placeholder="输入商品重量">
        </div>
        <button type="button" class="btn btn-primary" onclick="add()">添加商品</button>
    </form>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        function add(){
            console.log(1);
            $.ajax({
                url:"http://timemeetyou.com:8889/api/private/v1/goods",
                method:'post',
                headers:{
                    Authorization:localStorage.token
                },
                data:{
                    goods_name:$('#goods_name').val(),
                    goods_cat:'1,2,3',
                    goods_price:$('#goods_price').val(),
                    goods_number:$('#goods_number').val(),
                    goods_weight:$('#goods_weight').val(),
                },
                success:function(res){
                    console.log(res)
                    alert(res.meta.msg)
                }
            })
        }
    </script>
</body>

跨域

<body>
    <!-- 
         Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
     -->
     <!-- 看到报错信息 有Access to XMLHttpRequest by CORS policy: No 'Access-Control-Allow-Origin' 这些关键字 就代表是跨域错误 -->

     <!-- 产生跨域的原因
         由浏览器的同源策略造成的 
        同域名，同端口，同协议（http 和 https）
        -->
        <!-- 跨域解决方案1
                CORS跨域资源共享
    服务端：header("Access-Control-Allow-Origin:*");
    “*”表示所有的域都可以接受
        -->
        <!-- 
            跨域解决方案2
            jsonp
动态创建script标签，使用jQuery的jsonp请求
优点
兼容性强&不受同源策略的限制
缺点
只能用get方法，不能使用post方法

         -->
     <script src="./jquery-1.12.4.js"></script>
     <script>
         /* 使用jsonp解决跨域 */
        $.ajax({
            url:"http://192.168.1.2/a.php",
            type:"get",
            //定义发送jsonp请求
            dataType:'jsonp',
            //更改定义的参数名
            jsonp:'kyFn',//修改callback名称，但是php中也要修改成相对应的函数名
            //指定jsonp发送的回调函数名(可以任意起名字，无需对应)
            // jsonpCallback:'callBack',
            success:function (res){
                document.write(res);
            }
        });
        // function callBack(res){
        //     document.write(res);
        // }


        //  $.ajax({
        //     url:"http://localhost:3000",
        //     success:function(res){
        //         console.log(res);
        //     },
        //     error:function(err){
        //         console.log(err)
        //     }
        //  })
     </script>
</body>
avatar
文章
阅读
粉丝