前后端分离第二课--完整的前端页面

 想做出上面的效果，代码如下：

一、index.html

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

       

           

            学生信息管理系统

           

               

                   

                       

                           

                            班级管理

                       

                       

                           

                            学生信息

                       

                       

                           

                            讲师信息

                       

                       

                           

                            课程管理

                       

                   

               

               

               

                   

                       

                       

                            首页

                            学生管理

                       

                       

                       

                           

                           

                           

                               

                                   

                                       

                                   

                               

                               

                               

                                   

                                        查询

                                        全部

                                        添加

                                   

                               

                               

                                   

                                        导入Excle

                                   

                               

                               

                                   

                                        导出Excle

                                   

                               

                           

                       

                       

                       

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                           

                               

                               

                               

                           

                       

                       

                       

                       

                           

                                批量删除

                           

                           

                               

                                    :current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize"

                                    layout="total, sizes, prev, pager, next, jumper" :total="totalnum">

                               

                           

                       

                   

                    学生信息管理系统 版权所有 zhaoyahui 20220811

               

           

       

   

 

二、index.js

const app= new Vue({
    el:'#app',//  应用在了id为app的容器上
    data:{
        msg:'Hello,Vue',
        students:[
            {
                sno:95001,name:"刘建辉",gender:"男",birthday:"1991-02-11",mobile:"18271953674",email:"[email protected]",address:"上海市"
            },
            {
                sno:95002,name:"张三",gender:"男",birthday:"1992-02-11",mobile:"18271953674",email:"[email protected]",address:"上海市"
            },

        ],
        totalnum:100,
        currentPage4:2,
        pagesize:10,

    }

})

三、index.css

html,body,#app,.el-container{

    margin: 0px;/*边距为0*/

    padding: 0px;/*边距为0*/

    height: 100%;

}

 

.el-header {

    background-color: #B3C0D1;

    color: #333;

    text-align: left;/*标题字体位置*/

    line-height: 80px;/*行高*/

    font-size: 32px;

  }

  .el-footer {

    background-color: #B3C0D1;

    color: #333;

    text-align: center;

    line-height: 30px;

  }

  .el-aside {

    background-color: #D3DCE6;

    color: #333;

    text-align: center;

    line-height: 200px;

  }

  .el-main {

    background-color: #E9EEF3;

    color: #333;

    /*text-align: center;*/

    /*line-height: 160px;*/

  }

  body > .el-container {

    margin-bottom: 40px;

  }

  .el-container:nth-child(5) .el-aside,

  .el-container:nth-child(6) .el-aside {

    line-height: 260px;

  }

  .el-container:nth-child(7) .el-aside {

    line-height: 320px;

  }