springcloud篇】九. springcloud項目 三 首頁，我的信息，添加好友及好友信息處理

中國加油，武漢加油！

篇幅較長，請配合目錄觀看

項目準備

1. 本案例基於 springcloud篇】九. springcloud項目 二 註冊登錄及全局異常處理
2. linux篇】十. Docker安裝FastDFS和Solr

1. 圖片上傳服務器-後端

1.1 導包

<dependency>
    <groupId>com.github.tobato</groupId>
    <artifactId>fastdfs-client</artifactId>
    <version>1.26.1-RELEASE</version>
</dependency>

1.2 編寫yml

spring:
  cloud:
    config:
      uri: http://localhost:8081
      name: application
      profile: user,euclient
fdfs:
  so-timeout: 2000
  connect-timeout: 2000
  thumb-image:
    width: 100
    height: 100
  tracker-list:
    - 192.168.59.100:22122
fastpath: http://192.168.59.100:8080/

1.3 修改weixin-config-server/config的application-gateway.yml

server:
  port: 8888
spring:
  application:
    name: wx-gateway
  cloud:
    gateway:
      routes:
        - id: wx-user
          uri: lb://WX-USER
          predicates:
            - Path=/user/**,/res/**

1.4 weixin-user編寫Controller

package com.wpj.controller;

import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import com.wpj.entity.User;
import com.wpj.entity.base.ResultEntity;
import com.wpj.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping(value = "/res")
public class ResController {

    @Autowired
    private FastFileStorageClient ffsc;

    @Value("${fastpath}")
    private String fdfsPath;

    @Autowired
    private IUserService userService;
    /**
     *
     * @param userId 用戶id
     * @param file
     * @return
     */
    @RequestMapping(value = "/uploadFile")
    public ResultEntity uploadFile(Integer userId, MultipartFile file){
        String fileName = file.getOriginalFilename();
        // 獲取文件的後綴
        String fileExName = fileName.substring(fileName.lastIndexOf(".")+1);
        try {
            // 上傳頭像到FastDFS
            StorePath storePath = ffsc.uploadImageAndCrtThumbImage(file.getInputStream(), file.getSize(), fileExName, null);
            String fullPath = storePath.getFullPath();
            // 獲取大圖和小圖的路徑
            String maxHead = fdfsPath+fullPath;
            String minHead = fdfsPath+fullPath.replaceAll("."+fileExName,"_100x100."+fileExName);
            // 修改用戶表中的頭像
            if(userId != null){
                User user = userService.selectById(userId);
                user.setMaxHead(maxHead);
                user.setMinHead(minHead);
                userService.update(user);
            }
            Map<String,String> map = new HashMap<>();
            map.put("maxHead",maxHead);
            map.put("minHead",minHead);
            return ResultEntity.success(map);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

1.5 修改程序入口

package com.wpj;

import com.github.tobato.fastdfs.FdfsClientConfig;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
import org.springframework.context.annotation.EnableMBeanExport;
import org.springframework.context.annotation.Import;
import org.springframework.jmx.support.RegistrationPolicy;

@EnableEurekaClient
@SpringBootApplication(scanBasePackages = "com.wpj")
@MapperScan(basePackages = "com.wpj.mapper")
// FastDFS
@Import(FdfsClientConfig.class)
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)
public class WeixinUserApplication {
    public static void main(String[] args) {
        SpringApplication.run(WeixinUserApplication.class, args);
    }
}

1.6 啓動程序入口使用PostMan測試

2. 圖片上傳服務器-前端

2.1 index.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>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		mui.plusReady(function () {
			// 把4個頁面放到一個數組裏面
			var pageArray = ["msg.html","friend.html","discovery.html","me.html"];
			// 新頁面的樣式
			var styles = {top:'0px',bottom:'50px'}; 
			// 遍歷數據創建頁面
			for(var i =0;i<pageArray.length;i++){
				var page = pageArray[i];
				// 創建一個頁面
				var newPage = plus.webview.create(page,page,styles);
				// 給當前頁面添加一個子界面
				var cpage = plus.webview.currentWebview();
				cpage.append(newPage);
				// 隱藏其他頁面
				if(i != 0){
					newPage.hide();
				}
			};
			// 綁定點擊事件
			mui("nav").on('tap','a',function(){
				// 獲取點擊節點的id
				var id = this.getAttribute("id");
				// 根據id獲取頁面
				var pageId = pageArray[id];
				// 根據頁面id找到頁面對象
				plus.webview.getWebviewById(pageId).show();
			}) 
		})
    </script>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" id="0"  style="touch-action: none;">
			<span class="mui-icon mui-icon-weixin"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" id="1"  style="touch-action: none;"> 
			<span class="mui-icon mui-icon-contact" ></span>
			<span class="mui-tab-label">好友</span>
		</a>
		<a class="mui-tab-item" id="2"  style="touch-action: none;">
			<span class="mui-icon mui-icon-navigate" ></span>
			<span class="mui-tab-label">發現</span>
		</a>
		<a class="mui-tab-item"  id="3"  style="touch-action: none;">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
</body>
</html>

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"
}

