2018-03-23后台管理查看

后台管理地址：http://127.0.0.1:3333/admin

html

选择用表格的方式来展示数据库数据

<table class="table table-bordered" id="list"> 
    <tr><th>序号</th><th>歌名</th><th>歌手</th><th>hash</th><th>操作</th></tr>
</table>

javascript

在预加载环节首先访问数据库，获取到数据库返回的数据之后，将数据填充到表格当中去

$('#list').append('<tr><td>'+(i+1)+'</td><td>'+data[i].songname+'</td><td>'+data[i].author+'</td><td>'+data[i].Hash+'</td><td><a href="#"id="a'+i+'">修改</a> | <a href="#"id="b'+i+'">删除</a></td></tr>');

导航栏选项卡

改变所选中的选项的样式以及展示相应的面板

function changeOpt(v){//1增2删3更新4查5小工具,选择选项卡
    $('.active').removeClass('active')
    $('#list').css('display','none')
    $('#listadd').css('display','none')
    $('#listupdate').css('display','none')
    $('#toolList').css('display','none')
    if(v==1){
        $("ul").find("li").eq(1).addClass('active')
        $('#listadd').css('display','block')
    }
    if(v==2){
        $("ul").find("li").eq(3).addClass('active')
        $('#listupdate').css('display','block')
    }
    if(v==3){
        $("ul").find("li").eq(2).addClass('active')
        $('#listupdate').css('display','block')
    }
    if(v==4){
        $('#list').css('display','table')
        $("ul").find("li").eq(0).addClass('active')
    }
    if(v==5){
        $("ul").find("li").eq(4).addClass('active')
        $('#toolList').css('display','block')
    }
}