SpringBoot Spring Data JPA Thymeleaf 实现关注者和粉丝，互相关注分页显示

avatar 2018年04月26日14:52:58 6 6338 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
本文介绍 SpringBoot + Spring Data JPA + Thymeleaf 实现关注取消关注互相关注的功能。采用 Bootstrap + ajax 显示数据，样式是模仿慕课网,获取样式，点此直达。

本项目也使用了Spring Data JPA 分页功能，因为数据比较少，所以设置一页显示一个。

动态效果图如下，点击放大






一、数据库设计


user 表主要是有一个 id 主键， fan_size 粉丝数，follow_size 关注数 ；

relationship 表有两个字段 from_user_id，to_user_id ，组成联合主键。

本文使用的是是 Spring Data JPA，无需设计数据表，直接通过实体生成。




二、实体


User.java
  1. package com.liuyanzhao.forum.entity;
  3. import lombok.Data;
  5. import javax.persistence.*;
  6. import javax.validation.constraints.NotEmpty;
  7. import javax.validation.constraints.Size;
  8. import java.io.Serializable;
  10. /**
  11.  * @author 言曌
  12.  * @date 2018/3/19 下午9:54
  13.  */
  15. @Entity
  16. @Data
  17. public class User implements Serializable {
  19.     private static final long serialVersionUID = 6147345506206285446L;
  21.     @Id // 主键
  22.     @GeneratedValue(strategy = GenerationType.IDENTITY) // 自增长策略
  23.     private Integer id; // 用户的唯一标识
  25.     @NotEmpty(message = "昵称不能为空")
  26.     @Size(min = 2, max = 12, message = "昵称长度必须为2-12个字符")
  27.     @Column(nullable = false, length = 12)
  28.     private String nickname;
  30.     @NotEmpty(message = "用户名不能为空")
  31.     @Size(min = 4, max = 20, message = "用户名长度必须为4-20个字符")
  32.     @Column(nullable = false, length = 20, unique = true)
  33.     private String username; // 用户账号，用户登录时的唯一标识
  35.     @NotEmpty(message = "密码不能为空")
  36.     @Size(max = 100, message = "密码长度最多100个字符")
  37.     @Column(length = 100)
  38.     private String password; // 登录时密码
  40.     @Column(length = 200)
  41.     @Size(max = 200, message = "头像链接长度最多200个字符")
  42.     private String avatar; // 头像图片地址
  45.     private Integer followSize = 0;//关注数
  47.     private Integer fanSize = 0; //粉丝数
  49.     @Transient
  50.     private Integer isFriend = 0;//关系，0表示没有关系，2表示互相关注
  53.     public User() {
  54.     }
  57. }

其他与本文无关的字段，这里省掉了。



Relationship.java
  1. package com.liuyanzhao.forum.entity;
  3. import javax.persistence.Column;
  4. import javax.persistence.Entity;
  5. import javax.persistence.Id;
  6. import javax.persistence.IdClass;
  8. /**
  9.  * @author 言曌
  10.  * @date 2018/4/24 下午9:38
  11.  */
  13. @Entity
  14. @IdClass(RelationshipPK.class)
  15. public class Relationship {
  16.     private Integer fromUserId;
  17.     private Integer toUserId;
  19.     public Relationship() {
  20.     }
  22.     public Relationship(Integer fromUserId, Integer toUserId) {
  23.         this.fromUserId = fromUserId;
  24.         this.toUserId = toUserId;
  25.     }
  27.     @Id
  28.     @Column(name = "from_user_id", nullable = false)
  29.     public Integer getFromUserId() {
  30.         return fromUserId;
  31.     }
  33.     public void setFromUserId(Integer fromUserId) {
  34.         this.fromUserId = fromUserId;
  35.     }
  37.     @Id
  38.     @Column(name = "to_user_id", nullable = false)
  39.     public Integer getToUserId() {
  40.         return toUserId;
  41.     }
  43.     public void setToUserId(Integer toUserId) {
  44.         this.toUserId = toUserId;
  45.     }
  47.     @Override
  48.     public boolean equals(Object o) {
  49.         if (this == o) return true;
  50.         if (o == null || getClass() != o.getClass()) return false;
  52.         Relationship that = (Relationship) o;
  54.         if (fromUserId != null ? !fromUserId.equals(that.fromUserId) : that.fromUserId != null) return false;
  55.         if (toUserId != null ? !toUserId.equals(that.toUserId) : that.toUserId != null) return false;
  57.         return true;
  58.     }
  60.     @Override
  61.     public int hashCode() {
  62.         int result = fromUserId != null ? fromUserId.hashCode() : 0;
  63.         result = 31 * result + (toUserId != null ? toUserId.hashCode() : 0);
  64.         return result;
  65.     }
  66. }