2.3 me.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				// 獲取登錄中的user
				var user = util.getUser();
				// 設置基本信息
				document.getElementById("username").innerText = user.username;
				document.getElementById("nickname").innerText = user.nickname;
				// 修改大頭像的話也要修改小頭像
				updateMinHead();
				// 點擊上傳圖片
			    document.getElementById("min_head_but").addEventListener("tap",function(){
					// 打開頭像的展示頁面
					plus.webview.open("showHead.html","showHead.html");
				});
				// 註銷賬號
				document.getElementById("logout_but").addEventListener("tap",function(){
					// 把本地的用戶設置爲空
					util.setUser(null);
					var cpage = plus.webview.currentWebview();
					plus.webview.open("login.html","login.html");
					cpage.close();
				})
			});
			// 修改大頭像的話也要修改小頭像
			function updateMinHead(){
				var user = util.getUser();
				if(user.minHead != null){
					document.getElementById("minHead").src = user.minHead;
				}
			}
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">我的</h1>
		</header>
		<ul class="mui-table-view" style="margin-top: 50px;">
			<li class="mui-table-view-cell mui-media" id="min_head_but">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-right" id="minHead" src="image/myheader.png">
					<div class="mui-media-body" style="line-height: 40px;">
						頭像
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<span class="mui-pull-right" id="username"></span>
					<div class="mui-media-body" >
						用戶名   
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<span class="mui-pull-right" id="nickname"></span>
					<div class="mui-media-body">
					    暱稱
					</div>
				</a>
			</li>
		</ul>
		<ul class="mui-table-view" style="margin-top: 30px;">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<div class="mui-media-body" id="logout_but" style="color: red;text-align: center;">
						註銷賬戶
					</div>
				</a>
			</li>
		</ul>
	</body>
</html>

2.4 shopHead.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin-utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				// 獲取當前登錄的用戶
				var user = util.getUser();
				// 判斷是否有頭xiang像
				if(user.maxHead != null){
					document.getElementById("showMaxHead").src = user.maxHead;
				}
				// 點擊上傳
			    document.getElementById("upload_but").addEventListener("tap",function(){
					// 打開本地相冊
					plus.gallery.pick(function(path) {
						// 創建一個上傳任務對象
						var task = plus.uploader.createUpload(url.upload_head_url, {}, function(t, status) {
								// 因爲返回的字符串，所以需要轉成JSON對象
								var resp = JSON.parse(t.responseText);
								// 上傳完成
								if(resp.code == "ok"){
									var maxHead = resp.data.maxHead;
									var minHead = resp.data.minHead;
									// 顯示用戶上傳的頭像
									document.getElementById("showMaxHead").src = maxHead;
									// 修改本機中的用戶信息
									user.maxHead = maxHead;
									user.minHead = minHead;
									// 保存
									util.setUser(user);
									// 按一次返回鍵
									mui.back();
									//指定調用某個頁面中的某個函數
									plus.webview.getWebviewById("me.html").evalJS("updateMinHead()");
								}else{
									plus.nativeUI.toast("上傳失敗");
								}
							}
						);
						// 添加上傳的文件
						task.addFile(path, {key:"file"});
						// 設置其他的參數
						task.addData("userId",user.id+"");
						// 啓動上傳任務
						task.start();
					});
				})
			})
		</script>
	</head>
	<body style="text-align: center;">
		<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>
		<img  id="showMaxHead" src="image/myheader.png" style="margin-top: 60px;width: 300px;"/>
		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可選擇菜單 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell" id="upload_but">
				<a href="#">從相冊選擇</a>
			  </li>
			  <li class="mui-table-view-cell">
				<a href="#">拍照</a>
			  </li>
			</ul>
			<!-- 取消菜單 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell">
				<a href="#sheet1"><b>取消</b></a>
			  </li>
			</ul>
		</div>
		<a href="#sheet" id="openSheet"  class="mui-btn mui-btn-primary mui-btn-block">上傳頭像</a>
	</body>
