vue -前端传递对象到springboot后端，跳转页面并传递参数

由于对前端不是特别熟， vue也就学了一周，javascript也就是简单学了一两天，做个人博客的时候遇到一些不常用的方法，记一下笔记。

1. 构建对象，利用axios传递到后，跳转页面并传参

首先构建axios函数将对象传递到后端，由于是分页数据，需要在data对象里包含多个参数：

 //条件分页查询
 export const findPage = (params) => {
  return axios({
    method: 'post',
    url: `/findPage`,
    data: {
      sortView: "commentNum",  //暂时写死,按浏览量排序
      direction: "desc",       //暂时写死,倒序
      pageSize: params.pageSize,     //单页行数
      pageNum: params.currentPage,   //第几页
      title: params.title,           //查询的文章名称，后台会用模糊查询该名称
      categoryId:params.categoryId   //文章类别id,  后台会用精确查询该类别id  
      
   },

  })
}

在side.vue中使用该函数

<script>
//引入该函数
import {findPage} from '@/api/article'
export default {
   data(){
    return{
      routerList:[],
      tags: [],
      currentPage:1,   //当前显示页数
      pageSize:5, //单页条数
        
    }
  }, 
  methods:{
  	//点击某tag触发该函数，并传递categoryId
	 clickTag(categoryId){
        console.log(categoryId);
        //创建对象
        function Params(pageSize, currentPage,title,categoryId){
            this.pageSize = pageSize;
            this.currentPage = currentPage;
            this.title = title;
            this.categoryId = categoryId;
         }
         //显示第1页5条数据,不查询title，故令title=null
         var params = new Params(5,1,null,categoryId);

         findPage(params).then(res=>{
            //保存传递回来的结果数据
            this.routerList = res.content;
         })
         //通过路由跳转到“/articleList” ,同时传递categoryId
         this.$router.push({path: '/articleList', query: {categoryId: categoryId},})
     },
  },
  
}
</script>

在javascript中构建对象的方法有三种，我用的是构造函数的方法，其他方法都可以试一下，这里跳转页面并传递参数用的是$router，$router的用法详见我的博客。

路径“/articleList”对应的页面是ArticleList.vue,在该页面接收参数categoryId，这里设置一个监听

  watch:{
    //监听路由变化
    $route(to,from){
      if(to.query.categoryId!=null){
      	//将传递过来的categoryId保存起来
        this.categoryId=to.query.categoryId;
      }
      
    }

2. 后端springboot接收传递的对象

由于axios传递的对象都是json格式，所以需要注释@RequestBody

    @PostMapping("api/findPage")
    public Object findPage(@RequestBody JSONObject param) {
        //取出content，由于是json字符串，所以取出来都是String类型
        String sortView = param.getString("sortView");
        String direction = param.getString("direction");
        String pageSize = param.getString("pageSize");
        String pageNum = param.getString("pageNum");
        String title = param.getString("title");
        String categoryId = param.getString("categoryId");

		//这里用到了查询类ArticleQuery封装参数
        ArticleQuery aq=new ArticleQuery();
        aq.setSortView(sortView);
        aq.setDirection(direction);
        aq.setPageSize(Integer.valueOf(pageSize));
        aq.setPageNum(Integer.valueOf(pageNum));

        //判断title是否为null
        if (!StringUtils.isEmpty(title)) {
            aq.setTitle(title);
        }

        //判断categoryId是否为null
        if (!StringUtils.isEmpty(categoryId)) {
            aq.setCategoryId(Long.valueOf(categoryId));
        }

        //查询条件
        aq.setTitle(title);
        return articleService.findPage(aq);
    }

这里url为"api/findPage"是因为要解决跨域问题，跨域问题的解决见我的博客。

3.数组的简单用法

javascript中数组的用法，做一个简单笔记，我需要给传回来的行数据都加一列type，这个type只有5种类型，所以我采用轮循的方式添加，具体操作如下：

  queryAllCategory().then(res=>{
         console.log("========全部类别=========")
         //一共有5种类型
         var type=['','success','info','danger','warning'];
         var length=res.length;
         // 这里设置一个空数组，接收json
         var array = new Array();
         for( var i=0;i<5;i++){
            let name=res[i].name;
            let categoryId=res[i].categoryId;
            //采用轮循的方式赋值,i取余
            let tag=type[i%length];
            //创建一个json对象接收name,categoryId,tag三种参数
            var obj = {};
            obj['name'] = name;
            obj['categoryId'] = categoryId;
            obj['tag']=tag
            //将json对象压入空数组
            array.push(obj);
         }
         //保存该数组
         this.tags=array;

      })

3.总结

这里涉及到了javasrcipt中对象的创建，vue中页面间跳转与传参，数组的用法，只是做一个笔记，巩固前端的知识！