首页接口初始化完成

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 /expressServer/node_modules/
 /expressServer/.idea/
+/.idea

.idea/dui123.iml

@@ -7,6 +7,7 @@
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/expressServer/.idea" />
+      <excludeFolder url="file://$MODULE_DIR$/.idea/inspectionProfiles" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

expressServer/app.js

@@ -8,6 +8,7 @@ const usersRouter = require('./routes/users');
 const databaseRouter = require('./routes/dataBase/dataBase')
 
 const app = express();
+global.domain = 'http://127.0.0.1:3001'
 
 // app.all('', function (req, res, next) {
 //     res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:3000');
@@ -17,6 +18,7 @@ const app = express();
 //     res.header('Content-Type', 'application/json;charset=utf-8');
 //     next();
 // });
+
 app.use((req, res, next) => {
     //设置请求头
     res.set({
@@ -28,7 +30,6 @@ app.use((req, res, next) => {
     })
     req.method === 'OPTIONS' ? res.status(204).end() : next()
 })
-
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));

expressServer/package.json

@@ -11,6 +11,7 @@
     "debug": "~2.6.9",
     "express": "~4.16.1",
     "morgan": "~1.9.1",
-    "nodemon": "^2.0.12"
+    "nodemon": "^2.0.12",
+    "request": "^2.88.2"
   }
 }

expressServer/routes/dataBase/dataBase.js

 const express = require('express')
 const fs = require('fs')
 const path = require('path')
-const toolBox = path.join(__dirname, './toolBox.json')
 const router = express.Router()
 
