增加子分类后端代码

expressServer/routes/query.js

@@ -12,13 +12,9 @@ router.get('/queryType', (req, res) => {
                 err
             })
         }
-        const _result = result.slice().map(v => {JSON.parse(v.typeContent)})
         res.send({
             success: true,
-            data: {
-                ...result,
-                _result
-            }
+            data: result.map(v => ({...v, typeContent: JSON.parse(v.typeContent)}))
         })
     })
 });

expressServer/routes/users.js

@@ -12,14 +12,15 @@ router.get('/getUser', function (req, res, next) {
     let {userId} = req.cookies
     console.log(req.cookies)
     console.log('userId:',userId)
-    if (!userId) {
-        res.send({
-            success: false,
-            code: ErrorCode.USER_NOT_LOGIN,
-            data: '用户尚未登录'
-        })
-        return
-    }
+    userId = req.query.userId
+    // if (!userId) {
+    //     res.send({
+    //         success: false,
+    //         code: ErrorCode.USER_NOT_LOGIN,
+    //         data: '用户尚未登录'
+    //     })
+    //     return
+    // }
     const SQL = 'SELECT * FROM `user` WHERE `user`.uid = ?'
     Mysql.query(SQL, [userId], (err, result) => {
         if (err) {

src/component/ToolType/ToolType.jsx

@@ -2,36 +2,60 @@ import './ToolType.scss'
 import {useContext, useEffect, useState} from "react";
 import {Root} from "../../dataCenter/Root";
 import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
+import {Tabs} from "antd";
 
-function ToolType (props) {
+
+function ToolType(props) {
     const {dataCenter, fetchData, updateIndex, dispatch} = useContext(Root)
     const [typeId, setTypeId] = useState(2)
+    const {TabPane} = Tabs;
 
-    useEffect(()=>{
+    useEffect(() => {
         updateIndex()
-    },[typeId])
+    }, [typeId])
 
-    useEffect(()=>{
-        if (dataCenter.needUpdateIndex){
-            const _typeId = typeId === 'all' ? {} : typeId === 'follow' ? {isFollow:true,typeId: JSON.stringify(dataCenter.userInfo.follow)} : {typeId: typeId}
-            fetchData('/query/queryToolBox',_typeId,'toolBox').then(()=>dispatch(NEED_UPDATE_INDEX()))
+    useEffect(() => {
+        if (dataCenter.needUpdateIndex) {
+            const _typeId = typeId === 'all' ? {} : typeId === 'follow' ? {
+                isFollow: true,
+                typeId: JSON.stringify(dataCenter.userInfo.follow)
+            } : {typeId: typeId}
+            fetchData('/query/queryToolBox', _typeId, 'toolBox').then(() => dispatch(NEED_UPDATE_INDEX()))
         }
-    },[dataCenter.needUpdateIndex])
+    }, [dataCenter.needUpdateIndex])
+
+    console.log(dataCenter?.type?.filter(v => v.typeId === typeId))
 
     return (
-        <div className="tab-tool-type">
-                <div className={typeId === 'all' ?'item-tool-type item-tool-type-selected' :  'item-tool-type'} onClick={()=>setTypeId('all')}>工具</div>
-                <div className={typeId === 'follow' ?'item-tool-type item-tool-type-selected' :  'item-tool-type'} onClick={()=>setTypeId('follow')}>我的收藏</div>
-            {
-                dataCenter?.type?.length && dataCenter.type.map(v => {
-                    const classNameArr = ['item-tool-type ']
-                    if (v["typeId"] === typeId) classNameArr.push('item-tool-type-selected')
-                    return (
-                        <div key={v["typeId"] } className={classNameArr.join('')} onClick={()=>setTypeId(v["typeId"])}>{v.typeName}</div>
-                    )
-                })
-            }
-        </div>
+        <>
+            <div className="tab-tool-type">
+                <div className={typeId === 'all' ? 'item-tool-type item-tool-type-selected' : 'item-tool-type'}
+                     onClick={() => setTypeId('all')}>工具
+                </div>
+                <div className={typeId === 'follow' ? 'item-tool-type item-tool-type-selected' : 'item-tool-type'}
+                     onClick={() => setTypeId('follow')}>我的收藏
+                </div>
+                {
+                    dataCenter?.type?.length && dataCenter.type.map(v => {
+                        const classNameArr = ['item-tool-type ']
+                        if (v["typeId"] === typeId) classNameArr.push('item-tool-type-selected')
+                        return (
+                            <div key={v["typeId"]} className={classNameArr.join('')}
+                                 onClick={() => setTypeId(v["typeId"])}>{v.typeName}</div>
+                        )
+                    })
+                }
+            </div>
+            <div className="child-type">
+                {
+                    dataCenter?.type?.length && dataCenter.type.filter(v => v.typeId === typeId)[0].typeContent.map(v => {
+                        return (
+                            <div key={v.id} className="item-childType">{v.name}</div>
+                        )
+                    })
+                }
+            </div>
+        </>
     )
 }
 

src/component/ToolType/ToolType.scss

@@ -29,7 +29,7 @@
     }
 }
 
-.childType{
+.child-type{
     margin-left: 0;
     font-size: 15px;
     display: flex;
@@ -37,6 +37,7 @@
     justify-content: flex-start;
     flex-wrap: nowrap;
     overflow-x: auto;
+    border: 1px solid #000;
 
     .item-childType{
         flex: 0 0 auto;

src/dataCenter/Root.jsx

@@ -27,7 +27,7 @@ function DataCenter(props) {
     }
 
     const fetchData = (path, requestData, dataName) =>
-        fetch(generateUrl(path, requestData), {credentials: 'include'})
+        fetch(generateUrl(path, requestData), {credentials: 'include',mode: 'no-cors'})
             .then(res => res.json())
             .then(res => {
                 if (res.success) {

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ConfigProvider, DatePicker, message } from 'antd';
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import zhCN from 'antd/lib/locale/zh_CN';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import 'antd/dist/antd.css';
+import './index.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+moment.locale('zh-cn');
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <ConfigProvider locale={zhCN}>
+            <App />
+        </ConfigProvider>
+    </React.StrictMode>,
+    document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function