1.项目介绍:主要将学习到的项目内容进行总结(有需要项目源码的可以私信我)
2.项目效果
1)登录页面
3.关于我的项目的配置如下,请注意下载的每个版本不一样,写的api也不一样
一、项目介绍
1.资料
1)短信接收&M端演示:极客园http://geek.itheima.net
2)PC端接口文档:极客园PChttp://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.创建项目
- 使用React CLI搭建项目 npx create-react-app geek-pc
- 进入项目根目录:cd geek-pc
- 启动项目: yarn start
- 调整项目目录结构:
2.使用git管理项目
1)在git网站上添加自己的项目仓库
Gitee - 基于 Git 的代码托管和研发协作平台
2)点击新建仓库,添加自己的项目路径就可以
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;
}
}
四、react-router-dom V6版本进行导航
1.给表单添加注册事件,点击登录按钮进行页面的跳转
1)V5版本进行页面跳转可以使用this.props.history.push('/home'),但是在v6版本中已经废弃掉,所以此参数无效
2)使用useNavigate()来进行跳转
const navigate = useNavigate()
navigate('/home')
但是会报上述错误,是因为userNavigate()是hook函数,hook函数只能在函数组件中进行使用
3)使用高阶组件封装实现类组件可以进行路由跳转
a.封装一个withRouter组件
import {
useParams,
useLocation,
useNavigate,
useSearchParams,
} from 'react-router-dom'
export default function withRouter(Component) {
// 相当于给 MyCard组件添加各种props属性,还添加三个重要的属性params,location,navigate
return (props) => (
<Component
{...props}
searchParams={useSearchParams()}
params={useParams()}
location={useLocation()}
navigate={useNavigate()}
/>
)
}
b.导入withRouter组件
import withRouter from './withRouter'
c.默认导出
export default withRouter(Login)
d.使用navigate实现跳转
this.props.navigate('/home')
五、VSCode进行断点调试
六、react样式冲突
1.组件样式覆盖问题
只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效
2.解决方案
1)手动处理(起不同的类名)
2)CSS IN JS:以js的方式来处理css
css不是一门编程语言,没有全局作用域和局部作用域的问题,css只有局部作用域
3.CSS IN JS
1)CSS IN JS:是使用
文章来源地址https://www.toymoban.com/news/detail-788168.html文章来源:https://www.toymoban.com/news/detail-788168.html
到了这里,关于React项目实战--------极客园项目PC端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!