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

React项目实战--------极客园项目PC端

项目介绍:主要将学习到的项目内容进行总结(有需要项目源码的可以私信我)

关于我的项目的配置如下,请注意下载的每个版本不一样,写的api也不一样

一、项目介绍

1.资料

1)短信接收&M端演示:极客园icon-default.png?t=N7T8http://geek.itheima.net

2)PC端接口文档:极客园PCicon-default.png?t=N7T8http://geek.itheima.net/api-pc.html

2.项目介绍

1)【极客园】对标CSDN、博客园等竞品,致力成为更加贴近年轻IT从业者(学员)的科技资讯类应用

2)产品关键词:IT、极客、活力、科技、技术分享、前沿动态、内容社交

3)产品用户特点:年轻有活力,对IT领域前沿科技信息充满探索欲和学习热情

4)极客园PC端项目:个人自媒体管理端

5)项目演示

6)项目功能

  • 登录
  • 首页
  • 内容管理(文章列表、发布文章、修改文章)

3.技术栈

  • react v17.0.2 / react-dom v17.0.2
  • ajax请求库:axios
  • 路由:react-router-dom以及history
  • 富文本编辑器:react-quill
  • CSS预编译器:sass
  • UI组件库:antd v4
  • 项目搭建:React官方脚手架 create-react-app

二、项目搭建

1.创建项目

  1. 使用React CLI搭建项目 npx create-react-app geek-pc
  2. 进入项目根目录:cd geek-pc
  3. 启动项目: yarn start
  4. 调整项目目录结构:

2.使用git管理项目

3.配置基础路由

​​​​​​​1)安装路由:yarn add react-router-dom

​​​​​​​

使用yarn add的时候可能会报上述错误,报的话可以使用npm install react-router-dom来进行安装

2)在pages目录中创建两个页面:Login(登录页面)、Layout(首页)

3)在App.js中配置路由

import React from 'react'
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
import Login from './pages/Login'
import Layout from './pages/Layout'
function App() {return (<Router><div className="App">{/* <Link to="/login">登录</Link><Link to="/home">首页</Link> */}{/* 配置路由的规则 */}<Routes><Route path="/home" element={<Layout />}></Route>{/* <Route path="/home" component={<Layout></Layout>}></Route> */}<Route path="/login" element={<Login></Login>}></Route></Routes></div></Router>)
}export default App

配置完路由就可以实现,网页输入网址,展示对应的页面的内容

此时需要注意的点是:

a.老版本用component = {<Layout/>}来链接到页面,新版本用这个无效,得使用element

b:旧版本使用Switchl来添加多个路由,新版本使用Routes

<Switch><Route> </Route><Route></Route>
</Switch>

4.组件库---antd

1)官方文档链接

Ant Design - 一套企业级 UI 设计语言和 React 组件库

2)antd是基于Ant Design设计体系的React UI组件库,主要用于研发企业级中后台产品

3)开箱即用

a.安装:npm install antd

b.使用

import { Button, DatePicker, Card } from 'antd'
<Button type="primary">我是一个按钮</Button>// 导入antd的全局样式
import 'antd/dist/reset.css'

三、项目功能------登录

功能如下:​​​​​​​

  • 搭建登录页面结构
  • 登录表单校验
  • 登录逻辑
  • 封装处理token、axios的工具函数
  • 登录访问控制

​​​​​​​1.Card组件的使用

export default class Login extends Component {render() {return (<div className="login">{/* 登陆组件 */}{/* <Button type="primary">我是一个按钮</Button> */}{/* <DatePicker></DatePicker>  */}{/* <Card extra={<a href="#">More</a>} style={{ width: 300 }}> */}<Card className="login-container">{/* <p>Card content</p><p>Card content</p><p>Card content</p> */}<img src={logo} className="login-logo" /></Card></div>)}
}

2.准备样式

.login {width: 100vw;height: 100vh;background-image: url('../../assets/login.png');position: relative;
}
.login-container {width: 440px;height: 360px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.login-logo {width: 200px;height: 40px;display: block;margin: 0 auto 20px;
}

3.使用绝对路径导入图片

我们使用相对路径../导入图片可能存在文件位置移动找不到图片的效果,所以使用绝对路径来配置

Importing a Component | Create React App

1)在项目根目录下创建jsconfig.json文件

{"compilerOptions": {"baseUrl": "src"},"include": ["src"]
}

2)导入删除掉相对路径

import logo from 'assets/logo.png'

4.使用sass文件修改掉css文件

1)安装sass

2)将css文件后缀改为.sass

3)使用sass以后就可以实现样式包裹,但是里面如果使用绝对路径会进行报错,所以需要使用~来进行导入

