First Of All

我们依旧先来理一下思路:

首先在"管理"页面中,我能看到所有的书本信息,

随后,在每一个信息后都有对应的"修改按钮"

当我点击这个按钮时,我要①拿到这个这条数据的id($router传参)

然后②跳转到"信息修改界面",(这个界面会像书本添加的那个界面一样,有两个输入框,一个提交按钮,一个重置按钮)

这时,我向后端③请求到当前这条"id"的相关数据(举例:{id:1,name:三体1,auther:刘慈欣})

将它展示到"信息修改界面"的输入框中,随后,你可以将这些数据根据你想要的形状进行修改

最后点击修改数据,④发送axios请求到后端提交更新后的数据

思路清晰,开干

目录如下:

这里我们只需用到MyUsers.vue组件(书本管理页)和MyGoods.vue组件(书本修改页),

当然了,我们要先把这个信息修改界面写(CV)出来

MyGoods组件如下

这里我们选择让id只读,不允许修改

MyGoods.vue代码如下:

<!-- 该组件为书本修改功能组件 --> <template> <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="图书编号" prop="id"> <el-input v-model="ruleForm.id" readonly=""></el-input> </el-form-item> <el-form-item label="图书名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="作者" prop="author"> <el-input v-model="ruleForm.author"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template> <script> import axios from 'axios' export default { data() { return { ruleForm: { id: '', name: '', author: '' }, rules: { name: [ { required: true, message: '图书名称不能为空', trigger: 'blur' } ], author:[ { required: true, message: '作者不能为空', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { const _this = this this.$refs[formName].validate((valid) => { if (valid) { axios.put('http://localhost:8011/book/update',this.ruleForm).then(function(resp){ if(resp.data == 'success'){ _this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', { confirmButtonText: '确定', callback: action => { _this.$router.push('/home/users') } }) } }) } else { return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } }, created(){ const _this=this alert(this.$route.query.id) axios.get('http://localhost:8011/book/findById/'+this.$route.query.id).then(function(resp){ _this.ruleForm =resp.data }) } } </script>

MyUsers.vue代码如下:

<!-- 该组件为表单主要组件 --> <template> <div> <!-- 标题 --> <h4 class="text-center">用户管理</h4> <!-- 用户添加按钮 --> <el-col :span="4"> <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button> </el-col> <!-- 用户列表 --> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="id" label="序号" width="180"> </el-table-column> <el-table-column prop="name" label="书名" width="180"> </el-table-column> <el-table-column prop="author" label="作者" width="180"> </el-table-column> <el-table-column label="操作" width="180"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button> <el-button @click="Bookdelete(scope.row)" type="text" size="small">删除</el-button> </template> </el-table-column> </el-table> <el-pagination :page-size="6" :pager-count="11" layout="prev, pager, next" :total="total" @current-change="page"> </el-pagination> <!-- <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="18" @current-change="page" > </el-pagination> --> </div> </template> <script> import axios from 'axios' export default { name: 'MyUser', data() { return { total: null, // 用户列表数据  tableData: [ { id: '1', name: '三体1', author: '大刘' }, { id: '2', name: '三体2', author: '大刘' }, ], addDialogVisible: false, //控制添加用户对话框的显示与隐藏  addUserForm: {}, //添加表单的验证规则对象  addUserFormRules: { // username: [{required:true,message:'请输入用户名',trigger:'blur'}, // {min:3,max:10,message:'用户名长度在3~10个字符',trigger:'blur'}], // password: [{required:true,message:'请输入密码',trigger:'blur'}, // {min:6,max:15,message:'密码长度在6~15个字符',trigger:'blur'}], // email: [{required:true,message:'请输入邮箱',trigger:'blur'}], // mobile: [{required:true,message:'请输入手机号',trigger:'blur'}]  } } }, methods: { //书本删除方法  Bookdelete(row) { const _this = this axios.delete('http://localhost:8011/book/deleteById/' + row.id).then(() => { _this.$alert('《' + row.name + '》删除成功！', '消息', { confirmButtonText: '确定', callback: action => { window.location.reload() } }) }) }, //页面点击修改按钮  handleClick(row) { console.log(row); this.$router.push({ path: "goods", query: { id: row.id } }) }, //分页方法  page(currentPage) { const _this = this; axios.get('http://localhost:8011/book/findAll/' + currentPage + '/6').then(function (resp) { _this.tableData = resp.data.content _this.total = resp.data.totalElements console.log(resp.data) }) } }, created() { const _this = this; axios.get('http://localhost:8011/book/findAll/1/6').then(function (resp) { _this.tableData = resp.data.content _this.total = resp.data.totalElements console.log(resp.data) }) } } </script> <style lang="less" scoped> </style>

(别忘了配路由,你已经是个成熟的cv程序员了,要学会自己配路由)

后端的接口:

package com.example.demo2.controller; import com.example.demo2.entity.Book; import com.example.demo2.repository.BookRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/book") public class BookHandler { @Autowired private BookRepository bookRepository; @GetMapping("/findAll/{page}/{size}") public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){ PageRequest request = PageRequest.of(page-1,size); return bookRepository.findAll(request); } @PostMapping("/save") public String save(@RequestBody Book book){ Book result = bookRepository.save(book); if(result != null){ return "success"; }else{ return "error"; } } @GetMapping("/findById/{id}") public Book findById(@PathVariable("id") Integer id){ return bookRepository.findById(id).get(); } @PutMapping("/update") public String update(@RequestBody Book book){ Book result = bookRepository.save(book); if(result != null){ return "success"; }else{ return "error"; } } @DeleteMapping("/deleteById/{id}") public void deleteById(@PathVariable("id") Integer id){ bookRepository.deleteById(id); } }

来吧

1.拿到这个这条数据的id

<template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button> <el-button @click="Bookdelete(scope.row)" type="text" size="small">删除</el-button> </template>

对应方法:

//页面点击修改按钮  handleClick(row) { console.log(row); this.$router.push({ path: "goods", query: { id: row.id } }) },

2.跳转到"信息修改界面"

this.$router.push({ path: "goods", query: { id: row.id } })

query:用来传参的一个属性

3.请求到当前这条"id"的相关数据,并将它展示到"信息修改界面"的输入框中

created(){ const _this=this alert(this.$route.query.id) axios.get('http://localhost:8011/book/findById/'+this.$route.query.id).then(function(resp){ _this.ruleForm =resp.data }) }

4.发送axios请求到后端提交更新后的数据

submitForm(formName) { const _this = this this.$refs[formName].validate((valid) => { if (valid) { axios.put('http://localhost:8011/book/update',this.ruleForm).then(function(resp){ if(resp.data == 'success'){ _this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', { confirmButtonText: '确定', callback: action => { _this.$router.push('/home/users') } }) } }) } else { return false; } }); },

注意此处用的是put请求

搞定啦!(激动)