vue对数据的增加、修改、查询
vue的增查改
·
查询
首先在api中先写对应服务端的接口，是一个分页查询
//根据分页查询教师
export function getTecListByPage(params) {
return http.get(
"/teacher2/pageinfo2?pageNum="+params.pageNum+"&pageSize="+params.pageSize+
"&username="+params.username+"&tecauditstate="+params.tecauditstate)}分页查询这里需要传递四个参数。
pageNum是当前第几页，pageSize是一页显示多少条数据，
username是搜索框里要查询的姓名，tecauditstate是教师审核状态。
然后创建一个teacher.vue页面，在教师页面写一个表格用于存放查到的教师数据
注意别忘了配置路由！！
{
path:'/teacher',
component: resolve => require(['../views/study/teacher.vue'],resolve),
meta:{
title:'教师管理'
}
}template部分：
<template>
<div class="container">
<h2 class="handle-title">教育管理 > 教师管理</h2>
<div class="handle-box">
<div>
<!--根据条件查询教师和添加教师-->
<span class="search-label" style="margin-left: 5px">教师名字:</span>
<el-input v-model="search" style="width: 120px" placeholder="请输入教师名字"></el-input>
<span class="search-label" style="margin-left: 5px">教师状态:</span>
<el-select v-model="value" style="width: 120px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button class="query_btn" type="primary" @click="goSearch">查询</el-button>
<el-button class="add_btn" type="primary" @click="addTec">添加</el-button>
</div>
</div>
<!--分页查询到的数据-->
<el-table
:data="tableData"
class="table"
border>
<el-table-column prop="username" label="名字" />
<el-table-column prop="tectitle" label="教师职称" />
<el-table-column prop="teclabel" label="技术标签" />
<el-table-column label="审核状态" >
<template #default="{row}">
<div v-if="row.tecauditstate == 1" >可用</div>
<div v-else-if="row.tecauditstate == -2" >独立入驻教师</div>
<div v-else>不可用</div>
</template>
</el-table-column>
<el-table-column prop="orgname" label="所属机构名称" />
<el-table-column label="操作" width="200">
<template #default="{row}">
<el-button type="text" icon="el-icon-edit-outline" @click="goUpdate(row.tecid)">修改</el-button>
</template>
</el-table-column>
</el-table>
<!--分页参数和配置-->
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="totalNum">
</el-pagination>
</div>
</div>
</template>js部分：
<script>
//引入接口
import {getTecListByPage} from "../../api/teacherAPI/api";
export default {
name: "teacher",
//配置页面参数
data(){
return {
value:"-1", //状态选择默认为 -1 表示全部
//搜索部分的下拉菜单，根据教师审核状态查询
options:[
{
value: '-1',
label: '全部'
},
{
value: '1',
label: '可用'
},
{
value: '0',
label: '不可用'
},{
value: '-2',
label: '独立入驻教师'
}
],
tableData: [],//数据列表
currentPage: 1, //默认第一页
pageSize: 10, //默认每页10条
totalNum: 0, //默认总条数
search: "", //搜索名字
}
},
mounted() {
//进入页面时就调用loadData
this.loadData()
},
methods:{
loadData(){
let params={
pageNum:this.currentPage,//当前页面
pageSize:this.pageSize,//一页多少条
username:this.search,//搜索框里输入的姓名
tecauditstate:this.value//下拉框里选中的状态
}
getTecListByPage(params).then((res)=>{
//console.log(res)
this.tableData=res.data.pagedata.records;
this.totalNum = res.data.pagedata.total;//总共有多少条
})
},
//每页的条数
handleSizeChange(val) {
this.pageSize=val;
this.loadData()
},
// 第几页
handleCurrentChange(val) {
this.currentPage = val;
this.loadData()
},
//搜索教师
goSearch(){
this.loadData();//搜索的时候把参数带到服务端去重新查询
}
}
}
</script>调用查询方法，把查询到的数据（res）放入tableData，查到的数据是一个json对象
把res打印在控制台，我们能看到的数据如下
最后显示出来的页面：
增加
首先还是先写一个接口，对应服务端，注意这里的请求类型是post
//增加教师
export function addTec(params) {
return http.post("/teacher2/insert2",params)
}然后编写AddTec.vue页面，同时编写路由
template部分：
<template>
<div class="container">
<h2 class="handle-title">教育管理 > 新增教师</h2>
<el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="80px" style="width:430px">
<el-form-item label="教师名字" prop="username">
<el-input v-model="form.username" style="width:190px" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="教师职称" prop="tectitle">
<el-input v-model="form.tectitle" style="width:190px" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="教师技术标签" prop="teclabel">
<el-input v-model="form.teclabel" style="width:190px" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="教师状态">
<el-select v-model="form.tecauditstate">
<el-option label="可用" value="1"></el-option>
<el-option label="不可用" value="0"></el-option>
<el-option label="独立入驻教师" value="-2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择所属机构" prop="tecorgid">
<el-select v-model="form.tecorgid" placeholder="请选择教师所属教学机构">
<el-option
v-for="item in orgOptions"
:key="item.orgid"
:label="item.orgname"
:value="item.orgid"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">提交</el-button>
<el-button @click="goBack">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>js部分：
<script>
import {addTec} from "../../api/teacherAPI/api";
import {getOrgList} from "../../api/teacherAPI/api";
export default {
name: '',
data() {
return {
form: { //表单里输入框的默认值
username: '',
tectitle: '',
teclabel: '',
tecauditstate:'1',
orgname:'',
orgid:''
},
rules: { //表单规则
username: [
{ required: true, message: '请输入教师名称', trigger: 'blur' }
]
},
orgOptions:[],
}
},
mounted() {
this.getOrg();
},
methods:{
//新增教师
onSubmit(formName) {
let that = this;
this.$refs[formName].validate((value)=>{
// console.log(value)
if(value){
// console.log(that.form)
let tec = new FormData();
tec.append("tectitle",that.form.tectitle);
tec.append("teclabel",that.form.teclabel);
tec.append("tecauditstate",that.form.tecauditstate);
tec.append("tecorgid",that.form.tecorgid);
tec.append("username",that.form.username);
addTec(tec).then((res)=>{
//console.log(res)
if(res.data.code == 1){
that.$message({
message:"添加成功",
type:"success",
})
that.$router.push("/teacher")
}else{
this.$message({
message:"添加失败",
type:"info"
});
}
})
}
})
},
//取消操作
goBack() {
this.$router.go(-1);
},
getOrg(){
getOrgList().then((res)=>{
//console.log(res)
this.orgOptions=res.data.datalist;
})
}
},
}
</script>别忘了在teacher.vue页面增加一个方法，并绑定在添加按钮上
methods:{
...
//添加教师
addTec(){
this.$router.push("/addTec")
},
}添加的效果图：
修改
准备好两个接口，因为我们在点击修改按钮时需要自动填充这条数据原本的数据，然后再进行修改
//根据id查询教师
export function getTecById(params) {
return http.get("/teacher2/get2/"+params)
}
//修改教师信息
export function updateTec(params) {
return http.post("/teacher2/update2",params)
}编写UpdateTec.vue页面，并配置路由
template部分：
<template>
<div class="container">
<h2 class="handle-title">系统管理 > 修改教师</h2>
<el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="100px" style="width:430px">
<el-form-item label="教师名字" prop="username">
<el-input v-model="form.username" style="width:190px" maxlength="20" :disabled="true" ></el-input>
</el-form-item>
<el-form-item label="教师职称" prop="tectitle">
<el-input v-model="form.tectitle" style="width:190px" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="教师技术标签" prop="teclabel">
<el-input v-model="form.teclabel" style="width:190px" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="教师状态">
<el-select v-model="form.tecauditstate" placeholder="请选择教师状态">
<el-option label="可用" value="1"></el-option>
<el-option label="不可用" value="0"></el-option>
<el-option label="独立入驻教师" value="-2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择所属机构">
<el-select v-model="form.tecorgid" placeholder="请选择教师所属教学机构">
<el-option
v-for="item in orgOptions"
:key="item.orgid"
:label="item.orgname"
:value="item.orgid"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button :disabled="disabled" type="primary" @click="onUpdate('form')">修改</el-button>
<el-button @click="goBack">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>因为修改教师一般是不能修改用户姓名的，所以username那一栏用disabled禁用
js部分：
<script>
import {getTecById} from "../../api/teacherAPI/api";
import {updateTec} from "../../api/teacherAPI/api";
import {getOrgList} from "../../api/teacherAPI/api";
export default {
name: '',
props:{
disabled:{
default:false
}
},
data() {
return {
form: {
tectitle: '',
teclabel: '',
orgname: '',
tecauditstate: '1',
tecorgid:''
},
rules: {
tectitle : [
{ required: true, message: '请输入教师名称', trigger: 'blur' }
]
},
orgOptions:[]
}
},
mounted() {
this.getOrg();
let that = this;
//获取修改的数据id
let id = this.$route.query.id
//根据ID查询教师的详细信息
getTecById(id).then((res)=>{
console.log(res)
//处理状态的数据类型
res.data.data.tecauditstate = res.data.data.tecauditstate+"";
that.form = res.data.data
res.data.data.orgid=res.data.data.orgid+"";
})
},
methods:{
//修改教师
onUpdate(formName) {
//禁用提交按钮，避免重复提交
this.disabled = true;
let that = this;
this.$refs[formName].validate((value)=>{
// console.log(value)
if(value){
console.log(that.form)
let formData = new FormData();
formData.append("tecid",that.form.tecid);
formData.append("tectitle",that.form.tectitle);
formData.append("teclabel",that.form.teclabel);
formData.append("tecauditstate",that.form.tecauditstate);
formData.append("tecorgid",that.form.tecorgid);
updateTec(formData).then((res)=>{
//console.log(res)
if(res.data.code == 1){
that.$message({
message:"修改成功",
type:"success",
})
that.$router.push("/teacher")
}else{
this.$message({
message:"修改失败",
type:"info"
});
}
})
}
this.disabled=false;
})
},
//取消操作
goBack() {
this.$router.go(-1);
},
getOrg(){
getOrgList().then((res)=>{
//console.log(res)
this.orgOptions=res.data.datalist;
})
}
},
}
</script>同样的，在teacher.vue上加上修改的方法
//修改
goUpdate(id){
// console.log(id)
this.$router.push({
path:"/UpdateTec",
query:{id}
})
},修改效果图如下
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)