当前位置: 首页 > news >正文

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

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

相关文章:

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

1、项目准备 本篇文章讲解的是一个简单的文章后台管理系统,系统的功能很简单,如下:登录、退出;首页;内容(文章)管理:文章列表、发布文章、修改文章。 1)React官方脚手架:create-rea…...

Elasticsearch 支持的插件 —— 筑梦之路

Analysis 插件: 1、IK Analyzer:适用于中文分词的插件,提供了针对中文文本的分析器。 2、Smart Chinese Analysis:另一个中文分词插件,支持中文智能分词。 集群管理插件: 1、Kibana:Elasticsear…...

HTML:链接

目录 一、超链接 二、 外联元素 一、<a>超链接 <a> 标签用于定义超链接&#xff0c;超链接可以让用户从一个网页跳转到另一个网页。 常用属性&#xff1a; href指定链接的目标地址。download表示链接是一个下载链接&#xff0c;指定下载的文件名。target 指定在…...

vscode远程连接centos

文章目录 vacode连接linux1. 安装插件2. 查看配置3. 打开ssh4. 远程连接 vacode连接linux 1. 安装插件 在扩展栏搜索remote &#xff0c;找到Remote Development插件&#xff0c;进行安装&#xff1a; 2. 查看配置 打开自己的linux终端&#xff0c;输入ifconfig&#xff0c;…...

scala---面向对象(类,对象,继承,抽象类,特质)

一、类&#xff08;class&#xff09;和 对象&#xff08;object&#xff09; 1、类 类就是对客观的一类事物的抽象。用一个class关键字来描述和Java一样&#xff0c;在这个类中可以拥有这一类事物的属性&#xff0c;行为等等。 2、为什么要有对象 在java中的一个class既可…...

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

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

数据结构与算法——20.B-树

这篇文章我们来讲解一下数据结构中非常重要的B-树。 目录 1.B树的相关介绍 1.1、B树的介绍 1.2、B树的特点 2.B树的节点类 3.小结 1.B树的相关介绍 1.1、B树的介绍 在介绍B树之前&#xff0c;我们回顾一下我们学的树。 首先是二叉树&#xff0c;这个不用多说&#xff…...

Tomcat源码解析——Tomcat的启动流程

一、启动脚本 当我们在服务启动Tomcat时&#xff0c;都是通过执行startup.sh脚本启动。 在Tomcat的启动脚本startup.sh中&#xff0c;最终会去执行catalina.sh脚本&#xff0c;传递的参数是start。 在catalina.sh脚本中&#xff0c;前面是环境判断和初始化参数&#xff0c;最终…...

蓝桥杯真题演练:2023B组c/c++

日期统计 小蓝现在有一个长度为 100 的数组&#xff0c;数组中的每个元素的值都在 0 到 9 的范围之内。 数组中的元素从左至右如下所示&#xff1a; 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 5 7 0 9 9 1 9 4 4 6 8 6 3 …...

微信小程序实现预约生成二维码

业务需求&#xff1a;点击预约按钮即可生成二维码凭码入校参观~ 一.创建页面 如下是博主自己写的wxml&#xff1a; <swiper indicator-dots indicator-color"white" indicator-active-color"blue" autoplay interval"2000" circular > &…...

专业140+总分410+北京理工大学826信号处理导论考研经验北理工电子信息通信工程,真题,参考书,大纲。

今年考研专业课826信号处理导论&#xff08;信号系统和数字信号处理&#xff09;140&#xff0c;总分410&#xff0c;顺利上岸&#xff01;回看去年将近一年的复习&#xff0c;还是记忆犹新&#xff0c;有不少经历想和大家分享&#xff0c;有得有失&#xff0c;希望可以对大家复…...

做一个后台项目的架构

后台架构的11个维度 架构1&#xff1a;团队协助基础工具链的选型和培训架构2&#xff1a;搭建微服务开发基础设施架构3&#xff1a;选择合适的RPC框架架构4&#xff1a;选择和搭建高可用的注册中心架构5&#xff1a;选择和搭建高可用的配置中心架构6&#xff1a;选择和搭建高性…...

嵌入式单片机 TTL电平、232电平、485电平的区别和联系