RelationshipPK.java
  1. package com.liuyanzhao.forum.entity;
  3. import javax.persistence.Column;
  4. import javax.persistence.Id;
  5. import java.io.Serializable;
  7. /**
  8.  * @author 言曌
  9.  * @date 2018/4/24 下午9:38
  10.  */
  12. public class RelationshipPK implements Serializable {
  13.     private Integer fromUserId;
  14.     private Integer toUserId;
  16.     @Column(name = "from_user_id", nullable = false)
  17.     @Id
  18.     public Integer getFromUserId() {
  19.         return fromUserId;
  20.     }
  22.     public void setFromUserId(Integer fromUserId) {
  23.         this.fromUserId = fromUserId;
  24.     }
  26.     @Column(name = "to_user_id", nullable = false)
  27.     @Id
  28.     public Integer getToUserId() {
  29.         return toUserId;
  30.     }
  32.     public void setToUserId(Integer toUserId) {
  33.         this.toUserId = toUserId;
  34.     }
  36.     @Override
  37.     public boolean equals(Object o) {
  38.         if (this == o) return true;
  39.         if (o == null || getClass() != o.getClass()) return false;
  41.         RelationshipPK that = (RelationshipPK) o;
  43.         if (fromUserId != null ? !fromUserId.equals(that.fromUserId) : that.fromUserId != null) return false;
  44.         if (toUserId != null ? !toUserId.equals(that.toUserId) : that.toUserId != null) return false;
  46.         return true;
  47.     }
  49.     @Override
  50.     public int hashCode() {
  51.         int result = fromUserId != null ? fromUserId.hashCode() : 0;
  52.         result = 31 * result + (toUserId != null ? toUserId.hashCode() : 0);
  53.         return result;
  54.     }
  55. }


三、Dao 层


UserRepository.java
  1. package com.liuyanzhao.forum.repository;
  3. import com.liuyanzhao.forum.entity.User;
  4. import org.springframework.data.domain.Page;
  5. import org.springframework.data.domain.Pageable;
  6. import org.springframework.data.jpa.repository.JpaRepository;
  7. import org.springframework.data.jpa.repository.Query;
  9. import java.util.Collection;
  10. import java.util.List;
  12. /**
  13.  * @author 言曌
  14.  * @date 2018/3/20 下午5:26
  15.  */
  17. public interface UserRepository extends JpaRepository<User, Integer> {
  19.     /**
  20.      * 根据id集合查询用户，分页查询
  21.      *
  22.      * @param ids
  23.      * @return
  24.      */
  25.     Page<User> findByIdIn(List<Integer> ids, Pageable pageable);
  28.     /**
  29.      * 根据id集合查询用户，不分页
  30.      *
  31.      * @param ids
  32.      * @return
  33.      */
  34.     List<User> findByIdIn(List<Integer> ids);
  36. }



