Netty+SpringBoot+FastDFS+Html5實現聊天App詳解(二)
Netty+SpringBoot+FastDFS+Html5實現聊天App,專案介紹。
Netty+SpringBoot+FastDFS+Html5實現聊天App,專案github連結 。
本節主要講解聊天App PigChat中關於使用者資訊處理,以及檔案伺服器FastDFS的相關操作。
包含以下內容:
(1)註冊與登入功能
(2)檔案伺服器的配置
(3)上傳使用者頭像
(4)設定使用者暱稱
(5)使用者二維碼的生成與上傳
註冊與登入功能
自定義一個工具類IMoocJSONResult,是後端響應前端的資料結構。
包含下面三個屬性:
// 響應業務狀態 private Integer status; // 響應訊息 private String msg; // 響應中的資料 private Object data;
提供錯誤響應與正常響應的方法:
public static IMoocJSONResult ok(Object data) { return new IMoocJSONResult(data); } public static IMoocJSONResult ok() { return new IMoocJSONResult(null); } public static IMoocJSONResult errorMsg(String msg) { return new IMoocJSONResult(500, msg, null); } public static IMoocJSONResult errorMap(Object data) { return new IMoocJSONResult(501, "error", data); } public static IMoocJSONResult errorTokenMsg(String msg) { return new IMoocJSONResult(502, msg, null); } public static IMoocJSONResult errorException(String msg) { return new IMoocJSONResult(555, msg, null); }
根據資料庫所建的表建立對應的pojo包與mapper包,資料庫建表詳情
建立UserController方法,寫入進行註冊於登入處理的registOrLogin介面。
【0】前端傳入Users物件,首先判斷前端傳入的Users物件是否為空。
【1】然後通過userService的queryUsernameIsExist方法根據傳入的使用者名稱在資料庫中進行查詢。
【1.1】若該使用者存在則進行登入,通過userService的queryUserForLogin方法判斷前端傳入的使用者名稱與密碼試湊匹配,若匹配則登入成功,否則登入失敗。
【1.2】若該使用者不存在則記性註冊,根據前端傳入的資訊構建Users物件,通過userService的saveUser將其儲存入資料庫中。
【2】最後構造UsersVO物件,返回給前端。
注意:密碼需要使用MD5工具類進行加密後再儲存到資料庫中。
/** * @Description: 使用者註冊/登入 */ @PostMapping("/registOrLogin") public IMoocJSONResult registOrLogin(@RequestBody Users user) throws Exception { // 0. 判斷使用者名稱和密碼不能為空 if (StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) { return IMoocJSONResult.errorMsg("使用者名稱或密碼不能為空..."); } // 1. 判斷使用者名稱是否存在,如果存在就登入,如果不存在則註冊 boolean usernameIsExist = userService.queryUsernameIsExist(user.getUsername()); Users userResult = null; if (usernameIsExist) { // 1.1 登入 userResult = userService.queryUserForLogin(user.getUsername(), MD5Utils.getMD5Str(user.getPassword())); if (userResult == null) { return IMoocJSONResult.errorMsg("使用者名稱或密碼不正確..."); } } else { // 1.2 註冊 user.setNickname(user.getUsername()); user.setFaceImage(""); user.setFaceImageBig(""); user.setPassword(MD5Utils.getMD5Str(user.getPassword())); userResult = userService.saveUser(user); } // 2.構造UsersVO物件 UsersVO userVO = new UsersVO(); BeanUtils.copyProperties(userResult, userVO); return IMoocJSONResult.ok(userVO); }
檔案伺服器的配置
在linux中配置好檔案伺服器FastDFS後,需要在專案中新增如下配置:
(1)在Application同目錄下建立FastdfsImporter
package com.imooc; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.EnableMBeanExport; import org.springframework.context.annotation.Import; import org.springframework.jmx.support.RegistrationPolicy; import com.github.tobato.fastdfs.FdfsClientConfig; /** * 匯入FastDFS-Client元件 * * @author tobato * */ @Configuration @Import(FdfsClientConfig.class) // 解決jmx重複註冊bean的問題 @EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING) public class FastdfsImporter { // 匯入依賴元件 }
(2)在application.properties中新增如下配置:
fdfs.soTimeout=1501 fdfs.connectTimeout=601 fdfs.thumbImage.width=80 fdfs.thumbImage.height=80 # 192.168.1.70為Linux虛擬機器的ip地址 fdfs.trackerList[0]=192.168.1.70:22122
啟動服務命令:
/usr/bin/fdfs_trackerd /etc/fdfs/tracker.conf /usr/bin/fdfs_storaged /etc/fdfs/storage.conf #檢視服務啟動情況(23000/22122埠) netstat -lnp |grep fdfs cd /usr/local/nginx/sbin ./nginx
上傳使用者頭像
在UserController中新增上傳使用者頭像的uploadFaceBase64介面。
【1】前端傳入UserBO物件,首先獲取前端傳來的base64字串,並通過檔案工具類FileUtils的base64ToFile方法將其轉換成檔案物件儲存在本地。
【2】將檔案物件轉換成MultipartFile,並通過fastDFSClient的uploadBase64方法將其上傳到檔案伺服器fastDFS中,打印出伺服器返回的路徑,我們可以通過這個路徑訪問這張圖片。
【3】對返回的路徑進行切割後得到縮圖的路徑。
【4】更新資料庫中使用者頭像資訊。
/** * @Description: 上傳使用者頭像 */ @PostMapping("/uploadFaceBase64") public IMoocJSONResult uploadFaceBase64(@RequestBody UsersBO userBO) throws Exception { // 1. 獲取前端傳過來的base64字串, 然後轉換為檔案物件再上傳 String base64Data = userBO.getFaceData(); // 在本地儲存圖片的路徑 String userFacePath = "C:\\" + userBO.getUserId() + "userface64.png"; FileUtils.base64ToFile(userFacePath, base64Data); // 2.上傳檔案到fastdfs MultipartFile faceFile = FileUtils.fileToMultipart(userFacePath); String url = fastDFSClient.uploadBase64(faceFile); System.out.println(url); //"dhawuidhwaiuh3u89u98432.png" //"dhawuidhwaiuh3u89u98432_80x80.png" // 3.獲取縮圖的url String thump = "_80x80."; String arr[] = url.split("\\."); String thumpImgUrl = arr[0] + thump + arr[1]; // 4.更新使用者頭像 Users user = new Users(); user.setId(userBO.getUserId()); user.setFaceImage(thumpImgUrl); user.setFaceImageBig(url); Users result = userService.updateUserInfo(user); return IMoocJSONResult.ok(result); }
設定使用者暱稱
在UserController新增設定使用者暱稱的setNickname介面。
/** * @Description: 設定使用者暱稱 */ @PostMapping("/setNickname") public IMoocJSONResult setNickname(@RequestBody UsersBO userBO) throws Exception { Users user = new Users(); user.setId(userBO.getUserId()); user.setNickname(userBO.getNickname()); Users result = userService.updateUserInfo(user); return IMoocJSONResult.ok(result); }
使用者二維碼的生成與上傳
在UserServiceImpl中引入相關工具類與元件
//二維碼工具類 @Autowired private QRCodeUtils qrCodeUtils; //上傳檔案到fsatDFS需要的元件 @Autowired private FastDFSClient fastDFSClient;
在UserServiceImpl儲存使用者資訊的saveUser方法中需要為每一個使用者生成一個唯一的二維碼。
【1】通過二維碼工具類qrCodeUtils的createQRCode方法為每個使用者生成一個唯一的二維碼,第一個引數為生成的二維碼儲存的路徑,第二個引數為二維碼中儲存的資訊,然後將檔案轉成MultipartFile物件,方便上傳操作。
【2】通過fastDFSClient的uploadQRCode方法將二維碼圖片上傳到檔案伺服器中。
@Transactional(propagation = Propagation.REQUIRED) @Override public Users saveUser(Users user) { //生成唯一的id String userId = sid.nextShort(); // 1.為每個使用者生成一個唯一的二維碼 //本地用來儲存生成的二維碼圖片的路徑 String qrCodePath = "C://user" + userId + "qrcode.png"; // 掃描二維碼後得到的資訊:zhuzhu_qrcode:[username] qrCodeUtils.createQRCode(qrCodePath, "zhuzhu_qrcode:" + user.getUsername()); MultipartFile qrCodeFile = FileUtils.fileToMultipart(qrCodePath); //2.上傳檔案 String qrCodeUrl = ""; try { qrCodeUrl = fastDFSClient.uploadQRCode(qrCodeFile); } catch (IOException e) { e.printStackTrace(); } user.setQrcode(qrCodeUrl); user.setId(userId); userMapper.insert(user); return user; }