</html>

3. 添加好友-後端

3.1 weixin-user的UserController添加方法

/**
 * 主要頁面來調用
 * @param username
 * @return
 */
@RequestMapping(value = "/getUserByUsername")
public ResultEntity getUserByUsername(String username){
    User user = userService.getUserByUsername(username);
    return ResultEntity.success(user);
}

/**
 * 讓其他微服務調用
 * @param username
 * @return 用戶對象
 */
@RequestMapping(value = "/findUserByUsername")
public User findUserByUsername(String username){
    if(!StringUtils.isEmpty(username)){
        return userService.getUserByUsername(username);
    }
    return null;
}

3.2 weixin-entity編寫FriendApply類

package com.wpj.entity;

import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
import java.util.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("t_friend_apply")
public class FriendApply implements Serializable {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private Integer fid;
    private Integer tid;
    private String msg;
    @TableField(value = "create_time")
    private Date createTime;
    private Integer status;
}

3.3 weixin-service-api編寫Service接口

package com.wpj.service;

import com.wpj.entity.FriendApply;

public interface IFriendApplyService extends IBaseService<FriendApply> {
}

3.4 weixin-web新建項目weixin-friend（module-springboot）

3.4.1 導包

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-config</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
<dependency>
    <groupId>com.wpj</groupId>
    <artifactId>wx-common</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>com.wpj</groupId>
    <artifactId>weixin-service-api</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.8</version>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>2.3</version>
</dependency>
<dependency>
	<groupId>org.springframework.cloud</groupId>
	<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>

3.4.2 編寫Mapper接口

package com.wpj.mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.wpj.entity.FriendApply;

public interface IFriendApplyMapper extends BaseMapper<FriendApply> {
}

3.4.3 編寫ServiceImpl實現類

package com.wpj.service.impl;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.wpj.entity.FriendApply;
import com.wpj.mapper.IFriendApplyMapper;
import com.wpj.service.IFriendApplyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class FriendApplyServiceImpl extends BaseServiceImpl<FriendApply> implements IFriendApplyService {
    @Autowired
    private IFriendApplyMapper friendApplyMapper;
    @Override
    public BaseMapper<FriendApply> getMapper() {
        return friendApplyMapper;
    }
}

3.4.4 編寫UserService接口

package com.wpj.service.api;

import com.wpj.entity.User;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@FeignClient("WX-USER")
public interface IUserService {
    
    @RequestMapping(value = "/user/findUserByUsername")
    public User findUserByUsername(@RequestParam("username") String username);

}

3.4.5 編寫Controller

package com.wpj.controller;

import com.wpj.entity.FriendApply;
import com.wpj.entity.User;
import com.wpj.entity.base.ResultEntity;
import com.wpj.service.IFriendApplyService;
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.Date;

@RestController
@RequestMapping(value = "/friendApply")
public class FriendApplyController {
    @Autowired
    private IFriendApplyService friendApplyService;
    @Autowired
    private IUserService userService;

    @RequestMapping(value = "/addFriendApply")
    public ResultEntity addFriendApply(FriendApply friendApply, String username) {
        // 根據用戶名稱查詢對象
        User user = userService.findUserByUsername(username);
        if (user != null) {
            friendApply.setTid(user.getId());
            friendApply.setCreateTime(new Date());
            friendApply.setStatus(1);
            friendApplyService.insert(friendApply);
            return ResultEntity.success();
        } else {
            return ResultEntity.error("沒有找到: " + username);
        }
    }
}

3.4.6 編寫bootstrap.yml

spring:
  cloud:
    config:
      uri: http://localhost:8081
      name: application
      profile: friend,euclient,datasource # datasource後面抽取配置需要引入

3.4.7 修改程序入口

package com.wpj;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
import org.springframework.cloud.openfeign.EnableFeignClients;

@EnableEurekaClient
@EnableFeignClients("com.wpj.service.api")
@SpringBootApplication(scanBasePackages = "com.wpj")
@MapperScan(basePackages = "com.wpj.mapper")
public class WeixinFriendApplication {