RelationshipRepository.java
  1. package com.liuyanzhao.forum.repository;
  3. import com.liuyanzhao.forum.entity.Relationship;
  4. import com.liuyanzhao.forum.entity.RelationshipPK;
  5. import org.springframework.data.jpa.repository.JpaRepository;
  6. import org.springframework.data.jpa.repository.Query;
  7. import org.springframework.data.repository.query.Param;
  9. import java.util.List;
  11. /**
  12.  * @author 言曌
  13.  * @date 2018/4/24 下午9:47
  14.  */
  16. public interface RelationshipRepository extends JpaRepository<Relationship, RelationshipPK> {
  18.     /**
  19.      * 根据关注者id查找所有记录（查找关注的人的id）
  20.      *
  21.      * @param fromUserId
  22.      * @return
  23.      */
  24.     @Query("select toUserId from Relationship where fromUserId =:fromUserId")
  25.     List<Integer> findByFromUserId(@Param("fromUserId") Integer fromUserId);
  27.     /**
  28.      * 根据被关注者查找所有记录（查找粉丝的id）
  29.      *
  30.      * @param toUserId
  31.      * @return
  32.      */
  33.     @Query("select fromUserId from Relationship where toUserId =:toUserId")
  34.     List<Integer> findByToUserId(@Param("toUserId") Integer toUserId);
  37.     /**
  38.      * 查询该用户的互相关注id
  39.      * @param userId
  40.      * @return
  41.      */
  42.     @Query(value = "SELECT DISTINCT t1.from_user_id FROM (SELECT * FROM relationship WHERE to_user_id = ?1)  AS t1 INNER JOIN relationship t2 ON t1.from_user_id = t2.to_user_id", nativeQuery = true)
  43.     List<Integer> findFriendsByUserId(Integer userId);
  45.     /**
  46.      * 查询关注数
  47.      * @param fromUserId
  48.      * @return
  49.      */
  50.     Integer countByFromUserId(Integer fromUserId);
  52.     /**
  53.      * 查询粉丝数
  54.      * @param toUserId
  55.      * @return
  56.      */
  57.     Integer countByToUserId(Integer toUserId);
  58. }




四、Service 层


RelationshipService.java
  1. package com.liuyanzhao.forum.service;
  3. import com.liuyanzhao.forum.entity.Relationship;
  4. import com.liuyanzhao.forum.entity.User;
  5. import org.springframework.data.domain.Page;
  6. import org.springframework.data.domain.Pageable;
  8. import java.util.List;
  10. /**
  11.  * @author 言曌
  12.  * @date 2018/4/24 下午10:10
  13.  */
  15. public interface RelationshipService {
  17.     /**
  18.      * 列出所有的关注者
  19.      *
  20.      * @return
  21.      */
  22.     Page<User> listFollows(Integer userId, Pageable pageable);
  25.     /**
  26.      * 列出所有的粉丝
  27.      *
  28.      * @return
  29.      */
  30.     Page<User> listFans(Integer userId, Pageable pageable);
  32.     /**
  33.      * 列出互相关注的id
  34.      *
  35.      * @param userId
  36.      * @return
  37.      */
  38.     List<Integer> listFriends(Integer userId);
  40.     /**
  41.      * 添加关系
  42.      *
  43.      * @param relationship
  44.      */
  45.     void saveRelationship(Relationship relationship);
  47.     /**
  48.      * 去除关系
  49.      *
  50.      * @param relationship
  51.      */
  52.     void removeRelationship(Relationship relationship);
  54.     /**
  55.      * 更新关注数
  56.      */
  57.     void updateFollowSize(Integer userId);
  59.     /**
  60.      * 更新粉丝数
  61.      */
  62.     void updateFanSize(Integer userId);
  64. }



RelationshipServiceImpl.java
  1. package com.liuyanzhao.forum.service.impl;
  3. import com.liuyanzhao.forum.entity.Relationship;
  4. import com.liuyanzhao.forum.entity.User;
  5. import com.liuyanzhao.forum.repository.RelationshipRepository;
  6. import com.liuyanzhao.forum.repository.UserRepository;
  7. import com.liuyanzhao.forum.service.RelationshipService;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.data.domain.Page;
  10. import org.springframework.data.domain.Pageable;
  11. import org.springframework.stereotype.Service;
  13. import java.util.List;
  15. /**
  16.  * @author 言曌
  17.  * @date 2018/4/24 下午10:23
  18.  */
  20. @Service
  21. public class RelationshipServiceImpl implements RelationshipService {
  23.     @Autowired
  24.     private RelationshipRepository relationshipRepository;
  26.     @Autowired
  27.     private UserRepository userRepository;
  29.     @Override
  30.     public Page<User> listFollows(Integer userId, Pageable pageable) {
  31.         List<Integer> relationshipList = relationshipRepository.findByFromUserId(userId);
  32.         Page<User> userPage = userRepository.findByIdIn(relationshipList, pageable);
  33.         return userPage;
  34.     }
  36.     @Override
  37.     public Page<User> listFans(Integer userId, Pageable pageable) {
  38.         List<Integer> relationshipList = relationshipRepository.findByToUserId(userId);
  39.         Page<User> userPage = userRepository.findByIdIn(relationshipList, pageable);
  40.         return userPage;
  41.     }
  43.     @Override
  44.     public List<Integer> listFriends(Integer userId) {
  45.         List<Integer> relationshipList = relationshipRepository.findFriendsByUserId(userId);
  46. //        List<User> userList = userRepository.findByIdIn(relationshipList);
  47.         return relationshipList;
  48.     }
  50.     @Override
  51.     public void saveRelationship(Relationship relationship) {
  52.         //添加关注
  53.         relationshipRepository.save(relationship);
  54.         //更新双方关注数和粉丝数
  55.         updateFollowSize(relationship.getFromUserId());
  56.         updateFanSize(relationship.getToUserId());
  57.     }
  59.     @Override
  60.     public void removeRelationship(Relationship relationship) {
  61.         //删除关系
  62.         relationshipRepository.delete(relationship);
  63.         //更新双方关注数和粉丝数
  64.         updateFollowSize(relationship.getFromUserId());
  65.         updateFanSize(relationship.getToUserId());
  66.     }
  68.     @Override
  69.     public void updateFollowSize(Integer userId) {
  70.         User user = userRepository.findById(userId).get();
  71.         user.setFollowSize(relationshipRepository.countByFromUserId(userId));
  72.         userRepository.save(user);
  73.     }
  75.     @Override
  76.     public void updateFanSize(Integer userId) {
  77.         User user = userRepository.findById(userId).get();
  78.         user.setFanSize(relationshipRepository.countByToUserId(userId));
  79.         userRepository.save(user);
  81.     }
  84. }




