2024年最新Vue SPA 入门案例 单表 班级管理(1)，2024年字节跳动74道高级程序员面试

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import axios from ‘axios’

export default {

data() {

    return {

        classes:{}

    }

},

methods:{

    async addClasses(){

        var url = "http://localhost:8888/classes";

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

        if(baseResult.code == 20000){

            this.$router.push('/classesList')

        }else{

            alert(baseResult.message)

        }

    }

},

}

修改班级

====



需求：



        列表页面点击“修改”，切换到修改页面 classesEdit?cid=c001



        页面加载成功时，通过id查询详情



        回显：将查询结果绑定表单（添加已经完成，采用复制）



        点击确定进行更新



前端：

<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>

删除班级

====



需求：



        确定访问路径：delete /classes/c001



        点击发送ajax进行删除（成功：刷新页面；失败：提示）



        编写controller获得id



        编写service通过id删除



前端：

<div>

    <table border="1">

        <tr>

            <td>编号</td>

            <td>班级名称</td>

            <td>班级描述</td>

            <td>操作</td>

        </tr>

        <tr v-for = "(classes, index) in classesList" :key = "index">

            <td>{{ classes.cid }}</td>

            <td>{{ classes.cname }}</td>

            <td>{{ classes.desc }}</td>

            <td>

                <router-link :to="'/classesEdit/' + classes.cid">修改</router-link>

                <a href="" @click.prevent = "deleteClasses(classes.cid)">删除</a>

            </td>

        </tr>

    </table>

</div>

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。