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 来获取