班级查询
需求：
绘制表单，数据绑定
页面加载成功发送请求查询所有班级
将班级数据赋值给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
