Vue SPA 入门案例 单表 班级管理
【摘要】
班级查询
需求：
绘制表单，数据绑定
页面加载成功发送请求查询所有班级
将班级数据赋值给classesList
前端： ...
班级查询
需求：
绘制表单，数据绑定
页面加载成功发送请求查询所有班级
将班级数据赋值给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
文章来源: blog.csdn.net，作者：陶然同学，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_45481821/article/details/123134462
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）