前後端分離項目(十):實現"改"功能(前後端)

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/11/01/16846718.html
-Advertisement-
Play Games

好家伙,本篇介紹如何實現"改" 我們先來看看效果吧 (這可不是假數據喲,這是真數據喲) (忘記錄滑鼠了,這裡是點了一下刷新) First Of All 我們依舊先來理一下思路: 首先在"管理"頁面中,我能看到所有的書本信息, 隨後,在每一個信息後都有對應的"修改按鈕" 當我點擊這個按鈕時,我要①拿到 ...


好家伙,本篇介紹如何實現"改"

我們先來看看效果吧

 (這可不是假數據喲,這是真數據喲)

 (忘記錄滑鼠了,這裡是點了一下刷新)

 

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

 

搞定啦!(激動)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MongoDB - 簡單瞭解
    MongoDB 是一個基於分散式文件存儲的資料庫，因此其常作為使用了大數據技術的公司的優選；MongoDB 的存儲是類 JSON 結構，因此在一些敏捷 Web 開發中也常使用到。 ...
  • 「MySQL高級篇」MySQL之MVCC實現原理&&事務隔離級別的實現
    ①MVCC定義，用處，快照讀，當前讀 ②MVCC實現原理：隱藏欄位，readview，undo log ③readview訪問規則 ④事務隔離級別的具體實現 ...
  • 【記錄】Python爬蟲｜爬取空間PC版日誌模板
    大多數QQ模板都要黃鑽，真是好奇到底有幾個免費的，於是寫了一個爬蟲。寫的過程中遇到了一些新的問題，在此做一個記錄。 ...
  • Android開發 對接微信分享SDK總結
    原文：Android開發 對接微信分享SDK總結 - Stars-One的雜貨小窩 公司項目需要對接微信分享，本來之前準備對接友盟分享的，但友盟的分享實際參數太多，而我又只需要對接一個微信分享，於是便是選擇總結對接官方的 順便把微信SDK的APPID申請的流程也一起記錄了 步驟 1.註冊獲得APPI ...
  • 以開發之名|線上家裝新美學——夢想之家，由你來定
    何謂家裝？過去，人們輾轉於各大家裝城，購買時下流行的傢具裝飾，參考各類“過來人”和設計師的意見，糅雜一些樣板間風格，依靠想象拼湊一個設計方案。而今天，在年輕一代的消費群體心中，家裝的意義正發生深刻改變：要自由定義，堅決悅己，實用與美觀兼得；要貓與魚，花與葉，喜歡的音樂，收藏的手辦都有自己的天地；要一 ...
  • ViewPager2實現Tab標簽頁面
    是在此篇博文Viewpager遷移至ViewPager2實現Tab標簽頁面_Code-Porter的博客-CSDN博客的基礎上對一些細節進行了補充，請支持原作者。 使用的編譯軟體是Android Studio 2019 一、使用Androidx的依賴，同時引入TabLayout 進入Module的b ...
  • 以開發之名 | 小紅書：用年輕人的方式開發年輕人喜歡的應用
    2013年，小紅書在上海成立，同年12月，小紅書推出海外購物分享社區。一個開放式的體驗型分享社區走進了數億用戶的生活。每個人都能在這個開放社區，分享自己的生活筆記，給有同樣需求的人種草。 小紅書用戶“一隻雪梨醬”的車胎出現了裂痕，她拍了一張照片並附上文字 “這種情況需要換胎嗎？”發了一篇小紅書筆記， ...
  • 行內元素&塊級元素的水平垂直居中方法
    今天實習面試的時候,問到了這個問題,一時間只是知道塊元素的方法,行內的方法知道但是覺得那是控制文字的顯示方法,猶豫沒有說。面試官接著就問了我行內元素跟塊級元素的區別。下麵是整理。 行內元素&塊級元素 行內元素：與其他元素共占一行，一行排滿前不換行，不能設置寬高，沒有水平方向的margin和paddi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類