本文適用對象：已有基礎(chǔ)的同學(xué)，知道基礎(chǔ)的SpringBoot配置和Vue操作。

在此基礎(chǔ)上本文實(shí)現(xiàn)基于SpringBoot和Vue.js基礎(chǔ)上的增刪改查和數(shù)據(jù)回顯、刷新等。

一、實(shí)時(shí)顯示數(shù)據(jù)庫數(shù)據(jù)

實(shí)現(xiàn)步驟：

第1步：編寫動(dòng)態(tài)請求響應(yīng)類：在啟動(dòng)類同父目錄下創(chuàng)建controller包，在包下創(chuàng)建DataController類，添加@RestController、@RequestMapping("")等注解。在類中實(shí)例化dao層的BookDa要加上@Autowired注解；然后編寫方法注意返回的結(jié)果和調(diào)用dao層中的方法，記得加上@GetMapping等注解：

@RestController
@RequestMapping("/api/")
public class DataController {
    @Autowired
    private BookDao bookDao;
    @GetMapping("select")
    public List<Brand> getData(){
        System.out.println(bookDao.select());
        return bookDao.select();
    }
}

— — — — — — 知識加油站 — — — — — —

@RestController注解：是將一個(gè)類標(biāo)記為處理HTTP請求的控制器，并且自動(dòng)將方法返回的對象轉(zhuǎn)換為JSON或XML格式的響應(yīng)體，發(fā)送給客戶端。

— — — — — — —? — — — — — — — — —

第2步：編寫ajax請求，在new Vue下寫入如下代碼：

mounted(){
    axios.get("/api/data").then(response=>{
         this.tableData = response.data;
    })
},

第3步：修改啟動(dòng)類，寫入如下代碼：

@CrossOrigin(origins = "http://localhost:8081")
@SpringBootApplication(scanBasePackages = "com.itheima.controller")
@MapperScan("com.itheima.dao")
public class AdsSdemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(AdsSdemoApplication.class, args);
    }
}

實(shí)現(xiàn)思路：ajax發(fā)送請求到controller層，controller層負(fù)責(zé)查詢數(shù)據(jù)庫并返回結(jié)果給ajax，ajax將結(jié)果賦值給顯示變量，Vue根據(jù)變量中的值對結(jié)果進(jìn)行顯示，最終我們能看到網(wǎng)頁上的數(shù)據(jù)。

重點(diǎn)技術(shù)原理：

1. 數(shù)據(jù)顯示問題：

在vue的表格中有一個(gè) :data="xxx"的字樣，其中xxx就是數(shù)據(jù)源，這個(gè)數(shù)據(jù)源會(huì)在data()的return中被定義（例如在這里數(shù)據(jù)源都是tableData，在tableData中不需要定義具體的字段，因?yàn)檫@些字段在tostring函數(shù)中都會(huì)帶有）：

???

數(shù)據(jù)源一般是JSON格式，JSON數(shù)據(jù)有一個(gè)特點(diǎn)，最外層用 [ ] 符號進(jìn)行包裹，在內(nèi)層每一個(gè)數(shù)據(jù)都用 {?} 符號進(jìn)行包裹，vue表格會(huì)自動(dòng)提取數(shù)據(jù)庫字段的key，然后去匹配每個(gè)單元格的prop="xxx"，如果key和xxx匹配上，就將這個(gè)key對應(yīng)的value顯示到prop所在單元格的位置。

2.請求發(fā)送：

mounted簡單理解就是：在掛載完成，即Vue初始化成功，HTML頁面渲染成功之后執(zhí)行的鉤子函數(shù)。

mounted詳細(xì)解釋如下：mounted是Vue實(shí)例生命周期鉤子函數(shù)之一。mounted函數(shù)會(huì)在Vue實(shí)例被創(chuàng)建并且掛載到DOM元素（DOM元素指的是文檔對象模型）上之后立即調(diào)用。函數(shù)的作用是在Vue實(shí)例掛載（指的是將Vue實(shí)例與一個(gè)實(shí)際的DOM元素關(guān)聯(lián)起來，使其能夠在該DOM元素內(nèi)部進(jìn)行渲染）完成后執(zhí)行一些初始化操作或請求數(shù)據(jù)。

下面代碼的含義是：在Vue初始化完成，HTML頁面渲染成功后，發(fā)送get請求到/api/data路徑請求動(dòng)態(tài)資源，返回一個(gè)response，然后取出data域中的數(shù)據(jù)賦值給tableData。

3.請求應(yīng)答：

請求會(huì)根據(jù)@RequestMapping中的路徑找到controller包下具體的類或方法，可以根據(jù)請求方式不同調(diào)用不同的方法（在該例中使用get請求方式對應(yīng)@GetMapping方法，調(diào)用getData方法，getData通過調(diào)用dao層下的bookDao中的select方法與數(shù)據(jù)庫進(jìn)行連接，查詢后返回List結(jié)果集），結(jié)果被返回到請求的發(fā)送方。

?二、注意事項(xiàng)?

說明6點(diǎn)注意事項(xiàng)：

1、右上角的小圖標(biāo)，只能用于測試修改靜態(tài)頁面的樣式，實(shí)際和數(shù)據(jù)庫的關(guān)聯(lián)不能通過這種方式進(jìn)行。

2、如果想測試動(dòng)態(tài)頁面的效果，與數(shù)據(jù)庫關(guān)聯(lián)，必須通過啟動(dòng)類啟動(dòng)（啟動(dòng)類是帶有main方法的），要注意選擇Current File進(jìn)行啟動(dòng)，否則可能啟動(dòng)方式可能受前面測試影響。

3、注意啟動(dòng)類必須同controller、dao等一系列的包在同一個(gè)目錄下，啟動(dòng)類的上面不能有其它包，如果不在同一目錄下可能導(dǎo)致掃描不到controller中的資源路徑：

也可以通過注解將controller包掃描的方式解決：

@SpringBootApplication(scanBasePackages = "com.itheima.controller")

4、如果想訪問前端界面，只需要將webapp視為根目錄，相當(dāng)于localhost這一級，然后想要訪問具體的靜態(tài)資源，只需要輸入webapp后面的路徑即可：

比如ADSS.html在wewbapp目錄下，于是只需要在localhost:8081后面輸入/ADSS.html即可訪問該靜態(tài)資源：

?

5、動(dòng)態(tài)資源比如跳轉(zhuǎn)路徑訪問路徑，一般存放在controller目錄下，注意controller包需要與啟動(dòng)類在同一個(gè)層次目錄下：

訪問數(shù)據(jù)只需要輸入@RequestMapping里的地址即可直接訪問：

6、實(shí)際網(wǎng)站部署還要注意跨域問題，一般在啟動(dòng)類上添加CrossOrigin注解：@CrossOrigin(origins = "http://localhost:請求端口號")

三、刪除（單條，多條）

3.1. 刪除單條數(shù)據(jù)

第1步：dao層下的BookDao接口中定義delete方法，實(shí)現(xiàn)從數(shù)據(jù)庫中刪除單條數(shù)據(jù)：

@Delete("delete from tb_brand where id = #{id}")
public void delete(int id);

第2步：在controller層下定義請求路徑，傳入?yún)?shù)，執(zhí)行dao層刪除方法：

@DeleteMapping("delete/{id}")
public void deleteData(@PathVariable("id") int id){
    bookDao.delete(id);
}

— — — — — — 知識加油站 — — — — — —

1. @PathVariable注解：是Spring MVC框架中的一個(gè)注解，用于從URL路徑中獲取變量的值并將其綁定到方法的參數(shù)上。比如：請求地址：@GetMapping("/users/{ID}") 方法：public User?getUserById(@PathVariable Long id) 。那么注解會(huì)將{ID}最終被替換的值賦值給參數(shù)id。

2. slot - scope="scope"：slot-scope是一個(gè)特殊的屬性，用于在父組件中向子組件傳遞數(shù)據(jù)。slot-scope="scope"定義了一個(gè)名為scope的變量，用于接收父組件傳遞的數(shù)據(jù)。

3.?row是表示一個(gè)數(shù)據(jù)表格中的某一行的數(shù)據(jù)對象。scope可以理解為整張數(shù)據(jù)表格中的全體數(shù)據(jù)對象。

4.<template>標(biāo)簽：是Vue.js中用于定義組件模板的容器

— — — — — — —? — — — — — — — — —

‘第3步：添加觸發(fā)事件，調(diào)用methods中的方法。在這里觸發(fā)事件是點(diǎn)擊刪除按鈕，傳入的參數(shù)是所點(diǎn)刪除按鈕所屬的數(shù)據(jù)對象。這里的方法名是deleteSingle。

<template slot-scope="scope">
    <el-button type="danger" plain size="mini" @click="deleteSingle(scope.row)">刪除</el-button>
    <el-button type="warning" plain @click="updateVisible = true" size="mini">修改</el-button>
