vue对数据的增加、修改、查询

最新推荐文章于 2024-04-16 13:52:14 发布

TDSSS

最新推荐文章于 2024-04-16 13:52:14 发布

阅读量8.5k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/TDSSS/article/details/123566478

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

查询

首先在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}
        })
      },

修改效果图如下

TDSSS

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue对数据的增加、修改、查询

vue的增查改
复制链接

扫一扫

专栏目录

vue对数据的增加、修改、查询

查询

增加

修改

“相关推荐”对你有帮助么？