springcloud篇】九. springcloud项目 四 好友列表展示及刷新

最新推荐文章于 2021-01-28 21:12:48 发布
最新推荐文章于 2021-01-28 21:12:48 发布
阅读量376 收藏
点赞数
分类专栏： springcloud 文章标签： springcloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheNew_One/article/details/105556057
版权

好友列表展示及刷新


中国加油，武汉加油！

篇幅较长，请配合目录观看

项目准备

  1. 本案例基于 springcloud篇】九. springcloud项目 三 首页，我的信息，添加好友及好友信息处理

1. 好友列表展示-后端

1.1 weixin-entity修改User类和Friend

// User
private String pinyin;

// Friend
@TableField(exist = false)
private User friendObj;

1.2 t_user添加pinyin字段

在这里插入图片描述

1.3 weixin-service-api定义方法

List<Friend> getFriendListByUid(Integer uid);

1.4 weixin-friend的FriendServiceImpl重写方法

@Override
public List<Friend> getFriendListByUid(Integer uid) {
    EntityWrapper wrapper = new EntityWrapper();
    wrapper.eq("uid",uid);
    return friendMapper.selectList(wrapper);
}

1.5 编写FriendController

package com.wpj.controller;

import com.wpj.entity.Friend;
import com.wpj.entity.base.ResultEntity;
import com.wpj.service.IFriendService;
import com.wpj.service.api.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping(value = "/friend")
public class FriendController {

    @Autowired
    private IFriendService friendService;

    @Autowired
    private IUserService userService;

    @RequestMapping(value = "/getFriendListByUid")
    public ResultEntity getFriendListByUid(Integer uid ) {
        List<Friend> friendList = friendService.getFriendListByUid(uid);
        for(Friend f:friendList){
            f.setFriendObj(userService.getUserById(f.getFid()));
        }
        return ResultEntity.success(friendList);
    }
}

1.6 映射路径

在这里插入图片描述

2. 好友列表展示-前端

2.2 修改weixin-utils.js

window.url={
	register_url:ip.serverip+"user/register",
	login_url:ip.serverip+"user/login",
	upload_head_url:ip.serverip+"res/uploadFile",
	getuserbyusername_url:ip.serverip+"user/getUserByUsername",
	friendapply_add_url:ip.serverip+"friendApply/addFriendApply",
	getMyFriendApplyList_url:ip.serverip+"friendApply/getMyFriendApplyList",
	updateFriendApplyStatus_url:ip.serverip+"friendApply/updateFriendApplyStatus",
	getFriendListByUid_url:ip.serverip+"friend/getFriendListByUid"
}

2.2 引入mui.indexedlist.css和mui.indexedlist.js

2.3 编写friend.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.mui-table-view-divider{
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">好友列表</h1>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="refreshContainer">
						<li id="py_a" data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<li id="py_b" data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li id="py_c" data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li id="py_d" data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li id="py_e" data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li id="py_f" data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li id="py_g" data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li id="py_h" data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li id="py_j" data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li id="py_k" data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li id="py_l" data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li id="py_m" data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li id="py_n" data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li id="py_p" data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li id="py_q" data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li id="py_r" data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li id="py_s" data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li id="py_t" data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
						<li id="py_w" data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li id="py_x" data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li id="py_y" data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li id="py_z" data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>			
					</ul>
				</div>
			</div>
		</div>
		<script src="js/weixin-utils.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script type="text/javascript" charset="utf-8">
			
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
			});
			
			mui.plusReady(function () {

				var user = util.getUser();
				// 查询用户的好友
				util.ajax({
					url:url.getFriendListByUid_url,
					data:{
						"uid":user.id
					},
					success:function(resp){
						if(resp.code =="ok"){
							// 获取好友的列表
							var fList = resp.data;
							for(var i =0;i<fList.length;i++){
								var f = fList[i]; // 好友的记录对象
								var fObj = f.friendObj; // 好友对象
								var fpy = fObj.pinyin; // 好友的拼音
								var pyIndex = fpy.substring(0,1);
								console.log(pyIndex)
								
								var liEle = document.getElementById("py_"+pyIndex);
								if(liEle){
									console.log(liEle)
									
									// 显示好友的索引
									liEle.style.display="block";
									
									var html = "";
									html+='<li class="mui-table-view-cell mui-media" >';
									html+='<a href="javascript:;" fid ="'+fObj.id+'">';
									if(fObj.minHead){
										html+='<img class="mui-media-object mui-pull-left" src="'+fObj.minHead+'">';
									}else{
										html+='<img class="mui-media-object mui-pull-left" src="image/myheader.png">';
									}
									html+='<div class="mui-media-body">';
									
									if(f.remark){
										html+=f.remark;
									}else{
										html+=fObj.nickname;
									}
									
									html+='</div>';
									html+='</a>';
									html+='</li>';
									
									liEle.insertAdjacentHTML("beforeend",html);
									
								}
							}
						}
					}
				})
			})
		</script>
	</body>
