Skip to content

D
Dui123
Commit ff18bb58 authored by wty's avatar wty
Browse files
Options

所有接口改为查询Mysql数据库 

新增：工具盒修改，删除，增加功能
parent def0dbf3
Show whitespace changes
Inline Side-by-side
Showing with 324 additions and 228 deletions
expressServer/SQLPool.js 0 → 100644
View file @ ff18bb58
const MYSQL = require('mysql')
const Mysql = MYSQL.createPool({
'host': '127.0.0.1',
'port': '3306',
'user': 'wty',
'password': 'wty990215',
'database': 'dui123',
'connectionLimit': 1000
})
module.exports = Mysql
expressServer/app.js
View file @ ff18bb58
......@@ -5,10 +5,10 @@ const logger = require('morgan');
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const databaseRouter = require('./routes/dataBase/dataBase')
const queryRouter = require('./routes/query')
const addRouter = require('./routes/add')
const deleteRouter = require('./routes/delete')
const updateRouter = require('./routes/update')
const app = express();
global.domain = 'http://127.0.0.1:3001'
......@@ -41,10 +41,10 @@ app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/database', databaseRouter)
app.use('/query', queryRouter)
app.use('/add', addRouter)
app.use('/delete',deleteRouter)
app.use('/update', updateRouter)
module.exports = app;
expressServer/package.json
View file @ ff18bb58
......@@ -7,10 +7,12 @@
},
"dependencies": {
"@types/express": "^4.17.13",
"@types/mysql": "^2.15.19",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"morgan": "~1.9.1",
"mysql": "^2.18.1",
"nodemon": "^2.0.12",
"request": "^2.88.2"
}
......
expressServer/routes/add.js
View file @ ff18bb58
const express = require('express')
const request = require("request");
const Mysql = require("../SQLPool");
const router = express.Router()
router.get('/addToolBox', (req, res) => {
const {name,icon,desc,url} = req.query
const data = encodeURI(JSON.stringify({name,icon,desc,url}))
const {toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl} = req.query
// res.send({success: true})
request(`${domain}/database/addData?tableName=toolBox&data=${data}`, {}, (err, response, body) => {
if (!err && response.statusCode === 200) {
const data = JSON.parse(body)
res.send({
success: true,
data: data.data
})
} else {
const SQL = 'INSERT INTO toolbox (toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl) VALUES (?,?,?,?)'
try {
Mysql.query(SQL, [toolBoxName, toolBoxDesc, toolBoxIcon, toolBoxUrl], (err, result) => {
if (err) {
res.send({
success: false,
err
})
throw err
}
res.send({
success: true,
data: result
})
})
}catch (e){
console.error(e)
}
})
router.get('/addType', (req, res) => {
const {name} = req.query
const data = encodeURI(JSON.stringify({name}))
// res.send({success: true})
request(`${domain}/database/addData?tableName=type&data=${data}`, {}, (err, response, body) => {
if (!err && response.statusCode === 200) {
const data = JSON.parse(body)
res.send({
success: true,
data: data.data
})
} else {
const {typeName} = req.query
const SQL = 'INSERT INTO type (typeName) VALUES (?)'
try {
Mysql.query(SQL, [typeName], (err, result) => {
if (err) {
res.send({
success: false,
err
})
throw err
}
res.send({
success: true,
data: result
})
})
}catch (e){
console.error(e)
}
})
......
expressServer/routes/dataBase/dataBase.js deleted 100644 → 0
View file @ def0dbf3
const express = require('express')
const fs = require('fs')
const path = require('path')
const router = express.Router()
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)
throw err
}
const _data = JSON.parse(data.toString())
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
}
console.log('数据添加成功')
})
})
}
const deleteData = (tableName, dataId) => {
fs.readFile(tablePath[tableName], (err, data) => {
if (err) {
console.error(err)
throw err
}
const _data = JSON.parse(data.toString())
const newData = _data.filter(v => +v.id !== +dataId)
fs.writeFile(tablePath[tableName], JSON.stringify(newData), (err) => {
if (err) {
console.error(err)
return err
}
console.log('数据删除成功')
})
})
}
const queryTable = (tableName) => {
const data = fs.readFileSync(tablePath[tableName], {encoding: 'utf-8'})
return JSON.parse(data)
}
router.get('/queryTable', (req, res) => {
const {tableName} = req.query
console.log('查询：', tableName)
const data = queryTable(tableName)
if (data) {
res.send({
data
})
} else {
res.send({
Error: data
})
}
})
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({
e
})
}
})
router.get('/deleteDataById', (req, res) => {
const {tableName, dataId} = req.query
try {
deleteData(tableName, dataId)
res.send({
data: '数据删除成功！'
})
} catch (e) {
console.log(e)
res.send({
e
})
}
})
module.exports = router
expressServer/routes/dataBase/toolBox.json deleted 100644 → 0
View file @ def0dbf3
[{"id":1,"name":"星火组件库文档","icon":"https://yun.duiba.com.cn/editor/spark/favicon.ico","desc":"星火组件库文档，烽火台3.0文档也在里头哦~","url":"http://spark.duiba.com.cn/docs/"},{"id":10,"name":"测试数据","icon":"https://yun.duiba.com.cn/spark/assets/511a27ba957e5cf744e96e914e65383b3ba8dae3.png","desc":"测试数据","url":"www.baidu.com"},{"id":14,"name":"1","icon":"1","desc":"1","url":"1"}]
\ No newline at end of file
expressServer/routes/delete.js
View file @ ff18bb58
const express = require('express')
const request = require('request')
const Mysql = require("../SQLPool");
const router = express.Router()
router.get('/deleteToolBoxById', (req, res) => {
const {id} = req.query
request(`${domain}/database/deleteDataById?tableName=toolBox&dataId=${id}`, {}, (err, response, body) => {
if (!err && response.statusCode === 200) {
const data = JSON.parse(body)
res.send({
success: true,
data: data.data
})
} else {
const {toolBoxId} = req.query
const SQL = 'DELETE FROM toolbox WHERE toolBoxId = ?'
try {
Mysql.query(SQL, [toolBoxId], (err, result) => {
if (err) {
res.send({
success: false,
err
})
throw err
}
res.send({
success: true,
data: result
})
})
}catch (e){
console.error(e)
}
})
......
expressServer/routes/query.js
View file @ ff18bb58
const express = require('express')
const request = require("request");
const Mysql = require('../SQLPool')
const router = express.Router()
router.get('/queryType', (req, res) => {
request(`${domain}/database/queryTable?tableName=type`, {}, (err, response, body) => {
if (!err && response.statusCode === 200) {
const data = JSON.parse(body)
const SQL = 'SELECT * FROM type'
Mysql.query(SQL, (err, result) => {
if (err) {
res.send({
success: true,
data: data.data
success: false,
err
})
} else {
}
res.send({
error: err
success: true,
data: result
})
}
})
});
router.get('/queryToolBox', (req, res) => {
request(`${domain}/database/queryTable?tableName=toolBox`, {}, (err, response, body) => {
if (!err && response.statusCode === 200) {
const data = JSON.parse(body)
const SQL = 'SELECT * FROM toolbox';
Mysql.query(SQL, (err, result) => {
if (err) {
res.send({
success: true,
data: data.data
success: false,
err
})
} else {
}
res.send({
error: err
success: true,
data: result
})
}
})
});
......
expressServer/routes/update.js 0 → 100644
View file @ ff18bb58
const express = require('express')
const router = express.Router()
const Mysql = require('../SQLPool')
router.get('/updateToolBox', (req, res) => {
const {toolBoxName, toolBoxIcon, toolBoxUrl, toolBoxDesc, toolBoxId} = req.query
const SQL = 'UPDATE toolbox SET toolBoxName= ?, toolBoxIcon=?, toolBoxUrl=?, toolBoxDesc=? WHERE toolBoxId = ?'
Mysql.query(SQL, [toolBoxName, toolBoxIcon, toolBoxUrl, toolBoxDesc, toolBoxId], (err, result) => {
if (err) {
res.send({
success: false,
err
})
}
res.send({
success: true,
data: result
})
})
})
module.exports = router
expressServer/yarn.lock
View file @ ff18bb58
......@@ -53,6 +53,13 @@
resolved "http://npm.dui88.com:80/@types%2fmime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
integrity sha1-k+Jb+e51/g/YC1lLxP6w6GIRG1o=
"@types/mysql@^2.15.19":
version "2.15.19"
resolved "http://npm.dui88.com:80/@types%2fmysql/-/mysql-2.15.19.tgz#d158927bb7c1a78f77e56de861a3b15cae0e7aed"
integrity sha1-0ViSe7fBp4935W3oYaOxXK4Oeu0=
dependencies:
"@types/node" "*"
"@types/node@*":
version "16.7.1"
resolved "http://npm.dui88.com:80/@types%2fnode/-/node-16.7.1.tgz#c6b9198178da504dfca1fd0be9b2e1002f1586f0"
......@@ -182,6 +189,11 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
bignumber.js@9.0.0:
version "9.0.0"
resolved "http://npm.dui88.com:80/bignumber.js/-/bignumber.js-9.0.0.tgz#805880f84a329b5eac6e7cb6f8274b6d82bdf075"
integrity sha1-gFiA+Eoym16sbny2+CdLbYK98HU=
binary-extensions@^2.0.0:
version "2.2.0"
resolved "http://npm.dui88.com:80/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
......@@ -369,7 +381,7 @@ cookie@0.4.0:
resolved "http://npm.dui88.com:80/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
integrity sha1-vrQ35wIrO21JAZ0IhmUwPr6cFLo=
core-util-is@1.0.2:
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "http://npm.dui88.com:80/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
......@@ -740,6 +752,11 @@ inherits@2.0.3:
resolved "http://npm.dui88.com:80/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
inherits@~2.0.3:
version "2.0.4"
resolved "http://npm.dui88.com:80/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
ini@1.3.7:
version "1.3.7"
resolved "http://npm.dui88.com:80/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
......@@ -829,6 +846,11 @@ is-yarn-global@^0.3.0:
resolved "http://npm.dui88.com:80/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
integrity sha1-1QLTOCWQ6jAEiTdGdUyJE5lz4jI=
isarray@~1.0.0:
version "1.0.0"
resolved "http://npm.dui88.com:80/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
isstream@~0.1.2:
version "0.1.2"
resolved "http://npm.dui88.com:80/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
......@@ -970,6 +992,16 @@ ms@^2.1.1:
resolved "http://npm.dui88.com:80/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
integrity sha1-V0yBOM4dK1hh8LRFedut1gxmFbI=
mysql@^2.18.1:
version "2.18.1"
resolved "http://npm.dui88.com:80/mysql/-/mysql-2.18.1.tgz#2254143855c5a8c73825e4522baf2ea021766717"
integrity sha1-IlQUOFXFqMc4JeRSK68uoCF2Zxc=
dependencies:
bignumber.js "9.0.0"
readable-stream "2.3.7"
safe-buffer "5.1.2"
sqlstring "2.3.1"
negotiator@0.6.2:
version "0.6.2"
resolved "http://npm.dui88.com:80/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
......@@ -1072,6 +1104,11 @@ prepend-http@^2.0.0:
resolved "http://npm.dui88.com:80/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "http://npm.dui88.com:80/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
integrity sha1-eCDZsWEgzFXKmud5JoCufbptf+I=
proxy-addr@~2.0.4:
version "2.0.7"
resolved "http://npm.dui88.com:80/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
......@@ -1140,6 +1177,19 @@ rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
readable-stream@2.3.7:
version "2.3.7"
resolved "http://npm.dui88.com:80/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.3"
isarray "~1.0.0"
process-nextick-args "~2.0.0"
safe-buffer "~5.1.1"
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
readdirp@~3.6.0:
version "3.6.0"
resolved "http://npm.dui88.com:80/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
......@@ -1194,7 +1244,7 @@ responselike@^1.0.2:
dependencies:
lowercase-keys "^1.0.0"
safe-buffer@5.1.2:
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "http://npm.dui88.com:80/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha1-mR7GnSluAxN0fVm9/St0XDX4go0=
......@@ -1265,6 +1315,11 @@ signal-exit@^3.0.2:
resolved "http://npm.dui88.com:80/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
integrity sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw=
sqlstring@2.3.1:
version "2.3.1"
resolved "http://npm.dui88.com:80/sqlstring/-/sqlstring-2.3.1.tgz#475393ff9e91479aea62dcaf0ca3d14983a7fb40"
integrity sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A=
sshpk@^1.7.0:
version "1.16.1"
resolved "http://npm.dui88.com:80/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
......@@ -1308,6 +1363,13 @@ string-width@^4.0.0, string-width@^4.1.0:
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.0"
string_decoder@~1.1.1:
version "1.1.1"
resolved "http://npm.dui88.com:80/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
integrity sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=
dependencies:
safe-buffer "~5.1.0"
strip-ansi@^5.1.0:
version "5.2.0"
resolved "http://npm.dui88.com:80/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
......@@ -1457,6 +1519,11 @@ url-parse-lax@^3.0.0:
dependencies:
prepend-http "^2.0.0"
util-deprecate@~1.0.1:
version "1.0.2"
resolved "http://npm.dui88.com:80/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
utils-merge@1.0.1:
version "1.0.1"
resolved "http://npm.dui88.com:80/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
......
src/component/Content/Content.jsx
View file @ ff18bb58
......@@ -10,7 +10,7 @@ function Content(props) {
{
dataCenter?.toolBox?.length ? dataCenter.toolBox.map(v => {
return (
<ContentItem key={v.id} value={v}/>
<ContentItem key={v['toolBoxId']} value={v}/>
)
})
:
......
src/component/Content/ContentItem.jsx
View file @ ff18bb58
......@@ -5,30 +5,32 @@ import followed from '../../static/followed.png'
import setting from '../../static/setting.svg'
import trash from '../../static/trash.svg'
import {useContext} from "react";
import {Root} from "../../dataCenter/Root";
import {PopContext, Root} from "../../dataCenter/Root";
import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
function ContentItem(props) {
const {fetchData, updateIndex} = useContext(Root)
const {icon, name, desc, url, follow, id} = props.value
const {showPop} = useContext(PopContext)
const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId} = props.value
const jumpUrl = url => {
window.location.href = url
}
const deleteItem = id => {
fetchData('/delete/deleteToolBoxById', {id: id})
const deleteItem = toolBoxId => {
fetchData('/delete/deleteToolBoxById', {toolBoxId})
.then(() => updateIndex())
}
return (
<div className="content-item">
<div className="content-adminTool">
<img src={setting} alt=""/>
<img src={trash} alt="" onClick={() => deleteItem(id)}/>
<img src={setting} alt="" onClick={()=>showPop((<PopToolBoxConfig value={props.value}/>))}/>
<img src={trash} alt="" onClick={() => deleteItem(toolBoxId)}/>
</div>
<div className="item-icon" onClick={() => jumpUrl(url)}>
<img src={icon ? icon : defaultIcon} alt={name}/>
<div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}>
<img src={toolBoxIcon ? toolBoxIcon : defaultIcon} alt={toolBoxName}/>
</div>
<div className="item-name" onClick={() => jumpUrl(url)}>{name}</div>
<div className="item-desc">{desc}</div>
<a className='item-url' href={url}>{url}</a>
<div className="item-name" onClick={() => jumpUrl(toolBoxUrl)}>{toolBoxName}</div>
<div className="item-desc">{toolBoxDesc}</div>
<a className='item-url' href={toolBoxUrl}>{toolBoxUrl}</a>
<div className="follow">
<img className='icon-follow' src={follow ? followed : notFollow} alt=""/>
收藏
......
src/component/Content/ContentItem.scss
View file @ ff18bb58
......@@ -17,8 +17,8 @@
width: 36px;
height: 15px;
position: absolute;
top: 3px;
right: 10px;
top: -18px;
right: 4px;
line-height: 15px;
display: flex;
justify-content: space-between;
......
src/component/PopConfirm/PopConfirm.jsx 0 → 100644
View file @ ff18bb58
import {useContext} from "react";
import {PopContext} from "../../dataCenter/Root";
function PopConfirm(props){
const {hidePop} = useContext(PopContext)
const {submit, title} = props
return (
<div className="Pop-container">
<div className="Pop-tool">
<button className="close" onClick={() => hidePop()}>X</button>
</div>
<h2 className='Pop-title'>{title}</h2>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox' onClick={() => submit()}>确定</button>
<button className='btn-submit-addToolBox' onClick={() => submit()}>取消</button>
</div>
</div>
)
}
export default PopConfirm
src/component/PopConfirm/PopConfirm.scss 0 → 100644
View file @ ff18bb58
@import "../../common/popStyle";
.Pop-container{
position: absolute;
}
src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.jsx 0 → 100644
View file @ ff18bb58
import {useContext} from "react";
import {PopContext, Root} from "../../dataCenter/Root";
import {useFormState} from "../../utils/hook";
import PopConfirm from "../PopConfirm/PopConfirm";
function Pop_toolBoxConfig(props) {
const {toolBoxName, toolBoxIcon, toolBoxDesc, toolBoxUrl, toolBoxId} = props.value
const {fetchData, updateIndex} = useContext(Root)
const {hidePop,showPop} = useContext(PopContext)
const [input, setInput] = useFormState({
toolBoxName,
toolBoxIcon,
toolBoxDesc,
toolBoxUrl
})
const updateToolBox = () => {
fetchData('/update/updateToolBox', Object.assign({}, input, {toolBoxId}))
.then(() => updateIndex())
}
return (
<div className="Pop-container">
<div className="Pop-tool">
<button className="close" onClick={() => hidePop()}>X</button>
</div>
<h2 className='Pop-title'>{toolBoxName}</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('toolBoxName', e.target.value)}
defaultValue={input?.['toolBoxName']}
min={1} required/>
<span> 名称</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolBoxIcon', e.target.value)}
defaultValue={input?.['toolBoxIcon']}
min={1} required/>
<span> 图标</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolBoxDesc', e.target.value)}
defaultValue={input?.['toolBoxDesc']}
min={1} required/>
<span> 描述</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('toolBoxUrl', e.target.value)}
defaultValue={input?.['toolBoxUrl']} min={1}
required/>
<span> 链接</span>
</div>
</div>
<div className="Pop-bottom">
<button className='btn-submit-addToolBox' onClick={() => showPop((<PopConfirm title={`确定要修改${toolBoxName}吗？`}/>))}>提交</button>
</div>
</div>
)
}
export default Pop_toolBoxConfig
src/component/Pop_ToolBoxConfig/Pop_toolBoxConfig.scss 0 → 100644
View file @ ff18bb58
@import "../../common/popStyle";
.Pop-container{
position: absolute;
}
src/component/Pop_addToolBox/Pop_addToolBox.jsx
View file @ ff18bb58
......@@ -23,22 +23,26 @@ function Pop_addToolBox() {
<h2 className='Pop-title'>新建工具盒</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('name', e.target.value)} defaultValue={input?.name}
<input type="text" onChange={e => setInput('toolBoxName', e.target.value)}
defaultValue={input?.['toolBoxName']}
min={1} required/>
<span> 名称</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('icon', e.target.value)} defaultValue={input?.icon}
<input type="text" onChange={e => setInput('toolBoxIcon', e.target.value)}
defaultValue={input?.['toolBoxIcon']}
min={1} required/>
<span> 图标</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('desc', e.target.value)} defaultValue={input?.desc}
<input type="text" onChange={e => setInput('toolBoxDesc', e.target.value)}
defaultValue={input?.['toolBoxDesc']}
min={1} required/>
<span> 描述</span>
</div>
<div className="input-group ">
<input type="text" onChange={e => setInput('url', e.target.value)} defaultValue={input?.url} min={1}
<input type="text" onChange={e => setInput('toolBoxUrl', e.target.value)}
defaultValue={input?.['toolBoxUrl']} min={1}
required/>
<span> 链接</span>
</div>
......
src/component/Pop_addType/Pop_addType.jsx
View file @ ff18bb58
......@@ -20,7 +20,7 @@ function Pop_addType(props){
<h2 className='Pop-title'>新建类型</h2>
<div className="formArea">
<div className="input-group ">
<input type="text" onChange={e => setInput('name', e.target.value)} defaultValue={input?.name}
<input type="text" onChange={e => setInput('typeName', e.target.value)} defaultValue={input?.typeName}
min={1} required/>
<span> 类型名称</span>
</div>
......
src/component/ToolType/ToolType.jsx
View file @ ff18bb58
......@@ -10,9 +10,9 @@ function ToolType (props) {
{
dataCenter?.type?.length && dataCenter.type.map(v => {
const classNameArr = ['item-tool-type ']
if (v.id === typeId) classNameArr.push('item-tool-type-selected')
if (v["typeId"] === typeId) classNameArr.push('item-tool-type-selected')
return (
<div key={v.id} className={classNameArr.join('')} onClick={()=>setTypeId(v.id)}>{v.typeName}</div>
<div key={v["typeId"] } className={classNameArr.join('')} onClick={()=>setTypeId(v["typeId"])}>{v.typeName}</div>
)
})
}
......
src/data.js
View file @ ff18bb58
const data = {
index: {
toolType: [{
id: 1,
type: '我的'
}, {
id: 2,
type: '工具'
}, {
id: 3,
type: '文档'
},],
content: Array.from({length: 20}, (v, i) => {
return {
id: i+1,
name: '你TM找茬是不是',
icon: null,
desc: '你看看现在哪有瓜啊，都是大棚的瓜，你嫌贵我还嫌贵呢!',
url: 'https://www.bilibili.com',
}
})
}
}
export default data
src/page/index.jsx
View file @ ff18bb58
......@@ -2,27 +2,32 @@ import './index.scss'
import ToolType from "../component/ToolType/ToolType";
import Content from "../component/Content/Content";
import {useContext, useEffect, useState} from "react";
import Pop_addToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
import PopAddToolBox from "../component/Pop_addToolBox/Pop_addToolBox";
import {PopContext, Root} from "../dataCenter/Root";
import Pop_addType from "../component/Pop_addType/Pop_addType";
import PopAddType from "../component/Pop_addType/Pop_addType";
function Index() {
const {updateIndex} = useContext(Root)
const [pop, setPop] = useState('')
console.log(JSON.stringify({name: 1, icon: 1, desc: 1, url: 'https://www.baidu.com'}))
const [pop, setPop] = useState()
const showPop = popComponent => {
setPop(popComponent)
}
useEffect(() => {
updateIndex()
}, [])
return (
<PopContext.Provider value={{hidePop: () => setPop(''), showPop: popName => showPop(popName)}}>
<div className="index">
<div className="nav">
<div className="nav-title">Dui123</div>
</div>
<div className="adminTool">
<button className='btn-admin' onClick={() => setPop('addToolBox')}>新建工具盒</button>
<button className='btn-admin' onClick={() => setPop('addType')}>新建类型</button>
<button className='btn-admin' onClick={() => setPop((<PopAddToolBox/>))}>新建工具盒</button>
<button className='btn-admin' onClick={() => setPop((<PopAddType/>))}>新建类型</button>
</div>
<div className="tool-nav">
<ToolType/>
......@@ -31,15 +36,11 @@ function Index() {
<div className="container">
<Content/>
</div>
<PopContext.Provider value={{hidePop: () => setPop('')}}>
{
pop === 'addToolBox' && <Pop_addToolBox/>
pop
}
{
pop === 'addType' && <Pop_addType/>
}
</PopContext.Provider>
</div>
</PopContext.Provider>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment