React搭建一个文章后台管理系统

1、项目准备

本篇文章讲解的是一个简单的文章后台管理系统,系统的功能很简单,如下:登录、退出;首页;内容(文章)管理:文章列表、发布文章、修改文章。

1)React官方脚手架:create-react-app

2)react-hooks

3)状态管理:mobx

4)UI组件库:antd v5

5)ajax请求库:axios

6)  路由:react-router-dom 以及 history

7)  富文本编辑器:react-quill

8)  CSS预编译器:sass

2、项目搭建

本系统是基于react官方脚手架搭建,具体的详细搭建,React脚手架的搭建与使用-CSDN博客

3、scss预处理的使用

SASS是一种预编译的CSS,作用类似于Less。由于React中内置了处理SASS的配置,所有在CRA创建的项目中可以直接使用SASS来写样式,实现如下:

安装解析sass的第三方包:

​​​​​​​npm install sass

创建全局样式文件并引入:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装IntelliJ IDEA插件教程

安装IntelliJ IDEA插件:一份详细指南 在提升IntelliJ IDEA开发效率的过程中,插件扮演着不可或缺的角色。它们为IDE提供了额外的功能和工具,以满足开发者在特定编程语言、框架、测试、版本控制等方面的个性化需求。本文将为您详细阐述如何在I…

【已开源】​基于stm32f103的爬墙小车

​基于stm32f103的遥控器无线控制爬墙小车,实现功能为可平衡在竖直墙面上,并进行移动和转向,具有超声波防撞功能。 直接上: 演示视频如:哔哩哔哩】 https://b23.tv/BzVTymO 项目说明: 在这个项目中&…

数模 线性规划模型理论与实践

线性规划模型理论与实践 1.1 线性规划问题 在人们的生产实践中,经常会遇到如何利用现有资源来安排生产,以取得最大经济效益的问题。此类问题构成了运筹学的一个重要分支一数学规划,而线性规划(Linear Programming 简记LP)则是数学规划的一个…

架构师系列-搜索引擎ElasticSearch(五)- 索引设计

索引创建后,要非常谨慎,创建不好后面会出现各种问题。 索引设计的重要性 索引创建后,索引分片只能通过_split和_shrink 接口对其进行成倍的增加和缩减。 ES的数据是通过_routing分配到各个分片上的,所以本质上不推荐区改变索引的…

ubuntu git相关操作

1 安装git sudo apt install git git --version git version 2.25.1 2 解决git超时 2.1 扩大post的buffer git config --global http.postBuffer 524288000 git config --global http.postBuffer 157286400 2.2 换回HTTP1上传。上传之后再切换回HTTP2 …

AI克隆语音(基于GPT-SoVITS)

概述 使用GPT-SoVITS训练声音模型,实现文本转语音功能。可以模拟出语气,语速。如果数据质量足够高,可以达到非常相似的结果。相比于So-VITS-SVC需要的显卡配置更低,数据集更小(我的笔记本NVIDIA GeForce RTX 4050 Lap…

智能水务系统:构建高效节水的城市水网

随着城市化进程的加速和人民生活水平的提高,对水务管理的需求也越来越高。传统的水务管理方式已经无法满足现代社会的需求,而智能水务系统的出现为水务管理带来了新的变革。本文将从项目背景、需求分析、建设目标、建设内容、技术方案、安全设计等方面&a…

网络篇06 | 应用层 自定义协议

网络篇06 | 应用层 自定义协议 01 固定协议设计(简化版)1)总体设计2)值设计 02 可变协议设计(进阶版)1)固定头(Fixed Header)2)可变头(Variable H…

UBuntu18.04通过ODBC连接MySQL远程数据库

今天在做一个Qt视频播放器的小项目然后想要在ubuntu18.04运行这个项目,需要在Qt中连接远程的MySQL数据库,所以用到了ODBC。我在连接时遇到了一些问题,加之网上的教程各说纷纭,所以我花了很多时间去解决,所以决定做做笔…

数据资产与数据要素的重要性及数据资产入表的实践指南

## 引言在当今快速发展的数字化时代,数据资产已经成为企业最宝贵的资源之一。数据资产不仅对企业的运营决策有着至关重要的影响,而且在企业的财务健康和市场竞争力方面扮演着核心角色。数据要素,作为构成数据资产的基本单元,其管理…

【CSS】CSS水平居中方案

CSS水平居中方案 1. 行内元素水平居中 设置父元素的text-align:center .box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink; }2. 块级元素水平居中 当块级元素设置了明确的宽度数值时,可以使用margin: 0 auto 3.…