五、Controller 层


UserSpaceController.java
  1. package com.liuyanzhao.forum.controller;
  3. import com.liuyanzhao.forum.controller.common.BaseController;
  4. import com.liuyanzhao.forum.entity.*;
  5. import com.liuyanzhao.forum.repository.UserRepository;
  6. import com.liuyanzhao.forum.service.*;
  7. import com.liuyanzhao.forum.vo.Response;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.data.domain.Page;
  10. import org.springframework.data.domain.PageRequest;
  11. import org.springframework.http.ResponseEntity;
  12. import org.springframework.security.access.prepost.PreAuthorize;
  13. import org.springframework.security.core.context.SecurityContextHolder;
  14. import org.springframework.stereotype.Controller;
  15. import org.springframework.ui.Model;
  16. import org.springframework.web.bind.annotation.*;
  17. import org.springframework.web.servlet.ModelAndView;
  19. import java.util.List;
  21. /**
  22.  * @author 言曌
  23.  * @date 2018/4/24 下午1:15
  24.  */
  26. @RequestMapping("/manage")
  27. @Controller
  28. @PreAuthorize("hasAnyAuthority('ROLE_ADMIN','ROLE_USER')")  // 指定角色权限才能操作方法
  29. public class UserSpaceController extends BaseController {
  31.     @Autowired
  32.     private RelationshipService relationshipService;
  35.     @Autowired
  36.     private UserRepository userRepository;
  40.     @GetMapping("/relationships")
  41.     public String relationships() {
  42.         return "forward:/manage/relationships/follows";
  43.     }
  45.     //粉丝-关注 start
  47.   /**
  48.      * 我的关注者列表
  49.      * @param userId
  50.      * @param optType
  51.      * @return
  52.      */
  53.     @GetMapping("/relationships/follows")
  54.     public ModelAndView follows(
  55.             @RequestParam(value = "async", required = false) boolean async,
  56.             @RequestParam(value = "page", defaultValue = "1", required = false) Integer page,
  57.             @RequestParam(value = "size", defaultValue = "1", required = false) Integer size,
  58.             Model model) {
  59.         Long startTime = System.currentTimeMillis();
  60.         User user = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
  61.         PageRequest pageRequest = new PageRequest(page - 1, size);
  62.         Page<User> userPage = relationshipService.listFollows(user.getId(), pageRequest);
  64.         List<Integer> friendIds = relationshipService.listFriends(user.getId());
  65.         List<User> userList = userPage.getContent();
  66.         for (int i = 0; i < userList.size(); i++) {
  67.             if (friendIds.contains(userList.get(i).getId())) {
  68.                 userPage.getContent().get(i).setIsFriend(2);
  69.             }
  70.         }
  71.         model.addAttribute("userPage", userPage);
  72.         Long endTime = System.currentTimeMillis();
  74.         System.out.println("耗时" + (endTime - startTime) + "ms");
  75.         model.addAttribute("is_follows", true);
  78.         return new ModelAndView(async == true ? "home/userspace/relationship :: .tab-pane" : "home/userspace/relationship");
  80.     }
  82.   /**
  83.      * 我的粉丝列表
  84.      * @param userId
  85.      * @param optType
  86.      * @return
  87.      */
  88.     @GetMapping("/relationships/fans")
  89.     public ModelAndView fans(
  90.             @RequestParam(value = "async", required = false) boolean async,
  91.             @RequestParam(value = "page", defaultValue = "1", required = false) Integer page,
  92.             @RequestParam(value = "size", defaultValue = "1", required = false) Integer size,
  93.             Model model) {
  94.         Long startTime = System.currentTimeMillis();
  95.         User user = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
  96.         PageRequest pageRequest = new PageRequest(page - 1, size);
  97.         Page<User> userPage = relationshipService.listFans(user.getId(), pageRequest);
  98.         List<Integer> friendIds = relationshipService.listFriends(user.getId());
  99.         List<User> userList = userPage.getContent();
  100.         for (int i = 0; i < userList.size(); i++) {
  101.             if (friendIds.contains(userList.get(i).getId())) {
  102.                 userPage.getContent().get(i).setIsFriend(2);
  103.             }
  104.         }
  105.         model.addAttribute("userPage", userPage);
  106.         Long endTime = System.currentTimeMillis();
  108.         System.out.println("耗时" + (endTime - startTime) + "ms");
  109.         model.addAttribute("is_fans", "true");
  110.         return new ModelAndView(async == true ? "home/userspace/relationship :: .tab-pane" : "home/userspace/relationship");
  112.     }
  115.     /**
  116.      * 添加关系
  117.      * @param userId
  118.      * @param optType
  119.      * @return
  120.      */
  121.     @PostMapping("/relationships")
  122.     public ResponseEntity<Response> followUser(Integer userId, String optType) {
  123.         User user = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
  124.         //1、判断用户是否存在
  125.         User temp = userRepository.findById(userId).get();
  126.         if (temp == null) {
  127.             return ResponseEntity.ok().body(new Response(false, "用户不存在"));
  128.         }
  129.         //2、判断是关注还是取消关注
  130.         //关注
  131.         if ("follow".equals(optType)) {
  132.             relationshipService.saveRelationship(new Relationship(user.getId(), userId));
  133.         } else if ("notfollow".equals(optType)) {
  134.             //取消关注
  135.             relationshipService.removeRelationship(new Relationship(user.getId(), userId));
  136.         } else {
  137.             //非法操作
  138.             return ResponseEntity.ok().body(new Response(false, "非法操作"));
  139.         }
  140.         Integer fanSize = userRepository.findById(userId).get().getFanSize();
  141.         return ResponseEntity.ok().body(new Response(true, "操作成功",fanSize));
  142.     }
  144.     //粉丝-关注 end
  147. }




