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部分：

js部分：

调用查询方法，把查询到的数据（res）放入tableData，查到的数据是一个json对象

把res打印在控制台，我们能看到的数据如下

 最后显示出来的页面：

 增加

首先还是先写一个接口，对应服务端，注意这里的请求类型是post

//增加教师
export function addTec(params) {
  return http.post("/teacher2/insert2",params)
}

然后编写AddTec.vue页面，同时编写路由

template部分：

js部分：

别忘了在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部分：

因为修改教师一般是不能修改用户姓名的，所以username那一栏用disabled禁用

js部分：

同样的，在teacher.vue上加上修改的方法

//修改
      goUpdate(id){
        // console.log(id)
        this.$router.push({
          path:"/UpdateTec",
          query:{id}
        })
      },

修改效果图如下