diff --git a/mock/app-data.js b/mock/app-data.js index 5cb2251..258b2ac 100644 --- a/mock/app-data.js +++ b/mock/app-data.js @@ -382,9 +382,14 @@ const roles = [ * 方法 * **/ // 登录 -const onLogin = p => { - const u = users.find(item => { - console.log("gaoxiao?", item.username, p.username, item.musername === p.username); +const onLogin = (p) => { + const u = users.find((item) => { + console.log( + "gaoxiao?", + item.username, + p.username, + item.musername === p.username + ); return item.username === p.username; }); console.log("没有？", users, p, u); @@ -396,7 +401,7 @@ const onLogin = p => { return { status: 200, data: u, message: "登录成功" }; }; // 删除消息数据 -const clearNews = p => { +const clearNews = (p) => { // const p = JSON.parse(request.body); switch (p.type) { case "notice": @@ -417,24 +422,24 @@ const clearNews = p => { }; }; // 获取所有菜单 -const getMenus = p => { +const getMenus = (p) => { return { status: 200, data: menus, message: "success" }; }; // 获取菜单（根据ID） -const getMenusById = p => { +const getMenusById = (p) => { // const p = JSON.parse(request.body); let res = []; if (p.id instanceof Array) { - res = menus.filter(item => p.id.includes(item.id)); + res = menus.filter((item) => p.id.includes(item.id)); } else { - const t = menus.find(item => item.id === p.id); + const t = menus.find((item) => item.id === p.id); res.push(t); } return { status: 200, data: res, message: "success" }; }; // 添加新菜单 -const addMenu = p => { +const addMenu = (p) => { // const p = JSON.parse(request.body); console.log("添加：", p); p.id = ++id_sequence; @@ -442,10 +447,10 @@ const addMenu = p => { return { status: 200, data: menus, message: "添加成功" }; }; // 修改菜单 -const upMenu = p => { +const upMenu = (p) => { // const p = JSON.parse(request.body); console.log("到这了吗：", p); - const oldIndex = menus.findIndex(item => item.id === p.id); + const oldIndex = menus.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { const news = Object.assign({}, menus[oldIndex], p); menus.splice(oldIndex, 1, news); @@ -455,12 +460,14 @@ const upMenu = p => { } }; // 删除菜单 -const delMenu = p => { +const delMenu = (p) => { // const p = JSON.parse(request.body); - const oldIndex = menus.findIndex(item => item.id === p.id); + const oldIndex = menus.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { - const haveChild = menus.findIndex(item => item.parent === menus[oldIndex].id); + const haveChild = menus.findIndex( + (item) => item.parent === menus[oldIndex].id + ); if (haveChild === -1) { menus.splice(oldIndex, 1); return { status: 200, data: menus, message: "success" }; @@ -472,14 +479,16 @@ const delMenu = p => { } }; // 根据菜单ID查询其下权限 -const getPowerByMenuId = p => { +const getPowerByMenuId = (p) => { // const p = JSON.parse(request.body); const menuId = Number(p.menuId); if (menuId) { return { status: 200, - data: powers.filter(item => item.menu === menuId).sort((a, b) => a.sorts - b.sorts), + data: powers + .filter((item) => item.menu === menuId) + .sort((a, b) => a.sorts - b.sorts), message: "success", }; } else { @@ -487,30 +496,30 @@ const getPowerByMenuId = p => { } }; // 根据权限ID查询对应的权限 -const getPowerById = p => { +const getPowerById = (p) => { // const p = JSON.parse(request.body); let res = []; console.log("开始查权限了，都有什么：", p); if (p.id instanceof Array) { - res = powers.filter(item => p.id.includes(item.id)); + res = powers.filter((item) => p.id.includes(item.id)); } else { - const t = powers.find(item => item.id === p.id); + const t = powers.find((item) => item.id === p.id); res.push(t); } return { status: 200, data: res, message: "success" }; }; // 添加权限 -const addPower = p => { +const addPower = (p) => { // const p = JSON.parse(request.body); p.id = ++id_sequence; powers.push(p); return { status: 200, data: { id: p.id }, message: "success" }; }; // 修改权限 -const upPower = p => { +const upPower = (p) => { // const p = JSON.parse(request.body); console.log("到这了吗：", p); - const oldIndex = powers.findIndex(item => item.id === p.id); + const oldIndex = powers.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { const news = Object.assign({}, powers[oldIndex], p); powers.splice(oldIndex, 1, news); @@ -520,8 +529,8 @@ const upPower = p => { } }; // 删除权限 -const delPower = p => { - const oldIndex = powers.findIndex(item => item.id === p.id); +const delPower = (p) => { + const oldIndex = powers.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { powers.splice(oldIndex, 1); @@ -531,9 +540,9 @@ const delPower = p => { } }; // 查询角色（分页,条件筛选） -const getRoles = p => { +const getRoles = (p) => { // const p = JSON.parse(request.body); - const map = roles.filter(item => { + const map = roles.filter((item) => { let yeah = true; if (p.title && !item.title.includes(p.title)) { yeah = false; @@ -553,32 +562,32 @@ const getRoles = p => { }; }; // 查询角色（所有） -const getAllRoles = p => { +const getAllRoles = (p) => { return { status: 200, data: roles, message: "success" }; }; // 查询角色（通过角色ID） -const getRoleById = p => { +const getRoleById = (p) => { // const p = JSON.parse(request.body); let res = []; if (p.id instanceof Array) { - res = roles.filter(item => p.id.includes(item.id)); + res = roles.filter((item) => p.id.includes(item.id)); } else { - const t = roles.find(item => item.id === p.id); + const t = roles.find((item) => item.id === p.id); res.push(t); } return { status: 200, data: res, message: "success" }; }; // 添加角色 -const addRole = p => { +const addRole = (p) => { // const p = JSON.parse(request.body); p.id = ++id_sequence; roles.push(p); return { status: 200, data: null, message: "success" }; }; // 修改角色 -const upRole = p => { +const upRole = (p) => { // const p = JSON.parse(request.body); - const oldIndex = roles.findIndex(item => item.id === p.id); + const oldIndex = roles.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { const news = Object.assign({}, roles[oldIndex], p); roles.splice(oldIndex, 1, news); @@ -588,9 +597,9 @@ const upRole = p => { } }; // 删除角色 -const delRole = p => { +const delRole = (p) => { // const p = JSON.parse(request.body); - const oldIndex = roles.findIndex(item => item.id === p.id); + const oldIndex = roles.findIndex((item) => item.id === p.id); console.log("开始删除：", oldIndex); if (oldIndex !== -1) { roles.splice(oldIndex, 1); @@ -600,16 +609,16 @@ const delRole = p => { } }; // 根据角色ID查询该角色所拥有的菜单和权限详细信息 -const findAllPowerByRoleId = p => { +const findAllPowerByRoleId = (p) => { // const p = JSON.parse(request.body); - const t = roles.find(item => item.id === p.id); + const t = roles.find((item) => item.id === p.id); if (t) { const res = t.powers.map((item, index) => { - const _menu = menus.find(v => v.id === item.menuId); - const _powers = item.powers.map(v => { - return powers.find(p => p.id === v); + const _menu = menus.find((v) => v.id === item.menuId); + const _powers = item.powers.map((v) => { + return powers.find((p) => p.id === v); }); - _menu.powers = _powers.filter(item => item.conditions === 1); + _menu.powers = _powers.filter((item) => item.conditions === 1); return _menu; }); return { status: 200, data: res, message: "success" }; @@ -618,30 +627,32 @@ const findAllPowerByRoleId = p => { } }; // 获取所有的菜单及权限数据 - 为了构建PowerTree组件 -const getAllPowers = p => { - const res = menus.map(item => { +const getAllPowers = (p) => { + const res = menus.map((item) => { const _menu = item; - const _powers = powers.filter(v => v.menu === item.id && v.conditions === 1); + const _powers = powers.filter( + (v) => v.menu === item.id && v.conditions === 1 + ); _menu.powers = _powers; return _menu; }); return { status: 200, data: res, message: "success" }; }; // 给指定角色分配菜单和权限 -const setPowersByRoleId = p => { +const setPowersByRoleId = (p) => { // const p = JSON.parse(request.body); - const oldIndex = roles.findIndex(item => item.id === p.id); + const oldIndex = roles.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { - let pow = p.menus.map(item => ({ menuId: item, powers: [] })); + let pow = p.menus.map((item) => ({ menuId: item, powers: [] })); console.log("此时的POW", pow); // 将每一个权限id归类到对应的菜单里 - p.powers.forEach(ppItem => { + p.powers.forEach((ppItem) => { // 通过权限id查询该权限对象 - const thePowerData = powers.find(pItem => pItem.id === ppItem); + const thePowerData = powers.find((pItem) => pItem.id === ppItem); if (thePowerData) { const theMenuId = thePowerData.menu; if (theMenuId) { - const thePow = pow.find(powItem => powItem.menuId === theMenuId); + const thePow = pow.find((powItem) => powItem.menuId === theMenuId); if (thePow) { thePow.powers.push(ppItem); } @@ -658,20 +669,20 @@ const setPowersByRoleId = p => { }; // 给指定角色分配菜单和权限 -const setPowersByRoleIds = ps => { - ps.forEach(p => { - const oldIndex = roles.findIndex(item => item.id === p.id); +const setPowersByRoleIds = (ps) => { + ps.forEach((p) => { + const oldIndex = roles.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { - let pow = p.menus.map(item => ({ menuId: item, powers: [] })); + let pow = p.menus.map((item) => ({ menuId: item, powers: [] })); console.log("此时的POW", pow); // 将每一个权限id归类到对应的菜单里 - p.powers.forEach(ppItem => { + p.powers.forEach((ppItem) => { // 通过权限id查询该权限对象 - const thePowerData = powers.find(pItem => pItem.id === ppItem); + const thePowerData = powers.find((pItem) => pItem.id === ppItem); if (thePowerData) { const theMenuId = thePowerData.menu; if (theMenuId) { - const thePow = pow.find(powItem => powItem.menuId === theMenuId); + const thePow = pow.find((powItem) => powItem.menuId === theMenuId); if (thePow) { thePow.powers.push(ppItem); } @@ -686,8 +697,8 @@ const setPowersByRoleIds = ps => { }; // 条件分页查询用户列表 -const getUserList = p => { - const map = users.filter(item => { +const getUserList = (p) => { + const map = users.filter((item) => { let yeah = true; if (p.username && !item.username.includes(p.username)) { yeah = false; @@ -707,16 +718,16 @@ const getUserList = p => { }; }; // 添加用户 -const addUser = p => { +const addUser = (p) => { // const p = JSON.parse(request.body); p.id = ++id_sequence; users.push(p); return { status: 200, data: null, message: "success" }; }; // 修改用户 -const upUser = p => { +const upUser = (p) => { // const p = JSON.parse(request.body); - const oldIndex = users.findIndex(item => item.id === p.id); + const oldIndex = users.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { const news = Object.assign({}, users[oldIndex], p); users.splice(oldIndex, 1, news); @@ -726,9 +737,9 @@ const upUser = p => { } }; // 删除用户 -const delUser = p => { +const delUser = (p) => { // const p = JSON.parse(request.body); - const oldIndex = users.findIndex(item => item.id === p.id); + const oldIndex = users.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { users.splice(oldIndex, 1); return { status: 200, data: null, message: "success" }; @@ -737,9 +748,9 @@ const delUser = p => { } }; // 给用户分配角色 -const setUserRoles = p => { +const setUserRoles = (p) => { // const p = JSON.parse(request.body); - const oldIndex = users.findIndex(item => item.id === p.id); + const oldIndex = users.findIndex((item) => item.id === p.id); if (oldIndex !== -1) { users.splice(oldIndex, 1); return { status: 200, data: null, message: "success" }; diff --git a/package.json b/package.json index 883c534..bd41a92 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "node server.js --max_old_space_size=4096", - "build": "webpack -p --config webpack.production.config.js", + "build": "webpack --config webpack.production.config.js", "dist": "set NODE_ENV=production&& node server.js", "distmac": "export NODE_ENV=production&& node server.js", "prettier": "prettier --write \"{src,mock}/**/*.{js,css,less}\"", @@ -23,68 +23,72 @@ "pnp": false }, "dependencies": { - "@rematch/core": "^1.4.0", - "antd": "4.0.2", - "axios": "^0.19.2", - "core-js": "^3.6.4", + "@rematch/core": "^2.0.1", + "antd": "4.16.10", + "axios": "^0.21.1", + "core-js": "^3.16.0", + "dayjs": "^1.10.6", "history": "^4.10.1", - "lodash": "^4.17.15", + "lodash": "^4.17.21", "normalize.css": "^8.0.1", - "react": "^16.13.0", - "react-dom": "^16.13.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-loadable": "^5.5.0", - "react-redux": "^7.2.0", - "react-router-dom": "^5.1.2", - "react-vcode": "^1.0.4", - "redux": "^4.0.5", - "retalk": "^3.2.0" + "react-redux": "^7.2.4", + "react-router-dom": "^5.2.0", + "react-vcode": "^1.0.11", + "redux": "^4.1.1" }, "devDependencies": { - "@babel/core": "^7.8.7", - "@babel/plugin-proposal-class-properties": "^7.8.3", - "@babel/plugin-proposal-decorators": "^7.8.3", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3", - "@babel/plugin-proposal-object-rest-spread": "^7.8.3", - "@babel/plugin-proposal-optional-chaining": "^7.8.3", + "@babel/core": "^7.14.8", + "@babel/plugin-proposal-class-properties": "^7.14.5", + "@babel/plugin-proposal-decorators": "^7.14.5", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-object-rest-spread": "^7.14.7", + "@babel/plugin-proposal-optional-chaining": "^7.14.5", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.8.3", - "@babel/preset-env": "^7.8.7", - "@babel/preset-react": "^7.8.3", - "@babel/runtime": "^7.8.7", - "antd-dayjs-webpack-plugin": "^0.0.8", - "autoprefixer": "^9.7.4", + "@babel/plugin-transform-runtime": "^7.14.5", + "@babel/preset-env": "^7.14.9", + "@babel/preset-react": "^7.14.5", + "@babel/runtime": "^7.14.8", + "antd-dayjs-webpack-plugin": "^1.0.6", + "autoprefixer": "^10.3.1", "babel-eslint": "^10.1.0", - "babel-loader": "^8.0.6", - "babel-plugin-import": "^1.13.0", + "babel-loader": "^8.2.2", + "babel-plugin-import": "^1.13.3", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^3.4.2", - "eslint": "^6.8.0", - "eslint-loader": "^3.0.3", - "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.19.0", - "eslint-plugin-react-hooks": "^2.5.0", + "copy-webpack-plugin": "^9.0.1", + "css-loader": "^6.2.0", + "css-minimizer-webpack-plugin": "^3.0.2", + "eslint": "^7.32.0", + "eslint-loader": "^4.0.2", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "^7.24.0", + "eslint-plugin-react-hooks": "^4.2.0", "express": "^4.17.1", - "favicons-webpack-plugin": "3.0.1", - "file-loader": "^5.1.0", + "favicons": "^6.2.2", + "favicons-webpack-plugin": "5.0.2", + "file-loader": "^6.2.0", "happypack": "^5.0.1", - "html-webpack-plugin": "^4.0.0-beta.11", - "less": "^3.11.1", - "less-loader": "^5.0.0", - "mini-css-extract-plugin": "^0.9.0", + "html-webpack-plugin": "^5.3.2", + "less": "^4.1.1", + "less-loader": "^10.0.1", + "mini-css-extract-plugin": "^2.1.0", "mockjs": "^1.1.0", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "prettier": "1.19.1", - "style-loader": "1.1.3", - "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^2.3.5", - "url-loader": "^3.0.0", - "webpack": "^4.42.0", - "webpack-cli": "^3.3.11", - "webpack-dev-middleware": "^3.7.2", + "postcss": "^8.3.6", + "postcss-loader": "^6.1.1", + "prettier": "2.3.2", + "source-map-loader": "^3.0.0", + "style-loader": "3.2.1", + "terser-webpack-plugin": "^5.1.4", + "url-loader": "^4.1.1", + "webpack": "^5.48.0", + "webpack-cli": "^4.7.2", + "webpack-dev-middleware": "^5.0.0", "webpack-hot-middleware": "^2.25.0", "webpackbar": "^4.0.0", + "workbox-webpack-plugin": "^6.1.5", "xml-loader": "^1.2.1" }, "browserslist": [ diff --git a/postcss.config.js b/postcss.config.js index 796abe2..28b6d04 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,4 +1,4 @@ /** postcss-loader 解析器所需的配置文件 **/ module.exports = { - plugins: [require("autoprefixer")()] + plugins: [require("autoprefixer")], }; diff --git a/server.js b/server.js index c9d054e..4562584 100644 --- a/server.js +++ b/server.js @@ -7,52 +7,62 @@ const webpack = require("webpack"); // webpack核心 const webpackDevMiddleware = require("webpack-dev-middleware"); // webpack服务器 const webpackHotMiddleware = require("webpack-hot-middleware"); // HMR热更新中间件 const webpackConfig = require("./webpack.dev.config.js"); // webpack开发环境的配置文件 - const mock = require("./mock/app-data"); // mock模拟数据，模拟后台业务 +// const { createProxyMiddleware } = require("http-proxy-middleware"); // 跨域配置 需要跨域请打开注释即可 + const app = express(); // 实例化express服务 -const DIST_DIR = webpackConfig.output.path; // webpack配置中设置的文件输出路径，所有文件存放在内存中 -const PORT = 8888; // 服务启动端口号 +let PORT = 8888; // 服务启动端口号 + +// 跨域设置 需要跨域请打开注释,自己设置对应的域名 +// app.use( +// "/proxy", +// createProxyMiddleware({ +// target: "https://example.com", // 目标域名 +// changeOrigin: true, +// ws: false, +// pathRewrite: { +// "^/proxy": "/", +// }, +// }) +// ); +// bodyParser的配置需要放在Proxy代理的下面，否则post请求的代理参数无法处理 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); +/** 监听POST请求，返回MOCK模拟数据 **/ +app.post(/\/api.*/, (req, res, next) => { + const result = mock.mockApi({ url: req.originalUrl, body: req.body }); + res.send(result); +}); +app.get(/\/api.*/, (req, res, next) => { + const result = mock.mockApi({ url: req.originalUrl, body: req.body }); + res.send(result); +}); + if (env === "production") { // 如果是生产环境，则运行build文件夹中的代码 + PORT = 8889; app.use(express.static("build")); - app.get("*", function(req, res) { + app.get("*", function (req, res) { res.sendFile(path.join(__dirname, "build", "index.html")); }); } else { const compiler = webpack(webpackConfig); // 实例化webpack - app.use(express.static("dll")); app.use( + // 挂载webpack小型服务器 webpackDevMiddleware(compiler, { - // 挂载webpack小型服务器 publicPath: webpackConfig.output.publicPath, // 对应webpack配置中的publicPath - quiet: true, // 是否不输出启动时的相关信息 - stats: { - colors: true, // 不同信息不同颜色 - timings: true, // 输出各步骤消耗的时间 - }, }), ); // 挂载HMR热更新中间件 app.use(webpackHotMiddleware(compiler)); - /** 监听POST请求，返回MOCK模拟数据 **/ - app.post(/\/api.*/, (req, res, next) => { - const result = mock.mockApi({ url: req.originalUrl, body: req.body }); - res.send(result); - }); - app.get(/\/api.*/, (req, res, next) => { - const result = mock.mockApi({ url: req.originalUrl, body: req.body }); - res.send(result); - }); - // 所有请求都返回index.html app.get("*", (req, res, next) => { - const filename = path.join(DIST_DIR, "index.html"); + // webpack配置中设置的文件输出路径，所有文件存放在内存中 + const filename = path.join(webpackConfig.output.path, "index.html"); // 由于index.html是由html-webpack-plugin生成到内存中的，所以使用下面的方式获取 compiler.outputFileSystem.readFile(filename, (err, result) => { diff --git a/src/a_component/Bread/index.js b/src/a_component/Bread/index.js index 2c70330..c768099 100644 --- a/src/a_component/Bread/index.js +++ b/src/a_component/Bread/index.js @@ -7,10 +7,10 @@ import "./index.less"; export default class Com extends React.PureComponent { /** 根据当前location动态生成对应的面包屑 **/ makeBread(location, menus) { - const paths = location.pathname.split("/").filter(item => !!item); + const paths = location.pathname.split("/").filter((item) => !!item); const breads = []; paths.forEach((item, index) => { - const temp = menus.find(v => v.url.replace(/^\//, "") === item); + const temp = menus.find((v) => v.url.replace(/^\//, "") === item); if (temp) { breads.push( {temp.title} diff --git a/src/a_component/CanvasBack/index.js b/src/a_component/CanvasBack/index.js index f47553f..423a3cb 100644 --- a/src/a_component/CanvasBack/index.js +++ b/src/a_component/CanvasBack/index.js @@ -9,7 +9,7 @@ export default class CanvasBack extends React.PureComponent { constructor(props) { super(props); this.state = { - context: null + context: null, }; this.ctx = null; this.dots = []; // 所有的点 @@ -46,7 +46,7 @@ export default class CanvasBack extends React.PureComponent { dx: !!Math.round(this.random(0, 1)), // 当前方向x dy: !!Math.round(this.random(0, 1)), // 当前方向y color: this.random(20, 70), // b通道颜色值 - dcolor: !!Math.round(this.random(0, 1)) // 颜色改变向量 + dcolor: !!Math.round(this.random(0, 1)), // 颜色改变向量 }; this.dots.push(temp); } @@ -105,7 +105,7 @@ export default class CanvasBack extends React.PureComponent { const step_row = height / (row - 2); const step_col = width / (col - 2); - this.dots.forEach(function(item, index) { + this.dots.forEach(function (item, index) { if (item.dx) { // 增 if (item.sx < step_col / 3) { @@ -162,7 +162,7 @@ export default class CanvasBack extends React.PureComponent { render() { return (
- (this.myCanvas = c)} /> + (this.myCanvas = c)} />
); } diff --git a/src/a_component/Footer/index.js b/src/a_component/Footer/index.js index f10fba5..4f5b2e7 100644 --- a/src/a_component/Footer/index.js +++ b/src/a_component/Footer/index.js @@ -13,7 +13,7 @@ export default class Com extends React.PureComponent { render() { return (