React Ant Design+Node.js Express+Mysql实现后端分页（带富文本编辑器）
程序员文章站
2022-03-07 21:57:49
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';// rea...
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 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import './react-draft-wysiwyg.less'
// react-draft-wysiwyg end
const layout = {
labelCol: {
span: 3,
},
wrapperCol: {
span: 19,
}
};
export default class Home extends Component {
state = {
showRichText: false, // react-draft-wysiwyg
editorContent: '', // react-draft-wysiwyg
editorState: '', // react-draft-wysiwyg
selectedRowKeys: [], // 表格选择项Keys
selectedRows: [], // 表格选择项Rows
tableData: [],
total: 0, // for Pagination
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 30,
},
{
title: '标题',
dataIndex: 'title',
width: 500,
render: (text, record) => <a href="javascript: void(0)" target="_self" onClick={() => this.handleShowDetailBlog(record.id)}>{text}</a>
},
{
title: '内容',
dataIndex: 'content'
},
],
addModalVisible: false,
showBlogModalVisible: false,
blogDetail: ''
};
/**
*
* @react-draft-wysiwyg begin
*/
handleClearContent = () => {
this.setState({
editorState: ''
})
}
handleGetText = () => {
this.setState({
showRichText: true
})
}
onEditorChange = (editorContent) => {
this.setState({
editorContent,
});
};
onEditorStateChange = (editorState) => {
this.setState({
editorState
});
};
// @react-draft-wysiwyg end
onTableSelectChange = (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
console.log('selectedRows changed: ', selectedRows);
this.setState({ selectedRowKeys, selectedRows });
};
onSelectChange = selectedRowKeys => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
};
/**
* 表格
*/
// 获取表格数据
getData(pageNumber, pageSize) {
axios.get(`http://localhost:5555/api/blog_list/?pageSize=${pageSize}&pageNumber=${pageNumber}&sortName=id&sortOrder=desc&_=1595230808893`).then((resp) => {
let ajaxData = [];
for (let i = 0; i < resp.data.rows.length; i++) {
ajaxData.push({
key: resp.data.rows[i].id,
id: resp.data.rows[i].id,
title: resp.data.rows[i].title,
content: resp.data.rows[i].content,
});
}
this.setState({
tableData: ajaxData,
total: resp.data.total
})
}, (err) => {
console.log(err);
});
}
onChange = (pageNumber, pageSize) => {
this.pageNum = pageNumber;
this.pageSize = pageSize;
this.getData(pageNumber, pageSize);
};
/**
* 添加modal
*/
// for modal
showAddModal = () => {
this.setState({
addModalVisible: true
})
}
addModalHandleOk = e => {
const _this = this;
this.addModalFormRef.current.validateFields()
.then(values => {
console.log(this.state.editorContent);
const params = {
title: values.title,
content: draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
};
axios.post(`http://localhost:5555/api/add_blog`, qs.stringify(params)).then((resp) => {
if (resp.ret) {
console.log(resp.msg);
} else {
this.addModalFormRef.current.resetFields();
this.setState({
editorState: '',
addModalVisible: false
});
this.pageNum = 1;
this.getData(this.pageNum, this.pageSize);
}
}, (err) => {
console.log(err);
});
})
.catch(info => {
console.log('Validate Failed:', info);
});
}
addModalHandCancel = e => {
this.addModalFormRef.current.resetFields();
this.setState({
addModalVisible: false
})
}
/**
* 删除blog
*/
onDeleteAdministrators = () => {
let len = this.state.selectedRowKeys.length;
if (len === 0) {
notification['error']({
message: '错误提示',
description: '请选择要删除的文章！',
})
} else {
const params = {
idArr: JSON.stringify(this.state.selectedRowKeys)
}
const _this = this;
axios.post(`http://localhost:5555/api/delete_blogs`, qs.stringify(params)).then((resp) => {
if (resp.data.ret) {
notification['success']({
message: '成功提示',
description: resp.data.msg,
})
this.pageNum = 1;
_this.getData(this.pageNum, this.pageSize);
} else {
notification['error']({
message: '错误提示',
description: resp.data.msg,
})
}
}, (err) => {
notification['error']({
message: '错误提示',
description: '网络错误，删除失败！'
})
});
}
}
// 表单相关
addModalFormRef = React.createRef(); // 定义一个表单
/**
* 显示blog Modal
*/
handleShowDetailBlog = (id) => {
axios.get(`http://localhost:5555/api/get_blog_detail?id=${id}`, {}).then((resp) => {
const contentBlock = htmlToDraft(resp.data.content);
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
console.log("contentState：");
console.log(contentState);
if (resp.data.ret) {
this.setState({
showBlogModalVisible: true,
blogDetail: resp.data.content
})
} else {
}
}, (err) => {
console.log(err);
});
}
handleShowBlogModalHandleOk = () => {
this.setState({
showBlogModalVisible: false
})
}
handleShowBlogModalHandleCancel = () => {
this.setState({
showBlogModalVisible: false
})
}
/**
* 钩子函数
*/
componentDidMount() {
this.getData(1, 10);
}
render() {
// 控制表格选择
const rowSelection = {
selectedRowKeys: this.state.selectedRowKeys,
onChange: this.onTableSelectChange
};
return (<>
<Card title="博客列表" extra={<span><Button type="primary" ghost size="small" icon={<PlusOutlined />} style={{ marginRight: 15 }} onClick={this.showAddModal}>添加</Button><Button type="primary" ghost size="small" icon={<MinusOutlined />} onClick={() => { this.onDeleteAdministrators() }}>删除</Button></span>} style={{ width: '100%' }}>
<Table
onRow={record => {
return {
onClick: event => { console.log(record) }, // 点击行
onDoubleClick: event => { },
onContextMenu: event => { },
onMouseEnter: event => { }, // 鼠标移入行
onMouseLeave: event => { },
};
}}
rowSelection={rowSelection}
columns={this.state.columns}
dataSource={this.state.tableData}
pagination={{
current: this.pageNum,
total: this.state.total,
pageSizeOptions: [5, 10, 20, 50, 100],
defaultPageSize: 10,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => `共 ${total} 条`,
onChange: this.onChange
}}
bordered
>
</Table>
<Modal
title="创建"
visible={this.state.addModalVisible}
width={800}
onOk={this.addModalHandleOk}
onCancel={this.addModalHandCancel}
okText="确认"
cancelText="取消"
maskClosable={false}
destroyOnClose={true}
>
<Form {...layout} ref={this.addModalFormRef} name="control-ref" preserve={false}>
<Form.Item label="标题" style={{ marginBottom: 0 }}>
<Form.Item
name="title"
style={{ display: 'inline-block', width: 'calc(100% - 8px)', marginRight: 15 }}
rules={[
{
required: true,
message: "标题不能为空"
}
]}
>
<Input />
</Form.Item>
</Form.Item>
<Form.Item label="内容" style={{ marginBottom: 0 }}>
<Form.Item
name="content"
style={{ display: 'inline-block', width: 'calc(100% - 8px)' }}
rules={[
{
required: true,
message: "内容不能为空"
}
]}
>
<Editor
editorState={this.state.editorState}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
/>
{/* <TextArea rows={4} /> */}
</Form.Item>
</Form.Item>
</Form>
</Modal>
<Modal
title="详情"
visible={this.state.showBlogModalVisible}
width={800}
onOk={this.handleShowBlogModalHandleOk}
onCancel={this.handleShowBlogModalHandleCancel}
okText="确定"
cancelText="取消"
maskClosable={false}
destroyOnClose={true}
footer={null}
>
<div dangerouslySetInnerHTML={{ __html: this.state.blogDetail }} style={{ height: 400, overflow: 'auto' }} />
</Modal>
</Card>
</>
)
}
}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"
}
}Express main.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("服务启动成功......");
})
sql文件：
/*
Navicat MySQL Data Transfer
Source Server : connect1
Source Server Version : 50717
Source Host : localhost:3306
Source Database : react-node-blog
Target Server Type : MYSQL
Target Server Version : 50717
File Encoding : 65001
Date: 2021-01-13 21:57:41
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `blog`
-- ----------------------------
DROP TABLE IF EXISTS `blog`;
CREATE TABLE `blog` (
`id` int(16) NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`content` longblob,
`datetime` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=45 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of blog
-- ----------------------------
INSERT INTO `blog` VALUES ('32', '涓夊ぇ鎸囨暟闆嗕綋鏀惰穼瓒?%鍒涗笟鏉挎寚璺?.84% 姘翠骇鍏绘畺銆佺櫧閰掔瓑鏉垮潡棰嗚穼', 0x3C703EE79B98E99DA2E4B88AEFBC8CE6B0B4E4BAA7E585BBE6AE96E38081E799BDE98592E38081E8B4B5E98791E5B19EE7AD89E69DBFE59D97E9A286E8B78CEFBC8CE58D8AE5AFBCE4BD93E8AEBEE5A487E38081E79FB3E6B2B9E58C96E5B7A5E380813344E69184E5838FE5A4B4E7AD89E69DBFE59D97E6B6A8E5B985E5B185E5898DE380823C2F703E0A3C703E3C2F703E0A3C703EE4B880E38081E8AF81E588B8E8A681E997BB3C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE59BBD3132E69C88435049E5908CE6AF94E5A29EE995BF302E32253C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE59BBD3132E69C88E5B185E6B091E6B688E8B4B9E4BBB7E6A0BCEFBC88435049EFBC89E5908CE6AF94E5A29EE995BF302E3225EFBC8CE9A284E69C9FE4B8BA3025EFBC8CE5898DE580BCE4B88BE9998D302E3525E3808232303230E5B9B4E585A8E5B9B4EFBC8CE585A8E59BBDE5B185E6B091E6B688E8B4B9E4BBB7E6A0BCE6AF94E4B88AE5B9B4E4B88AE6B6A8322E3525E380823C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE59BBD3132E69C88505049E5908CE6AF94E4B88BE9998D302E34253C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE59BBD3132E69C88E5B7A5E4B89AE7949FE4BAA7E88085E587BAE58E82E4BBB7E6A0BCEFBC88505049EFBC89E5908CE6AF94E4B88BE9998D302E3425EFBC8CE9A284E69C9FE4B88BE9998D302E3725EFBC8CE5898DE580BCE4B88BE9998D312E3525E3808232303230E5B9B4E585A8E5B9B4EFBC8CE5B7A5E4B89AE7949FE4BAA7E88085E587BAE58E82E4BBB7E6A0BCE6AF94E4B88AE5B9B4E4B88BE9998D312E3825E380823C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE6B3A8E58D8FEFBC9AE5819AE5A5BDE4B88AE5B882E585ACE58FB832303230E5B9B4E5B9B4E68AA5E5AEA1E8AEA1E5B7A5E4BD9C20E9878DE782B9E585B3E6B3A8E69687E58C96E69599E882B2E7AD89E9A286E59F9F3C2F703E0A3C703E3C2F703E0A3C703EE4B8ADE59BBDE6B3A8E5868CE4BC9AE8AEA1E5B888E58D8FE4BC9AE58F91E5B883E9809AE79FA5EFBC8CE8A681E6B182E5819AE5A5BDE4B88AE5B882E585ACE58FB832303230E5B9B4E5B9B4E68AA5E5AEA1E8AEA1E5B7A5E4BD9CE38082E59CA8E4B88AE5B882E585ACE58FB832303230E5B9B4E5B9B4E68AA5E5AEA1E8AEA1E5B7A5E4BD9CE4B8ADEFBC8CE9878DE782B9E585B3E6B3A8E4B88BE58897E8A18CE4B89AE38081E585ACE58FB8E5928CE9AB98E9A38EE999A9E5AEA1E8AEA1E4B89AE58AA1E9A286E59F9FEFBC9AE4B880E698AFE58F97E796ABE68385E5BDB1E5938DE8BE83E5A4A7E79A84E4B88AE5B882E585ACE58FB8E38082E4BA8CE698AFE69687E58C96E69599E882B2E8A18CE4B89AE4B88AE5B882E585ACE58FB8E38082E4B889E698AFE688BFE59CB0E4BAA7E8A18CE4B89AE4B88AE5B882E585ACE58FB8E38082E59B9BE698AFE58FAFE883BDE5AD98E59CA8E4B88EE68C81E7BBADE7BB8FE890A5E79BB8E585B3E79A84E9878DE5A4A7E4B88DE7A1AEE5AE9AE680A7E79A84E4B88AE5B882E585ACE58FB8E38082E4BA94E698AFE4B89AE7BBA9E5BC82E5B8B8E6B3A2E58AA8E79A84E4B88AE5B882E585ACE58FB8E380823C2F703E0A3C703E3C2F703E0A3C703EE6B688E681AFE4BABAE5A3ABEFBC9AE5AE81E5BEB7E697B6E4BBA3E68896E4B8BAE8949AE69DA5E59BBAE68081E794B5E6B1A0E4BE9BE5BA94E595863C2F703E0A3C703E3C2F703E0A3C703EE4BB8AE697A5EFBC8CE69C89E6B688E681AFE4BABAE5A3ABE9808FE99CB2EFBC8CE5AE81E5BEB7E697B6E4BBA3E68896E4B8BAE8949AE69DA5E59BBAE68081E794B5E6B1A0E4BE9BE5BA94E59586E38082E59CA831E69C8839E697A5E4B8BEE58A9EE79A84E8949AE69DA54E494F20444159E4B88AEFBC8CE8949AE69DA5E58F91E5B883E4BA863135306B5768E79A84E59BBAE68081E794B5E6B1A0EFBC8CE58FAFE5AE9EE78EB033363057682F6B67E8B685E9AB98E883BDE9878FE5AF86E5BAA6E38082E696B03135306B5768E794B5E6B1A0E58C85E5B086E4BA8E32303232E5B9B4E7ACACE59B9BE5ADA3E5BAA6E4BAA4E4BB98E380823C2F703E0A3C703E3C2F703E0A3C703EE585ACE58B9FE58F91E8A18CE591A8E4B880E5868DE78886E58F91EFBC9AE4BB85E4B88AE58D88E9A696E58B9FE5B7B2E8B685363030E4BABF20E58D97E696B9E998BFE5B094E6B395323130E4BABFE69C80E788863C2F703E0A3C703E3C2F703E0A3C703EE7BBA7E4B88AE591A839E58FAAE2809CE697A5E58589E59FBAE2809DE5908EEFBC8CE696B0E58F91E59FBAE98791E5868DE5BAA6E8BF8EE69DA5E78886E58F91EFBC8CE4BB85E4B88AE58D88E58D8AE5A4A9EFBC8CE5A49AE58FAAE59FBAE98791E9A696E58B9FE8A784E6A8A1E5B7B2E8B685E8BF87363030E4BABFE38082E8B4A2E88194E7A4BEE8AEB0E88085E4BB8EE5A49AE4B8AAE6B8A0E98193E88EB7E68289EFBC8CE688AAE887B3E4B88AE58D883132E782B9EFBC8CE58D97E696B9E998BFE5B094E6B395E9A696E58B9FE8A784E6A8A1E5B7B2E7BB8FE8B685E8BF87323130E4BABFEFBC8CE8808CE585B6E58B9FE99B86E4B88AE99990E4B8BA3830E4BABFEFBC8CE68DAEE6B8A0E98193E9808FE99CB2E8AFA5E59FBAE98791E9A284E8AEA1E9858DE594AEE6AF94E4B8BA3230252D333025EFBC9BE5AF8CE59BBDE4BBB7E580BCE5889BE980A0E9A696E58B9FE8A784E6A8A1E8B685313830E4BABFEFBC8CE5B7B2E8B685E8BF873930E4BABFE58B9FE99B86E4B88AE99990EFBC9BE6ADA4E5A496EFBC8CE58D9AE697B6E6B187E585B4E59B9EE68AA5E4B880E5B9B4E68C81E69C89E38081E5B7A5E993B6E59C86E4B8B0E4B889E5B9B4E5928CE69893E696B9E8BEBEE68898E795A5E696B0E585B4E9A696E58B9FE8A784E6A8A1E4B99FE58886E588ABE8B685E8BF87313030E4BABFE380813830E4BABFE5928C3535E4BABFE380823C2F703E0A3C703E3C2F703E0A3C703EE6B5B7E58D97EFBC9AE6ADA3E7A7AFE69E81E68EA8E8BF9BE5B29BE58685E5B185E6B091E8BF9BE58FA3E697A5E794A8E6B688E8B4B9E59381E2809CE99BB6E585B3E7A88EE2809DE6ADA3E99DA2E6B885E58D95E7AD893C2F703E0A3C703E3C2F703E0A3C703EE6B5B7E58D97E79C81E5A794E589AFE7A798E4B9A6E995BFE78E8BE7A38AE4BB8BE7BB8DEFBC8CE79BAEE5898DE6ADA3E59CA8E7A7AFE69E81E68EA8E8BF9BE79A84E4BC81E4B89AE8BF9BE58FA3E887AAE794A8E8AEBEE5A487E2809CE99BB6E585B3E7A88EE2809DE8B49FE99DA2E6B885E58D95E38081E5B29BE58685E5B185E6B091E8BF9BE58FA3E697A5E794A8E6B688E8B4B9E59381E2809CE99BB6E585B3E7A88EE2809DE6ADA3E99DA2E6B885E58D95E38081E694BEE5AEBDE5B882E59CBAE58786E585A5E789B9E588ABE6B885E58D95E38081E8B7A8E5A283E69C8DE58AA1E8B4B8E69893E8B49FE99DA2E6B885E58D95E38081E6B48BE6B5A6E6B8AFE590AFE8BF90E6B8AFE98080E7A88EE694BFE7AD96E38081E6B48BE6B5A6E4BF9DE7A88EE6B8AFE58CBAE58AA0E5B7A5E5A29EE580BCE7A88EE694B6E694BFE7AD96E7AD89E4B880E7B3BBE58897E9878DE7A385E694BFE7AD96EFBC8CE69C89E4B880E4BA9BE5BE88E5BFABE5B0B1E58FAFE4BBA5E5928CE5A4A7E5AEB6E8A781E99DA2E38082E58FA6E5A496EFBC8CE4BBA5E2809CE5BC80E694BEE4B8ADE59BBDE38081E6B5B7E58D97E58588E8A18CE2809DE4B8BAE4B8BBE9A298E79A84E9A696E5B18AE4B8ADE59BBDE59BBDE99985E6B688E8B4B9E59381E58D9AE8A788E4BC9AE5B086E59CA8E4BB8AE5B9B435E69C88E4BBBDE59CA8E6B5B7E58FA3E4B8BEE8A18CEFBC8CE79BAEE5898DE69C89E585B3E983A8E997A8E6ADA3E59CA8E7B4A7E994A3E5AF86E9BC93E68EA8E8BF9BE7ADB9E5A487E5B7A5E4BD9CE38082E6A0B9E68DAEE680BBE4BD93E696B9E6A188EFBC8CE59BBDE5AEB6E7BAA7E5B195E4BC9AE5A283E5A496E5B195E59381E59CA8E5B195E69C9FE58685E8BF9BE58FA3E5928CE99480E594AEE4BAABE58F97E5858DE7A88EE694BFE7AD96EFBC8CE69C89E585B3E983A8E997A8E6ADA3E59CA8E58AA0E7B4A7E588B6E5AE9AE585B7E4BD93E58A9EE6B395E380823C2F703E0A3C703E3C2F703E0A3C703EE4BA8CE38081E69CBAE69E84E79C8BE5B8823C2F703E0A3C703E3C2F703E0A3C703EE5B0B1E5908EE5B882E8808CE8A880EFBC8CE4B8ADE4BFA1E8AF81E588B8E58886E69E90EFBC8CE5B9B4E5889DE5A29EE9878FE8B584E98791E99B86E4B8ADE5BBBAE4BB93E9A9B1E58AA8E5B882E59CBAE88489E586B2E5BC8FE4B88AE8A18CE5928CE7BB93E69E84E58886E58C96E58AA0E589A7EFBC8CE99A8FE79D80E5BBBAE4BB93E680A5E8BFABE680A7E79A84E4B88BE9998DEFBC8CE5B882E59CBAE4B88AE6B6A8E5928CE58886E58C96E79A84E88A82E5A58FE983BDE5B086E69C89E68980E694BEE7BC93EFBC8CE59B9EE5BD92E685A2E6B6A8E8BDAEE58AA8EFBC8CE5908CE697B6E4BA8CE4B889E7BABFE59381E7A78DE79A84E68A95E69CBAE680A7E68AB1E59BA2E68896E5B086E5BBB6E7BBADE793A6E8A7A3E8B68BE58ABFE380823C2F703E0A3C703E3C2F703E0A3C703EE5B1B1E8A5BFE8AF81E588B8E58899E8A1A8E7A4BAEFBC8CE69CBAE69E84E68AB1E59BA2E68896E587BAE78EB0E69DBEE58AA8E4BD86E4B88DE4BC9AE8BDBBE69893E793A6E8A7A3E38082E983A8E58886E8B685E8B78CE69DBFE59D97E4B89AE7BBA9E8BDACE69A96EFBC8CE79FADE69C9FE5AD98E59CA8E58F8DE5BCB9E69CBAE4BC9AE38082E8B584E98791E5B086E59CA8E68AB1E59BA2E69DBFE59D97E5928CE8B685E8B78CE69DBFE59D97E4B8ADE58F8DE5A48DE58887E68DA2EFBC8CE79BB4E887B3E5B882E59CBAE8B5B0E587BAE696B0E4B8BBE7BABFE38082E4BB8EE59FBAE69CACE99DA2E69DA5E79C8BEFBC8CE68AB1E59BA2E69DBFE59D97E79A84E4BCB0E580BCE8BF87E9AB98E5B7B2E698AFE585ACE8AEA4EFBC8CE68A95E8B584E88085E4B99FE8AEA4E5908CE99C80E8A681E4BBA5E697B6E997B4E68DA2E7A9BAE997B4E79A84E696B9E5BC8FE69DA5E6B688E58C96E4BCB0E580BCE380823C2F703E0A3C703E3C2F703E0A3C703EE58FA6E5A496EFBC8CE59BBDE6B3B0E5909BE5AE89E68C87E587BAEFBC8CE79FADE69C9FE5B882E59CBAE68890E4BAA4E9878FE4B88DE696ADE694BEE5A4A7E38081E4B88BE8A18CE9A38EE999A9E694B6E6959BEFBC8CE58FA0E58AA0E58C97E4B88AE8B584E98791E5A4A7E5B985E5A29EE68C81E7A791E68A80E69DBFE59D97EFBC8CE4B88DE7A681E5BC95E58F91E5B882E59CBAE5AFB9E9A38EE6A0BCE58887E68DA2E79A84E79691E89991E38082E68891E4BBACE8AEA4E4B8BAEFBC8CE9A38EE6A0BCE99ABEE58887E68DA2EFBC9A3129E8819AE784A6E9BE99E5A4B4E699AFE6B094EFBC8CE9A38EE999A9E5818FE5A5BDE4BB8DE4BD8EEFBC8CE58887E68DA2E6A682E78E87E4B88DE5A4A7EFBC9B3229E5BD93E5898DE4B8BBE5AFBCE5B882E59CBAE79A84E8BEB9E99985E8B584E98791E59CA8E4BA8EE59BBDE58685EFBC8CE59CA8E4BA8EE697A0E9A38EE999A9E588A9E78E87E4B88BE8A18CE9A284E69C9FE5B8A6E69DA5E79A84E8B584E98791E585A5E5B882EFBC9B3329E59CA8E6B581E58AA8E680A7E68B90E782B9E587BAE78EB0E4B98BE5898DEFBC8CE8B59BE98193E38081E7AB9EE4BA89E6A0BCE5B180E7AD89E698AFE5A29EE9878FE8B584E98791E88083E89991E79A84E5898DE68F90E38082E4BCB4E99A8FE8B584E98791E68A95E8B584E79A84E4B985E69C9FE694BEE995BFEFBC8CE8939DE7ADB9E9BE99E5A4B4E4BB8DE698AFE9A696E98089E380823C2F703E0A3C703E3C2F703E0A3C703EE4B88EE6ADA4E5908CE697B6EFBC8CE7B2A4E5BC80E8AF81E588B8E58886E69E90EFBC8CE2809CE698A5E5ADA3E8BA81E58AA8E2809DE6B890E585A5E4BDB3E5A283EFBC8CE58780E6B581E585A5E68896E5B7B2E8BF9BE585A5E4B88BE58D8AE59CBAE38082E58C97E4B88AE8B584E98791E5B7B2E78E87E58588E5B883E5B18041E882A1E8A18CE68385EFBC8CE4B894E4BB8EE58E86E58FB2E695B0E68DAEE69DA5E79C8BEFBC8CE58C97E4B88AE58780E6B581E585A5E79A84E5A4A7E69C88E5A4A7E5A49AE99B86E4B8ADE59CA8E5B9B4E5889DE5928CE5B9B4E5BA95E4B8A4E5A4B4EFBC8CE59188E78EB0E698A5E5ADA3E8BA81E58AA8E68896E7BF98E5B0BEE68385E586B5E38082E58C97E4B88AE8B584E98791E68C81E7BBADE59B9EE69A96E5AFB9E5B882E59CBAE79A84E9A38EE999A9E5818FE5A5BDE68F90E58D87E38081E68385E7BBAAE59B9EE69A96E4BBA5E58F8AE6A0B8E5BF83E8B584E4BAA7E79A84E4B88AE8A18CE983BDE69C89E58AA9E68EA8E4BD9CE794A8E38082E79BAEE5898DE58C97E4B88AE5B7B2E7BB8FE78E87E58588E590AFE58AA8E5B883E5B180E2809CE698A5E5ADA3E8BA81E58AA8E2809DEFBC8CE982A3E68891E4BBACE68EA5E4B88BE69DA5E8A681E9878DE782B9E585B3E6B3A8E79A84E698AFE58C97E4B88AE8B584E98791E5B883E5B180E2809CE698A5E5ADA3E8BA81E58AA8E2809DE79A84E68C81E7BBADE680A7E380823C2F703E0A3C703E3C2F703E0A3C703EE59CA8E6938DE4BD9CE7AD96E795A5E4B88AEFBC8CE993B6E6B2B3E8AF81E588B8E68F90E588B0EFBC8CE68E98E98791E8A18CE4B89AE699AFE6B094E5BAA6E8BE83E5A5BDEFBC8CE4B894E4BCB0E580BCE4B88DE7AE97E5A4AAE9AB98E79A84E4BC98E8B4A8E585ACE58FB8EFBC8CE79C8BE5A5BDEFBC9A3129E796ABE68385E588A9E5A5BDE79A84E789A9E6B581E38081E796ABE88B97E7AD89E69DBFE59D97EFBC9B3229E585A8E79083E7BB8FE6B58EE5A48DE88B8FE5928CE6B581E58AA8E680A7E5AEBDE69DBEE58F97E79B8AE69DBFE59D97EFBC9AE69C89E889B2E98791E5B19EEFBC9B3329E9AB98E7ABAFE588B6E980A0E699AFE6B094E5BAA6E8B68BE58ABFE4B88AE8A18CE69DBFE59D97EFBC9AE5869BE5B7A5E38081E588B6E980A0E58D87E7BAA7E5928CE585A8E79083E58C9628E5B7A5E7A88BE69CBAE6A2B029E38081E99482E794B5E6B1A0EFBC9B3429E8AF81E588B8E58FAFE998B6E6AEB5E680A7E9858DE7BDAEEFBC8CE995BFE69C9FE68890E995BFCEB1E4B880E888ACEFBC9B3529E9A39FE59381E9A5AEE69699E5928CE58CBBE88DAFE7AD89E783ADE997A8E8B59BE98193E8A18CE4B89AE9BE99E5A4B4E79A84E59B9EE8B083E69CBAE4BC9AE380823C2F703E0A3C703E3C2F703E0A3C703EE58FA6E5A496EFBC8CE4B89CE590B4E8AF81E588B8E8A1A8E7A4BAEFBC8CE796ABE5908EE9A1BAE591A8E69C9FE5928CE69C8DE58AA1E6B688E8B4B9E68890E995BFE698AFE4B8BBE6978BE5BE8BEFBC8CE4BAA6E698AFE58D81E59B9BE4BA94E8A784E58892E6B688E8B4B9E58685E5BEAAE78EAFE6A0B8E5BF83E38082E5AFB9E6AF94E6B5B7E5A496EFBC8CE68891E59BBDE69C8DE58AA1E6B688E8B4B9E58DA0E6AF94E4BB8DE69C89E8BE83E5A4A7E5B7AEE8B79DEFBC8CE68F90E58D87E7A9BAE997B4E5B9BFE99894E38082E5908CE697B6EFBC8CE68891E59BBDE6ADA3E580BCE4BABAE59D87474450E4BB8E31E4B887E7BE8EE58583E59091312E35E4B887E7BE8EE58583E68F90E58D87E79A84E585B3E994AEE697B6E69C9FEFBC8CE59F8EE99587E58C96E38081E7BB8FE6B58EE5A29EE995BFE38081E6B688E8B4B9E7BB93E69E84E7AD89E5A49AE59BA0E7B4A0E5B086E588BAE6BF80E69C8DE58AA1E6B688E8B4B9E99C80E6B182E698BEE89197E68F90E58D87E380823C2F703E0A3C703E3C2F703E0A3C703EE7ACACE4B880E38081E995BFE69C9FE59D9AE5AE9AE5B883E5B180E6B688E8B4B9E9BE99E5A4B4E38082E796ABE68385E586B2E587BBE4B88BE587B8E698BEE9BE99E5A4B4E6A0B8E5BF83E4BBB7E580BCEFBC8CE59D9AE5AE88E68890E995BFE680A7E4B88EE59BBDE4BAA7E69BBFE4BBA3E585BCE585B7E79A84E7BAA2E588A9E8A18CE4B89AE38081E68A8AE68FA1E4BC98E8B4A8E8B59BE98193E4B8ADE79A84E9BE99E5A4B4E4B8AAE882A1E38082E5BBBAE8AEAEE585B3E6B3A8EFBC9AE5858DE7A88EEFBC9AE4B880E8B685E5A49AE5BCBAE6A0BCE5B180E5889DE78EB0EFBC8CE7A6BBE5B29BE7BAA2E588A9E7A8B3E6ADA5E9878AE694BEEFBC9BE9A490E9A5AEEFBC9AE8BF9EE99481E58C96E6B5AAE6BDAEE4B88BEFBC8CE9BE99E5A4B4E796ABE5908EE8B5B7E8889EEFBC9BE7BE8EE5A68626616D703BE58CBBE7BE8EEFBC9AE9A29CE580BCE7BB8FE6B58EE697B6E4BBA3EFBC8CE68890E995BFE4B88EE4BBB7E580BCE585BCE585B7E380823C2F703E0A3C703E3C2F703E0A3C703EE7ACACE4BA8CE38081E68BA5E68AB1E9A1BAE591A8E69C9FE69C8DE58AA1E6B688E8B4B9E68890E995BFE38082E585B3E6B3A8E5A48DE88B8FE5B8A6E69DA5E79A84E8BEB9E99985E694B9E59684E5928CE59091E4B88AE5BCB9E680A7EFBC8CE5B883E5B180E4BC98E8B4A8E69C8DE58AA1E6B688E8B4B9E9BE99E5A4B4E38082E5BBBAE8AEAEE585B3E6B3A8EFBC9AE98592E5BA97EFBC9AE585B3E6B3A8E9A1BAE591A8E69C9FE5A48DE88B8FE4B88BE4B89AE7BBA9E5BCB9E680A7EFBC9BE69687E69785EFBC9AE99C80E6B182E59B9EE69A96EFBC8CE69C9FE5BE85E796ABE5908EE699AFE6B094E5BAA6E68F90E58D87EFBC9BE58D9AE5BDA9EFBC9AE6988EE69C88E4BE9DE697A7E59CA8EFBC8CE99D99E5BE85E5A48DE88B8FE887B3E380823C2F703E0A, '2021-01-11 16:19:46');
本文地址：https://blog.csdn.net/duansamve/article/details/112547813