“发现页面”

musicBackend/src/main/java/com/cph/musicbackend/config/WebSocketConfig.java

@@ -12,7 +12,8 @@ public class WebSocketConfig implements WebSocketConfigurer {
 
     @Override
     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
-        registry.addHandler(new ChatWebSocketHandler(), "/api/chat")
+        registry.addHandler(new ChatWebSocketHandler(), "/chat")
                 .setAllowedOrigins("*"); // 允许跨域请求，可以根据需要配置
+
     }
 }

musicBackend/src/main/java/com/cph/musicbackend/controller/PostsController.java

@@ -0,0 +1,42 @@
+package com.cph.musicbackend.controller;
+
+import com.cph.musicbackend.aspect.RecognizeAddress;
+import com.cph.musicbackend.aspect.UserContext;
+import com.cph.musicbackend.common.CommonResult;
+import com.cph.musicbackend.entity.Posts;
+import com.cph.musicbackend.entity.User;
+import com.cph.musicbackend.mapper.PostsMapper;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@RestController
+public class PostsController {
+
+    @Autowired
+    PostsMapper postMapper;
+
+    @PostMapping("/api/posts")
+    @RecognizeAddress
+    public CommonResult getPosts(){
+        User currentUser = UserContext.getCurrentUser();
+        List<Posts> posts = postMapper.getUserPosts(currentUser);
+        posts.stream().forEach(p->{
+            p.setImages(Arrays.asList(p.getMedia().split(",")));
+        });
+        return new CommonResult(200,"查询成功",posts);
+    }
+
+    @PostMapping("/api/likePost")
+    @RecognizeAddress
+    public CommonResult like(@RequestBody Posts p){
+        User currentUser = UserContext.getCurrentUser();
+         postMapper.like(currentUser,p);
+        return new CommonResult(200,"操作成功",null);
+    }
+}

musicBackend/src/main/java/com/cph/musicbackend/entity/Posts.java

@@ -0,0 +1,33 @@
+package com.cph.musicbackend.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableField;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.experimental.Accessors;
+
+import java.util.Date;
+import java.util.List;
+
+@Data
+@Accessors(chain = true)
+@TableName("posts")
+public class Posts {
+
+    @TableId(type = IdType.AUTO, value = "id")
+    private Integer id;
+    private Integer userId;
+    private Date createdTime;
+    private String media;
+    private String content;
+
+    private String userIcon;
+    private String userNickname;
+
+    @TableField(exist = false)
+    private Integer isLike;
+    @TableField(exist = false)
+    private List<String> images;
+
+}

musicBackend/src/main/java/com/cph/musicbackend/mapper/PostsMapper.java

@@ -0,0 +1,17 @@
+package com.cph.musicbackend.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.cph.musicbackend.entity.Music;
+import com.cph.musicbackend.entity.Posts;
+import com.cph.musicbackend.entity.User;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+@Mapper
+public interface PostsMapper extends BaseMapper<Posts> {
+    public List<Posts> getUserPosts(@Param("u") User user);
+
+    public void like(@Param("u") User user, @Param("p") Posts p);
+}

musicBackend/src/main/resources/mybatis/PostsMapper.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.cph.musicbackend.mapper.PostsMapper">
+
+
+    <resultMap id="BaseResultMap" type="com.cph.musicbackend.entity.Posts">
+        <id column="id" property="id" jdbcType="INTEGER"/>
+        <result column="user_id" property="userId" jdbcType="INTEGER"/>
+        <result column="created_time" property="createdTime" jdbcType="DATE"/>
+        <result column="media" property="media" jdbcType="VARCHAR"/>
+        <result column="content" property="content" jdbcType="VARCHAR"/>
+        <result column="user_icon" property="userIcon" jdbcType="VARCHAR"/>
+        <result column="user_nickname" property="userNickname" jdbcType="VARCHAR"/>
+        <result column="is_like" property="isLike" jdbcType="INTEGER"/>
+    </resultMap>
+
+
+    <select id="getUserPosts" resultMap="BaseResultMap">
+        select a.id            id,
+               a.user_id       user_id,
+               a.created_time  created_time,
+               a.media         media,
+               a.content       content,
+               a.user_icon     user_icon,
+               a.user_nickname user_nickname,
+               b.is_like       is_like
+        from posts a
+                 left join user_posts b
+                           on a.id = b.post_id and b.user_id = #{u.id}
+    </select>
+
+
+    <update id="like">
+        update user_posts
+        set is_like = #{p.isLike}
+        where user_id = #{u.id}
+          and post_id = #{p.id}
+    </update>
+</mapper>

package.json

@@ -15,6 +15,7 @@
     "react-audio-player": "^0.17.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "react-swipeable": "^7.0.1",
     "react-vant": "^3.3.5",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -3,7 +3,7 @@
 import './App.css';
 import 'react-vant/es/styles';
 import Home from './components/Home.tsx';
-import SearchPage from './components/SearchPage.tsx';
+import Discovery from './components/Discovery.tsx';
 import Chat from './components/Chat.tsx';
 import Profile from './components/Profile.tsx';
 import React, { useState, useEffect } from 'react';
