快捷導(dǎo)航

JeecgBoot代碼生成器自定義請求接口實(shí)例

更新時(shí)間：2026年01月16日 14:58:00 作者：一個(gè)比蒙牛還猛的男人.

文章介紹了如何在使用代碼生成器生成的頁面中添加啟用/停用功能,通過修改List.vue頁面并添加必要的請求頭token來解決身份認(rèn)證失敗的問題,同時(shí),還講述了如何在菜單管理、角色管理中進(jìn)行權(quán)限配置,以確保按鈕功能生效

按鈕效果圖展示

想要實(shí)現(xiàn)一個(gè)在使用代碼生成器生成的頁面，在Table表格實(shí)現(xiàn)啟用/停用來回切換

代碼生成器的原生表單

JeecgBoot這款框架對新手十分不友好想看代碼得一個(gè)一個(gè)去細(xì)找。（學(xué)藝不精）

這是我經(jīng)過許久研究出來的我的按鈕寫在了使用代碼生成器生成出來的頁面進(jìn)行添加的。

?請使用原生表單，至少這個(gè)看起來，不是那么復(fù)雜。

請求缺少的東西

正常寫請求可以請求到，但是后臺會(huì)返回給你身份認(rèn)證失敗，在F12仔細(xì)觀察后會(huì)發(fā)現(xiàn)你自己寫的少了一個(gè)請求標(biāo)頭的token他是關(guān)鍵。

這是一個(gè)點(diǎn)擊啟用、停用的操作欄link按鈕就跟定時(shí)任務(wù)的頁面啟用停用一樣，只是找不到相應(yīng)的代碼沒法復(fù)制就研究了一個(gè)。

缺少X-Access-Token自己寫的接口并沒有token。導(dǎo)致前端顯示401后端顯示身份認(rèn)證失敗。

代碼部分(關(guān)鍵的來啦)

代碼生成器頁面的List.vue的頁面

   const API_ENDPOINT = '/jeecgboot/regulatory_conditions/supervision/edit' //請求編輯的修改狀態(tài)開關(guān)接口


   async function updateRecordStatus(recordId: number, warningStatus: string): Promise<void> {
    const token = getToken(); //獲取自身token，可以打印測試一下。
    const data = {id: recordId, warningStatus: warningStatus};
    const config = { headers: { 'X-Access-Token': `${token}`}};

    let str = JSON.stringify(data)
    console.log("asd:> " + str) //此處是來回檢查寫的 可以不寫
    try {
      await axios.post(API_ENDPOINT,data,config);
    } catch (error) {
      console.error('錯(cuò)誤信息: ', error);
    }
   }

   async function toggleStatus(record: {id: number, warningStatus: string}, isEnabled: boolean): Promise<void> {
    const newStatus = isEnabled ? 'Y' : 'N';
    
    if (record.warningStatus !== newStatus){
      try {
        await updateRecordStatus(record.id, newStatus);

        record.warningStatus = newStatus;
      } catch (error) {
        console.log('失敗記錄: ',error);
      }
    }
   }

   function getTableAction(record: {id: number, warningStatus: string}) {
    const isDisabled = record.warningStatus === 'Y';
    return [
    {
        label: isDisabled ? '停用' : '啟用',
        onClick: ()=> toggleStatus(record, !isDisabled).catch(error => console.error('錯(cuò)誤: ', error)),
        auth: 'regulatory_conditions:supervision:editEnable' //權(quán)限
      }
    ];
  }

當(dāng)然有前端代碼就有后端代碼必須全乎

	 //其實(shí)就是正常寫接口對應(yīng)上就行
	 @RequiresPermissions("regulatory_conditions:supervision:editEnable") //權(quán)限
	 @RequestMapping(value = "/editEnable", method = {RequestMethod.PUT,RequestMethod.POST})
	 @ApiOperation(value = "啟動(dòng)定時(shí)任務(wù)")
	 public Result<Object> startJob(@RequestBody Supervision supervision) throws SchedulerException {
//		 System.out.println("測試>>>>>>>>>>>>>>>>>>>>---------------------");
		 jobService.EnableTask(supervision);
		 return Result.ok("啟動(dòng)定時(shí)任務(wù)成功");
	 }