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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
