Vue笔记06 修改和删除
coconutnut
 2020-03-17 15:37:07      

https://www.bilibili.com/video/av85793766?p=6

跳转到修改页面

1
2
3
4
<template slot-scope="scope">
  <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
  <el-button type="text" size="small">删除</el-button>
</template>

@click中绑定点击事件

这里跳转用this而不需要_this，因为不在回调函数中

1
2
3
edit(row) {
	this.$router.push('/book-update')
},

DEBUG

这里跳转过去之后，整页都是修改页面，左侧菜单没有了

和源码对比，发现左侧菜单的代码放在App.vue而不是Index.vue 我失忆了？

不过也就可以解释了，加载管理、新增和修改替换的是main里的Index部分，不管怎么替换菜单都还在

1
2
3
4
5
6
7
8
9
+------------------------------------+ 
| App                                |  
| +------+-------------------------+ | 
| | menu | main                    | |  
| |      | +---------------------+ | |  
| |      | | Index               | | | 
| |      | +---------------------+ | |  
| +------+-------------------------+ | 
+------------------------------------+

而我的把menu写在Index里面，管理和新增替换的是Index里的main区域，menu还在，而修改直接把Index换掉了

1
2
3
4
5
6
7
8
9
+------------------------------------+ 
| App                                |  
| +--------------------------------+ | 
| | Index                          | |  
| | +------+---------------------+ | |  
| | | menu | main                | | | 
| | +------+---------------------+ | |  
| +--------------------------------+ | 
+------------------------------------+

改过来之后页面就正常了

修改页面

先把新增界面表单复制过去

在created方法中调后台数据，显示到页面

首先需要获取当前的id，BookManage页面在router中带参数穿过去

1
2
3
4
5
6
7
8
9
edit(row) {
  // this.$router.push('/book-update')
  this.$router.push({
    path: '/book-update',
    query: {
    	id: row.id
  	}
	})
},

BookUpdate页面中接收

1
2
3
4
5
6
7
8
9
10
11
12
methods: {
  submitForm(formName) {
    //...
  },
    resetForm(formName) {
      //...
    }
},
created(){
    // 是route不是router!
    alert(this.$route.query.id)
}

这里created()在methods外面

获取待修改修改图书信息

后端

Repository的findById()返回的是Option类，相当于把Book又包了一层，再用get()得到Book对象

1
2
3
4
5
@Test
void findById(){
  Book book = repository.findById(1).get();
  System.out.println(book);
}

先测试一下，接口没有问题，再写对外提供的方法

1
2
3
4
@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
  return bookRepository.findById(id).get();
}

对接

获取数据并绑定到表单上

1
2
3
4
5
6
created(){
  const _this = this
  axios.get('http://localhost:8181/book/findById/'+this.$route.query.id).then(function(resp){
    _this.ruleForm = resp.data
  })
}

表单加一个id属性

1
2
3
 <el-form-item label="编号">
   <el-input v-model="ruleForm.id" readonly></el-input>
</el-form-item>

不可修改，加readonly，不需要校验，删prop=”id”

下面ruleForm也要加对应的id

修改图书

后端写一个修改方法

repository没有update方法，save可以用于修改

1
2
3
4
5
6
7
8
9
@PutMapping("/update")
public String update(@RequestBody Book book){
  Book result = bookRepository.save(book);
  if(result != null){
    return "success";
  }else{
    return "error";
  }
}

内容和save是一样的，但是为了符合RESTful风格，新写一个PutMapping的

前端submitForm里面稍微修改一下，post改成put，url改一下，message改成修改成功

1
2
3
4
5
6
7
8
9
axios.put('http://localhost:8181/book/update',this.ruleForm).then(function(resp){
  if(resp.data == 'success'){
    _this.$message({
      message: '《'+_this.ruleForm.name+'》'+'修改成功',
      type: 'success'
    })
    _this.$router.push('/book-manage')
  }
})

删除图书

后端

1
2
3
4
@DeleteMapping("/deleteById/{id}")
public void deleteById(@PathVariable("id") Integer id){
  bookRepository.deleteById(id);
}

button绑一个事件

1
<el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>

不能叫delete，和关键字冲突

1
2
3
4
5
6
7
8
9
10
11
12
13
deleteBook(row) {
  const _this = this
  axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function(resp){
    // 这里没有管返回信息，也可以判断状态，200就是成功
    _this.$alert('《'+row.name+'》删除成功！', '消息', {
      confirmButtonText: '确定',
      callback: action => {
        // 刷新
        window.location.reload()
      }
    })
  })
},

完整的增删改查就实现了～

修改菜单

由于加了一个路由，而菜单是根据路由动态加载的，会把配置的路由全部遍历出来，于是菜单左侧就多了一个

可以添加一个属性来判断，show是true就遍历，false就不遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const routes = [
  {
    path: '/',
    name: '图书管理',
    show: true,
    component:Index,
    redirect:'book-manage',
    children:[
      {
        path: '/book-manage',
        name: '查询图书',
        component: BookManage
      },
      {
        path: '/add-book',
        name: '添加图书',
        component: AddBook
      },
    ]
  },
  {
    path: '/book-update',
    name: '修改',
    show: false,
    component: BookUpdate
  },
]

App.vue中通过v-if=”item.show”判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--            这里添加router标签，el-menu-item的index就会被作为router路径-->
        <el-menu router :default-openeds="['0','1']">
          <!--          show属性为true则遍历-->
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.show">
            <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
            <!--                    条件判断当前路径是否等于index，更改选中状态，主要是在初始化时增加默认的选中状态-->
            <el-menu-item v-for="item2 in item.children" :index="item2.path" :class="$route.path==item2.path ? 'is-active' : ''">{{item2.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <!--            上面又index确定的router被显示在这里，也就是main区域中-->
        <router-view></router-view>
      </el-main>

    </el-container>
  </div>
</template>

完工！