React Ant Design+Node.js Express+Mysql實現後端分頁（帶富文字編輯器）
阿新 • • 發佈：2021-01-12
home.jsx：
import React, { Component } from 'react'
import { Table, Card, Modal, Button, Form, Input, Select, notification } from 'antd'
import axios from 'axios'
import qs from 'qs'
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
// react-draft-wysiwyg begin
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from
package.json：
{ "name": "antd-demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.2.1", "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@tinymce/tinymce-react": "^3.8.4", "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", "antd": "^4.7.0", "axios": "^0.19.2", "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", "babel-loader": "8.1.0", "babel-plugin-import": "^1.13.0", "babel-plugin-named-asset-import": "^0.3.6", "babel-preset-react-app": "^9.1.2", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "draft-js": "^0.11.7", "draftjs-to-html": "^0.9.1", "echarts": "^4.9.0", "echarts-for-react": "^2.0.16", "eslint": "^6.6.0", "eslint-config-react-app": "^5.2.1", "eslint-loader": "3.0.3", "eslint-plugin-flowtype": "4.6.0", "eslint-plugin-import": "2.20.1", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.19.0", "eslint-plugin-react-hooks": "^1.6.1", "file-loader": "4.3.0", "fs-extra": "^8.1.0", "html-to-draftjs": "^1.5.0", "html-webpack-plugin": "4.0.0-beta.11", "identity-obj-proxy": "3.0.0", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "24.9.0", "jest-watch-typeahead": "0.4.2", "mini-css-extract-plugin": "0.9.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.6.4", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "qs": "^6.9.4", "react": "^16.13.1", "react-app-polyfill": "^1.0.6", "react-dev-utils": "^10.2.1", "react-dom": "^16.13.1", "react-draft-wysiwyg": "^1.14.5", "react-router": "^4.2.0", "react-router-dom": "^4.2.0", "react-transition-group": "^4.4.1", "redux": "^4.0.5", "resolve": "1.15.0", "resolve-url-loader": "3.1.1", "sass-loader": "8.0.2", "semver": "6.3.0", "style-loader": "0.23.1", "terser-webpack-plugin": "2.3.5", "ts-pnp": "1.1.6", "url-loader": "2.3.0", "webpack": "4.42.0", "webpack-dev-server": "3.10.3", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, "eslintConfig": { "extends": "react-app" }, "proxy": "http://localhost:9999", "homepage": ".", "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "jest": { "roots": [ "<rootDir>/src" ], "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [ "<rootDir>/src/setupTests.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jest-environment-jsdom-fourteen", "transform": { "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ] }, "devDependencies": { "less": "^3.12.2", "less-loader": "^6.2.0" } }
Expressmain.js:
const express = require("express")
const fs = require("fs")
const mysql = require("mysql")
const util = require("util")
const {getNow} = require("./tool")
const app = express();
const bodyParser = require("body-parser");
const { nextTick } = require("process");
app.use("/static/", express.static("./static/"));
app.use('/node_modules/', express.static('./node_modules/'));
app.engine("html", require("express-art-template"))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '12345678',
database: 'react-ts-blog'
});
connection.connect();
// 獲取所有資料
app.get("/api/blog_list", (req, res) => {
let obj = {
ret: false,
total: 0,
rows: [],
msg: ""
}
const pageSize = Number(req.query.pageSize);
const pageNumber = Number(req.query.pageNumber)-1;
connection.query(`SELECT * FROM blog`, (error, results, fields) => {
if (!error) {
obj.total = results.length;
// 分頁查詢 begin
connection.query(`SELECT * FROM blog limit ${pageNumber*pageSize}, ${pageSize}`, (error, results, fields) => {
if (!error) {
obj.ret = true;
obj.rows = results;
res.header("Access-Control-Allow-Origin", "*");
res.type('application/json');
res.jsonp(obj);
}else{
next(error);
}
})
// 分頁查詢 end
}else{
next(error);
}
})
})
app.get("/404", (req, res) => {
res.render("404.html");
})
// 配置一個全域性錯誤處理中介軟體
app.use(function (err, req, res, next) {
res.status(500).json({
err_code: 500,
message: err.message
})
})
app.listen(5555, () => {
console.log("服務啟動成功......");
})