0104笔记

<template>

  <el-row id="Homepan" style="margin-top: 15px;" :gutter="10">

  <el-col :xs="0" :sm="1" :md="2" :lg="4"> <div class="hidderdot">.</div>  </el-col>
  <el-col :xs="24" :sm="20" :md="18" :lg="16">

    <div class="am-list-news-bd1" style="padding:0.9em; border: 1px solid #dedede; height:3.2em;margin-top: 0.6em ; margin-bottom: 0.6em ">
       <span @click="mechanisms('全部')"><a href="#" :class="{active:maintag=='全部'}">全部</a></span>
    
       <span @click="mechanisms('预测')"><a href="#" :class="{active:maintag=='预测'}">预测</a></span>
       <span @click="mechanisms('讨论')"><a href="#">讨论</a></span>
       <span @click="mechanisms('知识')"><a href="#">知识</a></span>
       
    </div>


  <div style="    border: 1px solid #e6ebf5;">  



<div v-for="room in rooms">
    <ArticleItem v-bind:title="room.title" 
    v-bind:username="room.username"
    v-bind:id="room.aid" 
    v-bind:commentCount="room.commentCount"
    v-bind:last-commentstr="room.lastcommentstr"
    v-bind:mainTag="room.mainTag"
    v-bind:userPicUrl="room.userPicUrl"></ArticleItem>
</div>


<el-pagination style="text-align: center;"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size.sync="pagesize"
layout="total, prev, pager, next"
:total.sync="total">
</el-pagination>

<el-row style="margin-top:30px">
    <el-col :span="6">
        <el-button type="primary" style="margin-left:2px;" @click="addArticle">发表新帖</el-button>   
    </el-col>
</el-row>

  <div class="block">
      <span class="demonstration"></span>

    </div>
  </div>
  </el-col>

</el-row>
</template>
<script>
import ArticleItem from './ArticleItem.vue'
  export default {

      components : {
        "ArticleItem":ArticleItem
      },
    data() {
      return {
        value3: true,
        paraid:this.$route.params.id,
        rooms:[
        ],
        areaname: '*',
        maintag:'全部',
        currentPage: 1,
        total:20,
        pagesize:1,
        my:1
      }
    },
    watch: {
      paraid (val, oldval) {
        debugger;
        alert(1);
        this.handleChangeValue();
      }
    },
    mounted:function () {
     // this.handleChangeValue();
     this.getRooms();
    },
    methods: {

      mechanisms(val){
        
        this.maintag=val;
        //alert(val);
        this.getRooms();
      },

      handleCurrentChange(val) {
        //alert(this.currentPage);
        this.getRooms();
      },
       addArticle() {
       this.$router.push({path: '/AddArticle'});
       },
      //getRooms(url){
      getRooms(){
        //if(paraid==1)
        //alert(this.paraid);
        var page=this.currentPage-1;
        var url='api/article/pagerby/'+page +'?time='+new Date().getTime()+"&maintag="+this.maintag;
        //var url='api/article/testpager/'+page +'?time='+new Date().getTime()+"&maintag="+this.maintag;
        Object.assign(this.$data.my, 100);
        this.my=99;
        var gvue=this;
        this.$axios({
          method: 'get',
          url: url,//'api/article/list?time='+new Date().getTime(),
          changeOrigin:true,
        }).then(function (response) {
          debugger;
          console.log(response);
          var Things = response.data.content;
          debugger;
          gvue.rooms=Things;
          gvue.total=response.data.totalElements;
          gvue.pagesize=response.data.size;
        })
        .catch(function (error) {k
          debugger;
          console.log(error);
        });
      }
    }
  }

</script>

    @RequestMapping(value = "/pagerby/{page}", method = RequestMethod.GET)
    public Page<Article> getPagerByMaintag(@PathVariable("page") Integer page, @RequestParam("maintag") String maintag){
        //String maintag="讨论";
        System.out.println("page ---: "+page+", maintag:"+maintag);
        if(maintag.equals("全部"))
            return articleService.testPager(page);
        else
            return articleService.getPagerByMaintag(page,maintag);
    }

  public Page<Article> getPagerByMaintag(Integer page,String maintag){
        Pageable pageable = new PageRequest(page, 1, Sort.Direction.ASC, "aid");
        return  articleJpaDao.findByMainTag(maintag,pageable);
       // return  articleJpaDao.findAll(pageable);
    }


public interface ArticleJpaDao extends JpaRepository<Article, Integer> {

    @Query(value = "SELECT * FROM article WHERE main_tag = ?1 ORDER BY ?#{#pageable}",
            countQuery = "SELECT count(*) FROM article WHERE main_tag = ?1",
            nativeQuery = true)
    Page<Article> findByMainTag(String maintag, Pageable pageable);

}

​用户头像就整10个头像吧 采用userid的模;

分页

https://blog.csdn.net/tyyytcj/article/details/78152524