</html>

3. 好友列表刷新-前端

3.1 修改weixin-utils.js

setFriendList:function(fList){
	plus.storage.setItem("friendList",JSON.stringify(fList)); 
},
getFriendList:function(){
	return JSON.parse(plus.storage.getItem("friendList"));
}

3.2 修改friend.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.mui-table-view-divider{
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">indexed list（索引列表）</h1>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view" id="refreshContainer">
						
						<li id="py_a" data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<li id="py_b" data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li id="py_c" data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li id="py_d"  data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li id="py_e"  data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li id="py_f" data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li id="py_g" data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li id="py_h" data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li id="py_j" data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li id="py_k" data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li id="py_l" data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li id="py_m" data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li id="py_n" data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li id="py_p" data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li id="py_q" data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li id="py_r" data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li id="py_s" data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li id="py_t" data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
						<li id="py_w" data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li id="py_x" data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li id="py_y" data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li id="py_z" data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>			
					</ul>
				</div>
			</div>
		</div>
		<script src="js/weixin_utils.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script type="text/javascript" charset="utf-8">
			
			
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      auto: false,//可选,默认false.首次加载自动上拉刷新一次
			      callback :refreshFriendList //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
			});
			
			function refreshFriendList(){
				// 在刷新之前要删除当前的好友
				var list = document.querySelectorAll(".mui-table-view-cell");
				for(var i =0;i<list.length;i++){
					console.info(list[i]);
					list[i].remove();
				}
				ajaxFriendList();
				mui('#refreshContainer').pullRefresh().endPulldown();
			}
		
		
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
			});
			
			
			mui.plusReady(function () {
			    
				// 获取本地的好友列表
				var fList = util.getFriendList();
				
				// 显示
				if(fList){
					showFriedList(fList);
				}else{
					ajaxFriendList();
				}
				
			
			function ajaxFriendList(){
				var user = util.getUser();
				// 查询用户的好友
				util.ajax({
					url:url.getFriendListByUid_url,
					data:{
						"uid":user.id
					},
					success:function(resp){
						console.info("resp:"+JSON.stringify(resp))
						if(resp.code =="ok"){
							// 获取好友的列表
							var fList = resp.data;
							// 保存到本地
							util.setFriendList(fList);
							showFriedList(fList);
						}
					}
				})
			}
			
			function showFriedList(fList){
				
				for(var i =0;i<fList.length;i++){
					var f = fList[i]; // 好友的记录对象
					var fObj = f.friendObj; // 好友对象
					var fpy = fObj.pinyin; // 好友的拼音
					var pyIndex = fpy.substring(0,1);
					
					var liEle = document.getElementById("py_"+pyIndex);
					if(liEle){
						// 显示好友的索引
						liEle.style.display="block";
						
						var html = "";
						html+='<li class="mui-table-view-cell mui-media" >';
						html+='<a href="javascript:;" fid ="'+fObj.id+'">';
						if(fObj.minHead){
							html+='<img class="mui-media-object mui-pull-left" src="'+fObj.minHead+'">';
						}else{
							html+='<img class="mui-media-object mui-pull-left" src="image/myheader.png">';
						}
						html+='<div class="mui-media-body">';
						
						if(f.remark){
							html+=f.remark;
						}else{
							html+=fObj.nickname;
						}
						
						html+='</div>';
						html+='</a>';
						html+='</li>';
						
						liEle.insertAdjacentHTML("beforeend",html);
						
					}
				}
			}
			
		</script>
	</body>
</html>
杰KaMi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JAVA--登录界面和好友列表
weixin_44752052的博客
03-12 1488
作为JAVA的初学者，有了C语音的一定基础，学起来并没有想象中的难，但在学习过程中也存在一定的问题，比如学习的第一个程序，开发一个简单的聊天小程序。 最开始学习的是聊天程序的登录界面和好友列表的创建。 我们使用的是eclipse软件，过程中我们接触了两个包，AWT包和SWING包。 AWT包中的很多组件是组件自身去调用本地操作系统代码，而SWING包则调用本地虚拟机的方法，由虚拟机在调用本地操作系...
基于微服务spring cloud+vue+spring boot在线聊天交友软件的设计与实现
a1254789688的博客
10-22 812
针对企业和机构在聊天通讯软件中的的信息管理监控困难、系统稳定性不足、二次开发困难、部署运维困难问题，对一个自主可控，安全稳定的通讯系统进行分析设计，采用前后端分离的开发模式，前端基于WEB端，采用基于MVVM模式架构的Vue全家桶进行独立开发，后端基于微服务技术搭建微服务集群，采用Spring Cloud技术体系，利用Ereka进行服务注册管理， Zuul进行服务网关抽取， Feigh进行服务集群负载均衡， Hystrix进行服务熔断。
k2 abc 官改固件下载_abc分析，k表示聚类
weixin_26750481的博客
08-27 351
k2 abc 官改固件下载 什么是ABC分析？ (What is ABC Analysis?) ABC analysis assumes that revenue-generating items in an inventory follow a Pareto distribution, where a very small percent of items generate the most a...
call()的用法
热门推荐
u012028371的博客
08-31 1万+
转自：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干
Springcloud学习笔记.md
07-02
Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Springcloud学习笔记.md，Spring...
SpringCloud面试题.pdf
最新发布
05-10
Spring Cloud作为一套微服务开发的工具集，涵盖了从服务发现、配置管理到断路器、网关、分布式会话等多个...Spring Cloud提供了哪个项目实现这一功能？ 12. 什么是服务网格（Service Mesh）？它与Spring Cloud有何关系
springcloud学习笔记.pdf
03-12
Spring Cloud 学习笔记 本笔记主要介绍了从单体架构到微服务架构的演变过程，以及 Spring Cloud 中的微服务架构搭建。下面是本笔记的详细知识点总结： 一、单体架构 单体架构是指整个系统只有一个工程，打包往往...
springcloud - 2021.0.3版本 - （一）服务注册nacos+feign
02-13
<groupId>org.springframework.cloud <artifactId>spring-cloud-starter-openfeign ``` 步骤三：配置Nacos 1. 在应用的bootstrap.properties或bootstrap.yml中配置Nacos服务器的地址、端口、命名空间等信息： ...
spring cloud项目.zip
04-16
Spring Cloud 是一个基于 Spring Boot 实现的云应用开发工具集，它为开发者提供了在分布式系统（如配置管理、服务发现、断路器、智能路由、微代理、控制总线、一次性令牌、全局锁、领导选举、分布式会话、集群状态）...
类模板(class template)友元(friend) 的全部六种形式及代码
janeqi1987的专栏
07-14 1438
转自http://blog.csdn.net/caroline_wendy/article/details/16916441 类模板(class template)的友元(friend)和普通类的友元, 有很多区别, 主要原因是类模板包含模板参数(template parameter), 就会导致友元和类模板有很多匹配形式; 主要包含六种形式: 1. 类 - 友元(frie
C++ - 类模板(class template)友元(friend) 的 全部六种形式 及 代码
weixin_34409703的博客
11-24 863
类模板(class template)友元(friend) 的 全部六种形式 及 代码 版权所有, 禁止转载, 如有需要, 请站内联系; 本文地址: http://blog.csdn.net/caroline_wendy/article/details/16916441 类模板(class template)的友元(friend)和普通类的友元, 有很多...
43、微信-好友详情页面FriendMsgActivity
大星星的专栏
03-14 1587
xml version="1.0" encoding="utf-8"?>LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#e
friend用法
shengjiangya的博客
01-28 1044
c++ 的friend用法 1.友元的内容 友元的声明自带extern 所以友元的作用域自动提升到该类的作用域所以我们可以在类内部定义友元 2.普通成员函数作为友元 该友元可以作为操作符 //OpeClass.h #pragma once class OpeClass { friend int func(const OpeClass xx); public: OpeClass(void); OpeClass(int x,int y); ~OpeClass(void); private: int w
如何使用Android构建嵌入式视频聊天应用程序
weixin_26739079的博客
09-07 857
Many cities and states have been under lockdown since the outbreak of the coronavirus epidemic. During this difficult time, we’re all looking for new ways to stay connected and support each other. Thi...
【友元】friend的用法
木木
01-29 812
友元可以是一个函数，该函数被称为友元函数；友元也可以是一个类，该类被称为友元类。 （1）友元函数 　　友元函数的特点是能够访问类中的私有成员的非成员函数。友元函数从语法上看，它与普通函数一样，即在定义上和调用上与普通函数一样。下面举一例子说明友元函数的应用。 #include   　　class   Point 　　{ 　　public: 　　　　Point(
SpringCloud中文文档
03-10
SpringCloud Context提供ApplicationContext的实用工具和服务，如刷新范围和环境端点；SpringCloud Commons是不同SpringCloud实现中的共享抽象和类。 在使用SpringCloud时，需要注意一些技术细节，如Java加密扩展...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值