前后端分离项目(十):实现"改"功能(前后端)

前后,分离,项目,实现,功能 · 浏览次数 : 888

小编点评

```html ```

正文

好家伙,本篇介绍如何实现"改"

我们先来看看效果吧

 (这可不是假数据哟,这是真数据哟)

 (忘记录鼠标了,这里是点了一下刷新)

 

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请求

 

搞定啦!(激动)

 

与前后端分离项目(十):实现"改"功能(前后端)相似的内容:

前后端分离项目(十):实现"改"功能(前后端)

好家伙,本篇介绍如何实现"改" 我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) First Of All 我们依旧先来理一下思路: 首先在"管理"页面中,我能看到所有的书本信息, 随后,在每一个信息后都有对应的"修改按钮" 当我点击这个按钮时,我要①拿到

我的第一个项目(十二) :分数和生命值的更新(后端增删查改的"改")

好家伙,写后端,这多是一件美逝. 关于这个项目的代码前面的博客有写 我的第一个独立项目 - 随笔分类 - 养肥胖虎 - 博客园 (cnblogs.com) 现在,我们登陆进去了,我开始和敌人战斗,诶,打到一百分了,我现在要把这个分数保存起来 1.前端先把测试样例写好 随便写一个测试样例

魔改editormd组件,优化ToC渲染效果

前言 我的StarBlog博客目前使用 editor.md 组件在前端渲染markdown文章,但这个组件自动生成的ToC(内容目录)不是很美观,我之前魔改过一个树形组件 BootStrap-TreeView,所以就想要用这个树形组件来展示ToC。 原本的效果是这样的 我魔改完的效果 先分析一波 首

我的第一个项目(五):(前后端)注册用户名查重

好家伙, bug终究还是来了,而且是很离谱的bug 来吧,发现问题,再解决问题 1.注册无法检测到用户名重复 也就是说一个用户名可无限注册, 来看bug(。。。) (看来是后端验证逻辑出了问题) 要是这么上线估计直接寄了 2.完成注册用户名查重 大概率是后端出了问题 这里我们先去看看后端,从后端去改

Blazor实战——Known框架单表增删改查导

本章介绍学习增、删、改、查、导功能如何实现,下面以商品资料作为示例,该业务栏位如下: > 类型、编码、名称、规格、单位、库存下限、库存上限、备注 ## 1. 前后端共用 ### 1.1. 创建实体类 - 在KIMS项目Entities文件夹下创建KmGoods实体类 - 该类继承EntityBase

NetCore 开源项目

前言:工作几年了,面试的时候问一堆,实则都是增删改查。感觉做net搞上位机的比较多,然而我一直做的都是web方向。以前还会背八股文,现在工作之后只会增删改,CV了。不知道后面会不会转行,唉~ 这个既是教程也是学习,我想尝试自己去做一个开源的前后端项目,看看我现在到底能做个什么样。 这篇文章,算是个开

我的第一个项目(十五) :完成数据保存功能(后端,改update)

好家伙, 代码已开源(Gitee) PH-planewar: 个人开发的全栈小游戏 前端:vue2 + element-ui 后端: Springboot + mybatis-plus 数据库: mysql 目前实现功能: 1.注册登陆 2.游戏数据保存 3.游戏运行 (gitee.com) 后端这

我的第一个项目(十四) :完成数据保存功能(前端,增查改接口)

好家伙,天天拖,终于写完了 代码已开源(Gitee) PH-planewar: 个人开发的全栈小游戏 前端:vue2 + element-ui 后端: Springboot + mybatis-plus 数据库: mysql 目前实现功能: 1.注册登陆 2.游戏数据保存 3.游戏运行 (gitee

[转帖]jar启动指定JDK/JRE 安装路径教程

https://blog.csdn.net/weixin_40986713/article/details/128136777 前言 因为疫情在家办公的缘故,有个老项目,需要改个接口,然后需要前端联调,因为外网服务器没有多余的空间了,想着把jar给前端让前端开发人员,在自己的本机启动后端服务,进行接

C#实现生成Markdown文档目录树

前言 之前我写了一篇关于C#处理Markdown文档的文章:C#解析Markdown文档,实现替换图片链接操作 算是第一次尝试使用C#处理Markdown文档,然后最近又把博客网站的前台改了一下,目前文章渲染使用Editor.md组件在前端渲染,但这个插件生成的目录树很丑,我魔改了一下换成boots