2024年前端最全Vue SPA 入门案例 单表 班级管理(2)，2024最新大厂Web前端面试真题解析

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

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>

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总