.login {width: 100vw;height: 100vh;background-image: url('~assets/login.png');position: relative;.login-container {width: 440px;height: 360px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.login-logo {width: 200px;height: 40px;display: block;margin: 0 auto 20px;}
}

5.

​​​​​​​

​​​​​​​

相关文章:

React项目实战--------极客园项目PC端

项目介绍&#xff1a;主要将学习到的项目内容进行总结&#xff08;有需要项目源码的可以私信我&#xff09; 关于我的项目的配置如下&#xff0c;请注意下载的每个版本不一样&#xff0c;写的api也不一样 一、项目介绍 1.资料 1&#xff09;短信接收&M端演示&#xff1a…...

Jerry每次能向前或向后走n*n步(始终不能超过初始位置1e5),q(q <= 1e5)次询问,求向前走d最少要几次

题目 思路&#xff1a;因为有走的过程不能超初始位置1e5的限制&#xff0c;所以不能直接用奇数最多两次&#xff0c;4的倍数最多两次的结论。spfa&#xff0c;平方数的dis为1&#xff0c;然后推出其他数的dis #include<bits/stdc.h> using namespace std; #define int …...

【Spring Boot 3】【Flyway】数据库版本管理

【Spring Boot 3】【Flyway】数据库版本管理 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是…...

蓝桥杯基础数据结构(java版)

引言 数据结构数据结构。所以数据结构是一个抽象的概念。其目的是为了更好的组织数据方便数据存储。下面我们来看一些简单的数据储存方式 输入和输出 这里先介绍java的输入和输出。简单引入&#xff0c;不过多详细介绍&#xff0c;等我单一写一篇的时候这里会挂上链接 简单的…...

39 C++ 模版中的参数如果 是 vector,list等集合类型如何处理呢?

在前面写的例子中&#xff0c;模版参数一般都是 int&#xff0c;或者一个类Teacher&#xff0c;假设我们现在有个需求&#xff1a;模版的参数要是vector&#xff0c;list这种结合类型应该怎么写呢&#xff1f; //当模版中的类型是 vector &#xff0c;list 等集合类型的时候的处…...

5.Pytorch模型单机多GPU训练原理与实现

文章目录 Pytorch的单机多GPU训练1)多GPU训练介绍2)pytorch中使用单机多GPU训练DistributedDataParallel(DDP)相关变量及含义a)初始化b)数据准备c)模型准备d)清理e)运行 3)使用DistributedDataParallel训练模型的一个简单实例 欢迎访问个人网络日志&#x1f339;&#x1f339;知…...

想成为一名C++开发工程师,需要具备哪些条件?

C语言是一门面向过程的、抽象化的通用程序设计语言&#xff0c;广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。尽管C语言提供了许多低级处理的功能&#xff0c;但仍然保…...

Qat++,轻量级开源C++ Web框架

目录 一.简介 二.编译Oat 1.环境 2.编译/安装 三.试用 1.创建一个 CMake 项目 2.自定义客户端请求响应 3.将请求Router到服务器 4.用浏览器验证 一.简介 Oat是一个面向C的现代Web框架 官网地址&#xff1a;https://oatpp.io github地址&#xff1a;https://github.co…...

openssl3.2 - 官方demo学习 - digest - EVP_MD_demo.c