</template>

— — — — — — 知識加油站 — — — — — —

.then( )被用于處理成功的HTTP響應(yīng)（服務(wù)器成功處理了客戶端發(fā)出的HTTP請求，并返回了預(yù)期的響應(yīng)）。

response是.then()方法中的一個(gè)參數(shù)，表示從服務(wù)器返回的響應(yīng)數(shù)據(jù)

— — — — — — —? — — — — — — — — —

第4步：向后端服務(wù)器發(fā)送請求，刪除數(shù)據(jù)，同時(shí)刷新頁面。

methods: {/*刪除單條*/
 deleteSingle(row){
  axios.delete('/api/delete/'+row.id).then(()=>{
    axios.get("/api/select").then(response => {  /*刷新頁面*/
    this.tableData = response.data;
        })
     })
  },
}

3.2.?刪除多條數(shù)據(jù)

第1步：編寫dao層下的BookDao接口，創(chuàng)建deleteAll方法，傳入ids數(shù)組，指示待刪除的數(shù)據(jù)組id。

public void deleteAll(int [] ids);

第2步：編寫mybatis-config.xml、BookMapper.xml、application.yml文件。

鑒于需要用到循環(huán)稍顯復(fù)雜，用注解來編寫SQL語句：

mybatis-config.xml文件如下（純套模板）：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
</configuration>

?BookMapper.xml文件如下【重點(diǎn)】，注意：1.因?yàn)槭莿h除操作，所以要寫delete <delete id="deleteAll" > 2. deleteAll必須同接口的方法名一致 3. SQL語句因?yàn)椋?/p>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.dao.BookDao">
  <!--查詢-->
  <delete id="deleteAll" >
     delete from tb_brand where id
     in(
         <foreach collection="ids" item="id" separator=",">
                #{id}
         </foreach>
      );
    </delete>
</mapper>

— — — — — — 知識加油站 — — — — — —

1. IN關(guān)鍵字用于指定一個(gè)字段的值必須匹配給定的多個(gè)值中的任意一個(gè)。在這里IN關(guān)鍵字將id字段和ids集合中的值進(jìn)行匹配，逐一刪除。

2.?collection屬性用于指定一個(gè)集合對象，是一個(gè)動(dòng)態(tài) SQL 語句中的占位符。

3.?item屬性用于指定一個(gè)在迭代過程中使用的變量名。在每次迭代時(shí)會(huì)被賦予集合中的一個(gè)元素值。

4.separator屬性用于指定一個(gè)分隔符，用于在迭代過程中拼接多個(gè)值。在這里指定了一個(gè)逗號作為分隔符，用于將多個(gè)id值拼接成一個(gè)逗號分隔的字符串。

— — — — — — —? — — — — — — — — —

application.yml添加代碼如下（掃描到對應(yīng)配置文件）：