七、视图层


HTML
  1. <div class="box">
  2.     <div class="box-header with-border">
  3.         <h3 class="box-title">关系管理</h3>
  4.     </div>
  5.     <div class="box-body" id="right-box-body">
  6.         <div id="right-box-body-replace">
  7.             <div class="nav-tabs-custom" style="box-shadow: 0 0;">
  8.                 <ul class="nav nav-tabs">
  9.                     <li th:class="${is_follows}?active:''">
  10.                         <a href="javascript:void(0)" data-toggle="tab"
  11.                            class="relationship-tab-btn"
  12.                            data-th-attr="data-type=follows">我的关注</a>
  13.                     </li>
  14.                     <li th:class="${is_fans}?active:''">
  15.                         <a href="javascript:void(0)" data-toggle="tab"
  16.                            class="relationship-tab-btn" data-th-attr="data-type=fans">我的粉丝</a>
  17.                     </li>
  18.                 </ul>
  19.                 <div class="tab-content">
  20.                     <div class="tab-pane active">
  21.                         <div class="concern-list" th:if="${userPage.totalElements != 0}">
  22.                             <ul>
  23.                                 <li class="box" th:each="user : ${userPage.content}">
  24.                                     <div class="left-img">
  25.                                         <a href="/u/3078817" target="_blank">
  26.                                             <img th:src="${user.avatar}"
  27.                                                  class="top_head">
  28.                                         </a>
  29.                                     </div>
  30.                                     <div class="right-c">
  31.                                         <div class="title">
  32.                                             <a th:href="@{'/u/'+${user.username}}" target="_blank">
  33.                                                 <span class="nickname"
  34.                                                       th:text="${user.nickname}">言曌</span>
  35.                                             </a>
  36.                                         </div>
  37.                                         <p class="desc" title="全栈工程师"
  38.                                            th:text="${user.job.name}">全栈工程师</p>
  39.                                         <div class="fs-line">
  40.                                             <a href="/u/3078817/follows" class="u-target">
  41.                                                 <span class="group">
  42.                                                     <em>关注</em>
  43.                                                     <em class="u-margin-l-5 follow-size" th:text="${user.followSize}">3</em>
  44.                                                 </span>
  45.                                             </a>
  46.                                             <a href="/u/3078817/fans"
  47.                                                class="u-target u-margin-l-15">
  48.                                                 <span class="group">
  49.                                                     <em>粉丝</em>
  50.                                                     <em class="u-margin-l-5 fan-size" th:text="${user.fanSize}">61</em>
  51.                                                 </span>
  52.                                             </a>
  53.                                         </div>
  54.                                         <div class="btn-line" th:if="${is_follows}">
  55.                                             <a href="javascript:void(0)"
  56.                                                data-th-attr="data-uid=${user.id},opt-type=follow"
  57.                                                class="btn-o btn-green-o js-concern-follow"
  58.                                                style="display: none;">关注</a>
  59.                                             <a href="javascript:void(0)"
  60.                                                data-th-attr="data-uid=${user.id},opt-type=notfollow"
  61.                                                class="btn-o btn-gray-o js-concern-already"
  62.                                                th:if="${user.isFriend!=2}">已关注</a>
  63.                                             <a href="javascript:void(0)"
  64.                                                data-th-attr="data-uid=${user.id},opt-type=notfollow"
  65.                                                class="btn-o btn-gray-o js-concern-mutual"
  66.                                                th:if="${user.isFriend==2}">互相关注</a>
  67.                                             <a href="/u/2478917/messages?uid=3078817"
  68.                                                target="_blank"
  69.                                                class="btn-o btn-gray-o  js-concern-msg">私信</a>
  70.                                         </div>
  71.                                         <div class="btn-line" th:if="${is_fans}">
  72.                                             <a href="javascript:void(0)"
  73.                                                data-th-attr="data-uid=${user.id},opt-type=follow"
  74.                                                class="btn-o btn-green-o js-concern-follow"
  75.                                                th:if="${user.isFriend!=2}">关注</a>
  76.                                             <a href="javascript:void(0)"
  77.                                                data-th-attr="data-uid=${user.id},opt-type=follow"
  78.                                                class="btn-o btn-green-o js-concern-follow"
  79.                                                style="display: none;"
  80.                                                th:if="${user.isFriend==2}">关注</a>
  81.                                             <a href="javascript:void(0)"
  82.                                                data-th-attr="data-uid=${user.id},opt-type=notfollow"
  83.                                                class="btn-o btn-gray-o js-concern-mutual"
  84.                                                th:if="${user.isFriend!=2}"
  85.                                                style="display: none;">互相关注</a>
  86.                                             <a href="javascript:void(0)"
  87.                                                data-th-attr="data-uid=${user.id},opt-type=notfollow"
  88.                                                class="btn-o btn-gray-o js-concern-mutual"
  89.                                                th:if="${user.isFriend==2}">互相关注</a>
  90.                                             <a href="/u/2478917/messages?uid=3078817"
  91.                                                target="_blank"
  92.                                                class="btn-o btn-gray-o  js-concern-msg">私信</a>
  93.                                         </div>
  94.                                     </div>
  95.                                 </li>
  97.                             </ul>
  98.                         </div>
  99.                         <div class="clear"></div>
  100.                         <!--分页-->
  101.                         <div id="pagenation" th:if="${userPage.totalPages >= 2}">
  102.                             <nav aria-label="Page navigation" th:object="${userPage}">
  103.                                 <ul class="pagination"
  104.                                     data-th-attr="data-type=${is_follows}?follows:fans">
  105.                                     <li data-th-classappend="*{first} ? 'disabled' : ''">
  106.                                         <a href="javascript:void(0)"
  107.                                            data-th-attr="pageIndex=${userPage.number}"
  108.                                            aria-label="Previous">
  109.                                             <span aria-hidden="true">上一页</span>
  110.                                         </a>
  111.                                     </li>
  112.                                     <li th:each="i: ${#numbers.sequence(1, userPage.totalPages)}"
  113.                                         data-th-classappend="${(userPage.number + 1) eq i} ? 'active' : ''">
  114.                                         <a href="javascript:void(0)"
  115.                                            data-th-attr="pageIndex=${i}">
  116.                                             <span aria-hidden="true" th:text="${i}"></span>
  117.                                         </a>
  118.                                     </li>
  119.                                     <li data-th-classappend="*{last} ? 'disabled' : ''">
  120.                                         <a href="javascript:void(0)"
  121.                                            data-th-attr="pageIndex=${userPage.number} + 2"
  122.                                            aria-label="Next">
  123.                                             <span aria-hidden="true">下一页</span>
  124.                                         </a>
  125.                                     </li>
  126.                                 </ul>
  127.                             </nav>
  128.                         </div>
  129.                         <div class="nodata" th:if="${userPage.totalElements == 0}">
  130.                             <span th:if="${is_follows}">您还没有关注任何用户</span>
  131.                             <span th:if="${is_follows}">您还没有任何粉丝</span>
  133.                         </div>
  134.                     </div>
  135.                 </div>
  137.             </div>
  139.         </div>
  140.     </div>
  141. </div>



