Vue项目：学生管理系统

最新推荐文章于 2024-05-07 22:54:15 发布

2401_84433535

最新推荐文章于 2024-05-07 22:54:15 发布

阅读量88

点赞数 3

分类专栏：程序员文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2401_84433535/article/details/138321572

版权

程序员专栏收录该内容

180 篇文章 0 订阅

订阅专栏

            pageNum:1,

            pageSize:2

        }

    }

},

methods:{

    async selectClasses(){

        let { data: baseResult } = await axios.get("http://localhost:8888/classes");  

        this.classesList = baseResult.data

    },



    async conditionStudent(num){

        if(num){

            this.pageInfo.pageNum = num

        }

        var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;

        let {data: baseResult} = await axios.post(url,this.studentVo);

        this.pageInfo = baseResult.data

    },

},

mounted(){

    //查询所有班级

    this.selectClasses();

    //查询所有学生

    this.conditionStudent();

}

}




添加学生

====



步骤1：设置导航



![](https://img-blog.csdnimg.cn/47cf257bb2024ea2b32630240075274d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_13,color_FFFFFF,t_70,g_se,x_16)



步骤2：添加路由



![](https://img-blog.csdnimg.cn/4a77ed7fe29d4b60a6f52742f742bb79.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_14,color_FFFFFF,t_70,g_se,x_16)



步骤3：创建页面



![](https://img-blog.csdnimg.cn/ec45d39b0fd34c779b7af4f6f525a479.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_9,color_FFFFFF,t_70,g_se,x_16)



步骤：



*   创建数据 班级数组 和 学生对象

*   班级数据跟select绑定 table绑定学生对象

*   发送post请求添加学生

<table border="1">

  <tr>

    <td>ID</td>

    <td>

      <input type="text" v-model = "student.sid">

    </td>

  </tr>

  <tr>

    <td>班级</td>

    <td>

      <select v-model = "student.cid">

        <option value="">--请选择--</option>

        <option :value="classes.cid" v-for = "(classes,index) in classesList" :key="index">{{classes.cname}}</option>

      </select>

    </td>

  </tr>

  <tr>

    <td>姓名</td>

    <td>

      <input type="text" v-model = "student.sname">

    </td>

  </tr>

  <tr>

    <td>年龄</td>

    <td> 

      <input type="text" v-model = "student.age">

    </td>

  </tr>

  <tr>

    <td>生日</td>

    <td>

      <input type="date" v-model = "student.birthday">

    </td>

  </tr>

  <tr>

    <td>性别</td>

    <td>

      <input type="radio" v-model = "student.gender" value = "1"> 男

      <input type="radio" v-model = "student.gender" value = "0"> 女

    </td>

  </tr>

  <tr>

    <td colspan="2">

      <input type="button" value = "添加学生" @click = "addStudent()">

    </td>

  </tr>

</table>




修改学生

====



步骤1：设置导航



![](https://img-blog.csdnimg.cn/34165cc8a5c4456b87ca5523c6c84c6d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_18,color_FFFFFF,t_70,g_se,x_16)



步骤2：添加路由



![](https://img-blog.csdnimg.cn/607b3781a1e947c3b0407ad7a77f92d6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_14,color_FFFFFF,t_70,g_se,x_16)  



步骤3：创建页面



![](https://img-blog.csdnimg.cn/2d8df060bba941f0910d7c77e97e1615.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_9,color_FFFFFF,t_70,g_se,x_16)



步骤：



*   先获得路由传参传过来的参数 存储到data数据区域 cid

*   根据cid查询到学生 存储到student table对student进行数据双向关联

*   修改学生信息 发送ajax请求

<div>

    <table border = "1">

        <tr>

            <td>编号</td>

            <td>

                {{ classes.cid }}

            </td>

        </tr>

        <tr>

            <td>班级名称</td>

            <td>

                <input type="text" v-model = "classes.cname">

            </td>

        </tr>

        <tr>

            <td>班级描述</td>

            <td>

                <textarea name="" id="" cols="30" rows="10" v-model = "classes.desc"></textarea>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <input type="text" value = "修改" @click = "editClasses()">

            </td>

        </tr>

    </table>

</div>




删除学生

====



步骤1：设置导航



![](https://img-blog.csdnimg.cn/d3f3ce33d0a64d81a8b0e7eb4d58f7ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_20,color_FFFFFF,t_70,g_se,x_16)



步骤2：添加方法



![](https://img-blog.csdnimg.cn/c45a97063c3e4108a2dad769a1333292.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zm254S25ZCM5a2m44CC,size_15,color_FFFFFF,t_70,g_se,x_16)



步骤：



*   根据cid发送ajax删除学生

<div>

    班级： <select v-model = "studentVo.cid">

        <option value="" disabled>--请选择--</option>

        <option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>

    </select>

    姓名：<input type="text" v-model = "studentVo.studentName">

    年龄：<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">

    <input type="button" value = "查询" @click = "conditionStudent()">

    <table border="1">

        <tr>

            <td>ID</td>

            <td>班级</td>

            <td>姓名</td>

            <td>年龄</td>

            <td>生日</td>

            <td>性别</td>

            <td>操作</td>

        </tr>

        <tr v-for = "(student,index) in pageInfo.list" :key="index">

            <td>{{student.sid}}</td>

            <td>{{student.classes == null ? student.cname : student.classes.cname}}</td>

            <td>{{student.sname}}</td>

            <td>{{student.age}}</td>

            <td>{{student.birthday}}</td>

            <td>{{student.gender == 1 ? '男' : '女'}}</td>

            <td>

                <router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link>

                <router-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>

            </td>

        </tr>

    </table>



    <!-- 分页 start -->

    当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,

    每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="5">5</option>

        <option value="10">10</option>

    </select>条



    <a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>

    <a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>

    <a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>

    <a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>

    <a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>

    跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页

    <!-- 分页 end -->

</div>