-const add = (addData) => {
-    fs.readFile(toolBox, (err, data) => {
+const tablePath = {
+    toolBox: path.join(__dirname, './toolBox.json'),
+    type: path.join(__dirname, './type.json')
+}
+
+const add = (tableName,addData) => {
+    fs.readFile(tablePath[tableName], (err, data) => {
         if (err) {
             console.error(err)
-            return err
+            throw err
         }
-
         const _data = JSON.parse(data.toString())
-        _data.type.push(addData)
-        fs.writeFile(toolBox, JSON.stringify(_data), (err) => {
+        const lastId = _data[_data.length - 1]?.id || 0
+        _data.push(Object.assign({id: lastId + 1},addData))
+        fs.writeFile(tablePath[tableName], JSON.stringify(_data), (err) => {
             if (err) {
                 console.error(err)
                 return err
@@ -24,30 +28,42 @@ const add = (addData) => {
     })
 }
 
-const test = () => {
-    const data = fs.readFileSync(toolBox, {encoding: 'utf-8'})
+const queryTable = (tableName) => {
+    const data = fs.readFileSync(tablePath[tableName], {encoding: 'utf-8'})
     return JSON.parse(data)
 }
 
-router.get('/', (req, res) => {
-    const data = test().type
+router.get('/queryTable', (req, res) => {
+    const {tableName} = req.query
+    console.log('查询：',tableName)
+    const data = queryTable(tableName)
     if (data){
         res.send({
-            success: true,
-            message: 'ok',
-            data: data
+            data
         })
     }else {
         res.send({
-            success: false,
-            message: '查询接口日志',
-            data: data
+            Error: data
         })
     }
 })
 
-router.get('/addType', (req, res) => {
-    res.send({data: 'add'})
+router.get('/addData', (req, res) => {
+    const {tableName,data} = req.query
+    const _data = JSON.parse(data)
+    try{
+        add(tableName,_data)
+        res.send({
+            data:'通了'
+        })
+    }catch (e){
+        console.log(e)
+        res.send({
+            message: e
+        })
+    }
+
+
 })
 
 

expressServer/routes/dataBase/toolBox.json

-{
-  "type": [
-    {
-      "id": 1,
-      "typeName": "我的"
-    }
-  ]
-}
+[{"id":1,"name":"星速台","icon":"http://yun.dui88.com/polaris/favicon1.ico","desc":"项目发布，运营等功能","url":"http://yun.dui88.com/polaris/favicon1.ico"}]
\ No newline at end of file

expressServer/routes/dataBase/type.json

+[{"id":1,"typeName":"我的"}]

expressServer/routes/index.js

 let express = require('express');
+const request = require('request')
 let router = express.Router();
 
 /* GET home page. */
-router.get('/', function(req, res) {
-   res.send('cool~')
+router.get('/queryType', (req, res) => {
+    request(`${domain}/database/queryTable?tableName=type`, {}, (err, response, body) => {
+        if (!err && response.statusCode === 200) {
+            const data = JSON.parse(body)
+            res.send({
+                success: true,
+                data: data.data
+            })
+        } else {
+            res.send({
+                error: err
+            })
+        }
+    })
 });
 
+router.get('/queryToolBox', (req, res) => {
+    request(`${domain}/database/queryTable?tableName=toolBox`, {}, (err, response, body) => {
+        if (!err && response.statusCode === 200) {
+            const data = JSON.parse(body)
+            res.send({
+                success: true,
+                data: data.data
+            })
+        } else {
+            res.send({
+                error: err
+            })
+        }
+    })
+});
+
+router.get('/addToolBox', (req, res) => {
+    request(`${domain}/database/queryTable?tableName=toolBox`, {}, (err, response, body) => {
+        if (!err && response.statusCode === 200) {
+            const data = JSON.parse(body)
+            res.send({
+                success: true,
+                data: data.data
+            })
+        } else {
+            res.send({
+                error: err
+            })
+        }
+    })
+})
+
 module.exports = router;

src/App.test.js

-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {

src/component/Content/Content.jsx

 import './Content.scss'
 import ContentItem from "./ContentItem";
-import data from "../../data";
 import {useContext} from "react";
 import {Root} from "../../dataCenter/Root";
 
@@ -9,7 +8,7 @@ function Content(props) {
     return (
         <div className="content">
             {
-                dataCenter.index.content.map(v => {
+                dataCenter?.toolBox?.length && dataCenter.toolBox.map(v => {
                     return (
                         <ContentItem key={v.id} value={v}/>
                     )

src/component/Pop_addToolBox/Pop_addToolBox.jsx

+import './Pop_addToolBox.scss'
+import {useContext} from "react";
+import {PopContext, Root} from "../../dataCenter/Root";
+import {useFormState} from "../../utils/hook";
+import closeIcon from '../../static/cancel.png'
+
+function Pop_addToolBox () {
+    const {fetchData} = useContext(Root)
+    const {hidePop} = useContext(PopContext)
+    const [input, setInput] = useFormState()
+    const addToolBox = ()=>{
+            fetchData('/addToolBox',input)
+    }
+
+    return (
+        <div className="Pop-container">
+            <div className="Pop-tool">
+                <button className="close" onClick={()=> hidePop()}>X</button>
+            </div>
+            <h2 className='Pop-title'>新建工具盒</h2>
+            <div className="formArea">
+                <div className="item-addToolBox">
+                    <label> 名称：</label>  <input type="text" onChange={e => setInput('name',e.target.value)}/>
+                </div>
+                <div className="item-addToolBox">
+                    <label> 图标：</label>  <input type="text" onChange={e => setInput('icon',e.target.value)}/>
+                </div>
+                <div className="item-addToolBox">
+                    <label> 描述：</label>  <input type="text" onChange={e => setInput('desc',e.target.value)}/>
+                </div>
+                <div className="item-addToolBox">
+                    <label> 链接：</label>  <input type="text" onChange={e => setInput('url',e.target.value)}/>
+                </div>
+            </div>
+
+            <button className='btn-submit-addToolBox'>提交</button>
+        </div>
+    )
+}
+
+export default Pop_addToolBox

src/component/Pop_addToolBox/Pop_addToolBox.scss

+
+.Pop-container {
+    width: 300px;
+    height: 600px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(219, 220, 224, 0.7);
+    border-radius: 5px;
+    border: 2px solid #DBDCE0;
+
+    .Pop-tool{
+        height: 24px;
+        background: rgba(0, 0, 0, 0.7);
+
+
+        .close{
+            width: 23px;
+            height: 23px;
+            font-size: 18px;
+            color: #ffffff;
+            background: rgba(0, 0, 0,0.9);
+        }
+    }
+}

src/component/ToolType/ToolType.jsx

-import data from "../../data";
 import './ToolType.scss'
 import {useContext, useState} from "react";
 import {Root} from "../../dataCenter/Root";
@@ -13,7 +12,7 @@ function ToolType (props) {
                     const classNameArr = ['item-tool-type ']
                     if (v.id === typeId) classNameArr.push('item-tool-type-selected')
                     return (
-                        <div key={v.id} className={classNameArr.join('')} onClick={()=>setTypeId(v.id)}>{v.type}</div>
+                        <div key={v.id} className={classNameArr.join('')} onClick={()=>setTypeId(v.id)}>{v.typeName}</div>
                     )
                 })
             }

src/data.js

@@ -18,7 +18,6 @@ const data = {
                 icon: null,
                 desc: '你看看现在哪有瓜啊，都是大棚的瓜，你嫌贵我还嫌贵呢!',
                 url: 'https://www.bilibili.com',
-                follow: true
             }
         })
 

src/dataCenter/Root.jsx

@@ -4,18 +4,18 @@ import apiConfig from "../config/apiConfig";
 import {UPDATE_DATA} from "./action";
 
 const Root = createContext({})
+const PopContext = createContext({})
 
 function DataCenter(props) {
     const [dataCenter, dispatch] = useReducer(dataReducer, initDataCenter, () => {
         return initDataCenter
     })
 
-
-    const domain = apiConfig.domain
-
-
-    const generateUrl = (path) => {
-        return domain + path
+    const generateUrl = (path, requestData) => {
+        if (requestData) {
+            return apiConfig.domain + path + `?${requestData}`
+        }
+        return apiConfig.domain + path
     }
 
     /**
@@ -25,12 +25,12 @@ function DataCenter(props) {
      * @param requestData
      * @returns {Promise<T>}
      */
-    const fetchData = (path,dataName,requestData) =>
-        fetch(generateUrl(path), {credentials: 'include'})
+    const fetchData = (path,requestData,dataName) =>
+        fetch(generateUrl(path,requestData), {credentials: 'include'})
             .then(res => res.json())
             .then(res => {
                 if (res.success){
-                    dispatch(UPDATE_DATA({[dataName]: res.data}))
+                    !!dataName && dispatch(UPDATE_DATA({[dataName]: res.data}))
                 }else {
                     throw res
                 }
@@ -51,7 +51,8 @@ function DataCenter(props) {
 }
 
 export {
-    Root
+    Root,
+    PopContext
 }
 export default DataCenter
 

src/dataCenter/reducer.js

-import data from "../data";
 const initDataCenter = {
-    ...data
 }
 
 /**

src/page/index.jsx

 import './index.scss'
 import ToolType from "../component/ToolType/ToolType";
 import Content from "../component/Content/Content";
-import {useContext, useEffect} from "react";
-import {Root} from "../dataCenter/Root";
+import {useContext, useEffect, useState} from "react";
+import Pop_addToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
+import {PopContext, Root} from "../dataCenter/Root";
 
 function Index() {
     const {fetchData} = useContext(Root)
-    const getIndex = () => fetchData('/database','type')
+    const [pop, setPop] = useState('')
+    console.log(JSON.stringify({name:1,icon:1,desc:1,url:'https://www.baidu.com'}))
+    const getIndex = () => fetchData('/queryType',{}, 'type')
+        .then(() => fetchData('/queryToolBox',{}, 'toolBox'))
 
-    useEffect(()=>{
+    useEffect(() => {
         getIndex()
-    },[])
+    }, [])
 
     return (
         <div className="index">
             <div className="nav">
                 <div className="nav-title">Dui123</div>
             </div>
-
+            <div className="adminTool">
+                <button className='btn-admin' onClick={() => setPop('addToolBox')}>新建工具盒</button>
+            </div>
             <div className="tool-nav">
                 <ToolType/>
             </div>
@@ -25,6 +31,11 @@ function Index() {
             <div className="container">
                 <Content/>
             </div>
+            <PopContext.Provider value={{hidePop: () => setPop('')}}>
+                {
+                    pop === 'addToolBox' && <Pop_addToolBox/>
+                }
+            </PopContext.Provider>
         </div>
     )
 }

src/page/index.scss

@@ -7,6 +7,17 @@ body {
     height: 100%;
     color: $fontColor;
 
+    .adminTool{
+        position: absolute;
+        width: 160px;
+        text-align: center;
+        top: 60px;
+        .btn-admin{
+            width: 120px;
+            height: 35px;
+        }
+    }
+
 
     .nav {
         width: 100%;

src/utils/hook.js

+import {useCallback, useState} from "react";
+
+const useFormState = (initialValues = {}) => {
+    const [input, setInput] = useState(initialValues)
+
+    const setInputData = useCallback((name, value) => {
+        setInput(() => Object.assign({}, {...input}, {[name]: value}))
+    }, [input])
+
+    return [input, setInputData]
+}
+
+export {
+    useFormState
+}