    public static void main(String[] args) {
        SpringApplication.run(WeixinFriendApplication.class, args);
    }
}

3.5 抽取DataSource配置

3.5.1 weixin-config-server/config添加application-datasource.xml

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/nz1904-springcloud-weixin

mybatis-plus:
  type-aliases-package: com.wpj.entity

3.5.2 用到datasource配置的yml可以刪除這段配置

3.5.3 用到datasource的模塊引入該配置文件

spring:
  cloud:
    config:
      uri: http://localhost:8081
      name: application
      profile: user,euclient,datasource
fdfs:
  so-timeout: 2000
  connect-timeout: 2000
  thumb-image:
    width: 100
    height: 100
  tracker-list:
    - 192.168.59.100:22122
fastpath: http://192.168.59.100:8080/

3.6 weixin-config-server/config添加application-friend.yml

server:
  port: 8083
spring:
  application:
    name: wx-friend

3.7 weixin-config-server/config修改application-gateway.yml

server:
  port: 8888
spring:
  application:
    name: wx-gateway
  cloud:
    gateway:
      routes:
        - id: wx-user
          uri: lb://WX-USER
          predicates:
            - Path=/user/**,/res/**
        - id: wx-user
          uri: lb://WX-FRIEND
          predicates:
            - Path=/friendapply/**

4. 添加好友-前端

4.1 修改weixin-utils.js

window.util={
	ajax:function(param){
		plus.nativeUI.showWaiting(); // 顯示等待的圈
		mui.ajax(param.url,{
			data:param.data,
			dataType:'json',//服務器返回json格式數據
			type:'post',//HTTP請求類型
			success:function(data){
				plus.nativeUI.closeWaiting();
				param.success(data);
			},
			error:function(xhr,type,errorThrown){
				plus.nativeUI.closeWaiting();
				//異常處理；
				plus.nativeUI.toast("服務端出現異常。");
			}
		});
	},
	setUser:function(user){
		plus.storage.setItem("login_user",JSON.stringify(user));	// 設置value的是字符串
	},
	getUser:function(){
		return JSON.parse(plus.storage.getItem("login_user"));  // 方便後期操作 取出時轉成JSON對象
	}
	
}
// cmd --> ipconfig --> IPv4地址 192.168.91.1
window.ip={
	serverip:"http://192.168.91.1:8888/"
}
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"
}

4.2 添加discover.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				document.getElementById("addFriend_but").addEventListener("tap",function(){
					// 打卡好友的搜索頁面
					plus.webview.open("searchFriend.html","searchFriend.html");
				});
			})
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">發現</h1>
		</header>
		<ul class="mui-table-view" style="margin-top:50px;">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="image/pengyouquan.png">
					<div class="mui-media-body" style="line-height: 50px;">
						朋友圈
					</div>
				</a>
			</li>
		</ul>
		
		<ul class="mui-table-view" style="margin-top: 40px;">
			<li class="mui-table-view-cell mui-media" id="addFriend_but">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="image/addfriend.png">
					<div class="mui-media-body"  style="line-height: 40px;">
						添加好友
					</div>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media" id="newFriend_but">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="image/newfriend.png">
					<div class="mui-media-body"  style="line-height: 40px;">
						新好友
					</div>
				</a>
			</li>
			
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="image/saoyisao.png">
					<div class="mui-media-body"  style="line-height: 40px;">
						掃一掃
					</div>
				</a>
			</li>
		</ul>
	</body>
</html>

4.3 添加searcherFriend.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				document.getElementById("seaerchfriend_but").addEventListener("tap",function(){
					// 獲取用戶輸入值
					var username = document.getElementById("username").value;
					mui.openWindow({
						url:'searchResult.html',
						id: 'searchResult.html',
						extras:{ // 參數
							"username":username  //擴展參數
						}
					});
				})
			})
		</script>
	</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 style=" margin-top: 50px;">
			<input type="text" id="username"/>
			<div class="mui-button-row">
				<button type="button"  id="seaerchfriend_but" class="mui-btn mui-btn-success" style="width: 80%;">搜索</button>
			</div>
		</div>
	</body>
</html>

4.4 添加searchResult.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin-utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
			    var username = plus.webview.currentWebview().username;
				util.ajax({
					url:url.getuserbyusername_url,
					data:{
						"username":username
					},
					success:function(resp){
						var user = resp.data;
						document.getElementById("username").innerText=user.username;
						document.getElementById("nickname").innerText=user.nickname;
						document.getElementById("minHead").src=user.minHead;
					}
				});
				document.getElementById("addFriend_but").addEventListener("tap",function(){
					// 打開好友認證頁面
					mui.openWindow({
						url:"friend_auth.html",
						id:"friend_auth.html",
						extras:{
							"username":username
						}
					})
				})
			})
		</script>
	</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>
		<ul class="mui-table-view" style="margin-top: 50px;">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" id="minHead" src="image/myheader.png">
					<div class="mui-media-body" id="username"></div>
					<div class="mui-media-body" id="nickname"></div>
				</a>
			</li>
		</ul>
		<div class="mui-button-row">
			<button type="button"  id="addFriend_but" class="mui-btn mui-btn-success" style="width: 80%;">添加好友</button>
		</div>
	</body>
</html>

4.5 添加friend_auth.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin-utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				// 獲取添加的好友名稱
			    var username = plus.webview.currentWebview().username; 
				document.getElementById("sendReq_but").addEventListener("tap",function(){
					// 驗證信息
					var content = document.getElementById("content").value;
					// 獲取當前登錄的用戶
					var user = util.getUser();
					// 封裝對象
					var param = new Object();
					param.fid = user.id;
					param.username = username;
					param.msg = content;
					// 發送請求
					util.ajax({
						url:url.friendapply_add_url,
						data:param,
						success:function(resp){
							console.info(JSON.stringify(resp))
							if(resp.code == "ok"){
								var cpage = plus.webview.currentWebview();
								plus.webview.open("discovery.html","discovery.html");
								cpage.close();
							}else{
								plus.nativeUI.toast(resp.msg);
							}
						}
					})
				})
			})
		</script>
	</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 style="margin-top: 50px;">
			<textarea id="content">我是。。。</textarea>
			<div class="mui-button-row">
				<button type="button"  id="sendReq_but" class="mui-btn mui-btn-success" style="width: 80%;">發送</button>
			</div>
		</div>
	</body>
</html>

5. 處理好友請求-後端

5.1 weixin-entity修改FriendApply

package com.wpj.entity;

import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
import java.util.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("t_friend_apply")
public class FriendApply implements Serializable {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private Integer fid;
    private Integer tid;
    private String msg;
    @TableField(value = "create_time")
    private Date createTime;
    private Integer status;
    @TableField(exist = false)
    private User friend;
}

5.2 編寫Friend

package com.wpj.entity;

import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.omg.CORBA.INTERNAL;
import org.springframework.beans.factory.annotation.Autowired;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("t_friend")
public class Friend {

    @TableId(type= IdType.AUTO)
    private Integer id;
    private Integer uid;
    private Integer fid;
    private Integer status;
    private String remark;
}

5.3 weixin-user修改UserController

package com.wpj.controller;

import com.wpj.entity.User;
import com.wpj.entity.base.ResultEntity;
import com.wpj.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/register")
    public ResultEntity register(User user){
        int insert = userService.register(user);
        if (insert == 1) {
            return ResultEntity.error("用戶名存在");
        } else if (insert == 2) {
            return ResultEntity.error("手機號碼存在");
        }
        return ResultEntity.success();
    }

    @RequestMapping("/login")
    public ResultEntity login(String username, String password){
        User user = userService.getUserByUsername(username);
        if(user != null && user.getPassword().equals(password)) {
            user.setPassword(null); // 密碼不能寫到手機裏
            System.out.println(user);
            return ResultEntity.success(user);
        } else{
            return ResultEntity.error("用戶名或密碼錯誤");
        }
    }

    @RequestMapping(value = "/test")
    public ResultEntity test(@CookieValue(name = "name",required = false) String name, HttpServletResponse resp){
        System.out.println("name = [" + name + "]");
        Cookie cookie = new Cookie("name","admin");
        cookie.setMaxAge(10000);
        cookie.setPath("/");
        resp.addCookie(cookie);
        return ResultEntity.success();
    }

    /**
     * 主要頁面來調用
     * @param username
     * @return
     */
    @RequestMapping(value = "/getUserByUsername")
    public ResultEntity getUserByUsername(String username){
        User user = userService.getUserByUsername(username);
        return ResultEntity.success(user);
    }

    /**
     * 讓其他微服務調用
     * @param username
     * @return 用戶對象
     */
    @RequestMapping(value = "/findUserByUsername")
    public User findUserByUsername(String username){
        if(!StringUtils.isEmpty(username)){
            return userService.getUserByUsername(username);
        }
        return null;
    }
    @RequestMapping(value = "/getUserById")
    public User getUserById(Integer id){
        if(id != null){
            return userService.selectById(id);
        }
        return null;
    }

    @RequestMapping(value = "/findUserById")
    public ResultEntity findUserById(Integer id){
        User user = userService.selectById(id);
        return ResultEntity.success(user);
    }
}