mybatis:
  config-location: classpath:mybatis-config.xml
  mapper-locations: classpath:mapper/*.xml

第3步：編寫controller層下的DataController類，創(chuàng)建deleteAllData方法，用于調(diào)用book層中定義的方法，執(zhí)行批量刪除操作：

@RestController
@RequestMapping("/api/")
public class DataController {
    @DeleteMapping("delete/a/{ids}")
    public void deleteAllData(@PathVariable("ids") int [] ids){
        bookDao.deleteAll(ids);
}

第4步：添加復(fù)選框【重點(diǎn)】觸發(fā)事件

<el-table
     :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange"
     @select-all="handleSelectAll"
     @select="handleSelect">
<el-table-column type="selection" width="55" align="center"></el-table-column>

— — — — — — 知識加油站 — — — — — —

1. :data="tableData"用于指定表格要展示的數(shù)據(jù)源。

2. @selection-change="handleSelectionChange"用于監(jiān)聽用戶在表格中選中或取消選中行的操作。

3. @select-all="handleSelectAll"用于監(jiān)聽用戶點(diǎn)擊全選的操作。

4. @select="handleSelect"用于監(jiān)聽用戶點(diǎn)擊某一行的操作。

5. type="selection"是<el-table-column>組件的一個(gè)屬性，用于指定該列的類型為選擇列，即在該列顯示選擇框。

— — — — — — —? — — — — — — — — —

?第5步：增設(shè)按鈕觸發(fā)事件，調(diào)用方法DeleteAll

<el-button type="danger" plain @click="DeleteAll">一鍵刪除</el-button>

第6步：具體定義事件的方法：?

handleSelectAll和handleSelect方法的思路都是將用于所選擇行的id讀取存入selection中，然后轉(zhuǎn)化為ids數(shù)組。在DeleteAll方法中delete請求將ids作為參數(shù)請求頁面，用于刪除指定id行的數(shù)據(jù)；get請求用于刷新頁面。

methods: {
            DeleteAll(){
                axios.delete(`/api/delete/a/`+this.ids).then(response=>{
                    axios.get("/api/select").then(response=>{
                        this.tableData = response.data;
                    })
                })
            },
            handleSelectAll(selection) {
                this.ids = selection.map(item => item.id);// selection 參數(shù)是所有被選中的行數(shù)據(jù)的數(shù)組
            },
            handleSelect(selection) {
                this.ids = selection.map(item => item.id);// selection 參數(shù)是當(dāng)前被選中的行數(shù)據(jù)的數(shù)組
            }
}

— — — — — — 知識加油站 — — — — — —

1. selection是一個(gè)參數(shù)，用于接收當(dāng)前被選中的行數(shù)據(jù)的數(shù)組。

2. 當(dāng)用戶選擇行時(shí)，會(huì)觸發(fā)@select和@selection-change事件，并將被選中的行數(shù)據(jù)作為參數(shù)傳遞給相應(yīng)的事件處理方法。

3. item是在map方法中的回調(diào)函數(shù)的參數(shù)，表示當(dāng)前遍歷到的元素，即被選中的行數(shù)據(jù)對象。

4. 通過selection.map(item => item.id)的方式，遍歷selection數(shù)組，并將每個(gè)行數(shù)據(jù)對象的id屬性提取出來，最終形成一個(gè)新的數(shù)組ids。

5. map方法會(huì)將回調(diào)函數(shù)的返回值組成一個(gè)新的數(shù)組返回。

6. {ids}是一個(gè)簡單的JavaScript對象字面量表達(dá)式，其中ids是對象的屬性名。這種表達(dá)式用于創(chuàng)建一個(gè)對象，并將屬性ids設(shè)置為undefined（表示一個(gè)變量未被賦予值或者一個(gè)對象屬性不存在，該屬性的值顯式地設(shè)置為未定義，表示一個(gè)缺少值的狀態(tài)，這意味著該屬性存在，但沒有被賦予一個(gè)明確的值）的值。

7. #{ids}和${ids}是在一些模板引擎中使用的表達(dá)式，用于插入變量值。

8. #{ids}常用于某些模板引擎（如Ruby的ERB）中。

9 ${ids}常用于JavaScript中的模板字面量或模板字符串中。這種表達(dá)式的作用是將變量的值插入到字符串中，以動(dòng)態(tài)生成字符串內(nèi)容。

10. 模板字面量（Template literals）和模板字符串（Template strings）是指JavaScript中一種特殊的字符串語法，它們提供了更靈活和方便的字符串操作和拼接方式。模板字面量是指使用反引號（`）包圍的字符串，它們支持在字符串中插入變量、表達(dá)式和換行符，而無需使用字符串拼接符號（如加號 +）。

11. {data:ids}是一個(gè)JavaScript對象字面量表達(dá)式，其中data是對象的屬性名，ids是屬性值。它創(chuàng)建了一個(gè)具有data屬性的對象，且該屬性的鍵是字符串data值是變量ids的值。

— — — — — — —? — — — — — — — — —

四、新增

第1步：在dao層的BookDao接口下創(chuàng)建add方法，用@Insert注解往數(shù)據(jù)庫中添加信息：

@Insert("Insert into tb_brand(brand_name,company_name,ordered,description,status)"
      +"values(#{brand_name},#{company_name},#{ordered},#{description},#{status})")
public void add(Brand brand);

第2步：在controller層下定義insertData方法，注意：1、是用Post發(fā)送請求，數(shù)據(jù)是在請求體中，因此需要標(biāo)注@RequestBody注解。2、注意類頂部的@RequestMapping("/api/")，在地址欄訪問時(shí)一定要加上類上標(biāo)注的地址前綴。

@RestController
@RequestMapping("/api/")
public class DataController {
    @PostMapping("insert")
    public void insertData(@RequestBody Brand brand)
    { System.out.println(brand);
        bookDao.add(brand);
    }
}

— — — — — — 知識加油站 — — — — — —

1. @RequestBody：從請求體中獲取數(shù)據(jù)（如 JSON 或 XML 格式的數(shù)據(jù)）綁定到方法的參數(shù)上。請求體中的數(shù)據(jù)必須與方法參數(shù)的類型匹配，Spring MVC 會(huì)自動(dòng)進(jìn)行數(shù)據(jù)轉(zhuǎn)換。

2.?@RestController：注解告訴 Spring MVC 這個(gè)類是一個(gè)為 RESTful Web服務(wù)的控制器，并且其中的方法會(huì)根據(jù)請求的 URL 路徑和 HTTP 方法（PUT、GET...）進(jìn)行映射和處理。結(jié)合了 @Controller和@ResponseBody注解的功能。

— — — — — — —? — — — — — — — — —

第3步：定義數(shù)據(jù)格式。注意：1、定義的字段名要與數(shù)據(jù)庫的字段名一致，因?yàn)槌志没蚣芑驅(qū)ο箨P(guān)系映射（ORM）工具可以自動(dòng)映射數(shù)據(jù)庫字段和對象的屬性。如果字段名一致，可以方便地進(jìn)行自動(dòng)映射，減少手動(dòng)的配置和轉(zhuǎn)換工作?？梢员苊庖?yàn)樽侄蚊煌鴮?dǎo)致數(shù)據(jù)的混亂和不一致。

data: {
       brand_name: '',
       company_name: '',
       ordered: '',
       description: '',
       status: ''
},

第4步： 為新增按鈕綁定事件，制作新增彈窗：

下面是為新增按鈕綁定事件，點(diǎn)擊可顯示彈窗：

<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

下面是定義彈窗的內(nèi)容，注意：1. v-model的值可以與data對象的屬性進(jìn)行綁定，進(jìn)而賦值。2. 點(diǎn)擊確定綁定了2個(gè)事件，一個(gè)是隱藏彈窗，一個(gè)是觸發(fā)提交請求，然而最好一個(gè)事件只綁定一個(gè)方法，因此將語句和方法封裝在一個(gè)fun方法內(nèi)，進(jìn)行統(tǒng)一調(diào)用。

<!--新增的彈窗-->
    <el-dialog title="新增"
               :visible.sync="dialogVisible"
               width="30%">
        <el-form :inline="true" class="demo-form-inline" class="custom-button" >
            <el-form-item label="品牌名稱:">
                <el-input v-model="data.brand_name" placeholder="輸入品牌信息"  ></el-input>
            </el-form-item>
            <el-form-item label="公司名稱:">
                <el-input v-model="data.company_name" placeholder="輸入公司信息"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
                <el-input v-model="data.ordered" placeholder="輸入排序信息"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
                <el-input v-model="data.description" placeholder="輸入描述信息"></el-input>
            </el-form-item>
            <el-form-item label="狀態(tài):">
                <el-input v-model="data.status" placeholder="輸入狀態(tài)信息"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="fun">確 定</el-button>
        </span>
    </el-dialog>

第5步： 方法的定義，如下的fun方法封裝了2條語句，add2database方法用于向后臺(tái)發(fā)送數(shù)據(jù)：

fun(){
   this.dialogVisible = false;
   this.add2database();
},

調(diào)用axios的post請求帶有2個(gè)參數(shù)，第1個(gè)參數(shù)是請求的 URL。它表示要發(fā)送 POST 請求的目標(biāo)地址，即服務(wù)器端的接口或路由。第2個(gè)參數(shù)是一個(gè)對象，包含了要發(fā)送的數(shù)據(jù)。

add2database(){
                console.info(this.data);
                axios.post('/api/insert',this.data).then(()=>{
                    axios.get('/api/select').then(response=>{
                        this.tableData = response.data;
                    })
                })
            },

特別要注意一點(diǎn)：像data必須要加this.data以此才能指代data對象。

五、修改

第1步：

public void update(Brand brand);

第2步：

@RestController
@RequestMapping("/api/")
public class DataController {
    @PostMapping("update")
    public void updateData(@RequestBody Brand brand){
        bookDao.update(brand);
    }
}

第3步：

<!--修改-->
    <update id="update">
        update tb_brand
        <set>
            <if test="brand_name != null and brand_name != '' " >
                brand_name = #{brand_name},
            </if>

            <if test="company_name != null and company_name != '' " >
                company_name = #{company_name},
            </if>
            <if test="ordered != null " >
                ordered = #{ordered},
            </if>
            <if test="description != null and description != '' " >
                description = #{description},
            </if>
            <if test="status != null " >
                status = #{status}
            </if>
        </set>
        where id = #{id};
</update>

第4步：

<el-table-column >
      <template slot-scope="scope">
      <el-button type="warning" plain @click="showback(scope.row)" size="mini">修改</el-button>
      </template>
</el-table-column>

showback(row){
      this.updateVisible = true;
      this.data = row;
},

第5步：

<!--修改的彈窗-->
    <el-dialog title="新增"
               :visible.sync="updateVisible"
               width="30%">
        <el-form :inline="true" class="demo-form-inline" class="custom-button" >
            <el-form-item label="品牌名稱:">
                <el-input v-model="data.brand_name" placeholder="輸入品牌信息"  ></el-input>
            </el-form-item>
            <el-form-item label="公司名稱:">
                <el-input v-model="data.company_name" placeholder="輸入公司信息"></el-input>
            </el-form-item>
            <el-form-item label="排序:">
                <el-input v-model="data.ordered" placeholder="輸入排序信息"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
                <el-input v-model="data.description" placeholder="輸入描述信息"></el-input>
            </el-form-item>
            <el-form-item label="狀態(tài):">
                <el-input v-model="data.status" placeholder="輸入狀態(tài)信息"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="change">確 定</el-button>
        </span>
    </el-dialog>

第6步：

change(){
     this.updateVisible = false;
     axios.post('/api/update',this.data).then(()=>{
     axios.get('/api/select').then(respnse=>{
     this.tableData = response.data;
       })
   })
},

六、查詢

第1步：編寫dao層接口方法，傳入一個(gè)查詢參數(shù)，返回多個(gè)實(shí)體類數(shù)據(jù)集合，

public List<Brand> inquiry(String statement);

第2步：編寫controller層，通過get方法加上@PathVariable注解，可以將從請求頭獲得的參數(shù)賦值給參數(shù)，調(diào)用dao層方法返回實(shí)體類集合。

@RestController
@RequestMapping("/api/")
public class DataController {
    @GetMapping("inquiry/{statement}")
    public List<Brand> inquiryData(@PathVariable String statement){
        System.out.println(statement);
        return bookDao.inquiry(statement);
    }
}

第3步：編寫B(tài)ookMapper.xml映射文件。

功能說明：前端在查詢框內(nèi)輸入一段文字或數(shù)字，點(diǎn)擊查詢，可以在數(shù)據(jù)庫中的全字段進(jìn)行搜索，只要某一條數(shù)據(jù)中模糊匹配到輸入的內(nèi)容，就將該條數(shù)據(jù)輸出，如果輸入的內(nèi)容為空，則顯示所有數(shù)據(jù)。

 <select id="inquiry" resultType="com.itheima.domain.Brand">
        SELECT * FROM tb_brand
        <where>
            <if test="statement != null and statement != ''">
                <if test="brand_name != null and brand_name != ''">
                    OR brand_name LIKE CONCAT('%', #{statement}, '%')
                </if>
                <if test="ordered != null ">
                    OR CAST(ordered AS CHAR) LIKE CONCAT('%', #{statement}, '%')
                </if>
                <if test="status != null">
                    OR CAST(status AS CHAR) LIKE CONCAT('%', #{statement}, '%')
                </if>
                <if test="company_name != null and company_name != ''">
                    OR company_name LIKE CONCAT('%', #{statement}, '%')
                </if>
                <if test="description != null and description != ''">
                    OR description LIKE CONCAT('%', #{statement}, '%')
                </if>
            </if>
        </where>
    </select>

第4步：

<!--查詢和查詢欄-->
<el-form :inline="true" class="demo-form-inline" class="custom-button">
   <el-form-item>
      <el-input v-model="user" placeholder="輸入查詢信息"></el-input>
   </el-form-item>
   <el-form-item>
      <el-button type="primary" @click="onSubmit">查詢</el-button>
   </el-form-item>
</el-form>

第5步：

data(){
  return{
     tableData: [],
     temp: [],
  }
}

第6步：文章來源地址http://www.zghlxwxcb.cn/news/detail-762790.html

onSubmit() {
    axios.get("/api/inquiry/"+this.user).then((response)=>{
        console.info(response.data);
        this.tableData = response.data;
        axios.get("/api/select")
    })
    this.tableData = this.temp
},

到了這里，關(guān)于SpringBoot結(jié)合Vue.js+axios框架實(shí)現(xiàn)增刪改查功能+網(wǎng)頁端實(shí)時(shí)顯示數(shù)據(jù)庫數(shù)據(jù)（包括刪除多條數(shù)據(jù)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！