【opencv】示例-stiching_detailed.cpp 使用OpenCV进行图像拼接的整体流程

#include <iostream> // 引入输入输出流库 #include <fstream> // 引入文件流库&#xff0c;用于文件输入输出 #include <string> // 引入字符串库 #include "opencv2/opencv_modules.hpp" // 引入OpenCV模块 #include <opencv2/core/utility.h…

2023年看雪安全技术峰会(公开)PPT合集(11份)

2023年看雪安全技术峰会&#xff08;公开&#xff09;PPT合集&#xff0c;共11份&#xff0c;供大家学习参阅。 1、MaginotDNS攻击&#xff1a;绕过DNS 缓存防御的马奇诺防线 2、从形式逻辑计算到神经计算&#xff1a;针对LLM角色扮演攻击的威胁分析以及防御实践 3、TheDog、0…

2024软件工程第一次作业

communication tasks Set a project (can use the project I give in the class in the file), then try to develop a set of actions for the communication activity. Select one action and define a task set for it. 1.设置一个项目&#xff08;可以使用我上课在文件中给…

python调用Microsoft Word把文件夹下所有docx或doc批量转化为PDF

python调用Microsoft Word把文件夹下所有docx或doc批量转化为PDF 首先&#xff0c;确保你的系统上安装了Microsoft Word。然后&#xff0c;你需要安装comtypes库&#xff0c;如果你还没有安装&#xff0c;可以通过以下命令进行安装&#xff1a; pip install comtypes以下是一个…

Mac 软件清单

~自留备用~ Macbook用了几年之后, 512G的内置硬盘有些紧张了, 这几天总是提示空间不足, 就重装了下系统, 重装之后竟然不记得有些软件的名字和下载链接, 特此记录 Office 办公套件 直接从微软官网下载Office 安装包https://officecdnmac.microsoft.com/pr/C1297A47-86C4-4C1F…

Kafka 简单介绍

目录 一 消息队列&#xff08;MQ&#xff09; 1&#xff0c;为什么需要消息队列&#xff08;MQ 2&#xff0c;常见的 MQ 中间件 3&#xff0c;MQ 传统应用场景之异步处理 4&#xff0c;使用消息队列的好处 5&#xff0c;消息队列的两种模式 5.1点对点模式&#xf…

transformer上手(5) —— 必要的 Pytorch 知识

Transformers 库建立在 Pytorch 框架之上&#xff08;Tensorflow 的版本功能并不完善&#xff09;&#xff0c;虽然官方宣称使用 Transformers 库并不需要掌握 Pytorch 知识&#xff0c;但是实际上我们还是需要通过 Pytorch 的 DataLoader 类来加载数据、使用 Pytorch 的优化器…

【机器学习300问】68、随机初始化神经网络权重的好处?

一、固定的初始化神经网络权重可能带来的问题 在训练神经网络的时候&#xff0c;初始化权重如果全部设置为0或某个过大值/过小值。会导致一些问题&#xff1a; 对称权重问题&#xff1a;全为0的初始化权重会导致神经网络在前向传播时接收到的信号输入相同。每个神经网络节点中…

车载电子电器架构 —— 平行开发策略

车载电子电器架构 —— 平行开发策略 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己…