1、问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条)

2、安装vuescroll

cnpm install -S vuescroll

https://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%AE%89%E8%A3%85

3、问题:项目使用的jpa操作数据库,因为postclass和post是多堆多的关系,因此post.java和postclass.java如下,

  1. package com.nxz.blog.entity;
  2.  
  3. import lombok.Data;
  4. import org.hibernate.annotations.GenericGenerator;
  5.  
  6. import javax.persistence.*;
  7. import java.util.HashSet;
  8. import java.util.Set;
  9.  
  10. @Entity
  11. @Data
  12. public class Post {
  13.  
  14. @Id
  15. @GeneratedValue(generator = "system-uuid")
  16. @GenericGenerator(name = "system-uuid", strategy = "uuid")
  17. @Column(length = 32)
  18. private String postId;
  19.  
  20. private String postTitle;
  21.  
  22. @Lob
  23. private String postContent;
  24.  
  25. /**
  26. * 摘要,也就是content的前100个字符
  27. */
  28. private String postRemark;
  29.  
  30. private Long createDate;
  31.  
  32. private Long updateDate;
  33.  
  34. @ManyToMany(fetch = FetchType.LAZY)
  35. @JoinTable(name = "post_postclass", joinColumns = {@JoinColumn(name = "post_id")}, inverseJoinColumns = {@JoinColumn(name = "post_class_id")})
  36. private Set<PostClass> postClasses = new HashSet<>();
  37.  
  38. }
  1. package com.nxz.blog.entity;
  2.  
  3. import lombok.Data;
  4. import org.hibernate.annotations.GenericGenerator;
  5.  
  6. import javax.persistence.*;
  7. import java.util.HashSet;
  8. import java.util.Set;
  9.  
  10. @Entity
  11. @Data
  12. public class PostClass {
  13.  
  14. @Id
  15. @GeneratedValue(generator = "system-uuid")
  16. @GenericGenerator(name = "system-uuid", strategy = "uuid")
  17. @Column(length = 32)
  18. private String classId;
  19.  
  20. @Column(unique = true,length = 50)
  21. private String className;
  22.  
  23. @ManyToMany(mappedBy = "postClasses", fetch = FetchType.LAZY)
  24. private Set<Post> posts = new HashSet<>();
  25.  
  26. }

但是当调用post.getPostclasses时会出错,会循环输出一下内容:

  1. HHH000100: Fail-safe cleanup (collections) : org.hibernate.engine.loading.internal.CollectionLoadContext@15e337b2<rs=com.alibaba.druid.pool.DruidPooledResultSet@4ee3a800>
  2. 2019-06-11 21:30:16.860 WARN 33728 --- [nio-8888-exec-1] o.h.e.loading.internal.LoadContexts : HHH000100: Fail-safe cleanup (collections) : org.hibernate.engine.loading.internal.CollectionLoadContext@6fcf2b5b<rs=com.alibaba.druid.pool.DruidPooledResultSet@2547c902>
  3. 2019-06-11 21:30:16.860 WARN 33728 --- [nio-8888-exec-1] o.h.e.loading.internal.LoadContexts : HHH000100: Fail-safe cleanup (collections) : org.hibernate.engine.loading.internal.CollectionLoadContext@2a4c60ce<rs=com.alibaba.druid.pool.DruidPooledResultSet@21504902>
  4. 2019-06-11 21:30:16.860 WARN 33728 --- [nio-8888-exec-1] o.h.e.loading.internal.LoadContexts : HHH000100: Fail-safe cleanup (collections) : org.hibernate.engine.loading.internal.CollectionLoadContext@7b7ad7b1<rs=com.alibaba.druid.pool.DruidPooledResultSet@6f290408>
  5. 2019-06-11 21:30:16.860 WARN 33728 --- [nio-8888-exec-1] o.h.e.loading.internal.LoadContexts : H

经过查询资料:https://stackoverflow.com/questions/54946083/jpa-bidirectional-mapping-not-fetching-deep-mapped-data

得知,这个应该是lombok注解@Data导致的,具体原因没有查明,把这个注解去掉,同时自己手写get、set方法和tostring方法,就可以了

vue - blog开发学习6的更多相关文章

  1. vue - blog开发学习5

    基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...

  2. vue - blog开发学习2

    首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template> <div> <PostList v-for="(item,index) ...

  3. vue - blog开发学习1

    1.安装vue-cli vue intall -g vue-cli 2.创建项目 vue init webpack nblog 3.按提示要求配置项目 ? Project name nblog ? P ...

  4. vue - blog开发学习4

    1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template> <div class="editor"> &l ...

  5. vue - blog开发学习3

    1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添加到home.vue中的cont ...

  6. vue - blog开发学7

    将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  9. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

随机推荐

  1. iview table列中根据不同的状态显示不同的颜色,显示图片

    使用reder可以实现 1.显示不同状态 2.显示图片

  2. node的fs模块使用————node

    node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...

  3. javascript跨浏览器操作xml

    //跨浏览器获取xmlDom function getXMLDOM(xmlStr) { var xmlDom = null; if (typeof window.DOMParser != 'undef ...

  4. (ACM模板)不定长数组vector

    #include<iostream> #include<cstdio> #include<vector> #include<algorithm> usi ...

  5. 【Leetcode周赛】从contest-71开始。(一般是10个contest写一篇文章)

    Contest 71 () Contest 72 () Contest 73 (2019年1月30日模拟) 链接:https://leetcode.com/contest/weekly-contest ...

  6. 如何去除inline-block的默认间距

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  7. 使用Navicat for Oracle新建表空间、用户及权限赋予

      Navicat for Oracle是有关Oracle数据库的客户端工具.通过这个客户端,我们可以图形方式对Oracle数据库进行操作. 说 明我们此次试验的Oracle数据库版本是Oracle  ...

  8. Java double转long方法

    Java double转long方法 double random = Math.round(Math.random()*10000); long l = new Double(random).long ...

  9. OpenFOAM4.0安装教程

    Ubuntu 14.04以上版本支持pack安装. 1. add repository sudo add-apt-repository "http://dl.openfoam.org/ubu ...

  10. k-近邻算法(kNN)准备数据:归一化数值

    #准备数据:归一化数值 def autoNorm(dataSet): #autoNorm()函数可以自动将数字特征值转换为0到1的区间 minVals = dataSet.min(0) maxVals ...