React（1702H）文章管理-cms系统

React（1702H）文章管理-cms系统

一、GIF图

1、效果图

2、上传图片和创建文章

3、编辑文章

4、添加带文章的banner

二、使用到的npm包

1、pug

参考链接：​​pug = require('pug')const fs = require('fs')function editArticle (htmlJson, fileName) { const compiledFunction = pug.compileFile('views/index.pug'); let indexHtml = compiledFunction({ ...htmlJson, // list: [ // { // type: 'title-level-1', // text: '活动规则：' // } // ] }) fs.writeFile(`./public/article/${fileName}`, indexHtml, function (err) { if (err) { throw err; } });}//生成添加文章app.post('/add/article', async function (req, res) { let { htmlJson } = req.body let fileName = (new Date()).getTime() + '.html' editArticle(htmlJson, fileName) let articlePath = ` let uid = getID(10) let createTime = new Date().getTime() let sqlData = await addArticle( uid, htmlJson.articleTitle, fileName, articlePath, JSON.stringify(htmlJson), createTime) if (sqlData) { let data = { fileName, articlePath } res.send(({ code: 200, data: data, message: '添加文章成功' })) } else { res.send(({ code: 400, message: '添加文章失败' })) }})//获取文章列表app.get('/article/list', async function (req, res) { const data = await getArticleList() res.send(({ code: 200, data: data, message: '文章列表' }))})//通过id获取文章app.get('/article_detail', async function (req, res) { let {id} = req.query const data = await getArticleDetail(id) res.send(({ code: 200, data: data, message: '文章详情' }))})//编辑文章app.post('/article_edit', async function (req, res) { let {articleId, title, fileName, htmlJson} = req.body const data = await editArticleDetail(articleId, title, JSON.stringify(htmlJson)) editArticle(htmlJson, fileName) res.send(({ code: 200, message: '编辑文章成功' }))})

views/index.pug:

doctype htmlhtml head title=articleTitle link(rel="stylesheet" type='text/css' href='/css/index.css') body div.m-warp div.m-hearder-wrap img(class="m-header-img" src=headerImagePath) div.m-content-wrap if list each item in list case item.type when 'p' p.m-paragraph-text=item.text when 'p-strong' p.m-paragraph-text-strong=item.text when 'title-level-1' div.m-title-level-1=item.text div.m-division when 'title-level-2' div.m-title-level-2=item.text script(src='/common/js/jquery.min.js') script(src='/js/index.js')

三、前端React

前端React部分没有用到新技术,需要具备知识包括：

路由、antd组件（Button, Input, message, Modal, Checkbox,Table）、受控组件、生命周期（componentDidMount）、Scrollbars库、moment库（时间戳转日期）、axios等。

Article.js:

import React from 'react';import { withRouter } from 'react-router-dom'import { Button, Input, message, Modal, Table } from 'antd';import { Scrollbars } from 'react-custom-scrollbars'import moment from 'moment'import Api from '../../api/index.js'import * as keyCode from '../../api/keyCode.js'import './index.css'const { TextArea } = Input;class Article extends React.Component { constructor(props) { super(props) this.state = { addArticleModalVisible: false, articleTitle: '', list: [], } } render() { let { addArticleModalVisible, articleTitle, list, } = this.state let columns = this.renderColumns() return (

); }}//生命周期Object.assign(Article.prototype, { renderColumns () { return [ { title: 'ID', dataIndex: 'uid', }, { title: '标题', dataIndex: 'title', }, { title: '文章路径', dataIndex: 'path', key: 'path', render: (text, record) => { return {text} } }, { title: '创建时间', dataIndex: 'create_time', key: 'create_time', render: (text, record) => { return {moment(text).format('YYYY-MM-DD HH:mm:ss')} } }, { title: '操作', fixed: 'right', width: 150, render: (text, record, index) => { return } } ] }, componentDidMount() { this.getArticleList() }})//事件Object.assign(Article.prototype, { handleShowAddArticleModal() { this.setState({ addArticleModalVisible: true, articleTitle: '' }) }, handleHideModal() { this.setState({ addArticleModalVisible: false, addHeaderImageModal: false }) }, handleAddArticle() { let {articleTitle} = this.state let htmlJson = { articleTitle, list: [], } let data = { htmlJson } Api.addArticle(data).then((res) => { console.log(res) this.getArticleList() this.handleHideModal() }) }, getArticleList() { Api.getArticleList().then((res) => { if (res.code = keyCode.SUCCESS) { this.setState({ list: res.data.list }) } }) }, handleEditArticle(record) { this.props.history.push(`/management/edit_article/${record.uid}`) }})//受控组件Object.assign(Article.prototype, { handleInput(field, e) { this.setState({ [field]: e.target.value }) },})export default withRouter(Article)

EditArticle.js:

import React from 'react';import { withRouter } from 'react-router-dom'import { Button, Input, message, Modal, Checkbox } from 'antd';import { Scrollbars } from 'react-custom-scrollbars'import Api from '../../api/index.js'import * as keyCode from '../../api/keyCode.js'import './index.css'const { TextArea } = Input;class EditArticle extends React.Component { constructor(props) { super(props) this.state = { articleId: '', fileName: '', articlePath: '', articleTitle: '', headerImagePath: '', htmlJson: { }, articleTextArea: '', paragraph: '', isParagraphStrong: false, paragraphTitleLevelFirst: '', paragraphTitleLevelSecond: '', addHeaderImageModal: false, addParagraphModal:false, addParagraphTitleLevelFirstModal: false, addParagraphTitleLevelSecondModal: false, } } render() { let { articleId, fileName, articlePath, articleTitle, headerImagePath, articleTextArea, paragraph, isParagraphStrong, paragraphTitleLevelFirst, paragraphTitleLevelSecond, addHeaderImageModal, addParagraphModal, addParagraphTitleLevelFirstModal, addParagraphTitleLevelSecondModal, } = this.state return (

); }}//生命周期Object.assign(EditArticle.prototype, { componentDidMount() { this.getArticleById() }})//事件Object.assign(EditArticle.prototype, { handleGoBack() { this.props.history.push('/management/article') }, getArticleById() { let {match} = this.props let articleId = match.params.id this.setState({ articleId }) Api.getArticleDetail(`?id=${articleId}`).then((res) => { console.log(res) if (res.code === keyCode.SUCCESS) { let articleTextArea = JSON.stringify(res.data[0].content, null, 2) this.setState({ fileName: res.data[0].file_name, articlePath: res.data[0].path, articleTextArea, htmlJson: res.data[0].content }) } }) }, handleEditArticle() { let {articleId, fileName, articleTextArea} = this.state let htmlJson try { htmlJson = JSON.parse(articleTextArea) } catch (err) { console.log(err) message.info('文本框里输入的json格式不对！') return } let title = '' if (htmlJson.articleTitle) { title = htmlJson.articleTitle } let data = { articleId, title, fileName, htmlJson, } Api.editArticle(data).then((res) => { console.log(res) if (res.code === keyCode.SUCCESS) { this.setState({ htmlJson }) message.info('编辑成功') } }) }})//对话框相关Object.assign(EditArticle.prototype, { handleShowAddHeaderImageModal() { let {htmlJson} = this.state this.setState({ addHeaderImageModal: true, articleTitle: htmlJson.articleTitle, headerImagePath: htmlJson.headerImagePath, }) }, handleShowAddParagraphModal(){ this.setState({ addParagraphModal: true, paragraph: '', isParagraphStrong: false, }) }, handleShowAddParagraphTitleLevelFirstModal() { this.setState({ addParagraphTitleLevelFirstModal: true, paragraphTitleLevelFirst: '', }) }, handleShowAddParagraphTitleLevelSecondModal() { this.setState({ addParagraphTitleLevelSecondModal: true, paragraphTitleLevelSecond: '', }) }, handleHideModal() { this.setState({ addHeaderImageModal: false, addParagraphModal: false, addParagraphTitleLevelFirstModal: false, addParagraphTitleLevelSecondModal: false, }) },})//顶部图片、段落、段落一级标题、段落二级标题Object.assign(EditArticle.prototype, { handleAddHeaderImage() { let {htmlJson, articleTitle, headerImagePath} = this.state htmlJson.headerImagePath = headerImagePath htmlJson.articleTitle = articleTitle this.setState({ htmlJson, }) this.formatTextAreaString(htmlJson) this.handleHideModal() }, handleAddParagraph() { let {htmlJson, paragraph, isParagraphStrong } = this.state if (!htmlJson.list) { htmlJson.list = [] } htmlJson.list.push({ type: isParagraphStrong ? 'p-strong' : 'p', text: paragraph }) this.setState({ htmlJson }) this.formatTextAreaString(htmlJson) this.handleHideModal() }, handleAddParagraphTitleLevelFirst() { let {htmlJson, paragraphTitleLevelFirst } = this.state if (!htmlJson.list) { htmlJson.list = [] } htmlJson.list.push({ type: 'title-level-1', text: paragraphTitleLevelFirst }) this.setState({ htmlJson }) this.formatTextAreaString(htmlJson) this.handleHideModal() }, handleAddParagraphTitleLevelSecond() { let {htmlJson, paragraphTitleLevelSecond } = this.state if (!htmlJson.list) { htmlJson.list = [] } htmlJson.list.push({ type: 'title-level-2', text: paragraphTitleLevelSecond }) this.setState({ htmlJson }) this.formatTextAreaString(htmlJson) this.handleHideModal() }})//工具Object.assign(EditArticle.prototype, { formatTextAreaString(htmlJson) { let articleTextArea = JSON.stringify(htmlJson, null, 2) this.setState({ articleTextArea, }) }})//受控组件Object.assign(EditArticle.prototype, { handleInput(field, e) { this.setState({ [field]: e.target.value }) }, handleCheckbox(field, e) { this.setState({ [field]: e.target.checked }) },})export default withRouter(EditArticle)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。