JS
  1. //重新获取数据
  2. $(document).on('click', '.relationship-tab-btn', function () {
  3.     var _ctx = $("meta[name='ctx']").attr("content");
  4.     var url = _ctx + "/manage/relationships/" + $(this).attr("data-type");
  5.     $.ajax({
  6.         url: url,
  7.         data: {async: true},
  8.         success: function (data) {
  9.             $(".tab-content").html(data)
  10.         },
  11.         error: function () {
  12.             layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  13.         }
  14.     });
  15. });
  17. //分页
  18. $(document).on('click', '.pagination a', function () {
  19.     var _ctx = $("meta[name='ctx']").attr("content");
  20.     var page = $(this).attr('pageIndex');
  21.     var data_type = $(this).parents("ul").attr("data-type");
  22.     var url = _ctx + "/manage/relationships/" + data_type;
  23.     $.ajax({
  24.         url: url,
  25.         data: {
  26.             async: true,
  27.             page: page,
  28.         },
  29.         success: function (data) {
  30.             $(".tab-content").html(data)
  31.         },
  32.         error: function () {
  33.             layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  34.         }
  35.     });
  36. });
  38. //取消关注
  39. $(document).on('click', '.js-concern-already,.js-concern-mutual', function () {
  40.     var current = $(this);
  41.     var _ctx = $("meta[name='ctx']").attr("content");
  42.     var token = $("meta[name='_csrf']").attr("content");
  43.     var header = $("meta[name='_csrf_header']").attr("content");
  44.     var url = _ctx + "/manage/relationships/";
  46.     $.ajax({
  47.         url: url,
  48.         type: 'POST',
  49.         data: {
  50.             optType: current.attr('opt-type'),
  51.             userId: current.attr('data-uid'),
  52.         },
  53.         beforeSend: function (request) {
  54.             request.setRequestHeader(header, token); // 添加  CSRF Token
  55.         },
  56.         success: function (data) {
  57.             current.hide();
  58.             current.prev("a").show();
  59.             current.parents(".box").find(".fan-size").html(data.body);
  60.         },
  61.         error: function () {
  62.             layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  63.         }
  64.     });
  65. });
  67. //关注
  68. $(document).on('click', '.js-concern-follow', function () {
  69.     var current = $(this);
  70.     var _ctx = $("meta[name='ctx']").attr("content");
  71.     var token = $("meta[name='_csrf']").attr("content");
  72.     var header = $("meta[name='_csrf_header']").attr("content");
  73.     var url = _ctx + "/manage/relationships/";
  75.     $.ajax({
  76.         url: url,
  77.         type: 'POST',
  78.         data: {
  79.             optType: current.attr('opt-type'),
  80.             userId: current.attr('data-uid'),
  81.         },
  82.         beforeSend: function (request) {
  83.             request.setRequestHeader(header, token); // 添加  CSRF Token
  84.         },
  85.         success: function (data) {
  86.             current.hide();
  87.             current.next("a").show();
  88.             current.parents(".box").find(".fan-size").html(data.body);
  89.         },
  90.         error: function () {
  91.             layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  92.         }
  93.     });
  94. });