5.4 weixin-service-api添加FriendService和修改FriendApplyService

package com.wpj.service;

import com.wpj.entity.Friend;

public interface IFriendService extends IBaseService<Friend> {
    void addFriend(Integer tid, Integer fid, int i);
}

package com.wpj.service;

import com.wpj.entity.FriendApply;

import java.util.List;

public interface IFriendApplyService extends IBaseService<FriendApply> {
    List<FriendApply> getMyFriendApplyList(Integer uid);
}

5.5 weixin-friend重寫方法

package com.wpj.service.impl;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.wpj.entity.FriendApply;
import com.wpj.mapper.IFriendApplyMapper;
import com.wpj.service.IFriendApplyService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class FriendApplyServiceImpl extends BaseServiceImpl<FriendApply> implements IFriendApplyService {

    @Autowired
    private IFriendApplyMapper friendApplyMapper;

    @Override
    public BaseMapper<FriendApply> getMapper() {
        return friendApplyMapper;
    }

    @Override
    public List<FriendApply> getMyFriendApplyList(Integer uid) {
        EntityWrapper wrapper = new EntityWrapper();
        wrapper.eq("tid",uid);
        return friendApplyMapper.selectList(wrapper);
    }
}

5.6 IUserService添加方法

package com.wpj.service.api;