文章目录 openssl3.2 - 官方demo学习 - digest - EVP_MD_demo.c概述笔记END openssl3.2 - 官方demo学习 - digest - EVP_MD_demo.c 概述 使用 SHA3-512 对多个buffer连续进行摘要, 最后得到一个摘要值 笔记 /*! \file EVP_MD_demo.c \note openssl3.2 - 官方demo学习 - dig…...

uniapp 编译后文字乱码的解决方案

问题: 新建的页面中编写代码&#xff0c;其中数字和图片都可以正常显示&#xff0c;只有中文编译后展示乱码 页面展示也是乱码 解决方案: 打开HuilderX编辑器的【文件】- 【以指定编码重新打开】- 【选择UTF-8】 然后重新编译就可以啦~ 希望可以帮到你啊~...

iOS中利用KeyChain永久保存用户信息的方法示例

方法示例 一、新建一个LYKeychainTool类&#xff0c;导入系统Security框架 &#xff0c;LYKeychainTool.h文件实现如下 // // LYKeychainTool.h // keyChainTest // // Created by Liyu on 2017/6/2. // Copyright © 2017年 liyu. All rights reserved. //#import <F…...

基于时域有限差分法的FDTD的计算电磁学算法(含Matlab代码)-YEE网格下的更新公式推导

基于时域有限差分法的FDTD的计算电磁学算法&#xff08;含Matlab代码&#xff09;-YEE网格下的更新公式推导 参考书籍&#xff1a;The finite-difference time-domain method for electromagnetics with MATLAB simulations&#xff08;国内翻译版本&#xff1a;MATLAB模拟的电…...

win10使用debug,汇编初学

DOSBox挂载Debug.exe 双击 DOSBox Options.bat 打开配置 或者执行cmd DOSBox.exe -editconf notepad.exe -editconf %SystemRoot%\system32\notepad.exe -editconf %WINDIR%\notepad.exe最后一行增加 mount [盘符] [挂载的工作目录&#xff08;debug.exe文件夹位置&#xff…...

怎么投稿各大媒体网站?

怎么投稿各大媒体网站&#xff1f;这是很多写作者及自媒体从业者经常面临的问题。在信息爆炸的时代&#xff0c;如何将自己的文章推送到广大读者面前&#xff0c;成为了一个不可避免的挑战。本文将为大家介绍一种简单有效的投稿方法——媒介库发稿平台发稿&#xff0c;帮助大家…...

chatgpt免费使用的网站

前言 如果您认为本文对你有帮助&#xff0c;希望可以点赞收藏&#xff01;感谢您的支持 下面我为你推荐我自己在用的gpt类工具&#xff0c;帮你在工作学习生活上解决一些大小问题 &#x1f389;智能GPT 地址&#xff1a; https://meet.adminjs.net 在他的详情中有详细的使用…...

音频编辑软件:Studio One 6 中文

Studio One 6是一款功能强大的数字音乐制作软件&#xff0c;为用户提供一站式音乐制作解决方案。它具有直观的界面和强大的音频录制、编辑、混音和制作功能&#xff0c;支持虚拟乐器、效果器和第三方插件&#xff0c;可帮助用户实现高质量的音乐创作和制作。同时&#xff0c;St…...

MySQL语句|使用UNION和UNION ALL合并两个或多个 SELECT 语句的结果集

文章目录 举个通用的例子举个实际的例子 在MySQL中&#xff0c; UNION 和 UNION ALL 是用于合并两个或多个 SELECT 语句的结果集的操作符。 UNION 会去除结果集中的重复行&#xff0c;返回唯一的行&#xff0c;而 UNION ALL 会返回所有的行&#xff0c;包括重复行。 举个通…...

UNRAID 优盘制作

使用方法和开心方法&#xff1a; 如果重启之后显示器有信号但是黑屏无法正常引导系统&#xff0c;此为九代以后主板快速开机&#xff08;快速引导&#xff09;UNRAID并不支持快速引导所以会直接卡黑屏。所以发现这种情况的时候请进BIOS关闭和开机快速引导或和快有关系的任何开…...

二、Java中SpringBoot组件集成接入【MySQL和MybatisPlus】

二、Java中SpringBoot组件集成接入【MySQL和MybatisPlus】 1.MySQL和MybatisPlus简介2.maven依赖3.配置1.在application.yaml配置中加入mysql配置2.新增Mybatis-Plus配置类 4.参考文章 1.MySQL和MybatisPlus简介 MySQL是一种开源的关系型数据库管理系统&#xff0c;被广泛应用…...

银行测试--------转账

转账 付款账号测试 付款账号是借记卡&#xff0c;也可以是活期存折信用卡&#xff0c;定期存折不能转出。一般在账号选择的时候进行屏蔽转出账户在销户&#xff0c;冻结&#xff0c;挂失等异常状态&#xff0c;不能进行转账付款账号金额不够 转账金额测试 0.01&#xff5e;…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

OPENCV图形计算面积、弧长API讲解(1)

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

触发DMA传输错误中断问题排查

在STM32项目中&#xff0c;集成BLE模块后触发DMA传输错误中断&#xff08;DMA2_Stream1_IRQHandler进入错误流程&#xff09;&#xff0c;但单独运行BLE模块时正常&#xff0c;表明问题可能源于原有线程与BLE模块的交互冲突。以下是逐步排查与解决方案&#xff1a; 一、问题根源…...

银行卡二三四要素实名接口如何用PHP实现调用?

一、什么是银行卡二三四要素实名接口 输入银行卡卡号、姓名、身份证号码、手机号&#xff0c;验证此二三四要素是否一致。 二、核心价值 1. 提升风控效率 通过实时拦截冒用身份开户&#xff0c;银行卡二三四要素实名接口显著降低了人工审核成本&#xff0c;效率提升50%以上…...

数学:”度量空间”了解一下?

度量空间是现代数学中一种基本且重要的抽象空间。以下是对它的详细介绍&#xff1a; 定义 相关概念 常见的度量空间举例 度量空间的类型 度量空间的作用 度量空间是拓扑空间的一种特殊情况&#xff0c;它为拓扑空间的研究提供了具体的模型和实例。同时&#xff0c;度量空间在…...