一、简介 TTL、232和485是常见的串口通信标准&#xff0c;它们在电平和通信方式上有所不同&#xff0c; ①一般情况下TTL电平应用于单片机外设&#xff0c;属于MCU/CPU等片外外设&#xff1b; ②232/485电平应用于产品整体对外的接口&#xff0c;一般是片外TTL串口转232/485…...

2024年大唐杯备考

努力更新中…… 第一章 网络架构和组网部署 1.1 5G的网络整体架构 5G网络中的中传、回传、前传&#xff08;这里属于承载网的概念&#xff09; CU和DU之间是中传 BBU和5GC之间是回传 BBU和AAU之间是前传&#xff08;这个好记&#xff09; 这里竟然还藏了MEC&#xff08;…...

Spring Boot(06):Spring Boot与MySQL搭配,打造极简高效的数据管理系统

1. 前言 Spring Boot 是一个基于Spring框架的快速开发框架&#xff0c;可以使开发者快速搭建一个可靠的Java Web应用程序。而MySQL是最广泛使用的关系型数据库系统之一&#xff0c;也是Spring Boot整合数据库的首选。本文将介绍Spring Boot如何整合MySQL数据库。 2. 摘要 本文…...

Vue3 + Vite 构建组件库发布到 npm

你有构建完组件库后&#xff0c;因为不知道如何发布到 npm 的烦恼吗&#xff1f;本教程手把手教你用 Vite 构建组件库发布到 npm 搭建项目 这里我们使用 Vite 初始化项目&#xff0c;执行命令&#xff1a; pnpm create vite my-vue-app --template vue这里以我的项目 vue3-xm…...

Vite多环境配置与打包:灵活高效的Vue开发工作流

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

从零实现诗词GPT大模型:数据集介绍和预处理

专栏规划: https://qibin.blog.csdn.net/article/details/137728228 本章将介绍该系列文章中使用的数据集&#xff0c;并且编写预处理代码&#xff0c;处理成咱们需要的格式。 一、数据集介绍 咱们使用的数据集名称是chinese-poetry&#xff0c;是一个在github上开源的中文诗…...

45.HarmonyOS鸿蒙系统 App(ArkUI)创建列表(List)

列表是一种复杂的容器&#xff0c;当列表项达到一定数量&#xff0c;内容超过屏幕大小时&#xff0c;可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集&#xff0c;例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求&#xff08;如通讯录、音乐列…...

推荐算法之协同过滤

算法原理 透过百科&#xff0c;我们了解到协同过滤推荐&#xff08;Collaborative Filtering recommendation&#xff09;是在信息过滤和信息系统中正迅速成为一项很受欢迎的技术。与传统的基于内容过滤直接分析内容进行推荐不同&#xff0c;协同过滤算法结合用户行为分析用户…...

Kotlin 面试题

lifecycleScope.launchWhenResumed launchWhenResumed是一个扩展函数,它是LifecycleCoroutineScope的一部分,并且它是在Android的Lifecycle库中引入的。 这个函数的主要目的是在Lifecycle的对应组件(通常是Activity或Fragment)处于“resumed”状态时启动协程。 public fun …...

TCM(Tightly Coupled Memory)紧密耦合存储器简介

在ARM Cortex处理器中&#xff0c;TCM通常指的是紧密耦合存储器&#xff08;Tightly Coupled Memory&#xff09;。TCM是一种位于处理器核心旁边的高速存储器&#xff0c;它的设计目的是为了提供低延迟和高带宽的内存访问性能。 TCM的特点是它与处理器内核紧密耦合&#xff0c;…...

《自动机理论、语言和计算导论》阅读笔记:p172-p224

《自动机理论、语言和计算导论》学习第 8 天&#xff0c;p172-p224总结&#xff0c;总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183&#xff0c;But perhaps more importantly, the tree, known as a “parse tree”, when used in a …...

typescript playwright 笔记

录制调式 命令 npx playwright codegen url npx playwright codegen https://www.baidu.com/typescript 中 format 和 split 的使用 import * as util from util;const str1 hellow %s; const format util.format; const str2 format(str1, word);// 提取taskId const str3…...

从零实现诗词GPT大模型:了解Transformer架构

专栏规划: https://qibin.blog.csdn.net/article/details/137728228 这篇文档我们开始对GPT的核心组件Transformer进行一个详细的讲解, 加急编写中…...