import com.wpj.entity.User;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@FeignClient("WX-USER")
public interface IUserService {

    @RequestMapping(value = "/user/findUserByUsername")
    public User findUserByUsername(@RequestParam("username") String username);
    
    @RequestMapping(value = "/user/getUserById")
    public User getUserById(@RequestParam("id") Integer id);
}

5.7 編寫Mapper接口

package com.wpj.mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.wpj.entity.Friend;

public interface IFriendMapper extends BaseMapper<Friend> {
}

5.8 編寫ServiceImpl實現類

package com.wpj.service.impl;

import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.wpj.entity.Friend;
import com.wpj.mapper.IFriendMapper;
import com.wpj.service.IFriendService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class FriendServiceImpl extends BaseServiceImpl<Friend> implements IFriendService {

    @Autowired
    private IFriendMapper friendMapper;

    @Override
    public BaseMapper<Friend> getMapper() {
        return friendMapper;
    }

    @Override
    public void addFriend(Integer tid, Integer fid, int i) {
        Friend friend1 = new Friend();
        friend1.setUid(tid);
        friend1.setFid(fid);
        friend1.setStatus(1);
        if (isFriend(friend1)) {
            friendMapper.insert(friend1);
        }
        
        Friend friend2 = new Friend();
        friend2.setUid(fid);
        friend2.setFid(tid);
        friend2.setStatus(1);
        if (isFriend(friend2)) {
            friendMapper.insert(friend2);
        }
    }
    
    public boolean isFriend(Friend friend) {
        return friendMapper.selectOne(friend) == null;
    }
}

5.9 FriendApplyController添加方法

package com.wpj.controller;

import com.wpj.entity.FriendApply;
import com.wpj.entity.User;
import com.wpj.entity.base.ResultEntity;
import com.wpj.mapper.IFriendMapper;
import com.wpj.service.IFriendApplyService;
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.Date;
import java.util.List;

@RestController
@RequestMapping(value = "/friendApply")
public class FriendApplyController {
    @Autowired
    private IFriendApplyService friendApplyService;
    @Autowired
    private IUserService userService;
    @Autowired
    private IFriendService friendService;

