jeecgboot修改前端vue頁面包括vue頁面傳遞參數和獲取參數

最近利用jeecgboot開發一個項目,在對他自動生成的前端頁面進行修改時,遇到了很多的坑,

今天就來記錄一下在它生成的前端頁面上添加按鈕,然后跳轉到自己的頁面,並執行相應的方法

后端代碼:

@Autowired
private wuActivitieJoinService wuActivitieJoinService;
@Autowired
private IWuUserService iWuUserService;

@AutoLog(value = "校友活動參加人員查詢")
@ApiOperation(value = "校友活動參加人員查詢", notes = "校友活動參加人員查詢")
@GetMapping(value = "/list/{activitieId}")
public Result<?> queryPageList(@RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
                               @RequestParam(name = "pageSize", defaultValue = "10") Integer pageSize,
                               @PathVariable("activitieId") String activitieId) {
    Page page = new Page(pageNo, pageSize);
    QueryWrapper queryWrapper = new QueryWrapper();
    QueryWrapper queryWrapper1 = new QueryWrapper();
    queryWrapper.eq("activitie_id", activitieId);
    queryWrapper.select("uer_id");
    List<wuActivitieJoin> list = wuActivitieJoinService.list(queryWrapper);
    List list1 = new ArrayList();
    for (wuActivitieJoin o : list) {
        list1.add(o.getUerId());
    }
    queryWrapper1.in("id", list1);
    queryWrapper1.select("id", "class_id", "depart_id", "spec_id", "name", "sex", "stu_img", "mobile");
    Page pageList = iWuUserService.page(page, queryWrapper1);
    return Result.OK(pageList);
}

該代碼的目的是通過前端傳過來的活動id,去查詢參加該活動的用戶,然后將用戶數據篩選后返回給前端

前端代碼

按鈕所在頁面

    <span slot="action" slot-scope="text, record">
      <a @click="handleEdit(record)">編輯</a>

      <a-divider type="vertical"/>
      <a-dropdown>
        <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a @click="handleDetail(record)">詳情</a>
          </a-menu-item>

            <a-menu-item>
            <a @click="gotolink(record.id)">參與人員</a>
          </a-menu-item>

          <a-menu-item>
            <a-popconfirm title="確定刪除嗎?" @confirm="() => handleDelete(record.id)">
              <a>刪除</a>
            </a-popconfirm>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
	
	  methods: {
gotolink(activitieId) {
  //點擊跳轉至上次瀏覽頁面
  // this.$router.go(-1)
  //指定跳轉地址
  this.$router.push({
    path: '/xiaoyou/WuActivitieJoin/',
    query: {
      articleId: activitieId
    }
  })
},

跳轉后的頁面代碼

  url: {
    list: '/wu/wuActivitieJoin/list/' + this.$route.query.articleId
  },

解析
(一)跳轉到指定頁面的方法如下,在path里面寫路徑,在query里面寫傳遞的參數
this.$router.push({
path: '/xiaoyou/WuActivitieJoin/',
query: {
articleId: activitieId
}
})

(二)頁面接收參數的方法如下,關鍵是this.$route.query.articleId 這句話.articleId是傳遞的參數名稱
url: {
list: '/wu/wuActivitieJoin/list/' + this.$route.query.articleId
},

(三)使用"/"拼接到url后的參數,后端要使用注解 @PathVariable("activitieId") String activitieId 來獲取