社区首页 >专栏 >Vue SPA 入门案例单表班级管理

Vue SPA 入门案例单表班级管理

陶然同学

发布于 2023-02-27 01:55:42

43000

代码可运行

文章被收录于专栏：陶然同学博客陶然同学博客

运行总次数：0

代码可运行

班级查询

需求：

绘制表单，数据绑定

页面加载成功发送请求查询所有班级

将班级数据赋值给classesList

前端：

<template>
    <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>
                    修改 删除
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            classesList:[]
        }
    },
    methods: {
        async selectAllClasses(){
            var url = "http://localhost:8888/classes";
            let { data: baseResult } = await axios.get(url);
            this.classesList = baseResult.data;
        },

    },
    mounted() { 
        // 1.1 页面加载成功
        // 1.2 查询所有班级
        this.selectAllClasses()
    },
}
</script>

<style>

</style>

添加班级

需求：

绘制表单，数据绑定

点击添加，发送ajax完成添加

成功，跳转到列表页面。失败，给出提示

前端：

<template>
    <div>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>
                    <input type="text" v-model = "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="button" value="添加班级" @click = "addClasses()">
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</template>

<script>
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)
            }
        }
    },
}
</script>

<style>

</style>

修改班级

需求：

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

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

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

点击确定进行更新

前端：

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

<script>
import axios from 'axios';
export default {
    data() {
        return {
            classes:{},
            cid:'',
        };
    },
    methods:{
        async selectClassesById(){
            let url = `http://localhost:8888/classes/${this.cid}`;
            let { data: baseResult } = await axios.get(url);
            this.classes = baseResult.data
        },

        async editClasses(){
            var url = `http://localhost:8888/classes`;
            let { data: baseResult } = await axios.put(url,this.classes);
            if(baseResult.code == 20000){
                this.$router.push("/classesList");
            }else{
                alert(baseResult.message);
            }
        }
    },
    mounted(){
        //获得cid
        this.cid = this.$route.params.cid;
        //根据id查询班级信息
        this.selectClassesById();
    }
}
</script>

<style>

</style>

删除班级

需求：

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

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

编写controller获得id

编写service通过id删除

前端：

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

<script>
import axios from 'axios'

export default {
    data() {
        return {
            classesList:[]
        }
    },
    methods: {
        async selectAllClasses(){
            var url = "http://localhost:8888/classes";
            let { data: baseResult } = await axios.get(url);
            this.classesList = baseResult.data;
        },
        async deleteClasses(cid){
            if(!confirm('您确定要删除么？')){
                return
            }
            var url = `http://localhost:8888/classes/${cid}`
            let { data: baseResult } = await axios.delete(url)
            alert(baseResult.code)
            if(baseResult.code == 20000){
                this.selectAllClasses();
            }else{
                alert(baseResult.message)
            }
        }
    },
    mounted() { 
        // 1.1 页面加载成功
        // 1.2 查询所有班级
        this.selectAllClasses()
    },
}
</script>

<style>

</style>