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

班级查询

需求:

        绘制表单,数据绑定

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

        将班级数据赋值给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>

后端

        链接:https://pan.baidu.com/s/1032Wkr58iZfPJ7baJSsqiw 
        提取码:2002

posted @ 2022-11-09 08:13  陶然同学  阅读(18)  评论(0编辑  收藏  举报