@@ -80,7 +80,7 @@ function App() {
       case 'home':
         return <Home userinfo={userinfo} setUserinfo={setUserinfo} />;
       case 'search':
-        return <SearchPage />;
+        return <Discovery />;
       case 'chat':
         return <Chat userinfo={userinfo} />;
       case 'profile':
@@ -175,7 +175,7 @@ function App() {
           首页
         </Tabbar.Item>
         <Tabbar.Item icon={<Search />} name="search" badge={{ dot: true }}>
-          搜索
+          发现
         </Tabbar.Item>
         <Tabbar.Item icon={<FriendsO />} name="chat" badge={{ content: 5 }}>
           聊天

src/components/Chat.css

@@ -1,18 +1,82 @@
-.chat-box {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to bottom, #DDA0DD, #FFB6C1);
+.chat-input-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 10px;
+    background-color: #fff;
+    border-top: 1px solid #eaeaea;
 }
 
-html,
-body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+.chat-input {
+    flex: 1;
+    margin-right: 10px;
+    border-radius: 20px;
+    border: 1px solid #eaeaea;
+    padding: 8px 12px;
+    font-size: 14px;
 }
-.chat-header{
-    padding: 2px;
-    /* margin-top: 2%; */
+
+.send-button {
+    margin-left: 10px;
+    background-color: #007bff;
+    border-color: #007bff;
+    color: #fff;
+    border-radius: 20px;
+}
+
+.emoji-picker-wrapper {
+    position: absolute;
+    bottom: 60px;
+    /* 确保不会挡住输入框 */
+    right: 10px;
+    z-index: 10;
+    background-color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+}
+
+.emoji-icon {
+    margin-right: 10px;
+    cursor: pointer;
+    color: #888;
+}
+
+.emoji-icon:hover {
+    color: #007bff;
 }
-.list-container {
+
+.chat-header {
+    background-color: #f0f0f0;
+    /* 顶部背景色 */
+    padding: 15px;
+    /* 增加内边距，调整顶部区域的高度 */
+    min-height: 60px;
+    /* 设置最小高度 */
+    border-bottom: 1px solid #eaeaea;
+    /* 添加下边框 */
+    display: flex;
+    /* 使用 flex 布局 */
+    align-items: center;
+    /* 垂直居中对齐 */
+}
+
+.chat-header .badge {
+    margin-right: 10px;
+    /* Badge 和 nickname 之间的间距 */
+}
+
+.chat-header .nickname {
+    font-size: 18px;
+    /* 增加昵称字体大小 */
+    color: #333;
+    /* 字体颜色 */
+    font-weight: bold;
+    /* 加粗字体 */
+}
+
+.chat-header .nickname-container {
+    display: flex;
+    /* 使用 flex 布局 */
+    flex-direction: column;
+    /* 纵向排列 */
 }

src/components/Chat.tsx

@@ -22,7 +22,11 @@ function Chat({ userinfo }) {
     useEffect(() => {
         if (!userinfo || !userinfo.id) return;
 
-        const ws = new WebSocket(`ws://localhost:8809/api/chat?userId=${userinfo.id}`);
+        const ws = new WebSocket(`wss://app102.acapp.acwing.com.cn/chat?userId=${userinfo.id}`);
+        // wss://app102.acapp.acwing.com.cn/chat?userId=49
+        // const ws = new WebSocket(`ws://39.100.90.48:8809/chat?userId=${userinfo.id}`);
+        // const ws = new WebSocket(`ws://localhost:8809/chat?userId=${userinfo.id}`);
+
 
         ws.onopen = () => {
             console.log('WebSocket connected');
@@ -116,16 +120,18 @@ function Chat({ userinfo }) {
             {!chatState && (
                 <div className='chat-box'>
                     <div className='chat-header'>
-                        <Flex justify='between' align='center'>
-                            <Flex.Item span={12}>
-                                <Badge dot offset={['50%', '100%']} color="#87d068">
-                                    <Image round fit='cover' width='50%' height='50%' src={(userinfo && userinfo.cover) || defaultIcon} />
+                        <Flex justify='start' align='center'>
+                            <Flex.Item span={4} className="badge">
+                                <Badge dot offset={['0%', '100%']} color="#87d068">
+                                    <Image round fit='cover' width='100%' height='100%' src={(userinfo && userinfo.cover) || defaultIcon} />
                                 </Badge>
-                                <span style={{ position: "absolute", top: '85%', left: '38%', fontSize: '15px' }}>{userinfo.nickname}</span>
                             </Flex.Item>
-                            <Flex.Item span={12}></Flex.Item>
+                            <Flex.Item span={8} className="nickname-container">
+                                <span className="nickname">{userinfo.nickname}</span>
+                            </Flex.Item>
                         </Flex>
                     </div>
+
                     <div className='list-container'>
                         <PullRefresh onRefresh={onRefresh}>
                             <List finished={finish} onLoad={onLoadRefresh}>
@@ -134,8 +140,9 @@ function Chat({ userinfo }) {
                                         key={message[message.length - 1].id}
                                         title={userinfo.id === message[message.length - 1].fromId ? message[message.length - 1].toNickname : message[message.length - 1].fromNickname}
                                         label={message[message.length - 1].message}
-                                        icon={<img src={userinfo.id === message[message.length - 1].fromId ? message[message.length - 1].toIcon : message[message.length - 1].fromIcon} alt="from" style={{ width: 30, height: 30, borderRadius: '50%' }} />}
+                                        icon={<img src={userinfo.id === message[message.length - 1].fromId ? message[message.length - 1].toIcon : message[message.length - 1].fromIcon} alt="from" className="cell-icon" />}
                                         value={message[message.length - 1].showTime}
+                                        className={userinfo.id === message[message.length - 1].fromId ? "cell-sent" : "cell-received"}
                                         onClick={() => handleClickMessage(message)}
                                     />
                                 ))}