提交本地代码

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+#上传的时候不会上传/node_modules文件夹的意思
 /node_modules
 /.pnp
 .pnp.js

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/App.js

@@ -1,23 +1,17 @@
-import logo from './logo.svg';
-import './App.css';
+import ChatRoom from './subcomponents/ChatRoom/chatRoom'
+import ListContainer from './subcomponents/ListContainer/listContainer'
+import SideNavBar from './subcomponents/SideNavBar/sideNavBar'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div className="background">
+        <div className="container">
+          <SideNavBar />
+          <ListContainer />
+          <ChatRoom />
+        </div>
+      </div>
     </div>
   );
 }

src/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
+import './static/css/public.css'
+import './static/css/common.css'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +12,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+

src/mock/data/chatList.js

@@ -0,0 +1,106 @@
+const Mock = require('mockjs')
+const Random = Mock.Random;
+
+const chatList = [
+    {
+        id:1,
+        type:'group',
+        img:Random.image('200x200','#ffcc33'),
+        title:'小黑的群组',
+        msg:'可爱多:[动画表情]',
+        time:'2/16'
+    },
+    {
+        id:2,
+        type:'group',
+        img:Random.image('200x200','#EFF1F3'),
+        title:'一只菜喵',
+        msg:'',
+        time:'1/15'
+    },
+    {
+        id:3,
+        type:'group',
+        img:Random.image('200x200','#F7DE1F'),
+        title:'孤独的狼',
+        msg:'',
+        time:'1/14'
+    },
+    {
+        id:4,
+        type:'group',
+        img:Random.image('200x200','#D09000'),
+        title:'桃子的聊天室',
+        msg:'',
+        time:'1/14'
+    },
+    {
+        id:5,
+        type:'group',
+        img:Random.image('200x200','#ffcc33'),
+        title:'小黑的群组',
+        msg:'可爱多:[动画表情]',
+        time:'2/16'
+    },
+    {
+        id:6,
+        type:'group',
+        img:Random.image('200x200','#EFF1F3'),
+        title:'一只菜喵',
+        msg:'',
+        time:'1/15'
+    },
+    {
+        id:7,
+        type:'group',
+        img:Random.image('200x200','#F7DE1F'),
+        title:'孤独的狼',
+        msg:'',
+        time:'1/14'
+    },
+    {
+        id:8,
+        type:'group',
+        img:Random.image('200x200','#D09000'),
+        title:'桃子的聊天室',
+        msg:'',
+        time:'1/14'
+    },
+    {
+        id:9,
+        type:'group',
+        img:Random.image('200x200','#ffcc33'),
+        title:'小黑的群组',
+        msg:'可爱多:[动画表情]',
+        time:'2/16'
+    },
+    {
+        id:10,
+        type:'group',
+        img:Random.image('200x200','#EFF1F3'),
+        title:'一只菜喵',
+        msg:'',
+        time:'1/15'
+    },
+    {
+        id:11,
+        type:'group',
+        img:Random.image('200x200','#F7DE1F'),
+        title:'孤独的狼',
+        msg:'',
+        time:'1/14'
+    },
+    {
+        id:12,
+        type:'group',
+        img:Random.image('200x200','#D09000'),
+        title:'桃子的聊天室',
+        msg:'',
+        time:'1/14'
+    }
+]
+
+
+module.exports = {
+    chatList
+}

src/mock/index.js

@@ -0,0 +1,22 @@
+const Mock = require('mockjs')
+const express = require('express')
+const router = require('./router')
+
+
+const app = express()
+
+app.all('*', function(req, res, next) {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Headers", "X-Requested-With");
+    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
+    res.header("X-Powered-By",' 3.2.1')
+    res.header("Content-Type", "application/json;charset=utf-8");
+    next();
+});
+
+app.use('/',router);
+
+app.listen(3103,function(){
+    console.log('3103端口监听中...');
+})
+

src/mock/router.js

@@ -0,0 +1,15 @@
+const express = require('express')
+const router = express.Router()
+
+let chatData = require('./data/chatList')
+
+router.get('/api/chatList',(req,res) => {
+    // console.log(JSON.stringify(chatData.chatList))
+    res.send(JSON.stringify(chatData.chatList));
+})
+
+// router.get('/api/chatList',(req,res) => {
+//     res.send(JSON.stringify(chatData.chatList));
+// })
+
+module.exports = router;

src/static/css/common.css

@@ -0,0 +1,8 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+li{
+    list-style: none;
+}

src/static/css/public.css

@@ -0,0 +1,23 @@
+@import '../../static/iconfont/iconfont.css';
+
+
+.background{
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    background-color: #90B1A0;
+}
+.container{
+    display: flex;
+    position: absolute;
+    top: 5%;
+    left: 15%;
+    width: 70%;
+    height: 90%;
+    min-width: 800px;
+    background-color: #2B9E93;
+    border-radius: 20px;
+    overflow: hidden;
+    box-sizing: border-box;
+    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+}