个人中心项目--时间轴模块（一）

1.模块功能描述：

在个人资料页面，有一个时间轴模块，该模块类似查看微信朋友圈自己发表动态的历史记录。涵盖动态发表时间，发表的内容，图片，点赞数量，评论数量以及评论的内容等。阶段性效果如下：

点击评论，弹出评论信息框（位置有些问题，之后在修改一下）：

2.建表：

1.动态表单：

2.评论表单：

3.点赞表单：

4.用户表单：

3.Mapper层：

关于动态的三张表的mapper和model我都是通过逆向工程生成的，当然也可以自己写，我把我的逆向工程挂在这里，按需提取：
链接：https://pan.baidu.com/s/1nL98PgAitGpj70diltyB6A
提取码：a5cp
为了给前端传输数据方便，我把每条动态有关的信息封装成一个动态扩展类（之后可能根据情况做修改）：

public class DynamicWithinfo {
    private Dynamic dynamic;//动态相关信息
    private String[] pictures;//动态的图片信息
    private List<Comment> comments;//该动态的所有评论信息
    private List<Like> likes;//该动态的所有点赞信息
}

4.Service层：

思路很简单，在用户登录后，会将用户信息放到session中，其中包括用户id。在我的资料页面加载时，可以获得用户id，然后去根据这个id去查数据库，找出所有此用户所发的动态。然后遍历每条动态中的信息，通过每条动态的id，分别去数据库获取与该条动态相关联的评论和点赞信息，然后将以上信息存放到动态扩展类中，最终将多个动态扩展类放到ArrayList中，传给Controller层。代码如下：

@Service
public class DynamicServiceImpl implements DynamicService {


    @Autowired
    DynamicMapper dynamicMapper;
    @Autowired
    CommentMapper commentMapper;
    @Autowired
    LikeMapper likeMapper;

    @Override
    public List<DynamicWithinfo> findDynamics(int id) {

        List<Dynamic> dynamics = dynamicMapper.findDynamicsByOwnId(id);
        List<DynamicWithinfo> dynamicWithinfos = new ArrayList<DynamicWithinfo>();

        //遍历所有动态，获取每条动态的评论信息和点赞信息，封装为新的组合类
        for (Dynamic dynamic : dynamics) {
            List<Comment> comments = null;
            List<Like> likes = null;
            String[] pictures = null;
            DynamicWithinfo dynamicWithinfo = new DynamicWithinfo();
            //拆分图片
            pictures = dynamic.getImg().split(",");//在动态封装类中获取图片信息
            dynamicWithinfo.setPictures(pictures);
            dynamicWithinfo.setDynamic(dynamic);

            //装载评论
            comments = commentMapper.findCommentsByToId(dynamic.getId());
            dynamicWithinfo.setComments(comments);

            //装载点赞
            likes = likeMapper.findLikeBytoId(dynamic.getId());
            dynamicWithinfo.setLikes(likes);

            dynamicWithinfos.add(dynamicWithinfo);
        }

     return dynamicWithinfos;
    }
}

5.Controller层：

controller层很简单，首先通过登录时存在session中的用户id，调用service层获取所有动态信息，然后将返回的动态信息集合存到session中，传给前端展示：

    /**
     * 时间轴
     * @param request
     * @return
     */
    @GetMapping("/profilePage")
    public String profilePage(HttpServletRequest request){

        HttpSession session = request.getSession();
        User user = (User) session.getAttribute("user");
        Integer id = user.getId();
        //加载时间轴信息
        List<DynamicWithinfo> dynamics = dynamicService.findDynamics(id);
        session.setAttribute("dynamics",dynamics);

        return "pagesProfile";
    }

6.前端页面显示：

通过遍历后端传来的动态扩展类集合，将相关信息在对应位置显示：

 <div class="profiletimeline mt-0" th:each="dynamics:${session.dynamics}">
    <div class="sl-item"  >
        <div class="sl-left"> <img th:src="${session.user.headPic}" alt="user" class="rounded-circle" /> </div>
        <div class="sl-right">
            <div>
                <a href="javascript:void(0)" th:text="${session.user.username}" class="link">John Doe</a> <span th:text="${dynamics.dynamic.timePub}" class="sl-date">5 minutes ago</span>
                <p></p>
                <p th:text="${dynamics.dynamic.content}">assign a new task</p>
                <div class="row" >
                    <div th:each="pictures:${dynamics.pictures}" class="col-lg-3 col-md-6 mb-3"><img th:src="${pictures}" class="img-fluid rounded" /></div>
                </div>

                <div class="like-comm">

                    <div style="float: left" class="profile-text pt-1">
                        <i class="fa fa-heart text-danger"></i>
                        <a href="javascript:void(0)" th:text="${dynamics.likes.size()}+' Love'" class="link mr-2"></a>
                    </div>

                    <div class="profile-text pt-1" style=" float: left " >
                        <div th:if="${dynamics.comments.size()} eq '0'">
                            <a  href="javascript:void(0)" class="link mr-2"
                                th:text="${dynamics.comments.size()}+' comment'" >2 comment</a>
                        </div>
                        <div th:if="${dynamics.comments.size()} ne '0'">

                            <a  class="dropdown-toggle u-dropdown w-100 text-black d-block position-relative mr-2" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"
                                th:text="${dynamics.comments.size()}+' comment'" >2 comment</a>

                            <div class="dropdown-menu animated flipInY" style="color: black; background: url(/img/878484.png);background-size: 100% ;width: 30%" >
                                <div th:each="comments:${dynamics.comments}" >
                                    <div class="sl-left"> <img th:src="${session.user.headPic}" alt="user" class="rounded-circle" /> </div>
                                    <div>
                                        <p style="word-wrap: break-word;font-family: 华文行楷;font-size: large " th:text="${session.user.username}+' : '+${comments.content}">assign a new task</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>
            </div>

        </div>
    </div>
    <hr>
</div>
                  

7.遇到及存在的问题：

1.设计表名称是自己挖坑：如果like 不加``，将报错，告诉语法错误：

### Error querying database.  Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'like where to_id = 1' at line 1

### The error may exist in com/luckysheep/mapper/LikeMapper.xml

### The error may involve com.luckysheep.mapper.LikeMapper.findLikeBytoId-Inline

### The error occurred while setting parameters

### SQL: select * from like where to_id = ?

### Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'like where to_id = 1' at line 1

; bad SQL grammar []; nested exception is java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'like where to_id = 1' at line 1] with root cause

2.时间格式问题：

这里的时间格式加注解或者配置文件都不起效果，也没有找到原因，希望哪位兄弟讲解一下：
属性类中配置了注解不起作用：

yml配置文件中也配置了，还是没用：

8.ps：

这差不多也就是今天的一些收获了，继续努力，道阻且长…