CSS
  1. ol, ul {
  2.     list-style: none;
  3. }
  4. .concern-list {
  5.     padding-top: 20px;
  6.     padding-bottom: 20px;
  7.     width: 100%;
  8. }
  9. .concern-list ul {
  10.     margin-left: -18px;
  11. }
  12. .concern-list .box {
  13.     float: left;
  14.     width: 32%;
  15.     padding: 20px;
  16.     background-color: #f8fafc;
  17.     margin-left: 1%;
  18.     margin-bottom: 15px;
  19.     min-height: 114px;
  20. }
  21. .concern-list .left-img {
  22.     float: left;
  23.     position: relative;
  24.     width: 40px;
  25.     height: 40px;
  26.     top: 0;
  27. }
  28. .concern-list .left-img .top_head {
  29.     position: absolute;
  30.     top: 0;
  31.     border-radius: 25px;
  32.     width: 40px;
  33.     height: 40px;
  34.     z-index: 1;
  35. }
  36. .concern-list .rightright-c {
  37.     margin-left: 50px;
  38. }
  39. .concern-list .rightright-c .title {
  40.     font-weight: 700;
  41.     color: #07111b;
  42.     padding-bottom: 8px;
  43.     width: 100%;
  44. }
  45. .concern-list .rightright-c .title .nickname {
  46.     text-overflow: ellipsis;
  47.     overflow: hidden;
  48.     whitewhite-space: nowrap;
  49.     max-width: 60%;
  50.     display: inline-block;
  51.     vertical-align: middle;
  52. }
  53. .concern-list .rightright-c .desc {
  54.     text-overflow: ellipsis;
  55.     overflow: hidden;
  56.     whitewhite-space: nowrap;
  57.     min-height: 18px;
  58. }
  59. .concern-list .rightright-c .desc, .concern-list .rightright-c .fs-line {
  60.     color: #93999f;
  61.     padding-bottom: 8px;
  62.     font-size: 12px;
  63. }
  64. .concern-list .rightright-c .desc, .concern-list .rightright-c .fs-line {
  65.     color: #93999f;
  66.     padding-bottom: 8px;
  67.     font-size: 12px;
  68. }
  69. .concern-list .rightright-c .fs-line .u-target {
  70.     color: #93999f!important;
  71. }
  72. .concern-list .rightright-c .fs-line .group {
  73.     display: inline-block;
  74. }
  75. em{
  76.     font-style: normal;
  77.     font-weight: 400;
  78. }
  80. .concern-list .rightright-c .fs-line .u-target {
  81.     color: #93999f!important;
  82. }
  83. concern-list .u-margin-l-5 {
  84.     margin-left: 5px;
  85. }
  86. .concern-list .hide {
  87.     display: none;
  88. }
  90. .concern-list .btn-gray-o {
  91.     border: 1px solid #d0d6d9;
  92.     color: #787d82;
  93.     background-color: #fff;
  94.     margin-right: 14px;
  95. }
  96. .concern-list .btn-o {
  97.     padding: 6px 0;
  98.     margin-bottom: 0;
  99.     font-size: 12px;
  100.     font-weight: 400;
  101.     line-height: 1.42857143;
  102.     whitewhite-space: nowrap;
  103.     vertical-align: middle;
  104.     cursor: pointer;
  105.     width: 76px;
  106.     display: block;
  107.     float: left;
  108. }
  109. .concern-list .btn-o{
  110.     text-align: center;
  111. }
  112. .concern-list .btn-green-o {
  113.     border: 1px solid #00b43c;
  114.     color: #00b43c;
  115.     background-color: #fff;
  116.     margin-right: 14px;
  117. }
  119. .nodata {
  120.     height: 420px;
  121.     line-height: 420px;
  122.     font-size: 18px;
  123.     color: #b5b9bc;
  124.     text-align: center;
  125. }



本文地址：https://liuyanzhao.com/8077.html





历史上的今天
四月
26日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0