温故知新之-TCP Keepalive机制及长短连接

[学习记录] 前言 TCP连接一旦建立&#xff0c;只要连接双方不主动 close &#xff0c;连接就会一直保持。但建立连接的双方并不是一直都存在数据交互&#xff0c;所以在实际使用中会存在两种情况&#xff1a;一种是每次使用完&#xff0c;主动close&#xff0c;即短连接&…...

架构师系列-搜索引擎ElasticSearch(七)- 集群管理之分片

集群健康检查 Elasticsearch 的集群监控信息中包含了许多的统计数据&#xff0c;其中最为重要的一项就是集群健康&#xff0c;它在 status字段中展示为 green&#xff08;所有主分片和副本分片都正常&#xff09;、yellow&#xff08;所有数据可用&#xff0c;有些副本分片尚未…...

基于Spring Boot实现的图书个性化推荐系统

基于Spring Boot实现的图书个性化推荐系统 开发语言&#xff1a;Java语言 数据库&#xff1a;MySQL工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统实现 前台首页功能模块 学生注册 登录 图书信息 个人信息 管理员功能模块 学生管理界面图 图书分类管理界面图 图书信息管…...

安全加速SCDN带的态势感知能为网站安全带来哪些帮助

随着安全加速SCDN被越来越多的用户使用&#xff0c;很多用户都不知道安全加速SCDN的态势感知是用于做什么的&#xff0c;德迅云安全今天就带大家来了解下什么是态势感知&#xff0c;态势感知顾名思义就是对未发生的事件进行预知&#xff0c;并提前进行防范措施的布置&#xff0…...

java面向对象.day21(继承02--super)

说明 super父 this当前 使用super时&#xff0c;首先要继承父类&#xff0c;其次是在子类里面才能使用super。 继承父类后&#xff0c;运行子类时会同时调用父类的构造方法&#xff0c;如果要显性调用父类的构造方法必须在子类的第一行调用。 单使用super()表示调用父类构造…...

青岛建站费用/福州360手机端seo

Mask RCNN基于Faster RCNN改进&#xff0c;所以若有看不懂的地方可以先去看看我上篇博客Faster R-CNN整体介绍及部分细节讲解 论文全称&#xff1a;Mask R-CNN 目录一、整体总结1. general notes2. 整体架构二、论文细节三、RoI Pool和RoI Align一、整体总结 1. general notes…...

涞水住房和城乡建设厅网站/网页设计模板

Python实战社群Java实战社群长按识别下方二维码&#xff0c;按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者丨艺艺子来源丨TechWeb&#xff08;ID&#xff1a;TechWeb&#xff09;1月13日消息&#xff0c;据国外媒体报道&#xff0c;美国当地时间周…...

官网+wordpress/如何注册百度账号

0 环境系统&#xff1a;win10编辑器: vscode1 相关安装vscode下载MinGW下载若想要MinGW最新版本&#xff0c;往下拉&#xff0c;找到最新版的 "x86_64-posix-seh"&#xff0c;点击下载就行&#xff0c;不需要的话&#xff0c;直接下载我上面提供的即可vscode c插件下…...

建设网站需要哪些人/网页设计代码

学习了一下费用流的做法&#xff0c;顺便学习了一下zkw&#xff08;听说原始对偶是折中做法&#xff0c;这种没什么特点的就不学了&#xff09;&#xff0c;顺便研究了一下费用流的速度&#xff1a;&#xff08;对于这题而言&#xff09;upd抱歉我这个SLF优化写反了。。。然而反…...

珠海网站建设 金蝶/手机网站建设

在Java中&#xff0c;提供了对信号量Semaphore的支持。Semaphore类是一个计数信号量&#xff0c;必须由获取它的线程释放&#xff0c;通常可以用于限制并发访问的线程数目。Semaphore的使用获得Semaphore对象public Semaphore(int permits, boolean fair)permits&#xff1a;初…...

太原优化网站/互动营销成功案例

在Web应用中&#xff0c;服务器把网页传给浏览器&#xff0c;实际上就是把网页的HTML代码发送给浏览器&#xff0c;让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP&#xff0c;所以&#xff1a; HTML是一种用来定义网页的文本&#xff0c;会HTML&#xff0c;就可以编…...