    @RequestMapping(value = "/addFriendApply")
    public ResultEntity addFriendApply(FriendApply friendApply, String username) {
        // 根據用戶名稱查詢對象
        User user = userService.findUserByUsername(username);
        if (user.getId() == friendApply.getFid()) {
            return ResultEntity.error("不能添加自己爲好友");
        }
        if (user != null) {
            friendApply.setTid(user.getId());
            friendApply.setCreateTime(new Date());
            friendApply.setStatus(1);
            friendApplyService.insert(friendApply);
            return ResultEntity.success();
        } else {
            return ResultEntity.error("沒有找到: " + username);
        }
    }
    @RequestMapping(value = "/getMyFriendApplyList")
    public ResultEntity getMyFriendApplyList(Integer uid) {
        List<FriendApply> friendApplyList = friendApplyService.getMyFriendApplyList(uid);
        for (FriendApply friendApply : friendApplyList) {
            Integer fid = friendApply.getFid();
            User user = userService.getUserById(fid);
            friendApply.setFriend(user);
        }
        return ResultEntity.success(friendApplyList);
    }
    // 如果是拒絕只修改狀態就可以
    // 如果是同意，修改狀態並且還要添加好友
    @RequestMapping(value = "/updateFriendApplyStatus")
    public ResultEntity updateFriendApplyStatus(Integer status, Integer id) {
        // 根據id查詢申請記錄對象
        FriendApply friendApply = friendApplyService.selectById(id);
        friendApply.setStatus(status);
        friendApplyService.update(friendApply);
        if (status == 2) { // 說明同意
            // 添加好友
            friendService.addFriend(friendApply.getTid(), friendApply.getFid(), 1);
        }
        return ResultEntity.success();
    }

}

6. 處理好友請求-前端

6.1 修改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"
}

6.2 discovery.html添加點擊事件

mui.plusReady(function () {
	document.getElementById("addFriend_but").addEventListener("tap",function(){
		// 打卡好友的搜索頁面
		plus.webview.open("searchFriend.html","searchFriend.html");
	});
	
	document.getElementById("newFriend_but").addEventListener("tap",function(){
		plus.webview.open("showNewFriendList.html","showNewFriendList.html");
	})
})

6.3 編寫showNewFriendList.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin-utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
			    var user = util.getUser();
				
				util.ajax({
					url:url.getMyFriendApplyList_url,
					data:{
						"uid":user.id
					},
					success:function(resp){
						console.info(JSON.stringify(resp));
						if(resp.code == "ok"){
							var nfList = resp.data;
							var html = "";
							for(var i = 0;i<nfList.length;i++){
								var newF = nfList[i];
								html +='<li class="mui-table-view-cell mui-media">';
								html +='<a href="javascript:;">';
								
								if(newF.friend.minHead != null){
									html +='<img class="mui-media-object mui-pull-left" src="'+newF.friend.minHead+'">';
								}else{
									html +='<img class="mui-media-object mui-pull-left" src="image/myheader.png">';
								}
								html +='<div class="mui-media-body">';
								html +=newF.friend.nickname;
								html +='</div>';
								html +='<div class="mui-media-body">';
								html +=newF.msg;
								html +='</div>';
								html +='</a>';
								if(newF.status == 1){
									html +='<button type="button" id="'+newF.id+'"  num="2"  class="mui-btn mui-btn-success" style="width: 15%;right: 100px;">接收</button>';
									html +='<button type="button" id="'+newF.id+'"  num = "3" class="mui-btn mui-btn-danger" style="width: 15%;">拒絕</button>';
								}else if(newF.status == 2){
									html +='<button type="button"  class="mui-btn mui-btn-success" style="width: 15%;right: 100px;">已接受</button>';
								}else if(newF.status == 3){
									html +='<button type="button"  class="mui-btn mui-btn-success" style="width: 15%;right: 100px;">已拒絕</button>';
								}
								html +='</li>';
							}
							document.getElementById("showNFList").innerHTML=html;
						}
					}
				});
				mui.plusReady(function () {
				    mui(".mui-table-view").on('tap','.mui-btn',function(){
						var status = this.getAttribute("num");
						var fapplyId = this.getAttribute("id");
						
						util.ajax({
							url:url.updateFriendApplyStatus_url,
							data:{
								"status":status,
								"id":fapplyId
							},
							success:function(resp){
								location.reload();
								console.info(JSON.stringify(resp))
							}
						});
				    }) 
				})
			})
		</script>
	</head>
	<body>
		<ul class="mui-table-view" id="showNFList">	
		</ul>
	</body>
</html>